Cara membuat Menu Tab Multi Widget di Blog

Tahukah sobat Legend Of Blog ? apa yang dimaksud dengan postingan saya kali ini ? Postingan kali ini saya maksudkan untuk menghemat halaman blog dengan yang penuh widget dan ini dapat dijadikan insipirasi untuk menuju fast load blog nya agar blog kita cepat.Ingin ? ikuti langkah berikut :

1. Langkah yang pertama, silahkan sobat >> Login atau Masuk ke Blogger.com menggunakan akun sobat.

2. Pada "Dashboard" tampilan blogger baru, pilih menu >> Template >> Edit HTML >> Lanjutkan.

3. Silahkan sobat cari kode </head> (Gunakan CTRL+F untuk mempermudah pencarian) Jika sudah ketemu, sekarang sobat tambahkan kode warna Merah berikut tepat di atas kode </head>

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

4. Simpan Template.

Catatan:

• 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.

• Setelah kode di atas tersimpan di dalam template blog, sekarang kita me nuju ke penerapan kode CSS-nya ke dalam widget blog sobat. Silahkan sobat perhatikan baik-baik trik berikut.

5. Kembali ke "Dashboard" blog, pilih menu >> Tata Letak >> Tambah Gadget >> HTML/JavaScript.
Masukkan semua kode CSS warna Biru di bawah ini kedalam kotak HTML/JavaScript.

<style type="text/css"> .blogtabs {padding: 0px !important;border: 0 solid #bbb;} .blogtabs h2 {float: left;margin: 0 2px 4px 0;font-size: 13px;color:white;padding: 3px 5px;border: 1px solid #bbb;overflow: hidden;position: relative;background: green;cursor:pointer;} html .blogtabs h2.active {background: #fff;color:green;} .blogtabs .widget-content {border: 1px solid #bbb;padding: 0px;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://kucopas-js.googlecode.com/files/SimpleTabViewJQuery.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#showtabs').simpleBlogTab ({organictabs: 4}); }); </script> <div id="showtabs"></div>

6. Simpan Gadget.