Cara Membuat Tab View

Posted by

Cara membuat tab view- Kali ini kita akan membahas cara membuat tabview yang standart (biasa) dulu aja ya,.,.,.. Kadang kita bingung kehabisan tab/widget pada suatu blog karena saking banyaknya widget. Blog kita akan semakin rumit dan berat atau kadang tidak karuan. Nah apabila kita gunakan tab view inie tempat widget yang biasanya 1 sampai 4 bisa
di hemat dengan menggunakan 1 tempat widget dengan 4 tab saja.. Lagian apa bila menggunakan tab view widget kita tidak Pathing ndrembel (Kalau orang jawa bilang).  Nih sebagai contoh pengguna'an Tab view di blog ini :
                    Kalo tampilan tab view nya kurang jelas bisa diliat di bagian atas bawah header blog ini                               
Akan terliat lebih simple kan bila pake tab view ??? Tidak Pathing drembelkan ?? Bisa liat keseluruhan blog ini enak tidak di liat kan ??

Tertarik mau membuat tab view ini,.. sebenarnya gampang-gampang sulit buat Tab view ini
Yah,.,., langsung aja ya ke cara memberi tab view
                                 Cara memberi Tab View :
1. Login Blogger anda
2. Rancangan >> Edit HTML >> Centang Explain Widget
3. Copy Paste kode berikut di atas  </head>
        <script src='http://tabaji.googlecode.com/files/ajinoortabview.js' type='     text/javascript'/>
4. Kalau sudah, letakkan kode berikut di atas kode  ]]></b:skin>



div.Tabaji div.TFs
{height: 30px; overflow: hidden;}
div.Tabaji 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:#0174DF;
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;
}
div.Tabaji div.TFs a:hover
{ background: #FF8000;
border-top:1px solid #999999;
border-right:1px solid #cccccc;
border-bottom:1px solid #cccccc;
border-left:1px solid #999999;-moz-box-shadow: 0 0 13px;}
div.Tabaji 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.Tabaji div.Pages
{ clear: both; overflow: hidden; height:240px; border:1px solid #EFF0F1; padding:0;background: #ffffff; -moz-border-radius:5px;}
div.Tabaji div.Pages div.Page
{height: 100%;padding: 0px; overflow: hidden; }
div.Tabaji div.Pages div.Page div.floor
{ font-size:11px;padding: 3px 5px; text-align:left;}
#toc {  border: 0px solid #000000;  background: #ffffff;  padding:2px; width:495px;  margin-top:10px;}
5. Klik Simpan template dan Sekarang menuju ke Elemen laman
6. Klik Tombol Tambah gadget >> HTML/Javascript

7. Letakkan kode berikut dalam content:
<form action="tabarji.html" method="get">
<div class="Tabaji" id="Tabaji">
<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">tabaji_name('Tabaji');</script>


8. Simpan dan insya allah berhasil

CATATAN :

......             :Ganti dengan Judul tab ( Terserah hati anda )
......             :Ganti dengan ISI yang akan anda isikan pada suatu tab,, bisa script, tulisan atau semacamnya

Demikian Cara membuat Tab view Kalau ada ketidak berhasilan silahkan tanya atau komen
DeMikian juga Script Yang ada dari sumbernya


Carel
FOLLOW and JOIN to Get Update!

Social Media Widget SM Widgets




Demo Blog NJW V2 Updated at: 4:17 PM

57 Komentar:

  1. Siaaaapa yang jadiii yang pertamaxxxx >??
    komen setelah ini ??

    ReplyDelete
  2. Peertamaxxxxx.,, atau keduaxxxx ???
    Yang penting nice info nya jik.,.,

    ReplyDelete
  3. Heh bajigur, kakang adi royokan panggon

    ReplyDelete
  4. Eh, sorry bukan nyepam lho. kan konco sak kelas. ben ketok akeh komentare

    ReplyDelete
  5. @ ega

    Kwi ra royokan.,., terah di rencanakan..,,.

    ReplyDelete
  6. @ ega lagi.,.

    yoooo ga terus terus no nek we komentar.,.

    Bek2ono kono.,.,
    wakakwaka

    ReplyDelete
  7. kayaknya keren nih sob buat d coba, tp saya masih bingng mau saya isi apa nantinya, ok deh sementara saya save dulu yah, d tunggu coment dan follow baliknya jika berkenan

    ReplyDelete
  8. patut di coba mas,,, tanks atas infonya,, nice post mas...

    ReplyDelete
  9. aku juga mau coba ..moga ga berantakan he..he..

    ReplyDelete
  10. Ya.,, sob.,., monggo,, hehehe
    moga aja gag berantakan.,.,

    ReplyDelete
  11. Aku bookmark dulu sob,, buat nambah2 referensi tutorial,,,
    Nice inpoh :)

    ReplyDelete
  12. Tab view memang perlu di masa sekarang. Lebih membantu para pengunjung. Media online profesional sudah banyak yang memakainya, termasuk jawa pos, inilah.com, dll

    Salam ukhuwah

    ReplyDelete
  13. @ Eka..,, Yaaa,,. silahkan sob,.,.

    ReplyDelete
  14. Yaaa mas,,, siilahkan aja monggo.,.,
    heheheh

    ReplyDelete
  15. Dari manakah anda mendapat script-script tutorial blog, yang biasanya anda posting??? sedangkan, anda masih kecil. Saya yakin anda anda pasti menculik script itu dari blog yang lain. Apakah anda bangga dengan semua hasil tersebut??? Apakah anda bangga dengan colongan??? Apalagi jika tidak di sertai dengan source-nya. Syukur-syukur anda bisa membuat script sendiri, murni ciptaan anda sendiri, pasti anda akan lebih merasa bangga.
    Terserah, anda mau menghapus komentar ini. Tapi insya Allah komentar ini sangat bermanfaat. Dan silahkan belajar dari yang mudah jangan belajar langsung ke bagian sulit terima kasih.

    ReplyDelete
  16. Terimakasih atas kritik dan sarannya mas,,,
    Memang kelihatannya saya masih kecil,, Tapi belum tentu saya tidak bisa apa2,, Dulu pun belum banyak yang saya ketahui,, Tapi saya terus belajar,, Apakah anda menganggap anak kecil itu adalah kecil dan penuh ketidak bisaan ?? Coba anda liat beberapa tutorial lain,, apakah mereka yang sudah dewasa kebanyakan bikin script sendiri ?? (COBA JAWAB....)

    ReplyDelete
  17. Wah, ternyata ada yang marah-marah pakai anonim. Kita perlu bijak sebagai blogger. Sabar, dan terus melangkah. (Sstt... mungkin dia merasa scriptnya diculik Mas Aji ^_^)

    Salam ukhuwah

    ReplyDelete
  18. @ BeDa... Terimakasih masukannya mas.,, ya,, mungkin aja dia kesal scriptnya di culik Tp aku selalu kasih Link asal scrpit itu aku Copy.,.,

    ReplyDelete
  19. Tap View itu gmn contoh nya,,, yah,,,,,

    ReplyDelete
  20. saya mau coba nich, dari dulu tapi loading blog saya lambat banget waktu kemaren2 juga
    gimana ya
    kalo yang ini berat gk???

    ReplyDelete
  21. @ Sandy>> Tuh di gambar ada,, ya,,klo tdak jelas widget di blog ini yang berjudul Menu,.,.

    ReplyDelete
  22. Aku Dach coba.,.,.
    Ciamick sob..,..,.,.

    ReplyDelete
  23. makasih Share Tutornya
    Sangat bermanfaat
    Sukses selalu

    ReplyDelete
  24. @ Congcot.,.,>> Tab view jenis ini nggak terlalu berat kok.,,,.,. Tp kalo yang jenisnya jquery mungkin sangat berat.,, intinya tab view yang di postingn ini nggak terlalu berat dech.,.,

    ReplyDelete
  25. wah patut dicoba nich
    ia dech dicoba-dicoba

    silahkan berkunjung ke <a href="http://www.congcot.co.cc><b>congcot</b></a>

    ReplyDelete
  26. saya pernah nyoba beberapa kali membuat tab view buat blog saya yang www.harrypermadi.co.cc, tapi tampilannya gagal terus gan, mungkin templatenya ga cocok sama widget tabview.. hehe..

    ReplyDelete
  27. mantab sob,, aq udh coba nih..
    goodluck yya kawan

    ReplyDelete
  28. @ Harry>> yaaa mungkin aja sob,,.. emang nggak cocoknya gmana ???

    ReplyDelete
  29. @ Gieterror>> ya sob mantab,,. aku juga dah liat,.,

    ReplyDelete
  30. Bener bangat dengan adanya tab view keliatannya blog kita lebih simpel dan bisa mengurangi loading blog juga...

    saya sendiri pakek tapi bukan persi ini.
    makasih karna saling berbagi informasi.
    salam sukses...

    ReplyDelete
  31. aq da punya tp yang ini lebih keren!!

    ReplyDelete
  32. info yang menarik sobb...aku coba dulu..thanks

    ReplyDelete
  33. buktinya anda tidak mencantumkan sumbernya ,Saya punya screenshot nya kalau anda tidak mencantumkan sumbernya , tetapi sapa tahu kalau sudah anda ganti.....

    ReplyDelete
  34. Yaaaa lah,,... yang penting saya sudah mencantumkan sumbernya,.. .Kurang apa lagi ??

    ReplyDelete
  35. Nah setelah saya ingatkan ,anda langsung merubah nya, apakah anda tidak mengakui kesalahan anda???

    ReplyDelete
  36. Ya,, saya sangat mengakuinya, memang sebelumnya sayamemang lupa memberi sumber seperti tutorial saya sebelum2nya.. Saya memang baru belajar jadi saya sangat berterimakasih atas adanya kritikan ini....

    ReplyDelete
  37. ada konflik nih,,.. sabaraja sob..

    ReplyDelete
  38. pas di tahap 7 tuh gimana sih ???

    kok punyaq jadinya cman tulisan aja

    ReplyDelete
  39. Thank Infonya Bermanfaat sekali...

    ReplyDelete

SUARAKAN SUARAMU