Widget 3 Tab Untuk Blogger

Dengan bantuan widget ini, anda dapat memadukan banyak fitur dalam blog anda kedalam 1 tempat saja. Hal ini tentu saja menjadi sangat menarik karena membuat tampilan blog anda menjadi semakin dinamis dan profesional. Beriku demo dan tutorialnya.

1. Masuk ke akun blogger, lalu klik Template - Edit HTML


2. Temukan kode </head>, gunakan Ctrl+F untuk mempermudah pencarian


3. Masukkan kode berikut sebelum kode </head> tadi



<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js">
</script>
<script>
    $(document).ready(function() {
        $("#tabs").tabs();
    });
</script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/blitzer/jquery-ui.css" type="text/css" />



4. Lalu masuk Layout - Add Gadget - HTML/Javascript dan masukkan kode berikut:



<div id="tabs">
<ul><li>
<a href="#tabs-1">Tab-1</a></li><li>
<a href="#tabs-2">Tab-2</a></li><li>
<a href="#tabs-3">Tab-3</a></li></ul>
<div id="tabs-1">Script atau teks disini</div>
<div id="tabs-2">Script atau teks disini</div>
<div id="tabs-3">Script atau teks disini</div>



5. Edit kode warna merah dengan script yang anda inginkan dan kode biru adalah judul Tab


6. Simpan HTML dan lihat hasilnya pada View Blog