Cara Membuat Menu Tab View Blog

|| || || 1 komentar
Tutorial | Bagi sobat Blogger Tutorial yang belum tau tab view itu apa, ini nih yang namanya menu tab view, silakan lihat gambarnya dibawah.. atau sobatbisa melihat menu tab view pada blog ini..


Oke, sekarang saya jelaskan kenapa postingan ini saya beri judul menu tab view termudah.. yap, karna yang bakal saya bahas disini adalah widget menu tab view termudah yang saya gunakan.. tidak ribet pemasanganya seperti menu tab view kebanyakan yang biasa dibahas di luar sana.. yang membahas tentang memasang menu tab view dengan CSS dan jQuery, bla bla bla.. lalu sobat disuruh memasang kode2 yang akan di masukan ke dalam menu tab view tersebut satu persatu secara manual.. ribet banget bukan ?
Naah.. cara membuat menu tab view ini lebih mudah pemirsaa.. sobat cukup menambahkan kode menu tab view dengan cukup menambahkan widget baru (Add Gadget).


Cara Membuat Daftar Menu/Isi Di Sidebar Blog :
1.  Login ke dashboard blogger anda.
2.  Pilih Rancangan > Elemen Laman > Add gadget (HTML/JavaScript).
3. Copy script dibawah ini dan paste pada gadget.

    

     <style type="text/css">
    .tabber {
     padding: 0px !important;
     border: 0 solid #bbb;
    }
    .tabber h2 {
     float: left;
     margin: 0 1px 0 0;
     font-size: 12px;
     padding: 3px 5px;
     border: 1px solid #bbb;
     margin-bottom: -1px;
     overflow: hidden;
     position: relative;
     background: #e0e0e0;
     cursor:pointer;
     -moz-border-radius:5px 5px 0 0;
     border-radius:5px 5px 0 0;
    }
    html .tabber h2.active {
     background: #fff;
     border-bottom: 1px solid #fff;
    }
    .tabber .widget-content {
     border: 1px solid #bbb;
     padding: 10px;
     background: #fff;
     clear:both;
     margin:0;
    }
    .codewidget, #codeholder {
     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://greenlava-code.googlecode.com/svn/trunk/publicscripts/bloggertabs0.1_min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
     $('#codeholder').bloggerTabber ({
      tabCount : 3
     });
    });
    </script><!-- Jangan hapus kode dibawah, agar widget bisa berfungsi --><div id='codeholder'><a href="http://www.bloggersentral.com/2011/05/create-tabbed-content-blogger-widgets.html" target="_blank"></a><p>Get this <a href="http://trickstipsblog.blogspot.com/2012/11/cara-membuat-menu-tab-view-blog.html" target="_blank"><blink>widget</blink></a></p></div>

4. Apabila sudah di paste, sobat klik SIMPAN

Apabila sobat Blogger Tutorial sudah menambahkan kode menu tab view di atas, maka sobat cukup mengatur widget2 mana yang ingin sobat masukan, cara penambahannya cukup simple dan mudah, taruh atau geser widget yang ingin sobat tambahkan ke bawah widget menu tab view tsb. silakan lihat gambar di bawah ini:


Simpan, dan lihat hasilnya :D
bagaimana pemirsa ? mudah banget bukan ? hehe.. silakan di coba daah.. semoga bermanfaat yaa :) good luck sobat :D
/[ 1 komentar Untuk Artikel Cara Membuat Menu Tab View Blog]\
Muhammad Ridwan said...

ijin pake yaa gan..

Post a Comment