Kali ini kita akan membahas cara membuat tab menu pada website khususnya pada Blogspot. Hal ini cukup menarik karena Blogspot tidak menyediakan menu-menu pada halaman blog sehingga kita harus membuatnya secara manual baik dengan menggunakan CSS maupun dengan Javascript. Berikut langkah-langkah membuat tab menu pada website:
- Copy paste kode CSS berikut pada website Anda. Jika pada Blogspot, copy paste sebelum kode]]> pada template Anda. Jangan lupa membackup terlebih dahulu template Anda supaya bisa dikembalikan jika terjadi kesalahan.
/* ######### CSS untuk Shade Tabs ######### */
.shadetabs{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 12px Verdana;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}
.shadetabs li{
display: inline;
margin: 0;
}
.shadetabs li a{
text-decoration: none;
position: relative;
z-index: 1;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid #778;
color: #2d2b2b;
background: white url(shade.gif) top left repeat-x;
}
.shadetabs li a:visited{
color: #2d2b2b;
}
.shadetabs li a:hover{
text-decoration: underline;
color: #2d2b2b;
}
.shadetabs li a.selected{ /*selected main tab style */
position: relative;
top: 1px;
}
.shadetabs li a.selected{ /*selected main tab style */
background-image: url(shadeactive.gif);
border-bottom-color: white;
}
.shadetabs li a.selected:hover{ /*selected main tab style */
text-decoration: none;
}
.tabcontent{
display:none;
}
@media print {
.tabcontent {
display:block !important;
}
}
/* ######### CSS untuk Inverted Modern Bricks II Tabs ######### */
.modernbricksmenu2{
padding: 0;
width: 362px;
border-top: 5px solid #D25A0B; /*Brown color theme*/
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}
.modernbricksmenu2 ul{
margin:0;
margin-left: 10px; /*margin between first menu item and left browser edge*/
padding: 0;
list-style: none;
}
.modernbricksmenu2 li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform:uppercase;
}
.modernbricksmenu2 a{
float: left;
display: block;
font: bold 11px Arial;
color: white;
text-decoration: none;
margin: 0 1px 0 0; /*Margin between each menu item*/
padding: 5px 10px;
background-color: black; /*Brown color theme*/
border-top: 1px solid white;
}
.modernbricksmenu2 a:hover{
background-color: #D25A0B; /*Brown color theme*/
color: white;
}
.modernbricksmenu2 a.selected{ /*currently selected tab*/
background-color: #D25A0B; /*Brown color theme*/
color: white;
border-color: #D25A0B; /*Brown color theme*/
}
.tabcontent{
display:none;
}
@media print {
.tabcontent {
display:block !important;
}
}
/* ######### CSS untuk Indented CSS Tabs ######### */
.indentmenu{
font: bold 11px Arial;
width: 100%; /*leave this value as is in most cases*/
}
.indentmenu ul{
margin: 0;
padding: 0;
float: left;
/* width: 80%; width of menu*/
border-top: 0px solid navy; /*navy border*/
background: #e0e0e0 url(htp://h1.ripway.com/sinaga/gambar/indentbg.gif) center center repeat-x;
}
.indentmenu ul li{
display: inline;
}
.indentmenu ul li a{
float: left;
color: #000000; /*text color*/
padding: 5px 11px;
text-decoration: none;
border-right: 0px solid navy; /*navy divider between menu items*/
}
.indentmenu ul li a:visited{
color: #000000;
}
.indentmenu ul li a:hover{
color: #66B5FF;
}
.indentmenu ul li a.selected{
color: #66B5FF !important;
padding-top: 6px; /*shift text down 1px*/
padding-bottom: 4px;
background: #e0e0e0 url(http://h1.ripway.com/sinaga/gambar/menutabbg.gif) center center repeat-x;
}
.tabcontentstyle{ /*style of tab content oontainer*/
border: none;
width: 450px;
margin-bottom: 1em;
padding: 10px;
font: normal 11px Arial;
}
.tabcontent{
display:none;
}
@media print {
.tabcontent {
display:block !important;
}
} - Selanjutnya copy paste struktur berikut pada website atau blog Anda sebelum kode :
Silahkan ganti tulisan "Tab 1", "Tab 2", dst dengan nama-nama tab menu yang Anda inginkan.
Coba perhatikan struktur Tab 1:
Tab 1
class="selected", artinya adalah tab tersebut menjadi tab yang terbuka pertama kali.
rel="dog1", artinya tab tersebut dihubungankan dengan "dog1".
Adapun "dog1" didefenisikan sebagai isi dari Tab 1. Perhatikan struktur yang berwarna orange. Kita memberi atribut ID pada struktur div (kotak) sebagai "dog1". Artinya, isi dari div (kotak) tersebutlah yang akan dihubungkan dengan "Tab 1" dan menjadi isi dari tab tersebut.
.......Kemudian mendefenisikan "dog3" sebagai is "Tab 3", sehingga struktur lengkapnya menjadi:
dog1" style="font-size:11px; padding:5px;" class="tabcontent">
ITS diisukan menjadi kampus BHP. Siapkah mahasiswa ITS menghadapinya?Menolak atau menerima?
Klik untuk memilih tab akhir
dog2" style="font-size:11px; padding:5px;" class="tabcontent">
Isi Tab 2
dog3" style="font-size:11px; padding:5px;" class="tabcontent">
Isi Tab 3
- Tab 1
......Misalkan ingin membuat Tab Menu bergaya Indented, maka ganti menjad:
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.