Membuat Menucontainer Pada Blog

Siapa yang tak ingin blognya keren seerti blog profesional,tentulah semua blogger mau bukan,salah satu caranya dengan menambahkan menupic dan menu container,

Kali ini kita akan membahas Cara Membuat menu contaier pada Blog,

Cara membuat menu ini tergolong cukup gampang,cukup menambahkan CSS dan HTML pada Edit HTML,caranya sebagagai berikut

Login ke Blogger.com
Pilih Rancangan
Pilih Edit HTML

Tahap berikutinya adalah Cari kode Berikut:

]]></b:skin>

Paste CSS dibawah Tepat di atas kode Tersebut

/* Menucontainer---------------------------------------------*/#catmenucontainer{height:39px; width:width:100%; display:block; padding:0 0 0 0; font:12px Arial,Tahoma,Century gothic,verdana,sans-serif; font-weight:normal; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA1RVqKTCffhyphenhyphenNXKXSp7Bs_Gj-MUKu1fqeTP8U6V9aXFTHAOD7ukbecg4Ey2A4jspc0zxZn76JzDXqdCiAeBvkKCd2WkdrrRFAHCbuaPbJ83bx2-Lt5RA55-Y6vbY8p9rRVuZzcycVBjw/s1600/catmenu.png) repeat-x}#catmenu{margin:0 auto; padding:0 0; height:39px; overflow:hidden; width:1000px}#catmenu ul{float:left; list-style:none; margin:0; padding:0 10px}#catmenu li{float:left; list-style:none; margin:0; padding:0}#catmenu li a, #catmenu li a:link, #catmenu li a:visited{color:#801d07; display:block; margin:0; padding:0 10px; line-height:39px; text-shadow:1px 1px 0 #ff8b25}#catmenu li a:hover, #catmenu li a:active{color:#000; margin:0; padding:0 10px; line-height:39px; text-decoration:none}#catmenu li.current_page_item a{color:#fff}#catmenu li li a, #catmenu li li a:link, #catmenu li li a:visited{width:150px; color:#fff; float:none; margin:0; padding:0 10px; font-weight:normal; line-height:30px; text-shadow:none}#catmenu li li a:hover, #catmenu li li a:active{background:#DB6A18; color:#fff; padding:0 10px; line-height:30px; border-left:none; border-right:none}#catmenu li ul{z-index:9999; position:absolute; left:-999em; height:auto; width:170px; margin:0; padding:5px; background:#CC5A11}#catmenu li li{}#catmenu li ul a{width:140px}#catmenu li ul a:hover, #catmenu li ul a:active{}#catmenu li ul ul{margin:-30px 0 0 170px}#catmenu li:hover ul ul, #catmenu li:hover ul ul ul, #catmenu li.sfhover1 ul ul, #catmenu li.sfhover1 ul ul ul{left:-999em}#catmenu li:hover ul, #catmenu li li:hover ul, #catmenu li li li:hover ul, #catmenu li.sfhover ul, #catmenu li li.sfhover1 ul, #catmenu li li li.sfhover1 ul{left:auto}#catmenu li:hover, #catmenu li.sfhover1{position:static}

Selanjutnya silahkan paste HTML dibawah ini di bagian yang anda Inginkan(penempatan kode dibawah ini harus setelah kode <body> )

Paste CSS dibawah Tepat di atas kode Tersebut

<div id='catmenucontainer'><div id='catmenu'><ul><li><a href='/'><img alt='home' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia9SZBGrORLh5EouFnQG1HJlROreqEm0utI3Wp8dv8X7M7g1VLFH0CDNiAdHzQSDUh_3R9W7Tq7z_aCn6uSjork4mmwSCbhfrxW4CVQ1U1aiXlqiLpXZUBD8Q5wWpPuTsw5MYQJs4PtEWZ/s128/home1.png' style='padding-top:11px;'/></a></li><li><b><a dir='ltr' href='http://create-ga.blogspot.com'>C-GA</a></b></li><li><b><a dir='ltr' href='http://cob22.blogspot.com/search/label/Adsense'>Ads Trick</a></b></li><li><b><a dir='ltr' href='http://cob22.blogspot.com/search/label/Blogger%20trick'>Blog Trick</a></b></li><li><b><a href='#'>Download</a></b>   <ul class='sub-menu'>             <li><a href='#'>Software</a></li>       <li><a href='http://cob22.blogspot.com/search/label/Game#'>Game</a></li><li><a href='http://cob22.blogspot.com/2012/01/antivirus.html#'>ANTIVIRUS</a></li>   </ul></li><li><b><a href='#'>Template</a></b>   <ul class='sub-menu'>       <li><a href='http://cob22.blogspot.com/search/label/4%20coulums#'>4 coloums</a></li>               <li><a href='http://cob22.blogspot.com/search/label/3%20coloms#'>3 colums</a></li>               <li><a href='http://cob22.blogspot.com/search/label/2%20Coloums#'>2 colums</a></li>   </ul></li><li><b><a href='#'>Internet</a></b>   <ul class='sub-menu'>       <li><a href='http://cob22.blogspot.com/2012/01/upgrada-and-download-mozila-firefox.html#'>Upgrade Mozila Fire Fox</a></li>               <li><a href='#'>Google </a></li>               <li><a href='Opera Mini#'>Opera Mini</a></li>   </ul></li><li><b><a dir='ltr' href='http://cob22.blogspot.com/search/label/Background'>Blog Background</a></b></li><li><b><a dir='ltr' href='http://cob22.blogspot.com/search/label/Tukeran%20link'>Exchange Link</a></b></li><li><b><a dir='ltr' href='http://cob22.blogspot.com/2011/11/mivo-tv.html'>Online TV</a></b></li><li><b><a dir='ltr' href='http://cob22.blogspot.com/search/label/Video'>Video</a></b></li><li><b><a href='http://cob22.blogspot.com/search/label/Affiliate'>Affiliate</a></b></li>       </ul></div></div>

Tahap terakhir dan paling penting andalah Save
Catatan:Jika melakukan pengeditan template,upayakan jangan mengunakan blog utama,buat blog percobaan,karna jika anda melakukan pengeditan di blog utama anda akan berpengaruh pada Page Rank dan kenyamanan Tamu Blog anda

Membuat Menucontainer Pada Blog

Label

My Friend

Entri Populer