Membuat Menu Home Atau Horizontal

ikuti Langkah-Langkah Berikut :
1.Login ke dalam Blog sobat
2.Msuk Ke Template
3.Pilih Edit Html
4.Laluh Pilih Lanjutkan
5.Centang Pada Expand Template Widget
6.Cari Kode ]]></b:skin>
7.Masukkan Script Berikut Tepat di Atas Kode ]]></b:skin>

/* Menu Horizontal Dropdown
----------------------------------------------- */
#menuwrapperpic{background:#333;width:980px;margin:0 auto;padding:0 auto}
#menuwrapper{width:980px;height:27px;margin:0 auto}
.clearit{clear:both;height:0;line-height:0.0;font-size:0}
#menubar{width:100%}
#menubar,#menubar ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}
#menubar a{display:block;text-decoration:none;font-size:12px;font-weight:700;text-transform:uppercase;color:#CECECF;border-right:1px solid #191919;padding:8px 10px 8px}
#menubar a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizV1symEjrytG3eifUO4B2IVHbho-6M5Tk4Z2vwQqzmV2y7FMr_sEfd1xjKQR1Ft1RDLrWHjSAAWmFdmQFKX0qMu63Dl5W00M2cPfQMpsBUN6dMFWsLIIwjJK_dQgVyoA3s0f3NzKtntE/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:8px 24px 8px 10px}
#menubar li{float:left;position:static;width:auto}
#menubar li ul,#menubar ul li{width:170px}
#menubar ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px}
#menubar li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:5px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)}
#menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{background-color:#222;color:#fff}
#menubar li:hover ul,#menubar li.hvr ul{display:block}
#menubar li:hover ul a,#menubar li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none}
#menubar li ul li.hr{border-bottom:1px solid #444;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:4px 0}
#menubar ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}
8.Setelah itu Cari kode di Bawah ini :
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='MaxSide Blog (Header)' type='Header'>
9.Letakkan Kode Berikut Tepat di Atas Kode Yg di cari Tadi
<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvAlyxm-i4ICwR1drvyFqe0gOCO3BKzytMZX9g_ORH-rNzo4r_33RkTqtWnRVvKZQhSTybquyH5JGVF5vR4PHgw618wy5Ma0naWyW3akvE-BjvGVlm6HWo9_vpHlVUR3zhb7XCTc__0r0/s1600/home_white.png' style='padding:0px;'/></a></li>
<li><a href='#'>About Us</a></li>
<li><a class='trigger' href='#'>Contact Us</a>
<ul>
<li><a href='#'>Goggle +</a></li>
<li class='hr'/>
<li><a href='#'>Contact on Facebook</a></li>
<li class='hr'/>
<li><a href='#'>Contact on Twitter</a></li>
</ul>
</li>
<li><a href='#'>Sport</a></li>

<li><a href='#'>Culture</a></li>
<li><a class='trigger' href='#'>Entertainment</a>
<ul>
<li><a href='#'>Music</a></li>
<li class='hr'/>
<li><a href='#'>Movie</a></li>
<li class='hr'/>
<li><a href='#'>Television</a></li>
</ul>
</li>
<li><a href='#'>Health</a></li>

<li><a class='trigger' href='#'>More</a>
<ul>
<li><a href='#'>Themes</a></li>
<li class='hr'/>
<li><a href='h#'>Tutorial</a></li>
<li class='hr'/>
<li><a href='#'>Resource</a></li>
<li class='hr'/>
<li><a href='#'>Advertise</a></li>
<li class='hr'/>
<li><a href='#'>Javascript</a></li>
</ul>
</li>
</ul>
<br class='clearit'/>
</div>
<div style='clear:both;'/>
</div>
10.Klik Pratinjau
11.Kalo Sudah Jadi, Klik Save

"Selamat Mencoba"

No comments:

Post a Comment

Copy Paste Merupkan Pencurian Harta intelektual, Untuk itu jika Anda Ingin Copy Paste Silahkan Mencantumkan Sumbernya. Terimakasih

© e-komputer. All rights reserved.