Cara Cepat Membuat Multi Tab Widget Tanpa Edit HTML

Written By Risal Fajar on Saturday, July 26, 2014 | 2:38 PM

Multi Tab Widget adalah sebuah widget di mana sebuah widget bisa menampung widget lainnya, contohnya anda bisa lihat widget di sidebar Re-techs ini. Pada satu widget terdapat 3 widget di dalamnya.

Cara Cepat Membuat Multi Tab Widget Tanpa Edit HTML
Kebanyakan tutorial cara membuat multi tab widget atau multi view widget ini sangat ribet, harus edit html lah, css lah, b skin lah, sampai para pemula seperti saya ini pun kebingungan. Bahkan bila caranya benar pun belum tentu berhasil.

Oleh karena itu saya membuat tutorial ini, dengan tutorial ini hanya diperlukan satu widget saja tanpa mengotak-atik bagian Edit HTML, CSS, dan lainnya. Cukup dicopy paste di widget saja.

Semoga tutorial dari ini bermanfaat.







Langkah membuat multi view widget tanpa edit HTML

  1. Login ke Blogger.com (kalo ini sih pasti ya, wkwk)
  2. Masuk ke Tata Letak
  3. Klik Tambahkan Gadget
  4. Pilih HTML/Javascript
  5. Masukkan kode di bawah ini dan jangan mengganti bagian judul widget (biarkan kosong)
<style type="text/css">
.tabber {
 padding: 0px !important;
 border: 0 solid #bbb !important;
}
.tabber h2 {
 float: left;
 margin: 0 1px 0 0;
 font-size: 12px;
 padding: 3px 5px;
 border: 1px solid #bbb;
 margin-bottom: -1px; /*--Pull tab down 1px--*/
 overflow: hidden;
 position: relative;
 background: #e0e0e0;
 cursor:pointer;
}
html .tabber h2.active {
 background: #fff;
 border-bottom: 1px solid #fff; /*--"Connect" active tab to its content--*/
}
.tabber .widget-content {
 border: 1px solid #bbb;
 padding: 10px;
 background: #fff;
 clear:both;
 margin:0;
}
.codewidget, #codeholder {
 display:none;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bloggertabs0.1_min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 $('#codeholder').bloggerTabber ({
  tabCount : 3
 });
});
</script>
<!-- to make sure the widget works, do not alter the code below -->
<div id='codeholder'><p><a href="http://www.bloggersentral.com/" target="_blank" rel="nofollow"></a></p></div>

Letakkan widget yang ingin dimasukkan di bawah script ini


Catatan :

  • Karena blog ini anti copas, copy kodenya di sini
  • Pada bagian hijau silahkan ganti kode warna nya, kode warna pada 3 bagian tersebut usahakan sama
  • Pada bagian merah, itu adalah untuk loading jQuery library, kalau blog anda sudah mempunyainya        (biasanya digunakan untuk slider) maka tidak perlu kode ini. Tapi memakainya lagi pun tidak apa-apa
  • Pada bagian kuning, adalah jumlah tab yang ingin dimasukkan, silahkan diedit sesuai selera
  • Jangan ganti struktur kode lain selain yang disebutkan di atas, hal ini bisa membuat kode tidak bekerja

Sekian tutorial cara membuat multi view widget tanpa edit HTML ini, semoga bermanfaat.


Blog, Updated at: 2:38 PM