Blog Tutorial

Tutorial Blog, Cheat Games, Tutorial Ponsel, Tutorial Komputer, Tutorial Browser

Senin, 11 Oktober 2010

Pasang Simple Tabs di Blogger

Kategori : ,
Penerapan Simple Tabs di blogger tidak lah sulit dan ribet. Tabs berguna untuk meminimalisir penggunaan tempat pada blogger, jadi agar widget kita tidak terlalu memakai banyak tempat pakailah tabs. Dalam satu tempat bisa menaruh banyak widget atau yang lain itulah penjelasan singkat dari tabs. Sebenarnya jenis tabs itu banyak sekali namun yang kali ini saya jelaskan itu sebagian kecil dari model tabs, tabs yang satu ini namanya Simple Tabs. Menurut saya nama dengan cara menggunakannya itu berbeda sebab tidak se-simple namanya. Coba deh kita lihat demonya di bawah ini.

Demo Simple Tabs

Blue Dark CSS3 Blogger Template

Blue Dark CSS3 Blogger Template

Di dalam template ini terdapat menu navigasi yang di buat dengan sentuhan CSS3, untuk mengaturnya sobat bisa mengunjungi halaman Edit HTML dan cari kode HTML menunav. Nah mungkin itu saja yang perlu di ketahui. kalau ada pertanyaan atau apalah itu yang jelas tentang template ini, sobat bisa taruh pesan atau kritikan di kotak komentar di bawh ini.

OkeMAgazine Blogger Template

okemagazine blogger template

Okemagazine Blogger Template adalah hasil karya ke-2 setelah Alien Black Template yang sudah pernah saya bagikan kepada sobat semua. Sama halnya dengan template hasil karya saya sebelumnya, Okemagazine Blogger Template ini juga akan dibagikan kepada sobat semua yang menginginkannya walaupun g ada yang spesial dan menarik dari template ini, g percaya? liat aja spesifikasinya.

Float Teks Berjalan

Float Teks Berjalan

Di Kesempatan ini saya akan memberikan trik untuk mempercantik blog dengan efek Marquee. Namun kali ini saya padukan dengan Membuat Image Float. jadi namanya Float Teks Berjalan, saya sendiri yang menamakannya . Untuk contohnya klik saja Demo dan arahkan pandangan anda ke tulisan yang berwarna biru berjalan yang letaknya di bawah.




Bagaimana apakah sobat tertarik ingin memasangnya? kalau memang tertarik silahkan pasang, lah cara masangnya bagaimana? untuk cara memasangnya tinggal ikuti saja langkah dan penjelasan di bawah ini :
  1. seperti biasa kita login terlebih dahulu di blogger.com
    Pasang Simple Tabs di 
Blogger
  2. setelah itu masuk ke Rancangan >> Edit HTML
    Pasang Simple Tabs di 
BloggerPasang Simple Tabs di 
Blogger
  3. lalu silahkan cari kode ]]></b:skin> lalu tambahkan kode di bawah ini tepat di atasnya

    .container {width: 500px; margin: 10px auto;}
    ul.tabs {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 32px;
    border-bottom: 1px solid #999;
    border-left: 1px solid #999;
    width: 100%;
    }
    ul.tabs li {
    float: left;
    margin: 0;
    padding: 0;
    height: 31px;
    line-height: 31px;
    border: 1px solid #999;
    border-left: none;
    margin-bottom: -1px;
    background: #e0e0e0;
    overflow: hidden;
    position: relative;
    }
    ul.tabs li a {
    text-decoration: none;
    color: #000;
    display: block;
    font-size: 1.2em;
    padding: 0 20px;
    border: 1px solid #fff;
    outline: none;
    }
    ul.tabs li a:hover {
    background: #ccc;
    }
    html ul.tabs li.active, html ul.tabs li.active a:hover {
    background: #fff;
    border-bottom: 1px solid #fff;
    }
    .tab_container {
    border: 1px solid #999;
    border-top: none;
    clear: both;
    float: left;
    width: 100%;
    background: #fff;
    -moz-border-radius-bottomright: 5px;
    -khtml-border-radius-bottomright: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -khtml-border-radius-bottomleft: 5px;
    -webkit-border-bottom-left-radius: 5px;
    }
    .tab_content {
    padding: 20px;
    font-size: 1.2em;
    }
    .tab_content h2 {
    font-weight: normal;
    padding-bottom: 10px;
    border-bottom: 1px dashed #ddd;
    font-size: 1.8em;
    }
    .tab_content h3 a{
    color: #254588;
    }
    .tab_content img {
    float: left;
    margin: 0 20px 20px 0;
    border: 1px solid #ddd;
    padding: 5px;
    }


    Catatan : setiap properti atau nilainya dapat sobat sesuaikan dengan tampilan atau theme template sobat
    Pasang Simple Tabs di Blogger
  4. kalau sudah silahkan cari kode </head> dan tambahkan kode di bawah ini tepat di atasnya


    <script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
    <script type="text/javascript">

    $(document).ready(function() {

    //Default Action
    $(".tab_content").hide(); //Hide all content
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab
    $(".tab_content:first").show(); //Show first tab content

    //On Click Event
    $("ul.tabs li").click(function() {
    $("ul.tabs li").removeClass("active"); //Remove any "active" class
    $(this).addClass("active"); //Add "active" class to selected tab
    $(".tab_content").hide(); //Hide all tab content
    var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
    $(activeTab).fadeIn(); //Fade in the active content
    return false;
    });

    });
    </script>


    Pasang Simple Tabs di Blogger
  5. Nah setelah itu simpan deh dan setelah menyimpannya kita menuju Elemen Halaman dan tambahkan sebuah gadget
  6. Setelah menambahkan sebuah gadget, pilih yang HTML/Javascript
  7. Setelah itu masukan kode di bawah ini


    <div class="container">
    <ul class="tabs">
    <li><a href="#tab1">Blue Dark CSS3</a></li>
    <li><a href="#tab2">Okemagazine</a></li>
    <li><a href="#tab3">Float teks</a></li>
    </ul>
    <div class="tab_container">
    <div id="tab1" class="tab_content">
    <h2>Blue Dark CSS3 Blogger Template</h2>
    <a href="http://oketrik.blogspot.com/2010/09/blue-dark-css3-blogger-template.html">
    <img src="http://1.bp.blogspot.com/_QfoNn403afE/TKAEsDnCL7I/AAAAAAAABU4/hqXlUivvHqY/s400/Screenshout+Blue+Dark+CSS3+Blogger+Template.png" alt="Blue Dark CSS3 Blogger Template" /></a><p>Di dalam template ini terdapat menu navigasi yang di buat dengan sentuhan CSS3, untuk mengaturnya sobat bisa mengunjungi halaman Edit HTML dan cari kode HTML menunav. Nah mungkin itu saja yang perlu di ketahui. kalau ada pertanyaan atau apalah itu yang jelas tentang template ini, sobat bisa taruh pesan atau kritikan di kotak komentar di bawh ini.</p>
    </div>
    <div id="tab2" class="tab_content">
    <h2>OkeMAgazine Blogger Template</h2>
    <a href="http://oketrik.blogspot.com/2010/07/okemagazine-blogger-template.html"> <img src="http://3.bp.blogspot.com/_QfoNn403afE/TEHehRxauCI/AAAAAAAABM0/h8JAFOsc29I/s400/okemagazinetemplate-oketrik.blogspot.com+-+2010-07-17+-+23-42-48.png" alt="okemagazine blogger template" /></a>
    <p>Okemagazine Blogger Template adalah hasil karya ke-2 setelah Alien Black Template yang sudah pernah saya bagikan kepada sobat semua. Sama halnya dengan template hasil karya saya sebelumnya, Okemagazine Blogger Template ini juga akan dibagikan kepada sobat semua yang menginginkannya walaupun g ada yang spesial dan menarik dari template ini, g percaya? liat aja spesifikasinya.</p>
    </div>
    <div id="tab3" class="tab_content">
    <h2>Float Teks Berjalan</h2>
    <a href="http://oketrik.blogspot.com/2009/12/membuat-float-teks-berjalan.html">Float Teks Berjalan</a>
    <p>Di Kesempatan ini saya akan memberikan trik untuk mempercantik blog dengan efek Marquee. Namun kali ini saya padukan dengan Membuat Image Float. jadi namanya Float Teks Berjalan, saya sendiri yang menamakannya . Untuk contohnya klik saja Demo dan arahkan pandangan anda ke tulisan yang berwarna biru berjalan yang letaknya di bawah.</p>
    </div>
    </div>
    </div>

    Penjelasan :
    • Warna Merah : Menunjukan Judul dari tabs, sesuaikan dengan judul konten atau isi tab
    • Warna Biru : Menunjukan url judul tabs atau isi kontent
    • Warna Oranye : menunjukan url gambar dari isi tab tersebut
    • Warna Ungu : menunjukan isi/konten dari tabs tersebut

  8. Setelah itu sobat dapat menyimpannya dan melihat hasilnya
Mungkin penjelasan di atas itu sangat membingunkan y? Maaf saya lagi belajar menerangkan sesuatu sedetail dan semudah mungkin agar orang mudah untuk memahami dan menjalankannya namun kalau menurut sobat kurang jelas sobat dapat menanyakannya dengan meninggalkan pesan di kotak komentar. Oiya sebenarnya ada cara yang leih mudah untuk memasangnya, Bagaimana? ingat dengan postingan saya yang sebelumnya tentang Pasang Random Post? ingatkah dengan cara memasangnya? yups caranya sama dengan postingan itu, oke langsung klik aja tombol di bawah ini


hihihihi Mungkin ada yang kesel y karena ada cara mudah malah ngasih cara yang sulit, hmmmm jangan salah kapra dahulu, saya memberikan cara yang sulit agar sobat dapat mengganti dan memodifikasinya. Maaf deh kalau saya membuat sulit sahabat semua, oke saya akhiri y. Terima kasih dan Happy Blogging.
Bagikan Artikel : Facebook Twitter Google+ Linkedin Technorati Digg

3 Komentar untuk Pasang Simple Tabs di Blogger

wii.. mantap nih, baru liat yang ada efek glownya seperti itu :)

@secangkir teh dan sekerat roti >> sebenarnya itu efek glow dari template ini mas, kalau simple tabsnya g ada efek glownya

wah....
langsung Coba ajah gan......