.
Tampilan blog yang
menarik dan dinamis akan membuat pengunjung lebih betah. Di samping itu kita
punya kepuasan sendiri, dari tampilan blog sederhana menjadi tampilan yang kita
inginkan. Kali ini saya akan berbagi mengenai cara membuat menu horisontal
animasi, silahkan anda menuju kesini untuk melihat contohnya (menu navigasi baris
kedua).
Saya tidak akan berpanjang lebar karena sudah ngantuk banget nih, langsung
saja perhatikan langkah-langkahnya di bawah ini :
1.
Login ke blogger dengan
akun anda
2.
Kemudian pada dasbor klik Rancangan >> Edit
HTML
3.
Tambahkan kode CSS berikut diatas
tag ]]></b:skin>:
.animatedtabs{
border-bottom: 1px solid gray;
overflow: hidden;
width: 100%;
font-size: 14px; /*font of menu text*/
}
.animatedtabs ul{
list-style-type: none;
margin: 0;
margin-left: 10px; /*offset of first tab relative to page left edge*/
padding: 0;
}
.animatedtabs li{
float: left;
margin: 0;
padding: 0;
}
.animatedtabs a{
float: left;
position: relative;
top: 5px; /* 1) Number of pixels to protrude up for selected tab. Should equal (3) MINUS (2) below */
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3rglvrXNxZ2SWcv5tEDfAAnao15ZR5ysXfCDevVPB2c_3gE3WO0aGv3w8EEgTHajfNRtEyTWZU9NeXB-aW9F2MlAdTXJUS2XURl9SnsXrvYADTIwevTRR6UwmjgdUNqHg35I5GMzQLMM/s320/tab-blue-left.gif) no-repeat left top;
margin: 0;
margin-right: 3px; /*Spacing between each tab*/
padding: 0 0 0 9px;
text-decoration: none;
}
.animatedtabs a span{
float: left;
position: relative;
display: block;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg38z5NwfgUz1156xpziqCShLNO_sczMKk5j1Qq0M9op4ccL08GC2LV1k0AN3GJVkpUyIYnMV06qzmUwO-FowWQEP38zYL6wQuArCKlxut8_lkA6jP7MP3lK7RyPzkbek4DW5kwUUp2yXo/s320/tab-blue-right.gif) no-repeat right top;
padding: 5px 14px 3px 5px; /* 2) Padding within each tab. The 3rd value, or 3px, should equal (1) MINUS (3) */
font-weight: bold;
color: black;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
.animatedtabs a span {float:none;}
/* End IE5-Mac hack */
.animatedtabs .selected a{
background-position: 0 -125px;
top: 0;
}
.animatedtabs .selected a span{
background-position: 100% -125px;
color: black;
padding-bottom: 8px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */
top: 0;
}
.animatedtabs a:hover{
background-position: 0% -125px;
top: 0;
}
.animatedtabs a:hover span{
background-position: 100% -125px;
padding-bottom: 8px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */
top: 0;
}
border-bottom: 1px solid gray;
overflow: hidden;
width: 100%;
font-size: 14px; /*font of menu text*/
}
.animatedtabs ul{
list-style-type: none;
margin: 0;
margin-left: 10px; /*offset of first tab relative to page left edge*/
padding: 0;
}
.animatedtabs li{
float: left;
margin: 0;
padding: 0;
}
.animatedtabs a{
float: left;
position: relative;
top: 5px; /* 1) Number of pixels to protrude up for selected tab. Should equal (3) MINUS (2) below */
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3rglvrXNxZ2SWcv5tEDfAAnao15ZR5ysXfCDevVPB2c_3gE3WO0aGv3w8EEgTHajfNRtEyTWZU9NeXB-aW9F2MlAdTXJUS2XURl9SnsXrvYADTIwevTRR6UwmjgdUNqHg35I5GMzQLMM/s320/tab-blue-left.gif) no-repeat left top;
margin: 0;
margin-right: 3px; /*Spacing between each tab*/
padding: 0 0 0 9px;
text-decoration: none;
}
.animatedtabs a span{
float: left;
position: relative;
display: block;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg38z5NwfgUz1156xpziqCShLNO_sczMKk5j1Qq0M9op4ccL08GC2LV1k0AN3GJVkpUyIYnMV06qzmUwO-FowWQEP38zYL6wQuArCKlxut8_lkA6jP7MP3lK7RyPzkbek4DW5kwUUp2yXo/s320/tab-blue-right.gif) no-repeat right top;
padding: 5px 14px 3px 5px; /* 2) Padding within each tab. The 3rd value, or 3px, should equal (1) MINUS (3) */
font-weight: bold;
color: black;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
.animatedtabs a span {float:none;}
/* End IE5-Mac hack */
.animatedtabs .selected a{
background-position: 0 -125px;
top: 0;
}
.animatedtabs .selected a span{
background-position: 100% -125px;
color: black;
padding-bottom: 8px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */
top: 0;
}
.animatedtabs a:hover{
background-position: 0% -125px;
top: 0;
}
.animatedtabs a:hover span{
background-position: 100% -125px;
padding-bottom: 8px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */
top: 0;
}
4.
Tambahkan kode HTML berikut diatas
atau dibawah <div id='header-wrapper'> atau bisa juga anda
tambahkan pada bagian elemen halaman sebagai widget
<div
class='animatedtabs'>
<ul>
<li><a href='http://creatingwebsite-maskolis.blogspot.com'
title='Home'><span>Home</span></a></li>
<li><a
href='http://creatingwebsite-maskolis.blogspot.com/search/label/tutorial blog'
title='tutorial blog'><span>Tutorial
Blog</span></a></li>
<li><a href='http://creatingwebsite-maskolis.blogspot.com/search/label/SEO'
title='SEO'><span>SEO</span></a></li>
<li><a
href='http://creatingwebsite-maskolis.blogspot.com/search/label/wordpress'
title='wordpress'><span>Wordpress</span></a></li>
<li><a
href='http://creatingwebsite-maskolis.blogspot.com/search/label/affiliate'
title='affiliate'><span>Affiliate</span></a></li>
<li><a
href='http://creatingwebsite-maskolis.blogspot.com/search/label/hosting'
title='hosting'><span>Hosting</span></a></li>
</ul>
</div>
5.
Simpan template dan lihat hasilnya.
Tidak ada komentar:
Posting Komentar