Loading...
ucapan

Silahkan Pilih Warna Background Yang Cocok Buat Mata Anda


2016/07/21

Cara Membuat Menu Horizontal Hitam Keren di Blog

Post Generator PRO
Plugin Wordpress POST GENERATOR PRO sederhana tapi powerful, Membuat ribuan artikel blog hanya dalam sehari saja. Tanpa masalah Duplicate Content.
Rugi jika tidak memilikinya walau belum punya Hosting dan blog wordpress, akibat penjualannya sudah berakhir. Miliki secepatnya... Sangat bagus digunakan untuk mengupgrade BACKLINK ke blog utama demi menghasilkan Duit Or Dollar bagi pemain Adsense, He..
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 dan lakukan saja!


Cara Membuat Menu Horizontal Hitam Keren di Blog



Cara Membuat Menu Horizontal Hitam Keren di Blog


  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(http://4.bp.blogspot.com/-iSR65vMqirU/UcFvtpl7FaI/AAAAAAAAAoI/8dAchRZoF8c/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 Cara Membuat Menu Horizontal Hitam Keren di Blog, semoga dapat membantu Anda untuk lebih paham. Terima kasih telah membaca artikel diatas.

Pengelola Blog : ABDUL WAHAB

Judul : Cara Membuat Menu Horizontal Hitam Keren di Blog
Ditulis oleh :Blog Veezy Lights pada hari 2016/07/21
Rating Blog : 5 dari 5
Terima kasih sudah membaca artikel tentang Cara Membuat Menu Horizontal Hitam Keren di Blog
Kalian boleh menyebar luaskannya atau mengcopy paste-nya jika artikel ini sangat bermanfaat bagi Blog dan teman-teman kalian.
Namun jangan lupa harap memberikan link aktif dofollow ke URL
http://fajriandaviar.blogspot.com/2016/07/cara-membuat-menu-horizontal-hitam.html
Dan Terima kasih sekali lagi atas kunjungannya.

Kritik dan saran atau apapun bisa kalian sampaikan melalui kotak komentar.
Dan mohon maaf jika komentar atau pertanyaan tidak bisa cepat saya respon,
karena Saya tidak selalu online dikarenakan sibuk.

Title : Cara Membuat Menu Horizontal Hitam Keren di Blog
Description : Cara Membuat Menu Horizontal Hitam Keren di Blog - Hai sobat blogger, tutorial kali ini kita akan membahas menu bar yang cukup keren dan ...

2 komentar

nice artikel, keren (y) kunjugi balik ya gan http://tulisan-kaktegar.blogspot.co.id/2014/07/cara-membuat-menu-navigasi-seperti-fast.html

tks gan. infonya. sangat membantu

Berkomentarlah dengan bijak dan sopan, Dilarang menggunakan Link Aktif, Link Mati, Promo, dll.
Dan Berbagilah Jawaban atas apa kesulitan yang sobat-sobat lainnya dapatkan.
Mohon maaf jika ADA komentar atau pertanyaan tidak bisa cepat saya respon,
DIkarenakan Saya tidak selalu online selama 24 Jam.