Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di die-silver.blogspot.com

Cara Membuat Menu Tabview Versi 2

Huff… setelah berhasil postingin artikel buat menu Tabview versi 1 sekarang lanjut ke versi 2. Pada versi ini, menu tabview tidak menggunakan setting default seperti Bang Kendhin, tapi kali ini menu tabview menggunakan teknik Forward dan Back. Waaahhh… keren gak niih? Cara membuatnya juga tidak terlalu berbeda dengan versi 1. Oh ya, kalo blog kamu udah menggunakan tabview versi 1, kamu tidak bisa menggunakan versi 2 ini, karena menu akan tidak berfungsi, untuk menggunakannya jelas harus mengganti semua kode yang telah dipasang untuk versi 1 dan diganti dengan versi 2. Gini nih caranya :


  1. Login pada Blogger

  2. Pilih Tata Letak/Layout

  3. Kemudian Edit HTML

  4. Klik Expand Widget Template: langkah terbaik adalah juga men-download template dengan cara klik Download Template Lengkap sebelum melakukan edit agar bisa kembali ke pengaturan awal jika terjadi kesalahan.

  5. Cari kode ]]></b:skin> kemudian copy kode di bawah ini ke atasnya
    /* CSS for Shade Tabs. die-silver.blogspot.com */

    .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(gambar 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(gambarshadeactive.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 for Inverted Modern Bricks II Tabs. die-silver.blogspot.com */

    .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 for Indented CSS Tabs. die-silver.blogspot.com */


    .indentmenu{
    font: bold 13px 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: 1px solid navy; /*navy border*/
    background: black url(gambar indentbg.gif) center center repeat-x;
    }

    .indentmenu ul li{
    display: inline;
    }

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

    .indentmenu ul li a:visited{
    color: white;
    }

    .indentmenu ul li a.selected{
    color: white !important;
    padding-top: 6px; /*shift text down 1px*/
    padding-bottom: 4px;
    background: black url(gambar indentbg2.gif) center center repeat-x;
    }


    .tabcontentstyle{ /*style of tab content oontainer*/
    border: 1px solid gray;
    width: 450px;
    margin-bottom: 1em;
    padding: 10px;
    }

    .tabcontent{
    display:none;
    }

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

  6. Perhatikan tulisan yang berwarna merah di atas, menu yang ditunjukkan warna merah di atas bisa diubah sesuai keinginan. Kalo kita mengerti CSS, ada banyak kode yang bisa dimodifikasi.

  7. Langkah berikutnya yaitu menyisipkan kode berikut sebelum kode </head>
    <script type="text/javascript" src="http://www.geocities.com/ridwanox/tabcontent.js"/ 

  8. Kemudian Simpan Template

  9. Lalu pergi ke Page Elements

  10. Trus PIlih Add a Gadget --> HTML/Javascript di tempat yg akan kamu letakkan Manu Tab View ini.

  11. Kemudian Copy paste kode di bawah ini yang nantinya akan menjadi Tabview kamu :
    <ul id="countrytabs" class="shadetabs">
    <li><a href="http://die-silver.blogspot.com/" rel="country1" class="selected">Tab 1</a></li>
    <li><a href="http://die-silver.blogspot.com/" rel="country2">Tab 2</a></li>
    <li><a href="http://die-silver.blogspot.com/" rel="country3">Tab 3</a></li>
    <li><a href="http://die-silver.blogspot.com/" rel="country4">Tab 4</a></li>
    <li><a href="http://ourblogtemplates.com">My Templates</a></li>
    </ul>

    <div style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">

    <div id="country1" class="tabcontent">
    Tab content 1 here<br />
    Tab content 1 here<br />
    </div>

    <div id="country2" class="tabcontent">
    Tab content 2 here<br />
    Tab content 2 here<br />
    </div>

    <div id="country3" class="tabcontent">
    Tab content 3 here<br />
    Tab content 3 here<br />
    </div>

    <div id="country4" class="tabcontent">
    Tab content 4 here<br />
    Tab content 4 here<br />
    </div>

    </div>

    <script type="text/javascript">

    var countries=new ddtabcontent("countrytabs")
    countries.setpersist(true)
    countries.setselectedClassTarget("link") //"link" or "linkparent"
    countries.init()

    </script>

    <p><a href="javascript:countries.cycleit('prev')" 

    style="margin-right: 25px; text-decoration:none">
    <img src="rhttp://1.bp.blogspot.com/_FtofMBj1-y8/SbIQHlku8BI/AAAAAAAAArU/K73VEzjOu94/s1600/roundleft.gif" border="0" /> Back</a> 
    <a href="javascript: countries.expandit(3)">
    Click here to select last tab</a> 
    <a href="javascript:countries.cycleit('next')" style="margin-left: 25px; text-decoration:none">
    <img src="http://2.bp.blogspot.com/_FtofMBj1-y8/SbIP24z6nEI/AAAAAAAAArM/Qr7eU4_E_HI/s1600-h/roundright.gif" border="0" /> Forward</a></p>

    <hr />

  12. Simpan deh… :D


:) Keterangan :
- Angka atau text yang berwarna biru (450px) adalah ukuran lebar tabview.
- Kode yang berwarna Hijau adalah text yang di Menu utama (Menu Atas).
- Kode yang berwarna merah adalah link alamat tautan yang akan kamu tuju dari tabview tsb.
- Kode yang berwarna oranye adalah isi konten tabview kamu. Kamu bisa mengisinya dengan link, gambar, banner, script dll.
- Untuk menmbahkan jumlah menu maka perhatikanlah text yang berkedip-kedip. tambahkan menu tersebut dibawahnya.

Nah, kalo berhasil jadinya gini bro:


Keren gak niih? Hehe… :D
Semoga berhasil kawand :r :D !!!

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di die-silver.blogspot.com
Gunakan Tombol berikut untuk menyimpan halaman :
Cara Membuat Menu Tabview Versi 2
menjadi format PDF dan lebih maksimal jika terdapat kesalahan koneksi atau yang lainnya.

..::Artikel Menarik Lainnya::..

7 comments:

Aditya Ramadhan March 28, 2009 at 10:20 PM  

oea sob...
yang lw pake kmaren yang mana sob..
lebih keren yang mana yh...???
*jadi binun*

ardi33 March 29, 2009 at 6:59 AM  

@Adit: gue pake versi 1...
karena udah terlanjur yaa udah gga ppa2...
daripada error...
Padahal pingin yang versi 2 siih...hehe...

Ayam April 12, 2009 at 1:36 PM  
This comment has been removed by the author.
Ayam April 12, 2009 at 1:38 PM  

klo mo nambahin abot me di tab gmn carana ?

Anak Kampung Bengkalis May 14, 2009 at 5:57 AM  

Tanks atas info nya bro... artikel nya keren2

blogger idea June 6, 2009 at 12:03 PM  

nice tutorial mas...

OBLO July 3, 2009 at 7:14 PM  

dulu pernah pasang ginian.. tapi gimana ya..
terlalu banyak widget.. hehehe.. salut bro tutornya :)

Post a Comment

Silahkan menuliskan komentar anda pada opsi Google/Blogger untuk anda yang memiliki akun Google/Blogger.

Silahkan pilih account yang sesuai dengan blog/website anda (LiveJournal, WordPress, TypePad, AIM).

Pada opsi OpenID silahkan masukkan URL blog/website anda pada kotak yang tersedia.

Atau anda bisa memilih opsi Nama/URL, lalu tulis nama anda dan URL blog/website anda pada kotak yang tersedia.

Jika anda tidak punya blog/website, kolom URL boleh dikosongi atau dapat juga diganti dengan email anda.

Gunakan opsi 'Anonim' jika anda tidak ingin mempublikasikan data anda. (sangat tidak disarankan). Jika komentar anda berupa pertanyaan, maka jika anda menggunakan opsi ini tidak akan ditanggapi. Lebih baik anda gunakan pilihan dibawah ini:

Jika ingin komentar anda tidak dipublikasi, silahkan klik disini.

Terima kasih, komentar anda sangat berarti untuk die-silver.blogspot.com
:a: :b: :c: :d: :e: :f: :g:
:h: :i: :j: :k: :l: :m: :n:

newer post older post home

About Me

My Photo
ardi33
Sangat bercita-cita menjadi seorang webmaster yang selalu dapat memberikan yang terbaik dan bermanfaat kepada semua orang, dan sekarang sedang dalam tahap pembelajaran yang tak kenal lelah!!!
View my complete profile

Stats

Blog Rank:Powered by  MyPagerank.Net
Traffic Rank:Alexa Certified Site Stats for http://die-silver.blogspot.com
Online Visitor:
Blogger Template by Ardi33.Web.id.
Originally Die Silver Template Edited by TemplateZone