Searching...
Minggu, 02 Februari 2014

Membuat Multi Tab di Blogspot Tanpa Edit HTML

Tab Multi Widget adalah penggabungan beberapa Widget pada satu kolom dengan Tab. Tab Multi widget ini sangat berguna jika Blog sobat mempunyai terlalu banyak widget. Sobat bisa menggabungkan widget-widget tersebut pada satu kolom dengan Tab diatasnya. Jadi sobat tidak
perlu menyediakan area yang luas untuk widget yang banyak.
Oke langsung saja ke langkah-langkah pembuatanya.

1. Login ke kaun Blogger sobat.
2. Masuk pada bagian Template.
3. Pilih Edit HTML.
4. Cari kode </head>, agar lebih mudah gunakan tombol ctrl+F.
5. Masukan kode <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> , di atas kode </head>.
6. Klik simpan Template.
7. Selanjutnya masuk ke bagian Tata Letak.
8. Klik Tambah Gacget di posisi yang sobat inginkan.
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 2px 4px 0;font-size: 12px;padding: 3px 5px;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. Sedangkan kode ({organictabs: 3}) adalah jumlah tab yang akan digabungkan dan sobat bisa sesuaikan.

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

Cara Membuat Tab Multi Widget di Blog
Selesai, sobat dapat lihat hasilnya.

0 komentar:

Posting Komentar