Sabtu, 18 April 2009

Bikin Tab View model Baru (Back and Forward)

Hi... akhirnya saYa nGeBLog Lagi Nih... Di sini anda dapat menemukan informasi tentang Musik. Kunci atau Chord Lagu, Profil, Plus info tentang IPTEK diantaranya Hacking, Cracking, Programmer, Virus maker, dan Lain-Lain deh Pokonya...

Nah,, Kali Ini saya akan ngebaHas tentang :

Bikin Tab View model Baru (Back and Forward)

Saat saya jalan jalan, eh ketemu tutorial unik nih yaitu buat Tab view model baru. Keren deh,,...
Mau tahu caranya ikutilangkah-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:



Load disqus comments

0 komentar