Membuat Menu Tab View dengan Fungsi Foward dan Back

3.08.2009
Ada yang merequest tutorial sahabat saya yaitu mbak Detasengihnampakgigi.Karena ada waktu luang,akhirnya bisa kukerjakan jugapenat

Bagaimana cara membuat menu yang ada tiga fungsi itu?

Mau tahu caranya ikuti langkah-langkahnya :
  • Login ke Blogger.com
  • Klik Layout/Tata Letak
  • Klik Menu Edit HTML
  • Klik Edit HTML --> Sebelumnya terlebih dahulu anda backup dulu templatenya dengan mengklik Download Template Lengkap.Supaya bila terjadi kesalahan maka bisa diulang kembali.
  • Copy Paste kode berikut diatas kode ]]></b:skin>

    /* ######### CSS for Shade Tabs. Remove if not using ######### */

    .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. Remove if not using ######### */

    .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. Remove if not using ######### */


    .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;
    }
    }

  • Copy Paste Script berikut dibawah kode <head>

    <script type="text/javascript" src="http://www.geocities.com/ridwanox/tabcontent.js"/>


Langkah kedua

  • Klik Tata Letak/Layout
  • Klik Elemen Halaman/Page Elements
  • Klik Tambah Gadget/Add Gadget
  • Copy Paste Kode Berikut :

    <ul id="countrytabs" class="shadetabs">
    <li><a href="#" rel="country1" class="selected">Tab 1</a></li>
    <li><a href="#" rel="country2">Tab 2</a></li>
    <li><a href="#" rel="country3">Tab 3</a></li>
    <li><a href="#" rel="country4">Tab 4</a></li>
    <li><a href="http://www.dynamicdrive.com">Dynamic Drive</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 />


  • Simpanpenat
Jika anda berhasil maka hasilnya akan begini :


19 komentar:

  • bunda

    hmmh ...boleh nih di bookmark dulu buat dipelajarin.
    makasih bang infonya yg bermanfaat

    salam

  • oPa

    sama kayak di tempat opa..
    HehEhhee...Keren wan...

  • beat2ws

    Kayaknya yg script ke-2 ada yg kurang. Bukannya harus <ul id itu kok cuma ul id?, gak pake < ?
    Atau aku yg sok tau?hehe

  • Rusa Bawean

    keren neh
    tapi lebar sidebarku cuma 180
    mungkin jelek tampilannya ya
    kesempitan kan????
    :)

  • abang

    Nyari arsip penting lagi, abang mo belajar blogger neh ... nice tips !

  • TUKANG ARSIP

    @bunda : moga sukses ya bund
    @opa : bisa ajah nih
    @david : wah biasa ajah mas
    @beat2ws : trims mas udh diperbaikin nih
    @Rusa Bawean : dicb dulu ajah mas ok
    @abang : ok bang moga sukses

  • BlaGaBloGer

    wahahah,,, udah dibuatin,,,, makasih yah ridwan...

    tak coba deh,,, hehehe ^_^

  • Syamsul Alam

    wew........ repot amat...... wkwkwkwkkwk..... aku paling anti hal-hal panjang bin ruwet kek gitu.... wkwkkwwkk.........

  • sandy

    mantab,makin hari makin banyak aja tipsnya... sip..

  • Erik

    Wah saya simpen nih, penting banget.

  • Diary Pink

    wah... maap nih... baru mampir... selamat ya... semoga makin sukses blognya...

  • TUKANG ARSIP

    @BlaGaBloGer : sama2 mbak mg brgna ya,
    @Syamsul Alam : huehehuehe cb ajah deh ntar bs mas...
    @sandy : trims mas mau ngejar trafik nih..
    @Erik : silahkan mas,,mg bergna
    @Diary Pink : ok mbak sukses jg untukmu

  • Nanang

    ini dia yang dicari2...tab view..:-). thanks ya... link exchane yuk...

  • Abdee

    Mas, saya pengguna Blog baru. Dan saya udah baca tutorial Mas ttg membuat Tab. Tapi, saya mau nanya, gimana cara mengisi Tab itu dengan Link halaman? Misalnya, Tab "Profil" saya ingin menambahkan halaman itu dengan profil lengkap saya.
    Tolong bantu yah Mas....!!!

  • Ghustie Samosir

    Makasih bos, saya edit dikit yach :)

  • Mas-Bakrie

    'lam kenal + mohon tips biar posting bisa dimasukkan ke tab view. disini punya gak ? oya tab view yang kupake' model vertikal mas. tab ini oke juga. tp cara postingnya gmn ? he..he..he(katrok deh)trim (http://inovasiguru.blogspot.com)

  • Mas mau nanya ni saya dah buat menu2 tersebut nah untuk memasukan hasil postingan ke dalam menu gimana caranya ? saya sudah otak atik tapi tetep saja hasil postingan ga ada di menu...mohon pencerahannya kalo bisa dijawab via mail ervin_tea@yahoo.co.id terima kasih sebelunya...

  • Posting Komentar

    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.

    Gunakan opsi 'Anonim' jika anda tidak ingin mempublikasikan data anda. (sangat tidak disarankan)