Apr 9, 2011

Membuat Menu Tab Blogger ala Wordpress


Selamat siang sobat Blogger yang baik hati dimanapun berada, :) gimana kabarnya? moga baik2 slalu ya. Ohya tau berita anggota kepolisian yang nyanyi India kan? iya si Briptu Norman itu lho, kan lagi marak tuh di tv kabar beritanya, lucu juga sih lihatnya kayak terobosan baru gitu dari kepolisian RI, secara dia bisa mencairkan suasana dari kesan polisi yang menakutkan menjadi menghibur. haha.. udah lah biarin aja menghiasi negeri ini yang lagi carut marut. :D

Ngomong2 masih asik ngeblog? sip, dandanin lagi blognya yuk sob? tambah2 widget yang lain yang bikin keren blognya dan bermanfaat tntunya. Seperti widget yang satu ini, Menu Tab ala Wordpress yang saya pakai, bisa sobat pakai juga buat menghemat space blognya dan tentunya menambah ciamik tampilan blognya. Oke, kebetulan kesempatan sekarang ini saya mau berbagi mengenai widget yang tadi saya ceritakan, buat sobat yang belum coba pasang pastinya. Sebetulnya sudah banyak tutorial mengenai widget Menu Tab ini, tapi ga ada salahnya kan saya ulas dan erbagi pengalaman. :) Oke, kita mulai yuk tutorialnya, tapi sebelumnya sobat boleh minum dulu biar seger, halah..Cekidot:

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($){
                    $(&quot;.MBT-tabs-content-widget-MBT-id&quot;).hide();
                    $(&quot;ul.MBT-tabs-widget-MBT-id li:first a&quot;).addClass(&quot;MBT-tabs-current&quot;).show();
                    $(&quot;.MBT-tabs-content-widget-MBT-id:first&quot;).show();
                    $(&quot;ul.MBT-tabs-widget-MBT-id li a&quot;).click(function() {
                        $(&quot;ul.MBT-tabs-widget-MBT-id li a&quot;).removeClass(&quot;MBT-tabs-current a&quot;);
                        $(this).addClass(&quot;MBT-tabs-current&quot;);
                        $(&quot;.MBT-tabs-content-widget-MBT-id&quot;).hide();
                        var activeTab = $(this).attr(&quot;href&quot;);
                        $(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: 

Oke, selamat mencoba, terimakasih telah berkunjung, semoga berhasil dan happy blogging ya.. :)

15 komentar

bagus..cuman agak segan ubah lebar sidebar..hehehehe...soalnya kek nya ini berpengaruh pada lebar dan sempitnya sidebar, otomatis pengaruh ke lebar halaman posting gtu kan ya...

mantap ni...
ntar low dah waktu ru d coba...

.Adit: ya sob, menambah lebar sidebar berarti mengurangi lebar laman posting. kecuali dirubah juga bagian wrappernya. Oke, thanks ya.
.Eric: oke sob, smoga brhasil ya.. :)

mantep... ini yang lagi saya cari-cari... makasih gan...

aku dah coba dan berhasil... tapi slide rotator jadi ga berfungsi.
Mohon pencerahannya....
thanks

.ade: oke sip.. mksh sob..
.idolnet: pastikan bhw kode ga ada yg kehapus, coba copotdulu bagian jquery apakah masih brmasalah atau tdk, kalau masih coba pindahkan lokasi javasscript hostingnya ke milik sendiri. mdh2n bs brhsil. mksih ya..

setelah dicopot jquery, bisa tp menu tab jg ga berfungsi.
tolong dibantu..
trims...

.Idolnet: mksd sy mncopot jquery utk memastikan apakah slide rotator brmasalah atau tdk, trnyata tdk. nah skrg coba sy pndhkn script hostingnya. sobat cari
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4 jquery.min.js' type='text/javascript'/>
kemudian ganti dengan
<script src='http://nuakoey.webs.com/javascript/menutab.js' type='text/javascript'/>
mudah2n brhasil ya. tmksih

saya jga punya masalah yang sama ni, sudah diganti script hostingnya tpi ttp gak bisa?, mhon bantuanya..


EmoticonEmoticon