Laman

Wednesday, 19 October 2011

Cara Menambah Judul Tab pada Blog


Biar blog gak terlihat monoton dan boring, menambahkan judul baru di tab akan memberikan nuansa baru dalam blog. Nah, untuk itu berikut adalah langkah-langkah untuk menambahkan tabs ke blog:

  • Login dulu ke blogger.com
  • Klik Rancangan
  • Edit HTML
  • Cari kode <body> (biar gampang, klik Ctrl+F, lalu copy paste kan kode tersebut)
  • Kemudian letakkan kode di bawah ini persis di bawah <body>
    <script src='http://recent.googlecode.com/files/tabs.min.js' type='text/javascript'/>
  • Setelah itu cari kode ]]></b:skin> (klik Ctrl+F, lalu paste kan kode tersebut untuk mempermudah pencarian)
  • Kemudian letakkan kode di bawah ini di bawah kode tersebut
    ]]></b:skin>
    <style type='text/css'>
    ul.tabs{float:left;list-style:none;height:32px;border-bottom:1px solid #999;border-left:1px solid #999;width:100%;margin:0;padding:0}
    ul.tabs li{float:left;height:31px;line-height:31px;border:1px solid #999;border-left:none;background:#e0e0e0;overflow:hidden;position:relative;margin:0 0 -1px;padding:0}
    ul.tabs li a{text-decoration:none;color:#000;display:block;font-size:1.2em;border:1px solid #fff;outline:none;padding:0 20px}
    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{font-size:1.2em;padding:20px}
    .tab_content h2{font-weight:400;padding-bottom:10px;border-bottom:1px dashed #ddd;font-size:1.8em}
    .tab_content h3 a{color:#254588}
    .tab_content img{float:left;border:1px solid #ddd;margin:0 20px 20px 0;padding:5px}
    html .menu{height: 1%;}
    </style>
  • Kemudian Simpan Tamplate
  • Setelah itu klik Elemen Laman
  • Tambah Gadget
  • Pilih HTML/JavaScript
  • Copy paste kode dibawah ini ke dalam nya
    <script type="text/javascript">
    $(document).ready(function() {
    $(".tab_content").hide();
    $("ul.tabs li:first").addClass("active").show();
    $(".tab_content:first").show();
    $("ul.tabs li").click(function() {
    $("ul.tabs li").removeClass("active");
    $(this).addClass("active");
    $(".tab_content").hide();
    var activeTab = $(this).find("a").attr("href");
    $(activeTab).fadeIn(); return false;
    });
    });
    </script><div class="container">
    <ul class="tabs">
    <li><a href="#tab1">Tab 1</a></li>
    <li><a href="#tab2">Tab 2</a></li>
    <li><a href="#tab3">Tab 3</a></li>
    </ul>
    <div class="tab_container">
    <div id="tab1" class="tab_content">
    <h2>Tab 1</h2>
    KONTEN YANG INGIN ANDA TAMPILKAN 1
    </div>
    <div id="tab2" class="tab_content">
    <h2>Tab 2</h2> 
    KONTEN YANG INGIN ANDA TAMPILKAN
     2
    </div> <div id="tab3" class="tab_content">
    <h2>Tab 3</h2> 
    KONTEN YANG INGIN ANDA TAMPILKAN
     3
    </div>
    </div>
    </div>
  • Untuk Tulisan berwarna merah letakkan kode konten yang ingin anda tampilkan.
  • Kemudian simpan dan lihat hasilnya.

Selamat mencoba.........

[[[This article was taken from http://jayaputrasbloq.blogspot.com/2010/04/cara-membuat-tabs-di-blogspot-3.html]]]]

No comments:

Post a Comment