Kamis, 07 Juli 2011

Cara membuat tab pada blog

Memasang tab merupakan hal yang udah banyak di terapkan para blogger selain membuat tampilan template bagus dan indah juga mengatasi memakan banyak tempat pada template. Anda tau pengunjung kadang mengalami lambat loading pada halaman blog seseorang, karena adanya widget-widget yang banyak terpampang di header, footer, dan tempat lain. Dan sudah pasti membuat tab merupakan solusi, karena tab ini bisa anda isi banyak widget hanya pada satu tempat. Cara pasangnya pun tak terlalu rumit, berikut caranya :
  1. Login ke blog anda, pilih menu Rancangan, pilih lagi opsi Edit HTML.
  2. Buka kotak pencarian tag dengan mengklik ctrl + f, agar mudah mencarinya. Cari kode <body>
  3. Kemudian letakkan kode di bawah ini persis di bawah kode <body>
 <script src='http://recent.googlecode.com/files/tabs.min.js' type='text/javascript'/>
     4.  Setelah itu anda cari lagi kode ini  ]]></b:skin>
     5.  Kemudian pasang kode di bawah ini di bawah kode tersebut .

<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>
     6.  Kemudian klik simpan template.
     7.  pindah ke opsi Elemen Laman, Buat gadget baru atau tambah gadget, lalu pilih HTML/java script.
     8.  Copy kode di bawah ini :

<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>
 catatan : 
  • anda dapat ganti menu tab pada tulisan tab 1, tab2, tab3.
  • Dan masukkan konten, widget atau gadget yang ingin anda tampilkan pada tulisan KONTEN YANG INGIN ANDA TAMPILKAN 1,2,3 
  • Ingat menu tab dan isi, persis letaknya konten yang anda inginkan 1 akan di letakan pada menu tab 1 dan seterusnya.

Memasang tab pada blog, Cara memasang tab pada blogspot, tutorial pasang tab pada blog, buat tab mudah di blogspot 
               
 

1 komentar:

thanks infony
sMoga mmberi manfaat ntuk aq.

Posting Komentar

Adsense Indonesia Paid Review Indonesia