Cara Membuat Menu Tab Blogger ~ Tutorial TIK-PTD

Seperti biasa, langsung menuju edit HTML, centang expand widget template dan back up current template sobat, kalau sudah sekarang sobat pasang kode css dibawah ini tepat diatas kode ]]></b:skin>

/*---- Wordpress Style mybloggertricks.com Menu Tabs, edit by Akoey's Blog----*/

    .MBT-tabs{list-style:none;list-style-type:none;margin:0 0 10px 0;padding:0;height:26px}
    .MBT-tabs li{list-style:none;list-style-type:none;margin:0 0 0 4px;padding:0;float:left}
    .MBT-tabs li:first-child{margin:0}
    .MBT-tabs li a{color:#fff;background:#2E030D;padding:5px 5px;display:block;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif;}
    .MBT-tabs li a:hover,.MBT-tabs li a.MBT-tabs-current{background:#3b5998;color:#fff;text-decoration:none}
    .MBT-tabs-content{background:transparent}
    .MBT-tabviewsection{margin-top:10px;margin-bottom:10px;}

Setelah langkah pertama selesai, sekarang lanjutkan dengan memasang kode JQuery/Javascript, download dulu kodenya, klik saja disini (dari pembuat widget aslinya yaitu www.mybloggertricks.com) kemudian cari kode </head> dan pasangkan tepat diatasnya.
Sudah? oke lanjutkan dengan pemasangan kode HTML, cari kode <div id='sidebar-wrapper'>

setelah itu pasang kode berikut ini dibawah kode tersebut,

<div class='MBT-tabviewsection'>

    <script type='text/javascript'>
                jQuery(document).ready(function($){
                    $(".MBT-tabs-content-widget-MBT-id").hide();
                    $("ul.MBT-tabs-widget-MBT-id li:first a").addClass("MBT-tabs-current").show();
                    $(".MBT-tabs-content-widget-MBT-id:first").show();
                    $("ul.MBT-tabs-widget-MBT-id li a").click(function() {
                        $("ul.MBT-tabs-widget-MBT-id li a").removeClass("MBT-tabs-current a");
                        $(this).addClass("MBT-tabs-current");
                        $(".MBT-tabs-content-widget-MBT-id").hide();
                        var activeTab = $(this).attr("href");
                        $(activeTab).fadeIn();
                        return false;
                    });
                });
            </script>

    <ul class='MBT-tabs MBT-tabs-widget-MBT-id'>
    <li><a href='#widget-MBT-id1'>Explorer</a></li>
    <li><a href='#widget-MBT-id2'>Terbaru</a></li>
    <li><a href='#widget-MBT-id3'>Komentar</a></li>
    <li><a href='#widget-MBT-id4'>Cari Artikel</a></li>
    </ul>

    <div class='MBT-tabs-content MBT-tabs-content-widget-MBT-id' id='widget-MBT-id1'>
    <b:section class='sidebar' id='sidebartab1' preferred='yes'>

</b:section>
    </div>

    <div style='clear:both;'/>
    <div class='MBT-tabs-content MBT-tabs-content-widget-MBT-id' id='widget-MBT-id2'>
    <b:section class='sidebar' id='sidebartab2' preferred='yes'>

</b:section>
    </div>


    <div style='clear:both;'/>
    <div class='MBT-tabs-content MBT-tabs-content-widget-MBT-id' id='widget-MBT-id3'>
    <b:section class='sidebar' id='sidebartab3' preferred='yes'>

</b:section>

    </div>
    <div style='clear:both;'/>

<div class='MBT-tabs-content MBT-tabs-content-widget-MBT-id' id='widget-MBT-id4'>
    <b:section class='sidebar' id='sidebartab4' preferred='yes'>

</b:section>
    </div>

    </div>
    <div style='clear:both;'/>

Kalau sudah, sobat save saja templatenya dan selesai. Nah, untuk menyesuaikan warna, sobat bisa ganti sesua selera atau sesuai dengan warna template sobat di bagian background:#3b5998 untuk warna background, dan color:#fff untuk warna judul menu. Kalu sobat mau pasang 3 tab saja, sobat bisa hilangkan bagian ini

<li><a href='#widget-MBT-id4'>Cari Artikel</a></li>

</ul>
dan

<div class='MBT-tabs-content MBT-tabs-content-widget-MBT-id' id='widget-MBT-id4'>
    <b:section class='sidebar' id='sidebartab4' preferred='yes'>

</b:section>
    </div>

    </div>
    <div style='clear:both;'/>

Jadi nntinya akan menampilkan 3 tab saja, untuk kata yang dicetak biru, itu adalah judul menu, sobat ganti juga sesuai yang diinginkan. OK, setelah selesai sobat tinggal menambahkan widget pada halaman edit layout blogger berurutan dari atas, seperti dibawah ini: