Professional Documents
Culture Documents
header blogspot
Cara membuat menu dropdown di bawah header blogspot - Rasanya kurang indah jika
blog kita tidak memiliki menu dropdown di bawah header oleh karena itu ane akan
memberikan tips cara membuat menu dropdown di bawah header blogspot yang mana
sebelum ane memposting artikel ini ane juga sudah berbagi dengan sobat blogger semua
tentang cara membuat header logo blog.
Cara membuat menu dropdown di bawah header blogspot bisa dikatakan sebagai salah satu
usaha cara kita untuk mempercantik sebuah blog dan dengan adanya tab menu pada blog kita,
maka akan lebih memudahkan pengunjung dalam mencari topik pembahasan yang ada pada
blog kita. Mmmmmp..sampai disini tentunya agan penasaran bukan, bagaimana sih
penampakan dari menu dropdown di bawah header blogspot itu? Dibawah ini adalah
gambarnya.
background:url(http://1.bp.blogspot.com/HWnzqeoLkqM/TZfDIsnBUJI/AAAAAAAAC6Y/HLNb-3kfkec/s1600/2.gif) repeat-x;
display:block;
padding:0px 0 0px 0px;
font-size:12px;
font-family:"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sansserif;
font-weight:normal;
border-top:1px solid #252424;
}
#catmenu{
margin: 0px;
padding: 0px;
width:1000px;
background:#252525
url(http://4.bp.blogspot.com/_4HKUHirY_2U/S6mTqAdkycI/AAAAAAAAA2E/zxCSk6MwLI/catmenu.jpg) repeat-x;
height:33px;
}
#catmenu ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}
#catmenu li {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}
#catmenu li a, #catmenu li a:link, #catmenu li a:visited {
color: #fae7df;
display: block;
margin: 0px;
padding: 9px 10px 10px 10px;
}
#catmenu li a:hover, #catmenu li a:active {
background:url(http://3.bp.blogspot.com/_4HKUHirY_2U/S6mTqmy1HdI/AAAAAAAAA2
M/6D7APyygWZA/catmenuhov.jpg) repeat-x;
color: #fff;
margin: 0px;
padding: 9px 10px 10px 10px;
text-decoration: none;
}
</div>
</div>
<div class='clear'/>
7. Klik Pratinjau/Preview terlebih dulu sebelum di SAVE template nya, jika sudah berhasil
maka klik Save/Simpan.
Note:
- Edit Your-Link-Here,Link-Title, dan Link-Name. Ganti dengan link dan title link yang agan
inginkan.
- Jika kode <div id='content-wrapper'> tidak ada dalam template agan, itu berarti cara ini
tidak sesuai dengan template yang sedang agan gunakan. Tetapi agan masih bisa
memasangnya dengan cara :
Masuk -> Elemen Laman -> Tambah Gadget -> pilih HTML/JavaScript >> taruh kode script
yang ke-2 di dalam nya. Klik Simpan dan lihat hasilnya.
Itulah tutorial dari ane tentang cara membuat menu dropdown di bawah header blogspot
semoga postingan ini bermanfaat khusunya bagi agan-agan yang ingin mempercantik blognya
dengan cara membuat menu dropdown. Terimakasih dan semoga berhasil
- See more at: http://langkah2membuatblog.blogspot.com/2012/11/cara-membuat-menudropdown-di-bawah.html#sthash.TO3HZcf8.dpuf
<div id='catmenucontainer'>
<div id='catmenu'>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='#' title='Link-Title'>NGOMIK</a>
<ul class='children'>
<li><a href='#' title='Link-Title'>Link-Name-1-1</a></li>
<li><a href='#' title='Link-Title'>Link-Name-1-2</a></li>
<li><a href='#' title='Link-Title'>Link-Name-1-3</a></li>
</ul>
</li>
<li><a href='#' title='Link-Title'>BLOGSPOT</a>
<ul class='children'>
<li><a href='#' title='Link-Title'>Link-Name-2-1</a></li>
<li><a href='#' title='Link-Title'>Link-Name-2-2</a></li>
<li><a href='#' title='Link-Title'>Link-Name-2-2</a></li>
<li><a href='#' title='Link-Title'>Link-Name-2-3</a></li>
</ul>
</li>
<li><a href='#' title='Link-Title'>WORDPRESS</a>
<ul class='children'>
<li><a href='#' title='Link-Title'>Link-Name-3-1</a></li>
<li><a href='#' title='Link-Title'>Link-Name-3-2</a></li>
<li><a href='#' title='Link-Title'>Link-Name-3-3</a></li>
</ul>
</li>
<li><a href='#' title='Link-Title'>CERITA BERSAMBUNG</a></li>
<li><a href='#' title='Link-Title'>CERITA BERGAMBAR</a>
<ul class='children'>
<li><a href='#' title='Link-Title'>Link-Name-5-1</a></li>
<li><a href='#' title='Link-Title'>Link-Name-5-2</a></li>
<li><a href='#' title='Link-Title'>Link-Name-5-3</a></li>
<li><a href='#' title='Link-Title'>Link-Name-5-4</a></li>
</ul>
</li>
<li><a href='#' title='Link-Title'>MUSIK</a>
<ul class='children'>
<li><a href='#' title='Link-Title'>Link-Name-6-1</a></li>
<li><a href='#' title='Link-Title'>Name menu</a></li>
</ul>
</li>
<li><a href='#' title='Link-Title'>SPORT</a></li>
<li><a href='#' title='Link-Title'>LIFESTYLE</a></li>
</ul>
</div>
</div>
<div class='clear'/>
Pada beberapa kode yang sengaja aku warnai silahkan sobat ganti dengan Url serta Nama Menu sobat masingmasing. Demikianlah cara membuat menu drop down di blogspot, kurang lebih hasilnya akan terlihat seperti
pada gambar di atas. Selamat mencoba aku ucapkan,sukses selalu buat sobat semua. Bye-bye....