Cara buat Drop Down menu Massive Blue Menu Blog merupakan hal yang sangat penting, baik itu di mata pengunjung atau di mata mesin pencari...
Menu Blog merupakan hal yang sangat penting, baik itu di mata pengunjung atau di mata mesin pencari. Semakin menarik Menu yang sobat gunakan di blog tentu semakin keren pula tampilan blog kita, selain berfungsi memperindah blog tentu juga mempermudah pengunjung mencari berbagai artikel di blog.
Sudah banyak bertebaran di dunia maya, di blog tetangga berbagai macam cara membuat menu blog ,
Bagi sobat yang Naksir Floating left sidebar bisa di cicip dulu sebelum mencoba bisa baca disini Floating left sidebar Menu.
Berikut cara pasang Drop Down menu Massive Blue
Pertama
Klik Rancangan + Edit HTML Centang expand Widget Templates
Kedua
Cari kode ]]></b:skin>
Setelah ketemu Letakkan kode berikut diatasnya / Sebelum ]]></b:skin>
Silahkan Simpan
Kedua
Klik + Pilih
Silahkan Copy dan Paste Kode Berikut iniSudah banyak bertebaran di dunia maya, di blog tetangga berbagai macam cara membuat menu blog ,
Bagi sobat yang Naksir Floating left sidebar bisa di cicip dulu sebelum mencoba bisa baca disini Floating left sidebar Menu.
Berikut cara pasang Drop Down menu Massive Blue
Pertama
Klik Rancangan + Edit HTML Centang expand Widget Templates
Kedua
Cari kode ]]></b:skin>
Setelah ketemu Letakkan kode berikut diatasnya / Sebelum ]]></b:skin>
.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
}
.menu ul{
background:#333333;
height:35px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
background:#333333 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpZKpDFM1Q7f59wj0kbPzPcus2aLWpC5BV54WrnSzJ2uCKphgIX5k8UdGjd1DgyltJpE_xtpMzfDZ3FNJHOCjV1XibB36UjWL1GeBPOpo4XtjeyjRWBfkxqQRJ8nOxZ9HZU-XvIV7d0VoX/s1600/seperator.gif") bottom right no-repeat;
color:#cccccc;
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a{
background: #2580a2 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguHmsWLGQH7eMcmVPjk85PFktFtsiOGyYAdCForFMi8L_YMAQqpHuBMsIY_S4M7CX1rmOpEJmszfrF8kdsk4PInE6vccVmbxzdKRV5c6xUNqPtgV3TjxF8L3r6yuXoqx2VCpN4cwfoNVQ/h120/hover.gif") bottom center no-repeat;
color:#FFFFFF;
text-decoration:none;
}
.menu li ul{
background:#333333;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;
}
.menu li li {
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguHmsWLGQH7eMcmVPjk85PFktFtsiOGyYAdCForFMi8L_YMAQqpHuBMsIY_S4M7CX1rmOpEJmszfrF8kdsk4PInE6vccVmbxzdKRV5c6xUNqPtgV3TjxF8L3r6yuXoqx2VCpN4cwfoNVQ/h120/hover.gif') bottom left no-repeat;
display:block;
float:none;
margin:0px;
padding:0px;
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
}
.menu ul{
background:#333333;
height:35px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
background:#333333 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpZKpDFM1Q7f59wj0kbPzPcus2aLWpC5BV54WrnSzJ2uCKphgIX5k8UdGjd1DgyltJpE_xtpMzfDZ3FNJHOCjV1XibB36UjWL1GeBPOpo4XtjeyjRWBfkxqQRJ8nOxZ9HZU-XvIV7d0VoX/s1600/seperator.gif") bottom right no-repeat;
color:#cccccc;
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a{
background: #2580a2 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguHmsWLGQH7eMcmVPjk85PFktFtsiOGyYAdCForFMi8L_YMAQqpHuBMsIY_S4M7CX1rmOpEJmszfrF8kdsk4PInE6vccVmbxzdKRV5c6xUNqPtgV3TjxF8L3r6yuXoqx2VCpN4cwfoNVQ/h120/hover.gif") bottom center no-repeat;
color:#FFFFFF;
text-decoration:none;
}
.menu li ul{
background:#333333;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;
}
.menu li li {
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguHmsWLGQH7eMcmVPjk85PFktFtsiOGyYAdCForFMi8L_YMAQqpHuBMsIY_S4M7CX1rmOpEJmszfrF8kdsk4PInE6vccVmbxzdKRV5c6xUNqPtgV3TjxF8L3r6yuXoqx2VCpN4cwfoNVQ/h120/hover.gif') bottom left no-repeat;
display:block;
float:none;
margin:0px;
padding:0px;
Silahkan Simpan
Kedua
Klik + Pilih
<div class="menu">
<ul>
<li><a href="#" >Home</a></li>
<li><a href="#" id="current">Products</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="/faq.php">FAQ</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="/contact/contact.php">Contact</a></li>
</ul>
</div>
<ul>
<li><a href="#" >Home</a></li>
<li><a href="#" id="current">Products</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="/faq.php">FAQ</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="/contact/contact.php">Contact</a></li>
</ul>
</div>
Silahkan Sobat Ganti kode berikut dengan menu sesuai keinginan sobat, dan bisa juga ditambahkan atau dikurangi sesuai kebutuhan
<a href="#">Home</a>
<a href="#">Product</a>
dst
Kode # = Alamat Link dan Link One = Nama Link
contoh
Kode # saya ganti dengan http://hanyayanggratis.blogspot.com
Tidak ada komentar