Thursday, March 15, 2012

Tab Multi Widget Sederhana Untuk Blog


Tab Multi Widget Sederhana Untuk Blogger, sangat berguna untuk mengurangi loading lama di blog sobat, selain pemasangan dan tampilannya sederhana Tab Multi Widget ini menggabungkan 3 widget dalam satu widget 3in1. Sobat juga bisa lihat di blog saya ini cuman dengan sentuhan kode CSS dan JavaScript jika sobat ingin tampilan tab widegt multi untuk blogger seperti punya saya (Kamis, 15 Maret 2012) sobat bisa lihat disini Tambahkan Wordpress Style Menu Tabs Widget Untuk Blogger jika belum puas dengan itu sobat bisa lihat yang satu ini Special Tab View Untuk Widget di Blogger Lama dan Blogger Baru, Oke jika sobat ingin memasang tab multi widget sederhana ini ikuti langkah di bawah ini. 

Cara Membuat Tab Multi Widget 3in1 Sederhana


  • Masuk ke akun Blog sobat => Rancangan => Edit HTML
  • Cari kode </head> gunakan ctrl+f atau f3 untuk mempercepat pencarian.
  • Dan tepat di atasnya simpan kode di bawah ini.

<script type='text/javascript'>
//<![CDATA[
function tabtampil_oom(TPID, id)
{
  var Tabtampil = document.getElementById(TPID);
  var TTs = Tabtampil.firstChild;
  while (TTs.className != "TTs" ) TTs = TTs.nextSibling;
  var TT = TTs.firstChild;
  var i   = 0;
  do
  {
    if (TT.tagName == "A")
    {
      i++;
      TT.href      = "javascript:tabtampil_ubah('"+TPID+"', "+i+");";
      TT.className = (i == id) ? "Active" : "";
      TT.blur();
    }
  }
  while (TT = TT.nextSibling);
  var Halamans = Tabtampil.firstChild;
  while (Halamans.className != 'Halamans') Halamans = Halamans.nextSibling;
  var Halaman = Halamans.firstChild;
  var i    = 0;
  do
  {
    if (Halaman.className == 'Halaman')
    {
      i++;
      if (Halamans.offsetHeight) Halaman.style.height = (Halamans.offsetHeight-2)+"px";
      Halaman.style.overflow = "auto";
      Halaman.style.display  = (i == id) ? 'block' : 'none';
    }
  }
  while (Halaman = Halaman.nextSibling);
}
function tabtampil_ubah(TPID, id) { tabtampil_oom(TPID, id);
}
function tabtampil_inisial(TPID) { tabtampil_oom(TPID,  1);
document.write('');}
//]]>
</script>

  • Simpan template dan beralih ke Elemen Laman
  • Klik Tambah Gadget => HTML/Javascript
  • Dan masukan kode di bawah ini.
<style type="text/css">
div.TabTampil div.TTs
{height: 24px; overflow: hidden; }
div.TabTampil div.TTs a:hover, div.TabTampil div.TTs a.Active
{ background-color: #eee; }
div.TabTampil div.Halamans
{ clear: both; border: 1px solid #fff; overflow: hidden; background-color: #ffffff;}
div.TabTampil div.Halamans div.Halaman
{ height: 100%; padding: 0px; overflow: hidden; }
div.TabTampil div.Halamans div.Halaman div.Alas
{ padding: 3px 5px; }
div.TabTampil div.TTs a
{ border-left:1px solid #eee; border-right:1px solid #eee; border-top:1px solid #eee; border-bottom:0px solid #eee; float: left;
display: block; width: 95px; text-align: center; vertical-align: middle; height: 24px; padding-top: 3px; text-decoration: none; font-family: "Arial", Serif;
font-size: 11px; font-weight: 900; color: #000000}
</style>
<form action="tabtampil.html" method="get">
<div id="TabTampil" class="TabTampil">
<div style="width: 300px;" class="TTs"> <a>Tab 1</a> <a>Tab 2</a> <a>Tab 3</a></div>
<div style="width: 300px; height: 300px;" class="Halamans">
<div class="Halaman">
<div class="Alas">
<br/>
Tab 1 content goes here
</div>
</div>
<div class="Halaman">
<div class="Alas">
<br/>
Tab 2 content goes here
</div>
</div>
<div class="Halaman">
<div class="Alas">
<br/>
Tab 3 content goes here
</div>
</div>
</div>
</div>
</div></form>
<script type="text/javascript">tabtampil_inisial('TabTampil');</script>
Keterangan :
#Eee: Ini adalah warna latar belakang Tab. Warna Default adalah abu-abu. Jika sobat ingin mengubahnya ke warna yang berbeda pilihan sobat kemudian  Gunakan Kode Warna BUS

#Fff: Ini adalah warna perbatasan tab widget multi sobat. Warna default adalah putih sobat dapat menyesuaikannya dengan warna pilihan sobat menggunakan bagan warna yang sama disebutkan di atas.

#Ffffff: Ini adalah warna latar belakang tubuh utama widget sobat.  Yang standar adalah putih.Gunakan  Gunakan Kode Warna BUS  jika sobat ingin menggunakan warna yang berbeda.

#Eee: Ini adalah warna perbatasan di sekitar tab persegi panjang. Yang standar adalah abu-abu. Gunakan Kode Warna BUS jika sobat ingin menggunakan warna yang berbeda.

#000000: Ini adalah warna teks / font untuk nama tab. Dengan kata lain, itu warna judul tab. Yang standar adalah hitam.

Ganti ini dengan judul tab

Tab 1, Tab 2, Tab 3

Ganti ini dengan kode widget Anda.

Tab 1 konten goes here  Tab 2 konten goes here , Tab 3 konten goes here

Itulah yang dapat saya sampaikan pada postingan kali ini semoga bermanfaat, jika sobat ingin lihat lebihbanyak lagi artikel-artikel blog urang sunda lihat disini.
Theant Budiana

About the Guest Author:
Saya bukanlah orang yang ahli dalam dunia blogger tapi saya mencoba untuk berbagi ilmu dari apa yang saya ketahui dari paman saya, saya sangat suka blogging dan berbagi ilmu, tapi bukan berarti saya master blog salah besar jika sobat anggap saya hebat saya hanya seorang anak kampung yang mencoba untuk tidak kampungan dan tertinggal informasi alias GAPTEK, banyak artikel yang saya tulis di Blog Urang Sunda dan lihat juga blog saya satu lagi di Dunia Maya Saya dan klik disini untuk mengetahui lebih lanjut tentang saya


Kindly Bookmark this Post using your favorite Bookmarking service:
Technorati Digg This Stumble Stumble Facebook Twitter
warning

Anda bingung?
Jangan ragu untuk bertanya kepada saya lewat komentar di bawah, saya akan mencoba menjawabnya sesegera mungkin, bahkan jika sobat ada saran untuk saya silahkan jangan ragu untuk memberi saran kepada saya asalkan komentar no spam. Komentar anda, adalah bekal untuk kemajuan blog saya, saya akan kunjungi balik blog sobat jika sobat meninggalkan jejak sobat disini.

0 comments:

Comments
0 Comments
Facebook Comments Post by Blog Urang Sunda

Post a Comment

Sponsor BUS

Dapatkan juga sponsor untuk Blog anda dengan klik gambar di bawah, untuk mengetahui caranya KLIK DISINI. Kalo mau yang lebih tinggi penghasilannya KLIK DISINI Adsense Indonesia

Buat Blog

Alexa Rank

 

Info My Blog

cobi?
Yahoo bot last visit powered by MyPagerank.NetMsn bot last visit powered by MyPagerank.Net
Google PageRank Checker Powered by  MyPagerank.Net
SEO Stats powered by MyPagerank.Net
web log free

Recent Comment

| BLOG URANG SUNDA © 2009. All Rights Reserved | Template Style by My Blogger Tricks .com | Design by Brian Gardner | Back To Top |