Memasang Widget SubMenu Thumbnail di Blog

Nazie Anaz | 12.02 |

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



Comments
2 Comments

2 komentar :

  1. asik mas bray..... tumben muat artikel tutorial nih :) tapi thanks ya atas sharingnya.

    BalasHapus
    Balasan
    1. hanya berbagi mas broew...
      makasih jg atas responya brow Made...

      Hapus

Silahkan tulis komentar atau sumpah serapah anda disini.
Belum tahu cara berkomentar? klik saja DISINI