Asalamualaikum wr.wb..
Selamat siang dan selamat menjelang makan siang sobat :D kalau Om jin tidak usah makan pasti sudah kenyang hehehe..
Mungkin para master blogger tidak akan sulit membuat menu
Dropdown, memang sih tidak terlalu sulit bagi yang sudh tahu dan pinter atau ahli blogger, tetapi kalau menurut saya ini sangat sulit bisa satu harian penuh membuat menu
Dropdown ini soalnya saya sednag belajar dna masih perlu bimbingan dari para master blogger hehehe.
Sebelum melanjutkan dengan judul di atas seperti biasa masri kita baca artikel sebelumnya yaitu tentang
Tips Share Otomatis Posting Blog Ke Twitter Dan Facebook dan
Daftar Situs Social Bookmark Dofollow Indonesia Terbaik ok kita lanjutkan ke topik utama :D
Bagi sobat yang ingin mencobany menggunakan
Menu Dropdown dengan Backgraund silahkan ikuti langkah langkah berikut :
- Pertama Login ke blogger Anda, klik menu Design > Edit HTML
- Selanjutnya kasih centang expand widget templates, sebaiknya backup dulu template Anda
- Lalu Cari kode <b:skin><![CDATA[, lalu letakkan kode berikut tepat diatasnya
<script>
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>
- Selanjutnya cari kode ]]></b:skin>, letakkan kode berikut ini diatasnya
.dropdown-b {
background-image:url('http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/tombol_menu1.gif');
text-align:center;
width:165px;
font-family: georgia, Helvetica, sans-serif;
padding-left:20px;
padding-right:20px;
padding-top:10px;
padding-bottom: 10px;
margin-top: 4px;
display:block;
text-decoration: none;
color: #000000;
height: 8px;
}
.dropdown-bg {
background-image: url('http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/tombol_menu2.gif');
text-align:center;
width:165px;
font-family: georgia, Helvetica, sans-serif;
padding-left:20px;
padding-right:20px;
padding-top:13px;
padding-bottom: 10px;
display:block;
text-decoration: none;
color: #000000;
height: 8px;
}
.hide{
display: none;
}
.show{
display: block;
}
a{cursor: hand}
- Lalu klik Save Template, dan masih di blogger sobat jangan keluar dulu
- Kemudian klik menu Design > Page Element > Add a Gadget.
- Pilih HTML/Javascript, lalu masukkan kode berikut ini:
<a class="dropdown-b" onclick="showHide('dropdown-b-1')">Menu 1</a>
<div id="dropdown-b-1" class="hide">
<a href="URL" class="dropdown-bg">Link 1</a>
<a href="URL" class="dropdown-bg">Link 2</a>
<a href="URL" class="dropdown-bg">Link 3</a>
<a href="URL" class="dropdown-bg">Link 4</a>
</div>
<a class="dropdown-b" onclick="showHide('dropdown-b-2')">Menu 2</a>
<div id="dropdown-b-2" class="hide">
<a href="URL" class="dropdown-bg">Link 1</a>
<a href="URL" class="dropdown-bg">Link 2</a>
<a href="URL" class="dropdown-bg">Link 3</a>
<a href="URL" class="dropdown-bg">Link 4</a>
</div><a class="dropdown-b" onclick="showHide('dropdown-b-3')">Menu 3</a>
<div id="dropdown-b-3" class="hide">
<a href="URL" class="dropdown-bg">Link 1</a>
<a href="URL" class="dropdown-bg">Link 2</a>
<a href="URL" class="dropdown-bg">Link 3</a>
<a href="URL" class="dropdown-bg">Link 4</a>
</div><a class="dropdown-b" onclick="showHide('dropdown-b-4')">Menu 4</a>
<div id="dropdown-b-4" class="hide">
<a href="URL" class="dropdown-bg">Link 1</a>
<a href="URL" class="dropdown-bg">Link 2</a>
<a href="URL" class="dropdown-bg">Link 3</a>
<a href="URL" class="dropdown-bg">Link 4</a>
</div>
- Terakhir Klik Save atau simpan dan lihat hasilnya
Terimakasih atas perhatianya jika ada salah kata maupun di sengaja atau tidak sengaja saya masih belajar dan semoga postingan ini berguna dan bermanfaat.
Title : Tutorial Membuat Menu Dropdown Dengan Backgraund di Blog
Description : Asalamualaikum wr.wb.. Selamat siang dan selamat menjelang makan siang sobat :D kalau Om jin tidak usah makan pasti sudah kenyang hehehe.....
Related Posts :
