Sabtu, 07 September 2013

Cara Membuat Multi Tab Di Blog

Multi Tabs digunakan sebagai penghemat tempat untuk menaruh widget. Fungsi Multi Tabs Hampir sama dengan footer, Jika Footer Terletak dibawah dan Multi Tabs Terletak di sidebar dan sama-sama Tempat Menyimpan Widget yang tidak terlalu dibutuhkan.

Keuntungan dari multi tabs ini adalah tidak terlalu pusing untuk memasangnya, lebih stylish, Judul mudah diganti. Berminat untuk memasangnya?, Berikut Cara untuk memasangnya:


  • Silahkan Login Ke Blogger Anda.
  • Setelah itu, Klik Menu Template, Terlebih Dahulu Anda Backup Template Anda, Lalu, Klik Tombol Edit HTML.
  • Cara Kode ]]></b:skin> dengan menekan CTRL+F atau dengan F3.
  • Masukan Script Berikut ini dibawah kode ]]></b:skin> --> YBB Multi Tabs
  • Setelah itu Masukan Kode berikut ini Diatas Kode ]]></b:skin> :
/*----- YBB Multi Tabs Widget ----*/
.tabs-widget{list-style:none;list-style-type:none;margin:0 0 10px 0;padding:0;height:40px}
.tabs-widget li{list-style:none;list-style-type:none;margin:0 0 0 4px;padding:0;float:left}
.tabs-widget li:first-child{margin:0}
.tabs-widget li a{color:#8F8C7C;background:url(http://1.bp.blogspot.com/-0Y7o-ojWUJc/UU5nof-426I/AAAAAAAADCI/kTI5rXkUicc/s1600/tabs-widget.png) left top repeat-x;padding:12px 14px;display:block;text-decoration:none;font:bold 11px Arial,Helvetica,Sans-serif;text-transform:uppercase}
.tabs-widget li a:hover,.tabs-widget li a.tabs-widget-current{background:url(http://1.bp.blogspot.com/-0Y7o-ojWUJc/UU5nof-426I/AAAAAAAADCI/kTI5rXkUicc/s1600/tabs-widget.png) left -140px repeat-x;color:#797979;text-decoration:none}
.tabs-widget-content{}
.tabviewsection{margin-top:10px;margin-bottom:10px;}

  •  Cari Kode Berikut ini:
<div class='column-right-inner'>

Jika Tidak Ketemu Cari kode berikut ini:

<div id='sidebar-wrapper'>
Setiap Template mempunyai Kode yang berbeda-beda.
  • Masukan Kode Berikut ini dibawah salah satu Dari dua kode diatas :
<div class='tabviewsection'>
<script type='text/javascript'>
jQuery(document).ready(function($){
$(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();
$(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a&quot;).addClass(&quot;tabs-widget-current&quot;).show();
$(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id:first&quot;).show();
$(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).click(function() {
$(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).removeClass(&quot;tabs-widget-current a&quot;);
$(this).addClass(&quot;tabs-widget-current&quot;);
$(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();
var activeTab = $(this).attr(&quot;href&quot;);
$(activeTab).fadeIn();
return false;
});
});
</script>
<ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'>
<li><a href='#widget-themater_tabs-1432447472-id1'>About</a></li>
<li><a href='#widget-themater_tabs-1432447472-id2'>Tags</a></li>
<li><a href='#widget-themater_tabs-1432447472-id3'>Archives</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>
<div style='height:5px;clear:both;'/> 
  • Setelah itu, Klik Tombol Simpan Template.

Selamat Mencoba,
Salam Sukses,

thanks for Your-BelajarBLOG

Please Give Us Your 1 Minute In Sharing This Post!
SOCIALIZE IT →
FOLLOW US →
SHARE IT →

Ditulis Oleh : Alfrandhy dharwisi // 18.04
Kategori:

Comments
0 Comments

0 komentar:

Poskan Komentar

umpan balik saya hargai dan saya akan membalas pertanyaan yang menyangkut artikel di Blog ini sesegera mungkin

1. Komentar SPAM akan dihapus segera setelah saya review
2. Pastikan untuk klik "Berlangganan Lewat Email" untuk membangun kreatifitas blog ini
3. Jika Anda memiliki masalah cek dulu komentar, mungkin Anda akan menemukan solusi di sana
4. Bila menyebarluaskan artikel ini harap cantumkan baclink nya

Bila anda senang dengan artikel ini silahkan Klick Disini atau berlangganan geratis Artikel dari blog ini. Pergunakan vasilitas diatas untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui komentar atau share sesuai dengan artikel diatas.

 

Maaf Kenyamanan Anda Terganngu Website Sedang Direnobvasi

×

Powered By Facebook and Get This Widget

Site info

My Friend

lingkaran google plus