Tomi Blog

Cara 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> :

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://pingtweet.blogspot.com/" class="ogahniye">Membuat blog</a>
<a href="http://pingtweet.blogspot.com/" class="ogahniye">Membuat link</a>
<a href="http://pingtweet.blogspot.com/" class="ogahniye">Membuat marquee</a>
<a href="http://pingtweet.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://pingtweet.blogspot.com/" class="ogahniye">Yahoo Emotions</a>
<a href="http://pingtweet.blogspot.com/" class="ogahniye">Blogger Emotions</a>
<a href="http://pingtweet.blogspot.com/" class="ogahniye">Pasang jam</a>
<a href="http://pingtweet.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://pingtweet.blogspot.com/" class="ogahniye">Rubrik Elektronik</a>
<a href="http://pingtweet.blogspot.com/" class="ogahniye">Free Blog Template</a>
<a href="http://pingtweet.blogspot.com/" class="ogahniye">Blog Menu Free</a>
<a href="http://pingtweet.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://pingtweet.blogspot.com/" target="_blank" class="ogahniye">Freezta</a>
<a href="http://pingtweet.blogspot.com/" target="_blank" class="ogahniye">JalanMaz</a>
<a href="http://pingtweet.blogspot.com/" target="_blank" class="ogahniye">Liezmaya</a>
<a href="http://pingtweet.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.

Share dan tinggalkan komentar untuk mendapaptkan kunjungan balik :)

Tomi Blog

Minggu, 08 September 2013

Tidak ada komentar :

Posting Komentar