Cara Membuat Tab Menu Dengan Banyak Style

Posted by Unknown on 11/26/2009
49 komentar
This item was filled under , , ,

K
ali ini kita akan membahas cara membuat tab menu pada website khususnya pada Blogspot. Hal ini cukup menarik karena Blogspot tidak menyediakan menu-menu pada halaman blog sehingga kita harus membuatnya secara manual baik dengan menggunakan CSS maupun dengan Javascript. Berikut langkah-langkah membuat tab menu pada website:
  1. Copy paste kode CSS berikut pada website Anda. Jika pada Blogspot, copy paste sebelum kode ]]></b:skin> pada template Anda. Jangan lupa membackup terlebih dahulu template Anda supaya bisa dikembalikan jika terjadi kesalahan.

    /* ######### CSS untuk Shade Tabs ######### */

    .shadetabs{
    padding: 3px 0;
    margin-left: 0;
    margin-top: 1px;
    margin-bottom: 0;
    font: bold 12px Verdana;
    list-style-type: none;
    text-align: left; /*set to left, center, or right to align the menu as desired*/
    }

    .shadetabs li{
    display: inline;
    margin: 0;
    }

    .shadetabs li a{
    text-decoration: none;
    position: relative;
    z-index: 1;
    padding: 3px 7px;
    margin-right: 3px;
    border: 1px solid #778;
    color: #2d2b2b;
    background: white url(shade.gif) top left repeat-x;
    }

    .shadetabs li a:visited{
    color: #2d2b2b;
    }

    .shadetabs li a:hover{
    text-decoration: underline;
    color: #2d2b2b;
    }

    .shadetabs li a.selected{ /*selected main tab style */
    position: relative;
    top: 1px;
    }

    .shadetabs li a.selected{ /*selected main tab style */
    background-image: url(shadeactive.gif);
    border-bottom-color: white;
    }

    .shadetabs li a.selected:hover{ /*selected main tab style */
    text-decoration: none;
    }

    .tabcontent{
    display:none;
    }

    @media print {
    .tabcontent {
    display:block !important;
    }
    }

    /* ######### CSS untuk Inverted Modern Bricks II Tabs ######### */

    .modernbricksmenu2{
    padding: 0;
    width: 362px;
    border-top: 5px solid #D25A0B; /*Brown color theme*/
    background: transparent;
    voice-family: "\"}\"";
    voice-family: inherit;
    }

    .modernbricksmenu2 ul{
    margin:0;
    margin-left: 10px; /*margin between first menu item and left browser edge*/
    padding: 0;
    list-style: none;
    }

    .modernbricksmenu2 li{
    display: inline;
    margin: 0 2px 0 0;
    padding: 0;
    text-transform:uppercase;
    }

    .modernbricksmenu2 a{
    float: left;
    display: block;
    font: bold 11px Arial;
    color: white;
    text-decoration: none;
    margin: 0 1px 0 0; /*Margin between each menu item*/
    padding: 5px 10px;
    background-color: black; /*Brown color theme*/
    border-top: 1px solid white;
    }

    .modernbricksmenu2 a:hover{
    background-color: #D25A0B; /*Brown color theme*/
    color: white;
    }

    .modernbricksmenu2 a.selected{ /*currently selected tab*/
    background-color: #D25A0B; /*Brown color theme*/
    color: white;
    border-color: #D25A0B; /*Brown color theme*/
    }

    .tabcontent{
    display:none;
    }

    @media print {
    .tabcontent {
    display:block !important;
    }
    }

    /* ######### CSS untuk Indented CSS Tabs ######### */


    .indentmenu{
    font: bold 11px Arial;
    width: 100%; /*leave this value as is in most cases*/
    }

    .indentmenu ul{
    margin: 0;
    padding: 0;
    float: left;
    /* width: 80%; width of menu*/
    border-top: 0px solid navy; /*navy border*/
    background: #e0e0e0 url(htp://h1.ripway.com/sinaga/gambar/indentbg.gif) center center repeat-x;
    }

    .indentmenu ul li{
    display: inline;
    }

    .indentmenu ul li a{
    float: left;
    color: #000000; /*text color*/
    padding: 5px 11px;
    text-decoration: none;
    border-right: 0px solid navy; /*navy divider between menu items*/
    }

    .indentmenu ul li a:visited{
    color: #000000;
    }

    .indentmenu ul li a:hover{
    color: #66B5FF;
    }

    .indentmenu ul li a.selected{
    color: #66B5FF !important;
    padding-top: 6px; /*shift text down 1px*/
    padding-bottom: 4px;
    background: #e0e0e0 url(http://h1.ripway.com/sinaga/gambar/menutabbg.gif) center center repeat-x;
    }


    .tabcontentstyle{ /*style of tab content oontainer*/
    border: none;
    width: 450px;
    margin-bottom: 1em;
    padding: 10px;
    font: normal 11px Arial;
    }

    .tabcontent{
    display:none;
    }

    @media print {
    .tabcontent {
    display:block !important;
    }
    }
  2. Selanjutnya copy paste struktur berikut pada website atau blog Anda sebelum kode </head>:
    <script src='http://h1.ripway.com/sinaga/blogspot/tabcontent.js' type='text/javascript'>script>
  3. Masukkan struktur tab menu berikut pada bagian dimana Anda ingin menampilkan tab menu pada website atau blog Anda:
    <div id="pettabs" class="modernbricksmenu2">
    <ul>
    <li><a href="#" class="selected" rel="dog1">Tab 1</a></li>
    <li><a href="#" rel="dog2">Tab 2</a></li>
    <li><a href="http://www.banditbatak.com" title="Klik untuk masuk ke situs BanditBatak.Com">Bandit Batak</a></li>
    </ul>
    </div>

    <div style="padding: 5px; margin-bottom:1em">

    <div id="dog1" style="font-size:11px; padding:5px;" class="tabcontent">
    <img style="float:left;" src="http://h1.ripway.com/sinaga/gambar/bannerits.jpg"/>ITS diisukan menjadi kampus BHP. Siapkah mahasiswa ITS menghadapinya?Menolak atau menerima?<br/>
    <i><a href="javascript: mypets.expandit('akhir')">Klik untuk memilih tab akhir</a></i>
    </div>

    <div id="dog2" style="font-size:11px; padding:5px;" class="tabcontent">
    Isi Tab 2
    </div>

    <script type="text/javascript">
    var mypets=new ddtabcontent("pettabs")
    mypets.setpersist(false)
    mypets.setselectedClassTarget("link")
    mypets.init()
    </script></div>
  4. Silahkan ganti tulisan "Tab 1", "Tab 2", dst dengan nama-nama tab menu yang Anda inginkan.
  5. Coba perhatikan struktur Tab 1:
    <li><a href="#" class="selected" rel="dog1">Tab 1</a></li>
    class="selected", artinya adalah tab tersebut menjadi tab yang terbuka pertama kali.
    rel="dog1", artinya tab tersebut dihubungankan dengan "dog1".
    Adapun "dog1" didefenisikan sebagai isi dari Tab 1. Perhatikan struktur yang berwarna orange. Kita memberi atribut ID pada struktur div (kotak) sebagai "dog1". Artinya, isi dari div (kotak) tersebutlah yang akan dihubungkan dengan "Tab 1" dan menjadi isi dari tab tersebut.
  6. Begitu pula dengan "Tab 2". Tab tersebut mempunyai rel="dog2". Sedangkan "dog2" merupakan struktur yang berwarna merah.
  7. Jika kita ingin menambah tab baru, cukup buat struktur yang mirip dengan struktur "Tab 1" atau "Tab 2". Jadi, yang Anda lakukan adalah menambah tab bernama (misalnya)  "Tab 3" sehingga stukturnnya menjadi:
    <div id="pettabs" class="modernbricksmenu2">
    <ul>
    <li><a href="#" class="selected" rel="dog1">Tab 1</a></li>
    <li><a href="#" rel="dog2">Tab 2</a></li>
    <li><a href="#" rel="dog3">Tab 3</a></li>
    <li><a href="http://www.banditbatak.com" title="Klik untuk masuk ke situs BanditBatak.Com">Bandit Batak</a></li>
    </ul>
    </div>
    .......
    Kemudian mendefenisikan "dog3" sebagai is "Tab 3", sehingga struktur lengkapnya menjadi:
    <div id="pettabs" class="modernbricksmenu2">
    <ul>
    <li><a href="#" class="selected" rel="dog1">Tab 1</a></li>
    <li><a href="#" rel="dog2">Tab 2</a></li>
    <li><a href="#" rel="dog3">Tab 3</a></li>
    <li><a href="http://www.banditbatak.com" title="Klik untuk masuk ke situs BanditBatak.Com">Bandit Batak</a></li>
    </ul>
    </div>

    <div style="padding: 5px; margin-bottom:1em">

    <div id="dog1" style="font-size:11px; padding:5px;" class="tabcontent">
    <img style="float:left;" src="http://h1.ripway.com/sinaga/gambar/bannerits.jpg"/>ITS diisukan menjadi kampus BHP. Siapkah mahasiswa ITS menghadapinya?Menolak atau menerima?<br/>
    <i><a href="javascript: mypets.expandit('akhir')">Klik untuk memilih tab akhir</a></i>
    </div>

    <div id="dog2" style="font-size:11px; padding:5px;" class="tabcontent">
    Isi Tab 2
    </div>

    <div id="dog3" style="font-size:11px; padding:5px;" class="tabcontent">
    Isi Tab 3
    </div>

    <script type="text/javascript">
    var mypets=new ddtabcontent("pettabs")
    mypets.setpersist(false)
    mypets.setselectedClassTarget("link")
    mypets.init()
    </script></div>
  8. Coba perhatikan kembali kode CSS yang ada pada langkah 1. Kode tersebut terdiri dari beberapa bagian, yaitu Shade Tabs, Inverted Modern Bricks II Tabs, dan Indented CSS Tabs. Bagian-bagian tersebutlah yang menjadi style atau tipe dari Tab Menu yang bisa Anda ganti-ganti. Untuk menggunakannya cukup ganti bagian yang berwarna merah seperti di bawah ini pada struktur yang Anda copy paste pada langkah 3:
    <div id="pettabs" class="shadetabs">
    <ul>
    <li><a href="#" class="selected" rel="dog1">Tab 1</a></li>
    ......
    Misalkan ingin membuat Tab Menu bergaya Indented, maka ganti menjad:
    <div id="pettabs" class="indentmenu">
    <ul>
    <li><a href="#" class="selected" rel="dog1">Tab 1</a></li>
    ......
    Sesuaikan dengan nama atribut class pada CSS tersebut.
  9. Silahkan lihat contohnya disini.

Bookmark and Share

POSTINGAN LAIN YANG BERHUBUNGAN :




Dapatkan Tutorial Website Via Email:
Setelah membaca artikel diatas, jangan lupa ngasi komentar ya...

49 komentar on "Cara Membuat Tab Menu Dengan Banyak Style"



Post a Comment