Cara Membuat Menu Horizontal Hitam Keren di Blog - Hai sobat blogger, tutorial kali ini kita akan membahas menu bar yang cukup keren dan simpel untuk Sobat gunakan yang diberikan dengan nama Cara Membuat Menu Horizontal Hitam Keren di Blog. Simak & lakukan saja!
Maka, demikianlah artikel Cara Membuat Menu Horizontal Hitam Keren di Blog, semoga dapat membantu Anda untuk lebih paham. Terima kasih telah membaca artikel diatas.
Cara Membuat Menu Horizontal Hitam Keren di Blog
- Buka akun Blogger Anda
- Masuk ke menu edit HTML, cari kode dibawah ini:
]]></b:skin>
3. Pastekan kode dibawah ini, diatas pada kode diatas:
#si-itam{width:900px;background:#222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipZlggngIfN-B4U5nPXXkEBAiUcy_IDZaZj9ScHsHjJEoo3nn1OyiI9W4HC_VUpun1WyHfABeBTH8RO5CjzY_TGsXlnuyjvsBCQ47z6Db5SdPycLPe4QuSPSY_wnRefrHB4mHGxOKXd2s/s1600/btrixfooter_bg.png) repeat-x scroll top;color:#ddd;height:35px;-webkit-box-shadow:0 1px 5px #aaa;-moz-box-shadow:0 1px 5px #aaa;-ms-box-shadow:0 1px 5px #aaa;-o-box-shadow:0 1px 5px #aaa;box-shadow:0 1px 5px #aaa;border-bottom:1px solid #000;padding-top:8px;border:none 5px #000000;-moz-border-radius-topleft: 5px;-moz-border-radius-topright:5px;-moz-border-radius-bottomleft:5px;-moz-border-radius-bottomright:5px;-webkit-border-top-left-radius:5px;-webkit-border-top-right-radius:5px;-webkit-border-bottom-left-radius:5px;-webkit-border-bottom-right-radius:5px;
border-top-left-radius:5px;border-top-right-radius:5px;border-bottom-left-radius:5px;border-bottom-right-radius:5px;}
#si-itam ul,#si-itam li{margin:0 auto;padding:0 0;list-style:none}
#si-itam ul{height:35px;width:980px}
#si-itam li{float:left;display:inline;position:relative;font:14px Skranji;text-transform:uppercase;}
#si-itam a{display:block;line-height:35px;padding:0 14px;text-decoration:none;color:#ddd;}
#si-itam li a:hover{color:#fff}
#si-itam input{display:none;margin:0 0;padding:0 0;width:80px;height:30px;opacity:0;cursor:pointer}
#si-itam label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}
#si-itam label span{font-size:12px;position:absolute;left:35px}
#si-itam ul.menus{height:auto;overflow:hidden;width:180px;background:#f1eeed url(http://3.bp.blogspot.com/-7ppDp44Yxtc/UUa_IMHEhpI/AAAAAAAAAjQ/F9QEGUl5S3w/s1600/index.png);position:absolute;z-index:99;display:none;}
#si-itam ul.menus li{display:block;width:100%;font:12px Arial;text-transform:none;text-shadow:none}
#si-itam ul.menus a{color:#333}
#si-itam li:hover ul.menus{display:block}
#si-itam a.prett{padding:0 27px 0 14px}
#si-itam a.prett::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#ddd transparent transparent transparent;position:absolute;top:14px;right:9px}
#si-itam ul.menus a:hover{background:#ddd;color:#333}
.page-si-itam{width:70%;margin:18px auto;padding:0;float:right;text-shadow:0 1px 0 rgba(0,0,0,0.7)}
.page-si-itam ul{list-style:none;color:#ddd;width:700px;margin:0 auto;padding:0}
.page-si-itam ul li{list-style:none;line-height:32px;display:inline-block}
.page-si-itam li a{color:#ddd;display:block;font-size:14px;font-family:Arial;position:relative;text-decoration:none;text-transform:capitalize;padding:0 10px}
.page-si-itam li a:hover,.page-si-itam .selected{color:#fff;text-decoration:none;background: rgba(0,0,0,.4);-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px; -moz-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.9) inset;-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.9) inset;box-shadow: 0 1px 0 rgba(255,255,255,.2), 0 2px 1px rgba(0,0,0,.9) inset}
4. Letakkan kode berikut ini pada letak yang Anda inginkan.
<div id="si-itam">
<ul>
<li><a href="/">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a class="prett" href="#">Drop list</a>
<ul class="menus">
<li><a href="#">Drop list 1</a></li>
<li><a href="#">Drop list 2</a></li>
<li><a href="#">Drop list 3</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a></li>
<li><a class="prett" href="#">Drop list 1</a>
<ul class="menus">
<li><a href="#">Drop list 1</a></li>
<li><a href="#">Drop list 2</a></li>
<li><a href="#">Drop list 3</a></li>
</ul>
</li>
</ul>
</div>
Keterangan:
- Jika Anda ingin meletakkan di bawah header, paste dibawah kode: <div id='header-wrapper'>
Post a Comment