Membuat Menu Tab di Sidebar untuk Mempercantik Blog

Saat ini blog template yang bisa didownload gratis rata-rata sudah menyediakan untuk menu tab di sidebar biar tampilan blog menjadi lebih cantik.

Namun bila blog teman-teman ada yang belum menggunakan fitur ini, bolehlah dicoba cara dibawah ini.

Cari kode </b:skin>
Letakkan kode berikut diatas kode </b:skin>

/* CSS tab menu jalanlapang.blogspot.com */
    .widget-wrapper2{ 
    border:1px solid #494e52; 
background-color:#B20000; /*636d76*/ 
    padding:10px; 
    } 
     
    .widget-tab { 
    background:#c9dbdd; /* warna background */ 
    font-family:Trebuchet MS,Arial,Helvetica,sans-serif; 
    padding:5px !important; 
    } 
     
    .widget-tab  ul { 
    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;  /* isi tab ke 3 font nya uk.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:12px; 
    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; 
    } 
     
    .active-tab{ 
    background:#FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1w4Bw2g1pwSEQ2DP7-MFLpbbCsjIksSwtqu5kcGaKNIoOMXPwjYkXuQCSEmC6ZfA6NwtkiwzvIbUdD9LzBh8f6IdKXEiBq4PmEoPdfIAfAs2GDG2BDl7AG9djmQiZ60aNE4FqiZkNGpQ/s1600/sidebar.png) repeat-x scroll left bottom !important; 
    color:#282E32 !important;         
    } 
     
    ul.tab-wrapper { 
    margin:0px; padding:0px; 
    margin-top:5px; 
    margin-bottom:6px; 
    } 
     
    ul.tab-wrapper li{ 
    background:url(http://1.bp.blogspot.com/-Tjycy0172Vo/Ty7IS2D7OCI/AAAAAAAAFGc    /kx8jg6X9ywE/s1600/menu-m1.png) repeat-x top; 
    color:#FFF; 
    cursor:pointer; 
    display:inline;font-family:Trebuchet MS,Verdana,Arial,Helvetica,sans-serif; 
    font-size:12px;  /* font menu tab */
    font-weight:200; 
    line-height:2em; 
    list-style-image:none!important; 
    list-style-position:outside!important; 
    list-style-type:none!important; 
    margin-right:9px; 
    text-align:center; 
    text-decoration:none; 
    text-transform:uppercase; 
    padding:8px 14px 
    } 
/* Tutup CSS tab menu jalanlapang.blogspot.com */

Cari kode </head>
kode di bawah ini diatas kode </head>

<!--Tab menu jalanlapang.blogspot.com-->
<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=2;
var sidebarname=&quot;sidebar&quot;;
</script>
<script src='http://yourjavascript.com/229125112341/tabber.js' type='text/javascript'/>
<!--Tutup Tab menu jalanlapang.blogspot.com-->

Tweet