Senin, 18 November 2013
Cara Membuat Simple Tabber di Sidebar
Kembali lagi di triks dan trik blogging, kali ini saya akan share ke sobat cara membuat simple tabber di sidebar seperti gambar di samping. Gadget ini sendiri berfungsi dapat menghemat space atau ruang pada siderbar di blog sobat dan tentunya mempermudah pengunjung dalam mencari apa saja isi pada blog sobat.
Untuk memasang simple tabber di sidebar ikuti tutorial berikut ini.
1. Login dulu ke blogger atau klik di sini .widget-wrapper2{ .widget-tab { .widget-tab ul { .active-tab{ ul.tab-wrapper { ul.tab-wrapper li{ 6. Copy script di bawah ini dan letakkan di atas kode
2. Pilih template
3. Pilih edit template
4. Centang Expand widget template
5. Copy script di bawah ini dan letakkan di atas kode ]]></b:skin>
tampilkan script berikut ini
border:1px solid #494e52;
background-color:#636d76;
padding:10px;
}
background:#c9dbdd;
font-family:Arial,Helvetica,sans-serif;
padding:5px !important;
}
margin:0px;
padding:0px 5px 0 5px;
}
.widget-tab ul li {
list-style:none;
border-bottom:1px dotted #a4bddf;
padding-top:4px;
padding-bottom:4px;
font-size:12px;
}
.widget-tab ul li:last-child {
border-bottom:none;
}
.widget-tab ul li a {
text-decoration:none;
color:#3e4346;
}
.widget-tab ul li a small {
color:#8b959c;
font-size:9px;
text-transform:uppercase;
font-family:Verdana, Arial, Helvetica, sans-serif;
position:relative;
left:4px;
top:0px;
}
.tab-content ul li a:hover {
color:#a59c83;
}
.tab-content ul li a:hover small {
color:#baae8e;
}
background:#FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2_GdLflTyqxRS2cqQXYWzed7Fb_jqeIwg5oGgwisO1L58OvRKNleEN2jD16MO5qIYRimKlPhyAbEcxggcb9jCcKCoukD8sYEAmX8-MMNYDgG0RkiyAiSgv6ail5PKZxP0BXMDl7pxCBQ/s1600/sidebar.png) repeat-x scroll left bottom !important;
color:#282E32 !important;
}
margin:0px; padding:0px;
margin-top:5px;
margin-bottom:6px;
}
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjudbnA-knz5VgCsHRF237gk3isLgTgQN8pj7EYPXw7vlE3XSuwIXVe6QwZ-0rVEWQT84ohT-hRRsbUEG9qOQqw0LMNMU-iFtkLiC3Cg93X_mxF6XnJHo6gcp2BblpWjufcK17wKMuzLZU/s1600/menu-m1.png) repeat-x top;
color:#FFF;
cursor:pointer;
display:inline;font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:9px;
font-weight:700;
line-height:2em;
list-style-image:none!important;
list-style-position:outside!important;
list-style-type:none!important;
margin-right:1px;
text-align:center;
text-decoration:none;
text-transform:uppercase;
padding:8px 14px
}

<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js type=text/javascript/>
<script type=text/javascript>
var starttab=0;
var endtab=3;
var sidebarname="sidebar";
</script>
<script src=http://johnytemplate.googlecode.com/files/tabber.js type=text/javascript/>
7. Dan yang terakhir simpan/save template.
Selamat mencoba
Tidak ada komentar:
Posting Komentar