- Masuk ke akun blogger anda -> KlikTemplate -> Edit HTML
- Cari tag / kode </head> dengan menggunakan CTR + F untuk memudahkan pencarian tag.
- Pastekan Script kode berikut tepat diatas kode </head>
- Simpan Template
- Kemudian masuk -> Tata Letak
- Klik Tambahkan Gadget -> Pilih HTML/Javascript
- Pastekan kode dibawah ini didalamnya:
<style>
.kwicks {
list-style: none;
position: relative;
margin: 0;
padding: 0;
background-image:url(http://3.bp.blogspot.com/--T9MLRmIQyA/USt4BuAmKUI/AAAAAAAAHBI/dP1cVTBDq8k/s1600/btrix_no_flicker.jpg); /*some browsers are to slow when aligning the menu items via jQuery and so the background shines through, this prevents this flickering*/}
.kwicks li{
display: block;
overflow: hidden;
padding: 0;
cursor: pointer;
float: left;
width: 125px;
height: 40px;
margin-right: 0px;
background-image:url(http://4.bp.blogspot.com/-C7LE3AfhL-M/USt4BrUwefI/AAAAAAAAHBM/MhHSMjy4mA0/s1600/btrix_kwicks_sprite.jpg);
background-repeat:no-repeat;}
.kwicks a{
display:block;
height:40px;
text-indent:-9999px;
outline:none;}
#kwick1 {
background-position:0px 0px;}
#kwick2 {
background-position:-200px 0px;}
#kwick3 {
background-position:-400px 0px;}
#kwick4 {
background-position:-600px 0px;}
#kwick1.active, #kwick1:hover {
background-position: 0 bottom;}
#kwick2.active, #kwick2:hover{
background-position: -200px bottom;}
#kwick3.active, #kwick3:hover {
background-position: -400px bottom;}
#kwick4.active, #kwick4:hover {
background-position: -600px bottom; }
#kwick1 a{
background-image:url(http://2.bp.blogspot.com/-wvgBGxYk__c/USt4A9O96EI/AAAAAAAAHBA/_Ckyg3Jup6c/s1600/btrix_end.jpg);
background-repeat:no-repeat;
background-position: left 0px;}
#kwick1 a:hover{
background-position: left -80px;}
#kwick4 a{
background-image:url(http://2.bp.blogspot.com/-wvgBGxYk__c/USt4A9O96EI/AAAAAAAAHBA/_Ckyg3Jup6c/s1600/btrix_end.jpg);
background-repeat:no-repeat;
background-position: right -40px;}
#kwick4 a:hover{
background-position: right -120px;
}
</style>
<ul class="kwicks">
<li id="kwick1"><a href="#">Home</a></li>
<li id="kwick2"><a href="#">Contact</a></li>
<li id="kwick3"><a href="#">Downloads</a></li>
<li id="kwick4"><a href="#">Search</a></li>
</ul>
- Ganti tanda # dengan link anda
- Simpan Gadget....Selesai.
Semoga bermanfa'at...