widget tabber accordion

Widget tabber accordion for blogspot, cara membuat widget tabber accordion ini sangat beragam. Menggunakan widget tabber accordion pada halaman blog khususnya blogspot sangat bagus disamping tampilan dari widget tabber accordion ini yang begitu menarik, dapat juga mempersimpel tata letak berbagai widget bila kita memasangnya paa widget tabber accordion tersebut. Oke untuk melihat widget tabber accordion pada tutorial kali ini, silahkan klik demo dibawah ini, bila anda tertarik untuk memasangnya paa blog anda silahkan simak tutorial dibawah ini , langsung saja menuju TKP widget tabber accordion.

Demo

Install Program CSS

• Login ke dashboard anda
• Masuk ke "TEMPLATE" lalu klik " Edit HTML "
• Cari code ]]></b:skin> 
• Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi atau bila template blog anda memakai </style> silahkan pastekan kode CSSnya tepat diatas </style> template anda.

/*****************************************
Name :Tabber Accordion
By : Rivai Silaban | Blog Design
Update : Jumat, 25 Oktober 2013
******************************************/
#bdrsaccordion {
background:#333 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqc5lHGY23Cb0WN3FH1Q6_OmVCB1lba0E8Ham-W1CqfGjeFAri46henWn7onHMAdD7DZSdQ2Uk6Wj1xlq2hG9nZqYcTYmqMnKBt-Tbp6SxATq64GwJ7zITXnND-dQYx0tKM1lgh2LFvtY/s1600/bgtab.png') 0 0;
width: 300px;
border:1px solid #333;
-background:#666;
}
#bdrsaccordion h2 {
background:#ccc url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkTCf7KEalitVa07HxblLUjAPeK1xCqUvRzhovOezF0Gk19UCY7jeFuX0bXqd19375ycoiPxRaTh4F7V3GLHyTc5hGFGcLHvFGb0OROQkUdoiRKXWxmNv5h1fYqb49eawGrztaL0JQbfw/s1600/h2.png');
margin:0;
padding:5px 15px;
font-size:16px;
font-weight:bold;
border:1px solid #fff;
border-bottom:1px solid #ddd;
cursor:pointer;
font-family: "Courier New", Courier, monospace;
color: #000000;
font-style: normal;
text-shadow: 0 -1px 1px #ccc;
}
#bdrsaccordion h2.current {
cursor:default;
background-color:#fff;
}
#bdrsaccordion .conten {
border:1px solid #fff;
border-width:0 2px;
display:none;
height:150px;
padding:15px;
color:#000000;
font-size:11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
line-height: normal;
}
#bdrsaccordion .conten h3 {
font-weight:bold;
margin:0 0 -5px 0;
font-size:16px;
color:#990000;
font-family: Georgia;
font-style: italic;
text-shadow: 0 -2px 2px #999;
}

Install Script

1. Setelah anda selesai menyematkan CSSnya saatnya anda menyematkan kode scriptnya pada tag html/xml template anda.
2. Pada Edit HTML template anda silahkan cari kode </head>
3. Setelah ketemu copy script dibawah ini dan pastekan diatas kode </head>

<script type="text/javascript" src="http://yourjavascript.com/010013651265/jquery.js"></script>

1. Setelah anda selesai menyematkan script yang pertama, saatnya menyematkan script yang kedua pada template anda.
2. Pada Edit HTML template anda silahkan cari kode </body>
3. Setelah ketemu copy script dibawah ini dan pastekan diatas kode </body>

<script>
$(function() {$("#bdrsaccordion").tabs("#bdrsaccordion div.conten", {tabs: 'h2', effect: 'slide', initialIndex: null});
});
</script>

Install Program Tag HTML

Untuk memanggil widget Random Post tersebut agar tampil pada halaman blog kesayangan anda silahkan simak penjelasan dibawah ini ;

• Anda masih berada dihalaman dasbor lalu anda menuju "TATA LETAK "
• Silahkan klik "Add Gadget "( Tambahkan gadget )
• Pilih " HTML / JavaScript "
• Copy Code HTML dibawah ini, paste pada gadget anda.
  

<div id="bdrsaccordion">
<!-- Rivai Silaban | BLOG DESIGN TAB 1-->
<h2 class="current">Tab Pertama</h2>
<div class="conten" style="display:block">
<h3>Judul kontent h3</h3>
<p>
<strong>Text atau tulisan dengan kode &lt;strong&gt;</strong>
</p>
<p style="clear:both">
Isi dengan tulisan atau aplikasi yang anda perlukan pada kolom ini, bila anda mengalami kesulitan dalam memasang widget ini silahkan hubungi admin atau share bersama kami melalui form komentar dibawah..
</p> </div>

<!-- Rivai Silaban | BLOG DESIGN TAB 2-->
<h2>Tab Kedua</h2>
<div class="conten">
<h3>Judul kontent h3</h3>
<p>
Isi dengan tulisan atau aplikasi yang anda perlukan pada kolom ini,
</p>
<p>
<strong>Text atau tulisan dengan kode &lt;strong&gt;</strong>
</p>
<p>
bila anda mengalami kesulitan dalam memasang widget ini silahkan hubungi admin atau share bersama kami melalui form komentar dibawah..
</p>
</div>

<!-- Rivai Silaban | BLOG DESIGN TAB 3-->
<h2>Tab Ketiga</h2>
<div class="conten">
<h3>Judul kontent h3</h3>
<p>
Isi dengan tulisan atau aplikasi yang anda perlukan pada kolom ini, bila anda mengalami kesulitan dalam memasang widget ini silahkan hubungi admin atau share bersama kami melalui form komentar dibawah..
</p>
<p>
<strong>Text atau tulisan dengan kode &lt;strong&gt;</strong>
</p>
</div></div>

Keterangan Gambar

• Silahkan anda edit kembali kode tersebut untuk menyesuaikan tampilannya terhadap thems blog anda
• Isi text pada demo silahkan anda ganti sesuai dengan kebutuhan anda.
  

Kesimpulan

Tabber engan efect accordion selain mempersimpel tempat widget tampilan yang menarik juga merupakan andalan dari widget ini.

Bila anda mengalami masalah dalam pemasangan widget navigasi gradient style blogspot ini, atau mendapat kode yang error silahkan hubungi saya atau bisa juga share bersama saya di form komentar dibawah. Pergunakan semua fasilitas yang ada di blog ini untuk mempermudah anda.

Tabber Accordion for Blogspot
Jumat, 25 Oktober 2013
Rivai Silaban | Blog Design

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter

Di posting oleh : Unknown Update pada : 12:51 PM