Memasang Widget SubMenu Thumbnail di Blog

Bagaimana widget SubMenu Thumbnail tersebut, lihat dulu Demonya Disini. Bila anda juga tertarik membuatnya ikuti langkahnya-langkahnya sebagai berikut :

1. Masuk dashboard blog anda.

2. Pilih Edit HTML kemudian klik Expand Widget (jangan lupa backup terlebih dahulu template anda)

3. Cari kode </head>.

4. Pastekan kode berikut sebelum </head> :

<script> <!-- http://belajarsaraf.blogspot.com/ --> var last_expanded = ''; function showHide(id) { var obj = document.getElementById(id); var status = obj.className; if (status == 'hide') { if (last_expanded != '') { var last_obj = document.getElementById(last_expanded); last_obj.className = 'hide'; } obj.className = 'show'; last_expanded = id; } else { obj.className = 'hide'; } } </script>

5. Setelah itu cari kode ]]></b:skin>
6. Pastekan kode berikut sebelum ]]></b:skin> :

.raden{ background-image: url('http://i162.photobucket.com/albums/t253/rohman24/bannerjava6.gif'); text-align:center; width:175px; font-family: georgia, Helvetica, sans-serif; padding-left:5px; padding-right:5px; padding-top:5px; padding-bottom: 5px; display:block; text-decoration: none; color: #F6E151; } .ogah{ background-image:url('http://i162.photobucket.com/albums/t253/rohman24/bannerjava4.gif'); text-align:center; width:175px; font-family: georgia, Helvetica, sans-serif; padding-left:5px; padding-right:5px; padding-top:8px; padding-bottom: 5px; display:block; text-decoration: none; color: ##FAF705; height: 18px; } .ogahniye{ background-image: url('http://i162.photobucket.com/albums/t253/rohman24/bannerjava4.gif'); text-align:center; width:175px; font-family: georgia, Helvetica, sans-serif; padding-left:5px; padding-right:5px; padding-top:8px; padding-bottom: 5px; display:block; text-decoration: none; color: #0572FA; height: 18px; } .hide{ display: none; } .show{ display: block; } a{cursor: hand}

7. Bila sudah simpan/save template anda.

Pada tahap ini windget SubMenu Thumbnail masih belum tampil di blog anda. Untuk menampilkanya ikuti langkah selanjutnya :

8. Masuk ke Tata Letak dan pilih Elemen Halaman
9. Klik tambah widget dan pilih Java Script HTML
10. Kemudian copy paste saja kode dibawah ini :

<a class="raden"><font size="5"><b>Navigasi</b></font></a> <a class="ogah" onclick="showHide('ogahku1')">Blog Tutorial</a> <div id="ogahku1" class="hide"> <a href="http://belajarsaraf.blogspot.com/" class="ogahniye">Membuat blog</a> <a href="http://belajarsaraf.blogspot.com/" class="ogahniye">Membuat link</a> <a href="http://belajarsaraf.blogspot.com/" class="ogahniye">Membuat marquee</a> <a href="http://belajarsaraf.blogspot.com/" class="ogahniye">Membuat Icon</a> </div> <a class="ogah" onclick="showHide('ogahku2')">Aksesori blog</a> <div id="ogahku2" class="hide"> <a href="http://belajarsaraf.blogspot.com/" class="ogahniye">Yahoo Emotions</a> <a href="http://belajarsaraf.blogspot.com/" class="ogahniye">Blogger Emotions</a> <a href="http://belajarsaraf.blogspot.com/" class="ogahniye">Pasang jam</a> <a href="http://belajarsaraf.blogspot.com/" class="ogahniye">Pasang Video</a> </div> <a class="ogah" onclick="showHide('ogahku3')">My Other Blog</a> <div id="ogahku3" class="hide"> <a href="http://belajarsaraf.blogspot.com/" class="ogahniye">Rubrik Elektronik</a> <a href="http://belajarsaraf.blogspot.com/" class="ogahniye">Free Blog Template</a> <a href="http://belajarsaraf.blogspot.com/" class="ogahniye">Blog Menu Free</a> <a href="http://belajarsaraf.blogspot.com/" class="ogahniye">Authorize service</a> </div> <a class="ogah" onclick="showHide('ogahku4')">Links Temanku</a> <div id="ogahku4" class="hide"> <a href="http://belajarsaraf.blogspot.com/" target="_blank" class="ogahniye">Freezta</a> <a href="http://belajarsaraf.blogspot.com/" target="_blank" class="ogahniye">JalanMaz</a> <a href="http://belajarsaraf.blogspot.com/" target="_blank" class="ogahniye">Liezmaya</a> <a href="http://belajarsaraf.blogspot.com/" target="_blank" class="ogahniye">AnaBlog</a> </div>

11. Setelah itu pilih save.

Keterangan :
>> Ganti kode yang berwarna kuning dengan nama menu dan sub menu blog anda
>> Ganti juga kode yang berwarna merah dengan link yang anda inginkan

Dan lihat hasilnya.

Postingan yang Bersenggama