Cara Membuat Tabber Sederhana ( Tab View ) - Hallo sahabat Tutorial Blog dan SEO, Pada sharingTutorial SEO dan Blog kali ini yang berjudul Cara Membuat Tabber Sederhana ( Tab View ), saya telah menyediakan berbagai macam Tips dan Trick tutorial Blog dan Optimasi seo dari berbagai sumber yang terbukti bagus. mudah-mudahan isi postingan Tutorial blog dan SEO yang saya tulis ini dapat anda pahami. okelah, ini dia artikelnya.

Penyanyi : Cara Membuat Tabber Sederhana ( Tab View )
Judul lagu : Cara Membuat Tabber Sederhana ( Tab View )

Cara Membuat Tabber Sederhana ( Tab View )

Artikel Widget,

Bagaimana Ya cara agar recent pos, popular post dan comments dapat menyatu ? / tolong kasih tau caranya dong

Sesuai dengan pertanyaan dari  Icuk Sugiarto Sesa. A diatas, kali ini saya akan berusaha menjawabnya. Atau bagi sobat yang belum tau komentarnya bisa langsung di lihat di sini. Ini juga saya sebarkan untuk sobat  untuk sobat yang bloggerholic. Meskipun kelihatannya sederhana, trik ini bisa sangat berguna dan bisa memberi peluang bagi widget lain untuk berada di bawahnya. Namanya adalah tabber. Tabber ini berfungsi untuk menyatukan beberapa widget sehingga bisa menghemat space. Kalau sobat belum tau, bisa langsung di lihat di samping tulisan ini. Saya menyatukan recent post, popular post dan recent comments sehingga terlihat seperti satu widget.

Cara pemasangannnya bisa dibilang gampang gampang susah. Langsung saja, berikut langkah langkah yang harus sobat ikuti untuk memasang tabber..

1. Login ke blogger
2. Masuk ke dashboard..
3. Pilih rancangan lalu pilih template
4. Pilih edit html
5. Letakkan kode CSS di bawah ini tepat di atas ]]></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/AVvXsEgdT6loyIXQOrFDwuzdh4eaBq6kK9mUmy5fS_4ytxRLYoTYQk1SNkYgM7Ckp_Ri8QYpAATPfMvVnD3LTq4fB-w2RAOUrb1xV8XyjBNEdzkE1d6uDFc9omVzv8NW-ZtDLzVFs_nln5kTC1g/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/AVvXsEivYVbch9uq_jjWARTbUtSHDQfHuLlnVcax9TQgozL76EzL6qqp55uDHEn04AhEZpcOxl2GN6wTZANDjiGZiExhbbkrzy77UDfNjlUUTcySg3pXDoHonGnmem33yWXwo8s7mqYMozeD4WM/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
}  

6. Tabber ini menggunakan efek jquery, makanya sobat harus punya jquery.min.js di html blog sobat. Ada beberapa template yang sudah terinstall jquery ini, bagi yang sudah terinstal lewati saja langkah ini.. Untuk mengeceknya silahkan lihat di atas kode </head>. Kodenya seperti ini..

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>

Versinya bisa berbeda beda.

7. Tambahkan kode ini tepat di bawah script jquery no 6 tadi..

<script type='text/javascript'>
var starttab=0;
var endtab=2;
var sidebarname=&quot;sidebar&quot;;
</script>
<script src='http://johnytemplate.googlecode.com/files/tabber.js' type='text/javascript'/

var starttab adalah nomor wigdet yang dihitung mulai dari 0 (nol). var endtab=2 adalah nomor terakhir widget yang ingin di satukan. Misalnya saya menggunakan seperti kode di atas, maka hasilnya bisa anda lihat di blog ini yaitu 3 widget, recent post, popular post dan recent comment (0 - 1 - 2 => jumlahnya 3). Jadi bisa dibilang 3 widget pertama yang akan menyatu.

var sidebarname diisi dengan id dimana nantinya akan di sertakan sidebarnya. Temukan kode yang kurang lebih seperti di bawah ini..

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>

Lihat yang warna biru di atas, var sidebarname diisi sesuai dengan idnya. Misalnya id di atas adalah sidebarleft, maka di var sidebarname diisi seperti ini..

var sidebarname=&quot;sidebarleft&quot;;

7. Save dan lihat hasilnya.

Reference = creatingwebsite-maskolis.blogspot.com
                   Abu Farhan

Demikianlah Artikel Cara Membuat Tabber Sederhana ( Tab View )

Sekian Tutorial Blog dan Seo Cara Membuat Tabber Sederhana ( Tab View ), mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sekian postingan Tutorial Blog dan Seo kali ini.

Anda sedang membaca artikel Cara Membuat Tabber Sederhana ( Tab View ) dan artikel ini url permalinknya adalah http://tutorialseoandblog.blogspot.com/2012/07/cara-membuat-tabber-sederhana-tab-view.html Semoga artikel ini bisa bermanfaat.

Tweet