Cara Membuat Tab View Pada Blog

Cara Membuat Tab View Pada Blog. sebelumnya saya sudah menerangkan tentang Cara Membuat Related Post Fungsi Scrolling. yang belum tahu silahkan di baca dahulu. sekarang biarkan saya jelaskan apa itu tab view. tab view merupakan widget yang dapat menggabungkan widget. masih belum mudeng, lebih baik lihat gambar di atas saja. sudah tahu? nah, widget tersebut sangat bermanfaat bagi blogger apalagi blog yang gadgetnya sangat banyak. dengan widget di atas blog kalian akan terlihat simple dan sangat menarik. sudah pangjang lebar saya menjelaskannya, mungkin ini saatnya ke langkah membuatnya agar tidak bingung  :

• Login ke Blogger dengan ID kalian
• Pada dasbor pilh rancangan kemudian pilih Edit HTML
• Jangan lupa back up template anda supaya aman dengan cara klik download template langkap
• Langkah selanjutnya copy kode di bawah ini, lalu paste persis di atas kode ]]></b:skin>

• /* tab model 2 ateonsoft.com */
  div.Tabateonsoft div.TFs
  {height: 30px; overflow: hidden;}
  div.Tabateonsoft div.TFs a
  {float: left; display: block; text-align: center; text-decoration: none; font: normal 12px arial; padding:3px 5px 3px 3px; margin:0 5px 0 0;letter-spacing:-0.07em;
  background:#f0f0f0;
  color: #333;
  border-top:1px solid #CCCCCC;
  border-right:1px solid #999999;
  border-bottom:1px solid #999999;
  border-left:1px solid #cccccc;
  -moz-border-radius-bottomright: 10px; -moz-border-radius-topright: 10px;
  }
  div.Tabateonsoft div.TFs a:hover
  { background: #E8E8E8;
  border-top:1px solid #999999;
  border-right:1px solid #cccccc;
  border-bottom:1px solid #cccccc;
  border-left:1px solid #999999;}
  div.Tabateonsoft div.TFs a.Active
  { background: #E8E8E8;
  color: #000000;
  border-top:1px solid #999999;
  border-right:1px solid #cccccc;
  border-bottom:1px solid #cccccc;
  border-left:1px solid #999999; font-weight:bold;}
  div.Tabateonsoft div.Pages
  { clear: both; overflow: hidden; height:240px; border:1px solid #EFF0F1; padding:0;background: #ffffff; -moz-border-radius:5px;}
  div.Tabateonsoft div.Pages div.Page
  {height: 100%;padding: 0px; overflow: hidden; }
  div.Tabateonsoft div.Pages div.Page div.floor
  { font-size:11px;padding: 3px 5px; text-align:left;}

sesuaikan warnanya dengan mesin warna 

• Lalu letakkan script dibawah ini tepat dibawah kode </head>

<script src='http://nobinoku.googlecode.com/files/tabview2atensoft.js' type='text/javascript'/>

• Kemudian Simpan Template dan Sekarang menuju ke Elemen halaman
• Pilih Klik Tombol Add gadget pilih HTML/Javascript
• Letakkan kode berikut dalamnya

• <form action="tabateonsoft.html" method="get">
  <div class="Tabateonsoft" id="Tabateonsoft">
  <div class="TFs">
  <a>judul1</a>
  <a>judul2</a>
  <a>judul3</a>
  <a>judul4</a>
  </div>
  <div class="Pages">
  <div class="Page"><!-- Tab -->
  <div class="floor">

  Disini letakkan kode untuk tab 1 anda

  </div>
  </div><!-- end Tab -->
  <div class="Page"><!-- Tab -->

  Disini letakkan kode untuk tab 2 anda

  </div><!-- end Tab -->
  <div class="Page"><!-- Tab -->
  <div class="floor">

  Disini letakkan kode untuk tab 3 anda

  </div>
  </div><!-- end Tab -->
  <div class="Page"><!-- Tab -->
  <div class="floor">

  Disini letakkan kode untuk tab 4 anda

  </div>
  </div><!-- end Tab -->
  </div>
  </div>
  </form>
  <script type="text/javascript">tabateonsoft_name('Tabateonsoft');</script>

• jangan lupa untuk mengganti tulisan berwarna dengan perintah yang ada dan simpan

selesai... kalau masih bingung silahkan commend. pasti akan saya balas.