» » » Cara Mudah Membuat Tab Multi Widget di Blog

Cara Mudah Membuat Tab Multi Widget di Blog

Oleh

Cara Mudah Membuat Tab Multi Widget di Blog



Assalamu alaikum wr. wb.
Dengan Tab Multi Widget, tentu itu akan menghemat area blog kita dan akan terlihat lebih rapih.
Untuk membuat Tab Multi Widget caranya sangat mudah. Sobat bisa mengikuti langkah - langkahnya sebagai berikut :

1. Login ke akun Blogger
2. Pada Dasbor pilih menu Template.
3. klik Edit HTML
4. Kemudian cari kode </head> , (agar lebih mudah bisa gunakan tombol ctrl+F.)
5. Masukan kode berikut di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

6. Simpan Template.

#Ingat!!!
Bila dalam template kalian sudah ada kode diatas, maka kalian tidak perlu menambahkan lagi kedalam template blog. Karena jika ditambah, Menu Tab Multi Widget tidak bisa berfungsi dengan baik dan benar.

Jika dalam template sobat sudah ada kode warna Merah diatas, maka sobat tidak perlu menambahkan lagi kedalam template blog sobat. Karena efeknya Menu Tab Multi Widget tidak bisa berfungsi dengan baik bahkan bisa menjadi eror. - See more at: http://kuc0pas.blogspot.com/2013/02/cara-membuat-menu-tab-multi-widget-di-blog.html#sthash.pQz1nfe7.dpuf
7. Kemudian masuk ke Tata Letak.
8. Klik Tambah Gadget pada posisi yang diinginkan.
9. Pilih HTML/Javascript.
10. Masukan kode berikut.

<style type="text/css">

         .blogtabs {padding: 0px !important;border: 0 solid #bbb;}

         .blogtabs h2 {float: left;margin: 0 0px 6px 0;font-size: 13px;padding: 12px 10px;border: 1px solid #bbb;overflow: hidden;position: relative;background: #e0e0e0;cursor:pointer;}

         html .blogtabs h2.active {background: #fff;}

         .blogtabs .widget-content {border: 1px solid #bbb;padding: 10px;background: #fff;clear:both;margin:0;}

         .btab, #showtabs {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://ayriyzone.googlecode.com/files/SimpleTabViewJQuery.js"></script>

         <script type="text/javascript">

         $(document).ready(function() {

         $('#showtabs').simpleBlogTab ({organictabs: 3});

         });

         </script>

         <div id="showtabs"></div>



Keterangan:
kode berwarna biru adalah kode-kode warna
kode berwarna hijau adalah kode-kode ukuran yang bisa sobat ubah
kode ({organictabs: 3}) adalah jumlah tab yang akan digabungkan.

11. Klik Simpan.
12. Letakan widget-widget yang akan digabungkan tepat di bawah widget yang baru saja dibuat.

Selamat Mencoba.

Wassalamu alakium wr. wb.
0 Komentar untuk "Cara Mudah Membuat Tab Multi Widget di Blog"

Back To Top