Membuat Menu Navigasi Drop Down Keren Untuk Blogger

Chakly Raflesia Februari 27, 2017 Mei 14, 2022

GeegleHayoO - CSS Untuk Menu Drop Down Keren Untuk Blogger

Setiap blogger pasti ingin menu bar yang keren untuk blog-nya, Tapi dengan blogger bawaan, Menu belum sudah bisa drop down dengan kata lain kurang keren. Jadi hari ini Chakly akan memposting cara membuat menu tarik turun / down down untuk blogger.

Menu Drop down adalah hal utama yang membantu untuk meningkatkan menariknya dari sebuah blog. Kamu bisa menghubungkan dengan beberapa Kategori Utama, Halaman penting, da Pos. Naah dengan menu bar. Ini akan membantu pengunjung bahkan kamu sendiri dalam menavigasi.

Berikut adalah langkah demi langkah untuk tutorialnya...

1. Pertama Login dan pilih Desain /template.

2. Setelah itu Edit HTML.
Catatan: pastikan backup dulu templatenya untuk menghindari ketidak sesuaian selera / kesalahan.

3. Centang Expand Template Widget.

4. Pada langkah keempat ini, Kamu hanya harus menemukan kode ini "]]> </ b: skin>"

5. Sekarang paste kode di bawah ini Sebelum / diatas kode tag "]]> </b: skin>".

#hb-menu, #hb-menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#hb-menu {
width: 960px;
margin: 60px auto;
border: 1px solid #222;
background-color: #111;
background-image: -moz-linear-gradient(#444, #111);
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
background-image: -webkit-linear-gradient(#444, #111);
background-image: -o-linear-gradient(#444, #111);
background-image: -ms-linear-gradient(#444, #111);
background-image: linear-gradient(#444, #111);
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 1px 1px #777;
-webkit-box-shadow: 0 1px 1px #777;
box-shadow: 0 1px 1px #777;
}
#hb-menu:before,
#hb-menu:after {
content: "";
display: table;
}
#hb-menu:after {
clear: both;
}
#hb-menu {
zoom:1;
}
#hb-menu li {
float: left;
border-right: 1px solid #222;
-moz-box-shadow: 1px 0 0 #444;
-webkit-box-shadow: 1px 0 0 #444;
box-shadow: 1px 0 0 #444;
position: relative;
}
#hb-menu a {
float: left;
padding: 12px 30px;
color: #999;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#hb-menu li:hover > a {
color: #fafafa;
}
*html #hb-menu li a:hover { /* IE6 only */
color: #fafafa;
}
#hb-menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 9999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 -1px rgba(255,255,255,.3);
-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
#hb-menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#hb-menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}
#hb-menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
#hb-menu ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#hb-menu ul a {
padding: 10px;
width: 130px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#hb-menu ul a:hover {
background-color: #0186ba;
background-image: -moz-linear-gradient(#04acec, #0186ba);
background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background-image: -webkit-linear-gradient(#04acec, #0186ba);
background-image: -o-linear-gradient(#04acec, #0186ba);
background-image: -ms-linear-gradient(#04acec, #0186ba);
background-image: linear-gradient(#04acec, #0186ba);
}
#hb-menu ul li:first-child > a {
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
#hb-menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #444;
}
#hb-menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #3b3b3b;
}
#hb-menu ul li:first-child a:hover:after {
border-bottom-color: #04acec;
}
#hb-menu ul ul li:first-child a:hover:after {
border-right-color: #0299d3;
border-bottom-color: transparent;
}
#hb-menu ul li:last-child > a {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}

6. Sekarang Cari lagi kode ini "<div id = 'content-wrapper'>"

7. Paste kode di bawah ini sebelum ini / diatas kode tag "<div id = 'content-wrapper'>"

<ul id="hb-menu">
<li><a href="#">Home</a></li>
<li>
<a href="#">Categories</a>
<ul>
<li><a href="#">CSS</a></li>
<li><a href="#">Graphic design</a><ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul> </li>
<li><a href="#">Development tools</a></li>
<li><a href="#">Web design</a></li>
</ul>
</li>
<li><a href="#">Work</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">CSS</a>
<ul>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
<li><a href="#">Link 7</a></li>
<li><a href="#">Link 8</a></li>
</ul>
</li>
<li><a href="#">Graphic design</a></li>
<li><a href="#">Development tools</a></li>
<li><a href="#">Web design</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
<li><a href="http://www.bloggertrix.com/">Add This Â»</a></li></ul>

Tips :
* Gantilah tanda # Dengan URL / Link yang akan kamu tampilkan di Menu ini.
* Ganti juga Nama Untuk Menu Sesuai Arahan Link.

8. Simpan template ini, Dan selamat sekarang kamu punya Menu yang keren. Kira2 Menu nya akan seperti ini!

Menu Keren Drop Down

Keren bukan?

Blog Populer

Membuat Menu Navigasi Drop Down Keren Untuk Blogger

Artikel Terkait