Cara membuat Tab View di sidebar blog

Salam sukses selalu buat sobat semua, Belajar Komputer Melalui Internet saat ini akan sedikit membahas tentang Cara membuat Tab View di sidebar blog dan semoga artikel ini bermanfaat.

---

Cara membuat Tab View di sidebar blog, lagi-lagi tutorial yang saya posting, namun tidak jadi masalah kayanya ini hak saya mau mosting apapun asal tidak melanggar aturan. postingan kali ini diambil dari pengalaman saya dalam membuat tab view di sidebar dan tutorial ini saya dapatkan dari sebuah template blogger gratisan yang sudah lama sekali saya simpan jadi kayanya sudah ga usah disebutkan lagi siapa pembuat template tersebut toh sayapun sudah lupa dari blog siapa saya mendownloadnya.

Ok. mungkin sobat dapat melihat dulu contoh tampilannya yang ada di sidebar blog ini, itu tandanya tutorial ini berjalan dengan baik, karena tak jarang seorang blogger memposting sebuah tutorial itu tidak berdasarkan pengalamannya sendiri sehingga tak jarang sebuah tutorial itu tidak bisa berjalan sesuai keinginan. 

Kelemahan dan kelebihan tab view ini:
Kelemahannya, tabview ini akan berjalan dengan normal setelah halaman telah terbuka semua sehingga terkadang apabila halaman kita loadingnya lama maka widget yang terbuka adalah semuanya tanpa penggalan tab, ini dapat dilihat dari posisi aktif tab tersebut yang berwarna merah pada tab pertama tidak nampak.
Kelebihannya, yaitu pada pemasangan widget setelah pemasangan kode ini selesai dimana kita dapat memasang widget dengan mudah sesuka kita langsung dari halaman tata letak dan tidak perlu melalui edit HTML terkecuali mau merubah judul Tab. pada setiap judul kita bisa memasang widget lebih dari satu.

Mungkin perlu jadi catatan, dalam membuat tab view ini yang harus diperhatikan adalah class dari sidebarnya dimana untuk tutorial ini saya menggunakan class='sidebar' nah buat sobat yang menggunakan template dengan classnya tidak menggunakan kode "sidebar" maka sesuaikan saja karena mungkin ada perbedaan, sobat boleh melihatnya pada bagian section class blog sobat yang kodenya seperti ini: <b:section class='sidebar' id='sidebarright' preferred='yes'> lihat classnya dan abaikan idnya.

Kode tersebut biasanya ada dibawah kode <div class='widget-wrap'> nah itu contoh di template saya di template sobat cari saja mungkin kodenya bukan "widget-wrap" namun pastikan saja kalau itu merupakan kode bagian sidebar biasanya seperti <div id='rsidebar-wrapper'> atau <div id='sidebar-wrapper'> intinya kode tutorial ini sobat simpan dibawahnya kode tersebut.

Namun sebelun pada kode yang harus disimpan dibawah kode tersebut diatas sobat perlu menyimpan kode CSSnya terlebih dahulu. ikuti caranya sebagai berikut:

Langkah Membuat Tab View di sidebar blog:

Buka template sobat di blogger kemudian edit HTML, lanjutkan/process, lalu cari kode ]]></b:skin> , taruh kode dibawah ini tepat diatasnya.

.tabs-widget{list-style:none;list-style-type:none;margin:0 7px; padding:0;height:24px; background:#eee;width:332px;}
.tabs-widget li{list-style:none;list-style-type:none;margin:0; padding:0;float:left;}

.tabs-widget li:first-child{margin:0;}
.tabs-widget li a{color:#6B6B6B;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiu8V74i9i0f6k93cs1gRk_nPTVqiQPuKd9Le4GKbtSpkzF5mHsg0fxq0xRbyKjwXzGcQiap3yK1zJhDxFsKfsSNxqz2Xnm2kiahnkqhPff-Exbn4Xka6cKhcvi9dMFwa7bz7FhFG0KxG0/s1600/tabs-widget-bg.png) left top repeat-x;padding:4px 5px;display:block;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif; text-align:center;}
.tabs-widget li a:hover,.tabs-widget li a.tabs-widget-current{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiu8V74i9i0f6k93cs1gRk_nPTVqiQPuKd9Le4GKbtSpkzF5mHsg0fxq0xRbyKjwXzGcQiap3yK1zJhDxFsKfsSNxqz2Xnm2kiahnkqhPff-Exbn4Xka6cKhcvi9dMFwa7bz7FhFG0KxG0/s1600/tabs-widget-bg.png) left -126px repeat-x;color:#FFF;}
.tabs-widget-content{background:#fff;}
.tabviewsection{margin:3px 0;}

Setelah itu baru sobat cari kode yang dibahas diatas tadi cari kode seperti ini <div id='sidebar-wrapper'> atau sejenisnya. letakan kode dibawah ini tepat dibawah kode tersebut:

<div class='tabviewsection'>
<script type='text/javascript'>jQuery(document).ready(function(a){a(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();a(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a&quot;).addClass(&quot;tabs-widget-current&quot;).show();a(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id:first&quot;).show();a(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).click(function(){a(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).removeClass(&quot;tabs-widget-current a&quot;);a(this).addClass(&quot;tabs-widget-current&quot;);a(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();var b=a(this).attr(&quot;href&quot;);a(b).fadeIn();return false})});</script>
<ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'>
<li style='border-right:2px solid #fff;'><a href='#widget-themater_tabs-1432447472-id1'>Judul Widget</a></li>
<li style='border-right:2px solid #fff;'><a href='#widget-themater_tabs-1432447472-id2'>Judul Widget</a></li>
<li style='border-right:2px solid #fff;'><a href='#widget-themater_tabs-1432447472-id3'>Judul Widget</a></li>
<li><a href='#widget-themater_tabs-1432447472-id4'>Judul Widget</a></li>
</ul>
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'>
</b:section>
</div>
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'>
</b:section>
</div>
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id3'>
<b:section class='sidebar' id='sidebartab3' preferred='yes'>
</b:section>
</div>
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id4'>
<b:section class='sidebar' id='sidebartab4' preferred='yes'>
</b:section>
</div>

sidebar ini yang harus sobat sesuaikan dengan class widget sobat, itu kalau beda/bukan sidebar kodenya.

Judul Widget berwarna merah isikan judul tab sobat misal popular post kemudian masukan sesuai dengan nomor IDnya kalau sobat membuat judul popular pos di "id1" lihat tabs-1432447472-id1'>Judul Widget</a> maka sobat harus memasukan widget popular post tersebut di kotak widget "id1" lihat

<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'>
</b:section>
</div>

Dalam tampilan tata letaknya akan seperti ini:

Nah apabila sobat menyimpan judul popular pos pada 1432447472-id1 maka sobat harus menambahkan Widgetnya pada "Tambah gadget" yang pertama dan untuk yang lainnya atur sesuai urutan.
lihat contoh gadget saya:

Itu contoh nya dan sobat bisa mengaturnya dimana sobat harus sesuaikan antara judul widget yang berwarna merah tadi dengan widgate yang mau dimasukan pada Tambah Gadget di tata letak. selain widget pertama yang sesuai dengan judul widgetnya, sobat bisa menambahkan widget lainnya setelahnya judul widget tersebut.
Apabila sobat mau nambah atau mengurangi jumlah Tabnya maka kalau menghapus sobat hapus kode
terakhir dari judul

<li><a href='#widget-themater_tabs-1432447472-id4'>Judul Widget</a></li>

dan kode tambah gadgetnya

<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id4'>
<b:section class='sidebar' id='sidebartab4' preferred='yes'>
</b:section>
</div>

Atau kalau mau menambahkan maka kedua kode diatas sobat copy dan pastekan tepat dibawah kedua kode tersebut setelah itu sobat ganti idnya jadi 5 dikedua kode tersebut dan juga mengganti kode sidebartab4 menjadi sidebartab5.

Mungkin sampai disini dulu Belajar Komputer Melalui Internet tentang Cara membuat Tab View di sidebar blog kali ini, semoga bermanfaat bagi Anda.

DAPATKAN ARTIKEL VIA EMAIL

Masukan Alamat Email Sobat:

Delivered

BACA JUGA ARTIKEL TERKAIT LAINNYA

Dipublish oleh : Abdul Kohar - Jatinangor Rating 5 Belajar Komputer Melalui Internet, Updated at: 00:12