Membuat Menu Horizontal Drop Down di Blog, sebenarnya ini bukan cara sih, lebih cenderung jadi memasang, tapi yasudahlah intinya tetap sama yaitu membuat/ memasang menu navigasi di blog kita. sebenarnya apa sih fungsi kita memasang Menu Horizontal Drop Down di Blog itu. Banyak manfaat yang kita dapatkan dari memasang menu Tersebut.
- Pertama, Pasti akan membuat tampilan blog kita terlihat Lebih Profesional, walaupun blog kita masih baru atau masih dalam pencarian jati diri blog kita itu apa, untuk ingin info tentang bagaimana membuat tampilan blog lebih profesional silahkan baca di sini.
- kedua, Memudahkan para pengunjung untuk mencari artikel yang ada di blog kita, jadi pengunjung tidak perlu membuka halaman blog kita satu persatu, tinggal mencari menu dan sub menu lewat menu horizontal drop down tadi. atau juga sobat bisa pasang Navigasi halaman di Blog Sobat.
- Ketiga, Denger-denger sig Juga bisa buat blog kita jadi SEO loh sobat, kok bisa, selain tampilan kita profesional pasti akan lebih di sukai oleh Google, dan akan memudahkan pengunjung membuka artikel kita senhingga page view akan meningkat.
nah sekarang saatnya Bang Gopar memberikan tutorial tentang cara pembuatannya, bagi sobat yang berminat untuk memasang di blog sobat silahkan ikuti langkah-langkah berikut dengan seksama, tidak sulit kok.
Cara Memasang Menu Horizontal Drop Down
1. Login ke blogger dengan ID anda.2. Klik Tata Letak.
3. silahkan sobat tambahkan kode diwah ini ke Elemen di bawah header blog sobat.
<style>
/*------ CSS3 Drop Down Menu By RL (rinjanilovers.blogspot.com)---------*/
#rl-menu, #rl-menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#rl-menu {
width: 905px;
margin: 60px auto;
border: 1px solid #222;
background-color: #000;
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;
}
#rl-menu:before,
#rl-menu:after {
content: "";
display: table;
}
#rl-menu:after {
clear: both;
}
#rl-menu {
zoom:1;
}
#rl-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;
}
#rl-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;
}
#rl-menu li:hover > a {
color: #fafafa;
}
*html #rl-menu li a:hover { /* IE6 only */
color: #fafafa;
}
#rl-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;
}
#rl-menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#rl-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);
}
#rl-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;
}
#rl-menu ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#rl-menu ul a {
padding: 10px;
width: 130px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#rl-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);
}
#rl-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;
}
#rl-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;
}
#rl-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;
}
#rl-menu ul li:first-child a:hover:after {
border-bottom-color: #04acec;
}
#rl-menu ul ul li:first-child a:hover:after {
border-right-color: #0299d3;
border-bottom-color: transparent;
}
#rl-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;
}
</style>
<ul id="rl-menu">
<li><a href="#">Home</a></li>
<li>
<a href="#">Categories</a>
<ul>
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
<li><a href="#">Sub Menu 4</a></li>
</ul>
</li>
<li><a href="#">Work</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
Ketterangan:
Silahkan ganti # dengan alamat menu yang sobat inginkan.
Yang saya beri warna merah adalah nama menu yang akan di tampilkan di blog sobat, silahkan ganti sesuai keinginan sobat.
Catatan : selain di bawah di bawah header juga bisa, tapi tempat paling efektif adalah di elemen di bawah header. jika di bawah header sobat tidak ada elemen. sobat bisa baca tutorial Cara membuat Elemen Di bawah Header.
4. silahkan save, oh ya untuk judulnya di kosongkan saja.
Gimana sobat? mudahkan. nah sekian dulu ya Cara Membuat Menu Horizontal Drop Down di Blog. semoga ini bisa bermanfaat bagi sobat Blogger. terimaksih
Tidak ada komentar:
Posting Komentar