22.07.00
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. Sebelumnya saya sudah
pernah menulis tips tentang Membuat Menu Navigasi Animasi, tetapi kali ini saya akan berbagi lagi mengenai cara membuat menu horisontal animasi, seperti gambar di bawah ini:
 | ||||
| Preview Gbr Menu Navigasi Animasi |
1. Login pastinya ke blogger.com dengan account sobat
2. Pada Dasbor blog anda, silahkan pilih Edit HTML
3. Kemudian jangan lupa Expand Template Widget
4. Cari kode ]]>
5. Letakkan kode berikut ini di atas kode tadi
.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/AVvXsEg4TNhfyo0cfoi6rpqgFEKctrOcOWKyFdZnEwOhZesy1voKG4aAGx2Rh_PAH8C2dceRpms5L0DYf3l8bhNIQsFXuk8AhisEIaHasbjKYNCufEIV-aQUNi8Bc6QIos58mWAwtS5W4h4LrY8/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/AVvXsEiZVo_LA98WtV8noxea-zlvve296F28268ZNfmkikonKszL2I1A7UNQkXKvxc2Ln4LuXsIvg_D3mbaZ1CLGJLROtThHTyRO5EjTVsGc6tWATe8NhiWLjKy0am5xPQPtrgkr9iY956g7Ojk/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/AVvXsEg4TNhfyo0cfoi6rpqgFEKctrOcOWKyFdZnEwOhZesy1voKG4aAGx2Rh_PAH8C2dceRpms5L0DYf3l8bhNIQsFXuk8AhisEIaHasbjKYNCufEIV-aQUNi8Bc6QIos58mWAwtS5W4h4LrY8/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/AVvXsEiZVo_LA98WtV8noxea-zlvve296F28268ZNfmkikonKszL2I1A7UNQkXKvxc2Ln4LuXsIvg_D3mbaZ1CLGJLROtThHTyRO5EjTVsGc6tWATe8NhiWLjKy0am5xPQPtrgkr9iY956g7Ojk/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;
}
Kemudian tambahkan kode HTML berikut di bawah <div id='header-wrapper'> (Cari terlebih dahulu kode yang bercetak tebal)
Perhatikan kode yang berwarna Merah dan Biru, silahkan ganti kode tersebut dengan kebutuhan anda.
Jika sudah selesai, silahkan Simpan Template, dan lihat perubahannya pada blog sobat. (Jkt/2012)
Posted in: Seputar Blog
0 Comments
