Kali ini Dicky's akan menshare lagi Tips Blog yang berjudul Cara Membuat Menu Navigasi Classic Dengan Sub Menu Di Blog | Navigasi ini keren sob, dengan desain kain jahit bergaya Dashed dengan Sub Menu. Navigasi ini berwarna natural Hitam Bagi yang mempunyai Blog Classic, pasang navigasi ini ya sob. Langsung saja ini Tipsnya.
Berikut Cara Membuat Menu Navigasi Classic Dengan Sub Menu Di Blog :
- Login ke Blogger atau klik disini
- Pilih Template --> Edit HTML --> Proses (loading dulu)
- Cari kode ]]></b:skin> (gunakan CTRL+F), lalu letakkan kode dibawah ini tepat diatas kode ]]></b:skin>
/* Kode CSS Menu Navigasi Minimalist Start */
#db{width:auto;background:#222 url(http://2.bp.blogspot.com/-mXNfPdFW-J0/UcP6CNSbiRI/AAAAAAAACbM/92REkvRGaJ4/s1600/dickyz-blog-dashed.jpg) 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;}
#db ul,#db li{margin:0 auto;padding:0 0;list-style:none}
#db ul{height:35px;width:980px}
#db li{float:left;display:inline;position:relative;font:14px Skranji;text-transform:uppercase;}
#db a{display:block;line-height:35px;padding:0 14px;text-decoration:none;color:#ddd;}
#db li a:hover{color:#fff}
#db input{display:none;margin:0 0;padding:0 0;width:80px;height:30px;opacity:0;cursor:pointer}
#db label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}
#db label span{font-size:12px;position:absolute;left:35px}
#db ul.db3{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;}
#db ul.db3 li{display:block;width:100%;font:12px Arial;text-transform:none;text-shadow:none}
#db ul.db3 a{color:#333}
#db li:hover ul.db3{display:block}
#db a.db1{padding:0 27px 0 14px}
#db a.db1::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}
#db ul.db3 a:hover{background:#ddd;color:#333}
.page-db{width:70%;margin:18px auto;padding:0;float:right;text-shadow:0 1px 0 rgba(0,0,0,0.7)}
.page-db ul{list-style:none;color:#ddd;width:700px;margin:0 auto;padding:0}
.page-db ul li{list-style:none;line-height:32px;display:inline-block}
.page-db li a{color:#ddd;display:block;font-size:14px;font-family:Arial;position:relative;text-decoration:none;text-transform:capitalize;padding:0 10px}
.page-db li a:hover,.page-db .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}
/* Kode CSS Menu Navigasi Minimalist End */
- Simpan Template
- Belum selesai sob, Sekarang pergi ke Tata Letak
- Tambahkan Gadget --> Pilih HTML/JavaScript
- Copy kode dibawah ini dan letakkan ke kolom HTML/JavaScript
<div id="db">
<ul>
<li><a href='/'><img alt='home' height=18' src='http://www.presentation-process.com/images/home-icon-small.jpg' style='padding-top:8px;' width='20'/></a></li><li><a href="#">Menu 1</a></li>
<li><a class="db1" href="#">Menu 2</a>
<ul class="db3">
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a></li>
<li><a class="db1" href="#">Menu 4</a>
<ul class="db3">
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
</ul>
</li>
</ul>
</div>
Keterangan :
- Kode yang berwarna MERAH yaitu URL/LINK tujuan masing-masing menu, bisa sobat ganti dengan URL/LINK tujuan terserah sobat
- Kode yang berwarna BIRU yaitu Judul dari masing-masing menu, bisa sobat ganti dengan Judul terserah sobat.
- Simpan.
Semoga Tips Blog yang berjudul Cara Membuat Menu Navigasi Classic Dengan Sub Menu Di Blog bisa bermanfaat.......
dan selamat mencoba......
Post a Comment