Baiklah saya ga perlu byk komentar mengenai menu ini, entar sobat malah bete' lagi. :D
Berikut langkah - langkah pembuatannya.
1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. Cari kode : ]]></b:skin> , Jika Sudah Ketemu, letakkan Kode CSS berikut tepat diatasnya.
/* top level ribbon */
#top-ribbon {
position:absolute;
top:0;
background:#333;
right:25.5%;
z-index:10;
width:108px;
height:260px;
color:#999;
font:normal 11px Verdana,Arial,Sans-Serif;
box-shadow:0 5px 7px rgba(0,0,0,0.7);
border-radius:0 0 5px 5px;
transition:right .15s linear;
border-color:#444 #222 #222 #444;
border-style:solid;
border-width:1px;
margin:0 auto;
padding:10px;
}
#top-ribbon:after {
content:'';
display:block;
position:absolute;
top:100%;
left:15%;
border-color:#333 transparent transparent;
border-style:solid;
border-width:15px;
}
#top-ribbon .img-container {
border:3px double #3c3c3c;
background:transparent;
box-shadow:inset 0 0 2px rgba(0,0,0,0.4);
display:block;
margin:0 auto 10px;
padding:10px;
}
#top-ribbon .img-container img {
display:block;
background:#3c3c3c;
padding:5px 0;
}
#top-ribbon ul#level {
display:block;
margin:0;
padding:0;
}
#top-ribbon ul#level li {
display:block;
margin:0 0 2px;
padding:0;
}
#top-ribbon ul#level li a {
display:block;
background:#3c3c3c;
color:#ccc;
text-transform:uppercase;
text-decoration:none;
font:normal 8px Arial,Sans-Serif;
position:relative;
transition:all .26s ease-out;
margin:0;
padding:6px 10px;
}
#top-ribbon ul#level li a:before {
content:"";
width:0;
height:0;
position:absolute;
right:0;
top:0;
display:block;
border-color:transparent #333 transparent transparent;
border-style:solid;
border-width:11px;
}
#top-ribbon ul#level li a:hover {
transition:none;
color:white;
text-decoration:none;
padding:6px 0 6px 15px;
}
#top-ribbon ul#level li.satu a:hover {
background:#DC98FF;
}
#top-ribbon ul#level li.dua a:hover {
background:#FF5DC2;
}
#top-ribbon ul#level li.tiga a:hover {
background:red;
}
#top-ribbon ul#level li.eks a:hover {
background:#0251C9;
}
5. Jika Sudah, taruh kode dibawah ini sebelum atau diatas kode <body> , (Bisa juga ditaruh "Tambah Gadget" pada bagian sidebar..
<div id='top-ribbon'>
<div class='img-container'>
<a href='http://ngawicybers.blogspot.com/2012/02/html-color-code.html' target='_blank'><img alt='orang kreatif' src='http://3.bp.blogspot.com/-xBYx0e1vSLo/TstBcU365uI/AAAAAAAABW4/iv3PiNxuUy0/s1600/colormap.png'/></a>
</div>
<ul id='level'>
<li class='satu'><a href='http://ngawicybers.blogspot.com/'>Menu-1</a></li>
<li class='dua'><a href='http://ngawicybers.blogspot.com/'>Menu-2</a></li>
<li class='tiga'><a href='http://ngawicybers.blogspot.com/'>Menu-3</a></li>
<li class='eks'><a href='http://ngawicybers.blogspot.com/'>Menu-4</a></li>
</ul>
</div>
NB :
- Perhatika teks yang berwarna orange, sobat ganti dengan URL LINK anda.. :D
6. Save, dan selesai deh.
Selamat Mencoba..!!!
Posting Komentar