Untuk Contohnya sobat bisa lihat langsung pada postingan ini, perhatikan pada bagian Menu diatas.
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://.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://.blogspot.com/>Menu-1</a></li>
<li class=dua><a href=http://.blogspot.com/>Menu-2</a></li>
<li class=tiga><a href=http://.blogspot.com/>Menu-3</a></li>
<li class=eks><a href=http://.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..!!!
- Menu-1
- Menu-2
- Menu-3
- Menu-4
Tidak ada komentar:
Posting Komentar