Kali ini saya ingin membahas tentang cara membuat menu blogger Keren,Susah rasanya membuat menu Navigasi keren
apalagi yang bisa menyakup Widget,apalagi saya sendiri sering mengganti
menu Navigasi .
Menu horisontal yang kita anggap hanya pelengkap sangat berpengaruh
pada Maximal PV yang kita dapat,oke to the point gan,mari kita mulai
Sebelum menggunakan Menu ini atau Untuk Menghindari Hal yang Tidak di Inginkan BackUp Terlebih Dahulu Template Anda :
1. Login Seperti Biasa ke Akun Blogger Anda.
2. Masuk Ke Menu Template Anda > Edit HTML > Centang Expand Template Widget
3. Cari Kode dibawah untuk Memudahkan Tekan ctrl+f
]]></s:kin>
4. Jika Sudah Ketemu Masukkan Kode dibawah Tepat diatas Kode
]]></s:kin>
ul.dropmenu{
position: relative;
margin: 0px;
padding: 1px 0px 0px 0px;
background:transparent
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwoLaQ8XLPLwcX9Pr18Ja_k-4qPACA35djLLt7WwEdudUzFtuf2rjGW0DJQPB5TIcopwlhArjP78FAWNaWfOHsde0TqVZiAvz1DZIdhvnyEfYFRz43AzlYLlgqBu5uzKaPKQC3xHosZNY/s1600/navigation.png)
repeat-x scroll 0 0;
display:block;
height: 35px;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size: 12px;
}
.dropmenu li{
position: relative;
list-style: none;
float: left;
margin: 0px;
padding: 0px;
}
.dropmenu li a{
height: 22px;
padding: 9px 30px 0px 15px;
display: block;
cursor: point;
border-right: solid 1px #4a779d;
color: #FFFFFF;
text-transform: uppercase;
text-decoration: none;
}
.dropmenu li span{
display: block;
float: right;
height: 10px;
width: 10px;
background:transparent
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR-bWLrVJb_0EyLJvJCW-QcCYg4KlN2w6iaG__X7ONHKIY69PzWXVdJoXkuG2Se9-abmiax0Mmg1akWRTEZdvBqeJBNrOMrgJ-iwcts3SYhVI8BIoyv7RDlZ6UGZgINrtlmNJJZGNY1jo/s1600/arrow_up.png)
repeat-x scroll 0 0;
position: absolute;
top: 12px;
right: 10px;
}
.dropmenu li a:hover span{
background:transparent
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEgkaWr7dYn8kj11c4IJbKCiN2Mt1-5ZKWolLoZfhq26JyHZkD1j4jYJrCOyQwPglMPrsK8v6kflAhEyES9p19G98VNV212wQlZFxmyZLOlxZ1vgOv8h5rAzOxiK0oGAq7rdEDpIDY-UU/s1600/arrow_hover.png)
repeat-x scroll 0 0;
}
.dropmenu li:hover ul, .dropmenu li:hover div{
display: block;
}
.dropmenu ul{
position: absolute;
display: none;
width: 140px;
padding: 0px;
margin: 0px;
border-bottom: 1px solid #ccc;
background: #FFFFFF
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUb8QmFqD6JEtVEVjmCewP1d5rA_qvP5aP9QQpSeg9T-Z2jzXJ-bfQyxr4lJNB4Q6UFLPvrZDmb33_CmfIAwP5J3lk2ZQfdvPcrltKxCBEIdMX2_cVz9_N98UUi6ljvmxSKiYav_m33F0/s1600/gradient.png)
repeat-x scroll 0 0;
}
.dropmenu ul li{
border: 0;
float: none;
}
.dropmenu ul a {
border: 1px solid #ccc;
border-bottom: 0;
white-space: nowrap;
display:block;
color: #0657AD;
text-decoration: underline;
text-transform: none;
}
a.selected, a:hover{
color: #0657AD !important;
background: #FFFFFF
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUb8QmFqD6JEtVEVjmCewP1d5rA_qvP5aP9QQpSeg9T-Z2jzXJ-bfQyxr4lJNB4Q6UFLPvrZDmb33_CmfIAwP5J3lk2ZQfdvPcrltKxCBEIdMX2_cVz9_N98UUi6ljvmxSKiYav_m33F0/s1600/gradient.png)
repeat-x scroll 0 0;
}
a.selected span{
background:transparent
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEgkaWr7dYn8kj11c4IJbKCiN2Mt1-5ZKWolLoZfhq26JyHZkD1j4jYJrCOyQwPglMPrsK8v6kflAhEyES9p19G98VNV212wQlZFxmyZLOlxZ1vgOv8h5rAzOxiK0oGAq7rdEDpIDY-UU/s1600/arrow_hover.png)
repeat-x scroll 0 0;
}
.dropmenu ul a:hover {
color:#F67A00 !important;
text-decoration: none;
background-color: #F0F0F0;
background-image: none;
}
.dropmenu div ul{
position: relative;
display: block;
}
.dropmenu li div{
background: #FFFFFF
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUb8QmFqD6JEtVEVjmCewP1d5rA_qvP5aP9QQpSeg9T-Z2jzXJ-bfQyxr4lJNB4Q6UFLPvrZDmb33_CmfIAwP5J3lk2ZQfdvPcrltKxCBEIdMX2_cVz9_N98UUi6ljvmxSKiYav_m33F0/s1600/gradient.png)
repeat-x scroll 0 0;
border: 1px solid #ccc;
padding: 5px;
display: none;
position: absolute;
}
.dropmenu li div ul{
border: none;
background: none;
position: relative !important;
}
.dropmenu li div a{
border: none;
border-bottom: 1px solid #ccc;
}
.dropmenu li div div{
display: block;
position: relative;
background: none;
border: none;
}
.dropmenu li div div a{
display: inline;
border: none;
color: #666;
text-decoration: underline;
padding: 0px;
margin: 0px;
text-transform: none;
}
.dropmenu li div div a:hover{
color: #000;
text-decoration: none;
}
ul.left{
float: left;
width: 145px;
}
ul.right{
float: right;
width: 145px;
}
.small{
color: #666;
font-size: 10px;
padding: 10px 5px 8px 5px !important;
display: block;
clear: both;
}
.products{
width: 300px;
padding: 15px !important;
}
.products ul{
width: 100%;
}
.products ul li{
border-bottom: 1px solid #ccc;
height: 40px;
padding: 10px 0px;
}
.products h2{
font-size: 16px;
padding: 2px 0px 3px 0px;
margin: 0px;
}
.products p{
color: #666;
font-size: 10px;
padding: 0px;
margin: 0px;
}
.products img{
float: left;
padding-right: 10px;
}
.products ul li a{
display: inline;
border: none;
color: #666;
text-decoration: underline;
padding: 0px;
margin: 0px;
text-transform: none;
}
.products ul li a:hover{
color: #000 !important;
text-decoration: none;
background: none !important;
}
.tutorials{
width: 300px;
}
input{
border:1px solid #4A779D;
padding: 3px 8px;
margin-bottom: 8px;
width: 164px;
}
label{
padding: 0px 0px 4px 0px;
display:block;
}
button{
background: #4A779D
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwoLaQ8XLPLwcX9Pr18Ja_k-4qPACA35djLLt7WwEdudUzFtuf2rjGW0DJQPB5TIcopwlhArjP78FAWNaWfOHsde0TqVZiAvz1DZIdhvnyEfYFRz43AzlYLlgqBu5uzKaPKQC3xHosZNY/s1600/navigation.png)
repeat-x scroll 0 0;
color: #FFF;
border:1px solid #4A779D;
padding: 4px 10px;
width: 180px;
}
.emailupdatesform{margin: 10px 0 5px 5px; width: 180px; float: left;}
.emailupdatesform input.emailupdatesinput{background: #fff !important;
float: left; border: 1px solid #d2d2d2; padding: 0px 8px 0px 8px; color:
#a19999; font-size: 12px; height: 25px; width: 160px; border-radius:
5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
.emailupdatesform
input.joinemailupdates{background:-moz-linear-gradient(top,#57ABFE
0%,#0080ff 100%); background:-webkit-gradient(linear,left top,left
bottom,from(#57ABFE),to(#0080ff)); border: 1px solid #0080ff;
text-transform: none; font:bold 12px arial; color: #fff; height: 25px;
padding: 0 12px 0 12px; margin: 0 0 0 5px; border-radius: 5px;
-moz-border-radius: 5px; -webkit-border-radius: 5px; cursor:pointer;}
5. Lalu Cari Lagi Kode dibawah ini
</head>
6. Setelah itu Copy Kode dibawah dan Taruh Tepat diatas kode </head>
<script type="text/javascript" src="http://mybloggerlab.com/Scripts/jquery.js"></script>
<script type="text/javascript" src="http://mybloggerlab.com/Scripts/dropdown.js"></script>
<script>
$(document).ready(function(){
$("#nav-one").dropmenu();
});
</script>
7. Setelah itu Cari Kode yang Hampir Mirip Seperti Kode dibawah
<div id='header-wrapper'>
<div class='headerleft'>
<b:section class='headerleft' id='headerleft' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Bocah Poris Blog's (Header)' type='Header'/>
</b:section>
</div>
Keterangan : Jika Anda Kesulitan Mencari Kode diatas Cari saja koe <div id='header-wrapper'> atau <b:widget id='Header1
8. Jika Sudah Ketemu Masukkan Kode dibawah Taruh Tepat diatas Kode diatas.
<ul id="nav-one" class="dropmenu">
<li>
<a href="#">Home</a> </li><li>
<a href="#">Forum</a><ul>
<li><a href="#">Support</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Examples</a></li>
<li><a href="#">Your work</a></li>
</ul>
</li>
<li>
<a href="#item3">Downloads</a><ul>
<li><a href="#">Tools</a></li>
<li><a href="#">Office</a></li>
<li><a href="#">Custom projects</a></li>
</ul>
</li>
<li>
<a href="#">Products</a>
<div class="products">
<ul>
<li><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb5g8phu6Cp1_FC7jXO00frn6qFxZfAbRMervcG3IcJfXwQwhmBJFGSldaxf7jxhYF39QEW8u0jEqZvvbK7QrgXri5Eh4MeO4DDr7k2tCivCLplmWLEI_8HdHFfCvpbKJoPxKRp29wUrY/s1600/1.jpg"
width="40" height="40" alt="Thumb" border="0" /><h2>Featured
Box</h2><p><a href="#">More information about this
product</a></p></li>
<li><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuNN3SMjjKIGjobDxU5-lbhKtvR52NjCdNT18-8BHaajXghtIbj-79CRHuQzZz4MObIPPxomIB9NULv5opgm67jiY-EjBALNtn27WyB__uBC2k28jW1nktMEdQBnSP77EVRmBMU5iY-Gk/s1600/2.jpg"
width="40" height="40" alt="Thumb" border="0" /><h2>Mod
Rewriter</h2><p><a href="#">More information about
this product</a></p></li>
<li><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7q6Bs_dkFXTmgqJAuN5Tweqh8b_P5vn9htYuWI7SrOCEdyLLX512RAS-9_URzkm_UTgRTF02hsthpv2Si7luTnC2xLJDD1C26G61tZ5_dZmLhLDjdMq-yEXS8IoTYm0shYFWGhbZjRKc/s1600/3.jpg"
width="40" height="40" alt="Thumb" border="0" /><h2>Byte
Scrambler</h2><p><a href="#">More information about
this product</a></p></li>
<li><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7q6Bs_dkFXTmgqJAuN5Tweqh8b_P5vn9htYuWI7SrOCEdyLLX512RAS-9_URzkm_UTgRTF02hsthpv2Si7luTnC2xLJDD1C26G61tZ5_dZmLhLDjdMq-yEXS8IoTYm0shYFWGhbZjRKc/s1600/3.jpg"
width="40" height="40" alt="Thumb" border="0" /><h2>Image
Processor</h2><p><a href="#">More information about
this product</a></p></li>
<li><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir7uFKPyFbWtPEJsRHzm6G1e4AatLCYQJn4lVlUXtIvwLBi9gGlkbmQHSkgMj2-1yAk5QBM4G4-EeP2IW7ZQOGqVdW6atIsXUaYRjjtzi-6h0O7CP-FuGUwIUnFaZvQYuC1TVYPX7UOUs/s1600/5.jpg"
width="40" height="40" alt="Thumb" border="0" /><h2>Registry
Class</h2><p><a href="#">More information about this
product</a></p></li>
<li><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt_1TQtahl1Sydr7vpnJ2b-zsX6TY531PzLE329N00HV43lOE7y1kKOFEBL6iHKSXFRJRSTUFy4lGH54RHGOgUmGlojAyH_bUKzHK-On2CS-yydR6wJEqC1YNPkxYmqFRK_CBimzz2sVg/s1600/6.jpg"
width="40" height="40" alt="Thumb" border="0" /><h2>Data
Validation</h2><p><a href="#">More information about
this product</a></p></li>
<li><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipD8HycdgnUOwNGlmr_uO8I_LGSAUVUuo8BBTMBRtCbp4cZN1PXbKI2CWw01yjH0a1ugWfGW370xjPZyt3kSrY7akE6A75OdrdZlEJJsAF1sz4A44C5LSaUFgO7PGgPvQYhIXHcIsDqyI/s1600/7.jpg"
width="40" height="40" alt="Thumb" border="0" /><h2>Ajax
Tables</h2><p><a href="#">More information about this
product</a></p></li>
</ul>
<div class="small">At vero eos et accusamus et iusto odio
dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque
corrupti quos dolores et quas molestias excepturi sint occaecati
cupiditate non provident.</div>
</div>
</li>
<li>
<a href="#">Tutorials</a>
<div class="tutorials">
<ul class="left">
<li><a href="#">Javascript</a></li>
<li><a href="#">Python</a></li>
<li><a href="#">PHP</a></li>
</ul>
<ul class="right">
<li><a href="#">HTML/CSS</a></li>
<li><a href="#">ASP.NET</a></li>
<li><a href="#">Actionscript</a></li>
</ul>
<div class="small">View <a href="#">all
categories</a> or a <a href="#">list of the best
tutorials</a>.</div>
</div>
</li>
<li>
<a href="#">Links</a> <ul>
<li><a href="#">Programming</a></li>
<li><a href="#">Inspiration</a></li>
<li><a href="#">My websites</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Cool stuff</a></li>
<li><a href="#">Sitebase</a></li>
<li><a href="#">Other</a></li>
</ul>
</li>
<li> <a href="#">Subscribe Now</a>
<div class="emailsub">
<div class="emailupdatesform">
<form action="http://feedburner.google.com/fb/a/mailverify"
method="post" target="popupwindow"
onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Ilmu pengetahuan',
'popupwindow', 'scrollbars=yes,width=550,height=520');return
true"><input gtbfieldid="10" class="emailupdatesinput"
name="email" value="Enter your email here..." onblur="if (this.value ==
'') {this.value = 'Enter your email
here...';}" onfocus="if (this.value == 'Enter your email
here...') {this.value = '';}" type="text"
/><input value="tntbystc" name="uri" type="hidden" /><input
value="Submit" class="joinemailupdates" type="submit"
/></form></div></div>
</li> </ul>
9. Ganti Kode yang Berwarna Sesuai Data Blog Anda Sendiri.
10. Terakhir Untuk Menghindari kesalahan Klik Pratinjau jika Sudah Sukses . Klik Save/Simpan .
Terima Kasih Telah Berkunjung Ke Blog Ilmu Pengetahuan
Dan Mohon Tinggalkan Komentarnya Juga Karena Sangat Berarti Untuk Saya
