Si Itam Menu Bar Keren dan Simpel untuk Blogger

Tweet

Si Itam Menu Bar Keren dan Simpel untuk Blogger - Hai sobat blogger, tutorial kali ini kita akan membahas menu bar yang cukup keren dan simpel untuk Anda gunakan yang diberikan dengan nama Si Itam Menu Bar Keren dan Simpel untuk Blogger. Untuk menu bar lainnya Anda bisa menikmatinya pada kategori Blogger Hack. Simak & lakukan saja!

Si Itam Menu Bar Keren dan Simpel untuk Blogger:

1. Buka akun Blogger Anda
2. 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/AVvXsEiiPmlO2WeZz10uQlbdzBPJaO4_2MxG1Iy21TReQR4Lhl2NO_D7PryY1h-_uG7LqLcKKe19QFYEDdFMwAD9ujw9j9duu3Lxct1ub4eQpmb9px6woeTZrjlD08PEjJRKQAYo27bclrO3_2E/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'>

Maka, demikianlah artikel Si Itam Menu Bar Keren dan Simpel untuk Blogger, semoga dapat membantu Anda untuk lebih paham. Terima kasih telah membaca artikel diatas.