Cara Membuat Menu Horizontal Hitam Keren di Blog - Hai sahabat blogger, tutorial kali ini kita akan membahas hidangan kafe yang cukup keren dan mudah untuk Sobat gunakan yang diberikan dengan nama Cara Membuat Menu Horizontal Hitam Keren di Blog. Simak dan lakukan saja!
Maka, demikianlah artikel Cara Membuat Menu Horizontal Hitam Keren di Blog, biar sanggup 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 hidangan edit HTML, cari instruksi dibawah ini:
]]></b:skin>
3. Pastekan instruksi dibawah ini, diatas pada instruksi diatas:
#si-itam{width:900px;background:#222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH5wja6tkeosRxjc2BBvBhnRg3y28QN3Jd2kZ7t4j3kSBHIMOWu62Y4DO32M_a_PTXkcTFi2VIDAIR7ql03cQhVfLDepD394z7NGgUKcEHUFWuz1wmx28DqsaKraDmr3RBMLSglnlVm_A/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 instruksi 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'>
