Home » Blogging » Memasang Tab View Pada Sidebar

Memasang Tab View Pada Sidebar

Pemasangan tabber pada sidebar sangat berguna karena dapat menghemat space dalam sebuah blog, sehingga akan terlihat lebih rapi. Banyak cara untuk memasang tab view ini, salah satunya yang akan saya jelaskan berikut ini. Pemasangan Tab View ini sangat sederhanaserta tidak memperberat loading blog.
tab view pada sidebar

 Untuk hasil dari Tab view ini akan terlihat seperti gambar diatas, dan untuk demonya bisa klick disini. Berikut cara memasang Tab View pada sidebar:
  • Login ke blogger dengan akun anda
  • Di dashboard klik Tata Letak > pilih Edit HTML centang expand widget templates
  • Jangan lupa backup dulu template anda dengan mengklik Download Template Lengkap.
  • Letakkan kode berikut di atas kode ]]></b:skin>
.widget-wrapper2
{
border:1px solid #494e52;
background-color:#636d76;
padding:10px;
}

.widget-tab
{
background:#c9dbdd;
font-family: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;
}

.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; }

.active-tab
{
background:#FFFFFF
url(
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS2nvj8sXjrQ_ylFHYW1CB164PrPI6YX46AJnaTFTBR5lzZO9L7hJTilffTx6HDbvo2yVAKUQikIMeVgZAwYrtIogeRGNSX6za3-dZ8z0RanYU29mfeJPz0gcJm1EoeDot3cA_wqwdFVU/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(
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi61FVHTcXkiO6kyjmtYGBBb-fiQWR6TqXNw-sdFO4uk_31zaoA4Zcie6lJItathN8-wmjZQkCAxmHRG2u8Ly-KQN0LPyG68Hit1Hn1_pDjZO-VUkZ9S_g2Kiiwayfbh2IWEvECrYebJP8/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
}

  • Tabber ini butuh sebuah jquery.min.js untuk bisa bekerja dengan baik, anda harus menambahkan kode di bawah ini diatas </head> :
<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=&quot;sidebar&quot;;
</script>

<script src='http://script-java.googlecode.com/files/tabber.js' type='text/javascript'/>

Keterangan :
var starttab=0;
var endtab=3;
var sidebarname="sidebar";
Starttab adalah nomor awal untuk widget yang Anda pilih, mulai menghitung dari 0. Endtabadalah jumlah untuk widget terakhir yang ingin ditampilkan dalam tabber. Endtab=3 berarti widget yang ditampilkan dalam tabber ada 4 (0, 1, 2, 3 empat kan jumlahnya).
Sidebarname adalah id sidebar letak tabber nantinya, bisa anda letakkan di kiri menggantinya dengan sidebarleft atau bisa juga diletakkan di tengah, yang perlu diperhatikan Anda harus mencari id dimana tabber ini akan diletakkan, biasanya tempatnya seperti kode di bawah ini (perhatikan yang warna kuning) :
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
Posted by at 5:26 PM
Labels:
Memasang Tab View Pada Sidebar | Unknown | 5

0 comments:

Post a Comment