Membuat Tab View di Blogspot

Diposkan oleh Hery Prasetyo Tuesday, December 15, 2009
بسم الله الرحمن الرحيم

Sebelumnya HAPIA Mesir mengucapkan banyak terima kasih kepada Mas Adi ketika HAPIA Mesir berjalan-jalan didisekitar rumahnya HAPIA Mesir menemukan tip seperti ini.

Langsung saja cara membuat Tab View di Blogspot seperti yang kamu lihat dibawah logo blog ini disebelah kanan yang berisikan daftar isi dan lain-lain adalah sebagai berikut :

- Login keBlogger dengan account kamu.
- Pergi ke"Tata Letak - Edit HTML".
- Cari code <head> dan masukan code berikut tepat dibawahnya :

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


- Copy Paste code berikut tepat diatas code ]]></b:skin> :

/* tab view */
div.Tabview {margin:15px 0 0 0; font: normal 11px arial;}
div.Tabview div.TFs
{height:28px; overflow: hidden; border:1px solid #ccc; border-bottom:0px;background:#f0f0f0;}
div.Tabview div.TFs a
{float: left; display: block; text-align: center; text-decoration: none; padding:7px; margin:0; background:#f0f0f0; color: #333; border-right:1px solid #CCCCCC;}
div.Tabview div.TFs a:hover
{ background:#ccc;}
div.Tabview div.TFs a.Active
{ background: #333; color:#FFFFFF;}
div.Tabview div.Pages
{ clear: both; overflow: hidden; height:150px; padding:0; border:1px solid #ccc; padding:5px;}
div.Tabview div.Pages div.Page
{height: 100%;padding: 0px; overflow: hidden; }
div.Tabview div.Pages div.Page div.floor
{ font-size:11px; text-align:left;}
#sidebar div.Tabview div.Pages div.Page div.floor li {
margin:0; padding:0;}


- Simpan Template.

Langkah kedua :

- Silahkan tambah gadget html/javascript pada blog kamu dan pastekan code berikut :

<form action="tabateonsoft.html" method="get">
<div class="Tabview" id="Tabview">
<div class="TFs">
<a>tab1</a>
<a>tab2</a>
<a>tab3</a>
<a>tab4</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('Tabview');</script>


Selamat mencoba.


Jika postingan ini dirasa berguna bagi yang lain. silahkan share untuk berbagi.

Dapatkan Update Terbaru Dari HAPIA Mesir, Masukan Email Anda :

HAPIA Mesir Readers

Bookmark and Share

Direkomendasikan Untuk Dibaca :

19 Responses to Membuat Tab View di Blogspot

  1. FaiS Says:
  2. info'y mnarik,..
    maKasih ya dah share..
    kpn aku mo coba buat dech tp kLo untuk dLm w'tu dkt ini kayk'y tDk karna dLm keadaan Ulangan Tengah Semester ...

     
  3. perlu dicoba nech... tapi aq buat di template Q kadang gak bsa napa yach sob??

     
  4. BEBEN Says:
  5. sama nih postingannya mengenai tab view.....maju terus blogger...shuahushauhsua

     
  6. Rock Says:
  7. Makasih tipsnya...

     
  8. LL Says:
  9. Sippp...

     
  10. Celebrities Says:
  11. info menarik sahabatku, terima kasih atas berbagi ilmunya.. semoga bermanfaat buat kita semua..

     
  12. munir ardi Says:
  13. Tutorial mantap bisa dicoba nih Saudara

     
  14. Facechan Says:
  15. Mantap sob....

    Btw met tahun baru yah...

     
  16. bagus kak... boleh ne dicoba....

     
  17. Nando toty Says:
  18. bagus infonya ...ijin conthex ya kak..

     
  19. Surya Says:
  20. wah..thanks abis mas..saya dah coba beberapa tutorial di blog lain, tapi disini lah saya menemukan yang sesuai dengan keinginan saya..wah..senengnya..sekali lagi terimakasih mas...4 jempol buat mas..heheheh

     
  21. Sunan Says:
  22. tengkyu banget om...sama seperti mas surya..ini baru oke....

     
  23. kalo buat 2 tab view gimana caranya??? apa harus copy script lagi kemudian add widget?? atau hanya add widget saja..??

     
  24. HAPIA Mesir Says:
  25. IT Programmer@ kalo mw dibuat 2 sob.. code yang terakhir tu kan ada 4 tabnya...dihapus yang 2 nya sob..

     
  26. Rizky2009 Says:
  27. pengen aq pasang tp scriptnya kok panjang bgt yah....... g ada yg lebih sederhana lagi sob ?

     
  28. Pras Free Says:
  29. pagi..

     
  30. mas aku pengen coba bikin tab view dg kode nya itu, tp nanya mas, misalnya satu kode itu dipake untuk buat dua tab view di sidebar bisa gak mas? soalnya saya pernah pake tab view dan saat mau bikin tab view satu lagi eh gak bisa, jadinya pake tab view nya satu saja

     
  31. Ikolamola Says:
  32. dah di coba ternyata brhasil, maksih ya

     
  33. Makasih tutorialnya sobat.

     

Post a Comment