3 Template Modifikasi Amburadul Banget

Menjelang sahur (bagi yang sudah menunaikan puasa besok), dini hari ini saya akan bagi lagi tiga buah template sekaligus hasil modifikasi dari template saya sebelumnya. Template ini saya buat berdasarkan permintaan teman-teman blogger, dua template hasil modifikasi dari template Johny Joss Banget dan satu template hasil modifikasi dari Johny Kenthir.

Johny Kenthir Banget

Demo | Download

Pemasangan fitur yang ada pada template ini sama dengan Johny Kenthir template, bagi yang belum jelas silahkan tutorial Johny Kenthir template dibuka lagi. Yang perlu diperhatikan disini dalam pemasangan tab view widget per kategori yang ada di bawah video kategori, cara pemasangannya sebagai berikut :

Perhatikan gambar diatas, untuk merubah judul tab (diary, jazz dan sebagainya) cari kode berikut ini di Edit HTML :

Title1="DIARY";Title2="JAZZ";Title3="HEALTH";Title4="SPORT";Title5="COMEDY"

Setelah ketemu ganti tulisan berwarna biru diatas dengan judul yang ingin Anda tampilkan pada tabber kategori.

Sedangkan untuk mengisi widget tersebut dengan label, masih pada Edit HTML cari kode berikut ini (jangan lupa untuk mencentang expand widget template) :
Tulisan warna merah diatas adalah kelima label yang saya masukkan pada widget tabber kategori ini, silahkan Anda ganti dengan label Anda dan sesuaikan dengan judul tabber yang sudah dibuat.

Johny Light Banget

Demo | Download

Karena template ini tampilannya sama cuma beda warna saja dengan Johny Joss Banget, maka cara pemasangannya pun juga sama. Jika masih kurang jelas silahkan buka lagi tutorial pemasangan template Johny Joss banget. Untuk mengaktifkan fungsi reply pada kotak komentar, masuk ke Edit HTML jangan lupa untuk mencentang kotak Expand Widgets Templates kemudian cari kode di bawah ini :

<a expr:href='&quot;https://www.blogger.com/comment.g?blogID=4145715786152726201&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500&quot;); return false;'>Reply</a>

Ganti blog ID warna merah diatas dengan ID blog anda yang terletak pada browser jika anda masuk ke dashbord, seperti gambar di bawah ini :

Johny Ember

Demo | Download

Blog ID untuk template ini : 7709675643058616170 cari pada Edit HTML, kemudian ganti dengan blog ID Anda untuk mengaktifkan fungsi reply. Bagi yang belum jelas mengenai cara pemasangan widget movie category pada kedua template diatas, saya akan ulangi lagi caranya disini.

Pada kedua template diatas terdapat 5 buah widget untuk category, Anda tinggal memasukkan atau ketik nama label yang ingin Anda tampilkan pada kelima widget tersebut, seperti tampak pada gambar di bawah ini :

Dari gambar diatas saya memasukkan label atau kategori "best seller" pada widget "Movie Categoy 1", silahkan Anda ganti dengan label Anda. Demikian juga untuk widget movie category lainnya, Anda tinggal ketik nama label pada kotak tersebut dan label anda akan tampil secara otomatis.

Selamat mencoba semoga bermanfaat, dan selamat menjalankan ibadah puasa.

Update Templates

My Google Code was banned, there's so many script that I put in there can't be opened. But I already fixed it with the updates ones, you can re-download this template or you can change some script below

Johny Kenthir Banget

1. Find this code in Edit HTML :
   <script src='http://kauman.googlecode.com/files/tabview.js' type='text/javascript'/>
   Change with this code :
   <script src='http://jagad.googlecode.com/files/tabview.js' type='text/javascript'/>
2. And find this too :
   <script src='http://kauman.googlecode.com/files/jcarousellite.js' type='text/javascript'/>
   Change with this code :
   <script src='http://jagad.googlecode.com/files/jcarousellite.js' type='text/javascript'/>
3. At last
   <script src='http://kauman.googlecode.com/files/contentslider.js' type='text/javascript'/>
   Replaces with this code :
   <script src='http://jagad.googlecode.com/files/contentslider.js' type='text/javascript'/>

Johny Light Banget

1. Find this code in Edit HTML :
   <script src='http://kauman.googlecode.com/files/switch.display.js' type='text/javascript'/>
   Change with this code :
   <script src='http://jagad.googlecode.com/files/switch.js' type='text/javascript'/>
2. And find this too :
   <script src='http://kauman.googlecode.com/files/jcarousellite.js' type='text/javascript'/>
   Change with this code :
   <script src='http://jagad.googlecode.com/files/jcarousellite.js' type='text/javascript'/>

Johny Ember

1. Find this code in Edit HTML :
   <script src='http://kauman.googlecode.com/files/switch.display.js' type='text/javascript'/>
   Change with this code :
   <script src='http://jagad.googlecode.com/files/switch.js' type='text/javascript'/>
2. And find this too :
   <script src='http://kauman.googlecode.com/files/jcarousellite.js' type='text/javascript'/>
   Replaced with this code :
   <script src='http://jagad.googlecode.com/files/jcarousellite.js' type='text/javascript'/>

Sumber : http://creatingwebsite-maskolis.blogspot.com/2012/07/3-template-modifikasi-amburadul-banget.html

Read More

Membuat Widget Artikel Terbaru Joss Banget

Tutorial kali ini menjawab pertanyaan dari teman blogger Haz Issac pada artikel membuat widget label tertentu dengan thumbnail satu, mengenai membuat recent Post atau artikel terbaru dengan fungsi Previous dan next seperti yang Anda lihat di single post blog Johny Template. Langsung saja karena hari sudah malam dan besok pagi mesti sahur, bisa-bisa nggak bisa bangun. Dibawah ini screenshotnya dan silahkan klik demo untuk melihat lebih jelas.

DEMO

1. Login ke blogger dengan akun Anda
2. Setelah itu pilih blog yang ingin anda tambahkan widget ini.
3. Masuk ke template >> Edit HTML, kemudian centang expand widget templates
4. Untuk berjaga-jaga agar tidak terjadi kesalahan dalam pengeditan nantinya, backup dulu template anda.
5. Setelah semua langkah diatas anda lakukan, letakkan kode berikut ini diatas kode ]]></b:skin> :
   
   Perhatikan tulisan warna biru diatas, itu adalah lebar dan tinggi thumbnail image.
6. Selanjutnya masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode </head> :
   
   Keterangan :
   var numfeed = 5; >> Jumlah Artikel terbaru yang

    ditampilkan pada widget
   var urlblog = "http://johny-gantengbanget.blogspot.com/"; >> ganti dengan URL blog Anda
   var charac = 100; >> Jumlah karakter atau huruf pada setiap post.
7. Setelah itu save templates, kemudian menuju ke layout pilih kotak yang akan ditambahkan widget ini. Klik add gadget >> HTML/Javascript masukkan kode berikut ini kedalamnya :
   

   <div id="terbaru"></div>
   <div id="mas-navigasifeed"></div>

   Terakhir save dan lihat hasilnya.

Sekian tutorial membuat widget artikel terbaru dengan fungsi previous dan next kali ini, jika masih ada yang kurang jelas silahkan tinggalkan komentar di bawah. Selamat mencoba dan semoga bermanfaat..... zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz

Sumber : http://creatingwebsite-maskolis.blogspot.com/2012/08/membuat-widget-artikel-terbaru-joss.html

Read More

Membuat Slider Image Otomatis Joss Banget

Tutorial ini menjawab pertanyaan dari teman debbie irlando manurung alias Zondim, meminta untuk dibuatkan tutorial slider yang ada di Johny Ganteng Banget. Template yang dipakai di blog itu nantinya juga akan saya share, cuma sekarang lagi massa sibuk nguli jadi nanti aja kalau sudah luang waktunya. Ada beberapa template yang nantinya akan saya share tapi kali ini saya buat sederhana, dengan sedikit menggunakan javascript, ya yang pasti lebih enteng dari biasanya. Oke kembali ke tutorial yang akan saya buat, kali ini saya akan membahas tentang cara membuat slider image otomatis sederhana yang akan menampilkan postingan terbaru Anda.

DEMO

Slider ini hanya memakai innerfade jquery dan cycle jquery plugin untuk melembutkan perpindahan content slider (bener nggak ya...?), pengertian Innerfade jquery kira-kira seperti ini :

InnerFade is a small plugin for the jQuery-JavaScript-Library. It's designed to fade you any element inside a container in and out.

These elements could be anything you want, e.g. images, list-items, divs. Simply produce your own slideshow for your portfolio or advertisings. Create a newsticker or do an animation.

Source : medienfreunde.com

Wah malah bingung sendiri saya mas/mbak maklum Inggris saya dapat 6 dulu waktu sekolah, langsung saja pada cara pembuatannya :

1. Login ke blogger dengan akun Anda
2. Setelah itu pilih blog yang ingin anda tambahkan slider ini.
3. Masuk ke template >> Edit HTML, kemudian centang expand widget templates
4. Untuk berjaga-jaga jika terjadi kesalahan dalam pengeditan nantinya, sebaiknya backup dulu template anda.
5. Setelah semua langkah diatas anda lakukan, letakkan kode berikut ini diatas kode ]]></b:skin> :
   
   Perhatikan kode warna biru diatas, itu adalah lebar dan tinggi slider pada demo yang saya buat, silahkan Anda sesuaikan dengan ukuran template Anda.
6. Langkah selanjutnya masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode </head> :
   
   Keterangan :
   

   Perhatikan URL script warna merah diatas, itu adalah kode script jQuery.min.js seri terbaru yang saya gunakan untuk membuat slider ini. Jika pada template Anda sudah terdapat jQuery.min.js walaupun serinya berbeda, kode warna merah diatas tidak perlu lagi Anda masukkan. Cukup satu jQuery.min.js yang ada di template, terserah mau seri berapa, kalau bisa versi yang terbaru.

   Kode warna biru : 7 adalah jumlah slider yang ditampilkan. Sedangkan angka 340 dan 212 adalah panjang dan lebar image yang ada di slider.
7. Langkah selanjutnya adalah memanggil slider tersebut agar muncul di blog kita. Cari kode <div id='main-wrapper'>, kemudian letakkan kode berikut ini dibawahnya :
   Jika Anda ingin menampilkan slider per kategori atau label tinggal ditambahkan saja kode diatas :
   

   /feeds/posts/default?max-results

   Menjadi :
   

   /feeds/posts/default/-/your label?max-results

   Silahkan ganti "your label" dengan kategori yang ingin Anda tampilkan pada slider.
8. Terakhir, save templates dan lihat hasilnya. 

Itu tadi tutorial membuat Slider image otomatis joss banget yang ada pada Johny Ganteng Banget, jika masih kurang jelas silahkan tinggalkan pesan di kotak komentar. Selamat sahur dan semoga bermanfaat. 

Sumber : http://creatingwebsite-maskolis.blogspot.com/2012/08/membuat-slider-image-otomatis-joss.html

Read More