Trick n Tips Blogger | Widget Blogger | Template Blogger

Cara Membuat Multi Tabs Di Blogger

by Irsyad Aslam , at 3/24/2013 , has 28 komentar
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaSrz7cNkWo7LZlgBZXeF0os6KxGy3dH2l2ani78-Ms3pl9rSZSWPyiw7LjL51x95P5g7UGZzk1EwxVjYe8VSqIJog19Qf9i8LWM-bOenOqKh-tzq55n_8Q7Usmvg3o8HVo5cm9IssnfNT/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaSrz7cNkWo7LZlgBZXeF0os6KxGy3dH2l2ani78-Ms3pl9rSZSWPyiw7LjL51x95P5g7UGZzk1EwxVjYe8VSqIJog19Qf9i8LWM-bOenOqKh-tzq55n_8Q7Usmvg3o8HVo5cm9IssnfNT/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,




Your-BelajarBLOG
Irsyad Aslam
About
Cara Membuat Multi Tabs Di Blogger - written by Irsyad Aslam , published at 3/24/2013, categorized as Widget . And has 28 komentar
28 komentar Add a comment
makasih gan , ane pake yaaa
kunjung balik juga ya gan :D
Reply Delete
gan, kok gak bisa kodenya yang point ke 2..
kan cari code ini 'column-right-inner', gak ketemu terus aku coba cari kode ini 'sidebar-wrapper', ketemu. terus aku copy paste kode dari agan tepat di bawah kode id='sidebar-wrapper', tapi kok keluar tulisan "Tidak dapat memuat pratinjau template: More than one section was found with id: sidebartab1. Section IDs should be unique"..

Tolong kasih solusinya gan..
Mucul Tulisan "Tidak dapat memuat pratinjau template: More than one section was found with id: sidebartab1. Section IDs should be unique" Mungkin Dikarenakan Penempatan Kode Yang Tidak Benar, Sehingga Mucul Tulisan diatas. dan tergantung pada template yang anda gunakan (struktur kode yang terpasang belum tentu sama dengan penempatan kode ke2), namun penempatan kode ke2 dibawah kode <div id='sidebar-wrapper'> masih bisa diterapkan.


Semoga Berhasil,
Salam Sukes,



Your-BelajarBLOG
Delete
Reply Delete
bro di saya sih work tapi cuman sebagai hiasan aja kalo di klik ga ada yg berubah mohon pencerahannya sob
Apakah di blog anda sudah terpasang plugins Jquery sebelum memasang multitabs diatas?,
Jika belum terlebih dahulu pasang plugins Jquery seperti berikut:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' type='text/javascript'></script>

Semoga Berhasil,
Salam Sukses,



Your-BelajarBLOG
Delete
Pasang script plugin jQuery nya dimana ya?
Delete
Taruh plugin Jquery diatas kode </head> ,

Semoga Berhasil,
Salam Sukses,



Your-BelajarBLOG
Delete
Reply Delete
trus cara naruh gadgetnya gmna gan?
apa langsung di taruh di tata letak atau gmn?
punya saya kog gak berfungsi...

please bantuannya...
Kalau untuk menaruh widgetnya bisa langsung taruh di Tata Letak, Bisa Langsung disesuaikan, Dengan Nama Tabnya,
Coba bisa pasang plugins jquery, Jika sudah, lewati langkah ini,
dan coba ulang dengan benar cara2 diatas.

Salam Sukses,


Your-BelajarBLOG
Delete
Reply Delete
bang irsyad, gmn caranya biar kita bisa klik tab yang kita buat, soalnya aku ambil dari template orang lain (download). Udah aku edit Tab nya sesuai dengan apa yang ku mau, tapi kok ga bisa di klik ya ? mohon pencerahannya u,u
Reply Delete
pasang plugin jquery coba gan..
kalau sudah terpasang sebenanya sudah bisa diklik.
Reply Delete
mantab, ijin share gan
http://apotekacemaxs.com/pengobatan-alami-paru-paru-basah/
Reply Delete
Mantaaap gan informasinya :)
Ijin share http://apotekherbalkita.com/obat-tradisional-varises/
Reply Delete
mantap artikelnya :)
http://jellygamatgoldg31.com/obat-herbal-radang-telinga/
Reply Delete
thanks gan
http://tokoobatherbal23.com/
Reply Delete
Terimakasih atas informasinya sangat bermanfaat :)

http://kedaijellygamatgoldg.com/
Reply Delete
terimakasih infonya gan
http://apotekacemaxs.com/obat-tradisional-radang-paru-paru/
Reply Delete
terimakasih atas infonya gan
http://tokoobatherbal23.com/obat-herbal-benjolan-di-ketiak/
Reply Delete
Thanks infonya gan, izin share :)
http://kedaiacemaxs.com/obat-tradisional-benjolan-di-ketiak/
Reply Delete
terimakasih infonya sob, sukses terus
http://ramuantradisionalkita.com/pengobatan-tradisional-diabetes-melitus/
Reply Delete
keren banget artikelnya gan
http://apotekacemaxs.com/
Reply Delete
Mantaap sekali gan artikelnya, sangat membantu sekali
Izin nyimak saja ya gan :)
http://goo.gl/Y8VrNA
Reply Delete
makasih banyak buat infonya gan,, nice post..

http://goo.gl/z9xiK4 - obat jantung koroner
Reply Delete
Manteep sob untuk informasi artikelnya :)
http://goo.gl/9UzkHw
Reply Delete
Keren sob artikelnya, ditunggu artikel yang lainnya
http://goo.gl/HmEbth
Reply Delete
terimakasih atas tipsnya
http://bit.ly/1EelH4G
Reply Delete
keren banget sob, artikelnya sangat membantu sekali
Izin nyimaks aja sob :)
http://goo.gl/VWOqxm
Reply Delete
the discussion was very interesting to read, awaited the article more interesting yes .. Do not forget to visit the article about the health of the following:

http://blogobattasik.com/cara-pemesanan-ace-maxs/
Reply Delete

Catatan:

• Dilarang Menaruh Link Aktif
• Dilarang Nyepan/Promosi Di Komentar
• Dilarang Berkata Tidak Sopan
• Untuk Menyisipkan Kode, Gunakan Tag <i rel="code">... KODE ...</i>
• Untuk Menyisipkan Kode Panjang, Gunakan Tag <i rel="pre">... KODE ...</i>
• Untuk Menyisipkan Catatan, Gunakan [catatan].. TEKS ...[/catatan]
• Untuk Menyisipkan Gambar, Gunakan [img]URL GAMBAR[/img]

Sebelum Menyisipkan Kode Harap Konversi Kode Sebelum Menuliskan Di Komentar

Bck
Cancel Reply

Followers

Komentar Terbaru

Copyright ©2013 Your-BelajarBLOG by
Theme designed by Damzaky - Published by Proyek-Template
Powered by Blogger
-->