Cara Membuatnya :
1. Login ke akun blogger Anda.
2. Pada Dasbor klick ➨ Rancangan ➨ Edit HTML.
3. Centang Expand Template Widget ➨ Backup dulu templatenya untuk mengantisipasi bila terjadi kesalahan.
4. Selanjutnya dalam Edit Template Anda cari kode ]]></b:skin> atau <style> Bila kesulitan mencarinya coba baca Cara Cepat Mencari Kode HTML.
5. Bila sudah ketemu sekarang Anda copy kode berikut dan paste atau letakkan di atas kode tadi.
KODE
/*Sliding Text and Icon Menu Style*/
.sti-menu{
width:950px;
position:relative;
margin:10px auto 0 auto;
}
.sti-menu li{
float:left;
width:120px;
height:170px;
margin:1px;
}
.sti-menu li a{
display:block;
overflow:hidden;
background:#fff;
text-align:center;
height:100%;
width:100%;
position:relative;
-moz-box-shadow:1px 1px 2px #ddd;
-webkit-box-shadow:1px 1px 2px #ddd;
box-shadow:1px 1px 2px #ddd;
}
.sti-menu li a h2{
color:#000;
font-family: 'Wire One', arial, serif;
font-size:13px;
font-weight:bold;
text-transform:uppercase;
position:absolute;
padding:2px;
width:100px;
top:100px;
left:10px;
text-shadow: 0px 1px 1px black;
}
.sti-menu li a h3{
font-family: Baskerville, "Hoefler Text", Garamond, "Times New Roman", serif;
font-size:12px;
font-style:italic;
color: #111;
position:absolute;
top:130px;
left:10px;
width:100px;
padding:2px;
}
.sti-icon{
width:100px;
height:100px;
position:absolute;
background-position:top left;
background-repeat:no-repeat;
background-color:transparent;
left:10px;
top:5px;
}
.sti-icon-home{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6jtKgT4c8-rn1pNRZ_JP1GmK7dwizKstMnUgOl8tZL6PSVQOBaaC4nTd4GvlxiXZnQwPl9j13ZLZ__Z_h-H_IN7YfDl2h6BGqaoc9SFA7fFEjMKOyWq0g16IXrYxdwMdlS_lczzF5jyA2/s1600/home.png);
}
.sti-icon-album{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFIATFo7cbChlNvfugb-e5StjjpMe0VaATY87ZKEE8vEEQBnPF5k00ePu_CjbSowlKMj1oyEGev6P2hfRDSR_kDTStnPUGZH4a9RgJ6rF2aPbA7GYWxaA16qnN-4Qfv4uXqWcLrB9iArEj/s1600/Photo.png);
}
.sti-icon-mail{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUwljW4CM4mpJ6aqKWLXTZndxTPy_NBAoh8V3rBrO5AFggfoVtzA5FOSKAldhOobDe7WaPhQJfzEOU1INAYxPtI_CkJuav7YW-KD2ntJ3gyH-ey5Xhv4RATTWdQmdFCBLb0bLLltDOptgU/s1600/MAIL.png);
}
.sti-icon-info{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaYd2psN-u4VkFFrCxT8uDz0DNw9YGBaEQx-FTbzj9HhhNL72iC0tdPSP0JeT7K092sK8eZlSa0g92nVcRho628UTElTSANNvbWqJjAjDTV3WOKUdYV-HVwBT5S3roLG7NM1NizcDvZUzn/s1600/Contak.png);
}
.sti-icon-rss{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidIcmEx4ya7UamJ33JeeW7pUTCoNZWW_wpOYJvC9cFWas0o_qDAUIyFfGlR3bNKXKRGOJ5NiR06XtkHl8c-aKvUyRdIOET1LmI6swHansBKKDPZYrG4wcrvFs4rorZNIjZ-iHlV0JUpcLZ/s1600/RSS.png);
}
6. Selanjutnya cari kode
dan letakkan kode berikut ini di atasnya.
7. Simpan Template.
8. Sekarang pergi ke Dasbor klick Rancangan ➨ Tambah gadget.
9. Pilih elemen HTML/Java Script.
10. Lalu copy kode berikut dan paste atau letakkan di dalam elemen HTML/Java Script tadi.
<span style="background-color: white;">KODE
<ul class="sti-menu" id="sti-menu">
<li data-hovercolor="#37c5e9">
<a href="http://www.blogger.com/blogger.g?blogID=7397766150734722133#">
<h2 class="sti-item" data-type="mText">
My Home</h2>
<h3 class="sti-item" data-type="sText">
Halaman Utama</h3>
<span class="sti-icon sti-icon-home sti-item" data-type="icon"></span></a>
</li>
<li data-hovercolor="#ff395e">
<a href="http://www.blogger.com/blogger.g?blogID=7397766150734722133#">
<h2 class="sti-item" data-type="mText">
My Album</h2>
<h3 class="sti-item" data-type="sText">
Galery Photo</h3>
<span class="sti-icon sti-icon-album sti-item" data-type="icon"></span></a>
</li>
<li data-hovercolor="#57e676">
<a href="http://www.blogger.com/blogger.g?blogID=7397766150734722133#">
<h2 class="sti-item" data-type="mText">
Info Saya</h2>
<h3 class="sti-item" data-type="sText">
My Prifille</h3>
<span class="sti-icon sti-icon-info sti-item" data-type="icon"></span></a>
</li>
<li data-hovercolor="#d869b2">
<a href="http://www.blogger.com/blogger.g?blogID=7397766150734722133#">
<h2 class="sti-item" data-type="mText">
My Email</h2>
<h3 class="sti-item" data-type="sText">
Send Messenger</h3>
<span class="sti-icon sti-icon-mail sti-item" data-type="icon"></span></a>
</li>
<li data-hovercolor="#ffdd3f">
<a href="http://www.blogger.com/blogger.g?blogID=7397766150734722133#">
<h2 class="sti-item" data-type="mText">
Subcribe</h2>
<h3 class="sti-item" data-type="sText">
Langgan RSS</h3>
<span class="sti-icon sti-icon-rss sti-item" data-type="icon"></span></a>
</li>
</ul>
</span>
11. Simpan.
Keterangan:
- Untuk Mengubah Icon Gambar silahkan Anda rubah url yang bewarna merah yang berada pada langkah 5.
- Untuk Langkah 10 Silahkan Anda rubah warna merah (tanda pagar)
url/link tujuan menu Anda dan Ganti nama menu (warna orange) dengan menu
yang Anda inginkan.
Source : otowebsite.blogspot.com
