Cara Mudah Pasang Tab View Di Blog

Diposkan oleh Hery Prasetyo Monday, May 24, 2010
بسم الله الرحمن الرحيم

Tab View memperhemat tempat untuk pemasangan beberapa widget. menampilkan salah satu dan menyembunyikan yang lain. yang lain akan tampak apabila diklik.

Cara Mudah Pasang Tab View Di Blog

Banyak sekali cara untuk membuat tab view, sayang cara itu terlalu panjang, untuk kemudian memasangnya di sidebar. akan tetapi sekarang ada cara yang sangat mudah untuk memasang tab view di sidebar blog anda.

Sebelum melanjutkan ke cara mudah pasang tab view di blog, silahkan lihat demo berikut :


Cara Mudah Pasang Tab View Di Blog adalah sebagai berikut :

- Silahkan login keBlogger dengan account anda.
- Pergi Ke "Tata Letak".
- Klik "Tambah Gadget" dan pilih "HTML/JavaScript".
- Copy paste code berikut kedalamnya :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js" type="text/javascript"></script>
<script>

// When the document loads do everything inside here ...
$(document).ready(function(){

// When a link is clicked
$("a.tab").click(function () {

// switch all tabs off
$(".active").removeClass("active");

// switch this tab on
$(this).addClass("active");

// slide all content up
$(".content").slideUp();

// slide this content up
var content_show = $(this).attr("title");
$("#"+content_show).slideDown();

});

});
</script>
<style type="text/css" media="screen">
<!--

.tabbed_area {
border:1px solid #494e52;
background-color:#333;
padding:8px;
}

div.tabs {
margin-top:5px;
margin-bottom:6px;
}
div.tabs div {
display:inline;
}
div.tabs a {
background:#464c54;
color:#ffebb5;
padding:8px 14px 8px 14px;
text-decoration:none;
font-size:9px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
text-transform:uppercase;
background-repeat:repeat-x;
background-position:bottom;
}
div.tabs a:hover {
background-color:#2f343a;
border-color:#2f343a;
}
div.tabs a.active {
background-color:#ffffff;
color:#282e32;
border:1px solid #464c54;
border-bottom: 1px solid #ffffff;
background-image:url(http://2.bp.blogspot.com/_QeR8kbaWhLU/S_qTcwGSRiI/AAAAAAAAAzw/v0x5E6SmvIA/s320/tab_on.jpg);
background-repeat:repeat-x;
background-position:top;
}
.content {
background-color:#ffffff;
padding:10px;
border:1px solid #464c54;
font-family:Arial, Helvetica, sans-serif;
background-image:url(http://2.bp.blogspot.com/_QeR8kbaWhLU/S_qTcstvFWI/AAAAAAAAAzo/CzCQrxm-BrA/s320/content_bottom.jpg);
background-repeat:repeat-x;
background-position:bottom;
}
#content_2, #content_3 { display:none; }

.content ul {
margin:0px;
padding:0px 20px 0px 20px;
}
.content ul li {
list-style:none;
border-bottom:1px solid #d6dde0;
padding-top:15px;
padding-bottom:15px;
font-size:13px;
}
.content ul li:last-child {
border-bottom:none;
}
.content ul li a {
text-decoration:none;
color:#3e4346;
}
.content ul li a small {
color:#8b959c;
font-size:9px;
text-transform:uppercase;
font-family:Verdana, Arial, Helvetica, sans-serif;
position:relative;
left:4px;
top:0px;
}
.content ul li a:hover {
color:#a59c83;
}
.content ul li a:hover small {
color:#baae8e;
}
.content div {
margin:0px;
padding:0px;
}
-->
</style>
<div class="tabbed_area">

<div class="tabs">
<div><a class="tab active" title="content_1" href="#JUDUL1">JUDUL1</a></div>
<div><a class="tab" title="content_2" href="#JUDUL2">JUDUL2</a></div>
<div><a class="tab" title="content_3" href="#JUDUL3">JUDUL3</a></div>
</div>

<div class="content" id="content_1">
<div>
CODE WIDGET DISINI
</div>
</div>
<div class="content" id="content_2">
<ul>
<li><a href="">DAFTAR JUDUL</a></li>
<li><a href="">DAFTAR JUDUL</a></li>
<li><a href="">DAFTAR JUDUL</a></li>
<li><a href="">DAFTAR JUDUL</a></li>
<li><a href="">DAFTAR JUDUL</a></li>
</ul>
</div>
<div class="content" id="content_3">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/">About</a></li>
<li><a href="/">All Category</a></li>
<li><a href="/">Contact</a></li>
</ul>
</div>

</div>


- Simpan.

Selamat mencoba Cara Mudah Pasang Tab View Di Blog dan happy blogging.


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 :

32 Responses to Cara Mudah Pasang Tab View Di Blog

  1. aryadevi Says:
  2. salam sobat disini jam 23:33, disana ?

     
  3. berita bola Says:
  4. mantab

     
  5. HAPIA Mesir Says:
  6. aryadevi@ salam pak guru... disini sedang jam 6:45 sore pak...laporan selesai...hihihihi

     
  7. Rock Says:
  8. Aku simpan dulu sob kodenya...

     
  9. Bayu Lebond Says:
  10. wah makin keliatan profesional ya bung...

     
  11. Beben Says:
  12. aku dah ada 3 sob, tambah lg gitu yak..kekekekekkk

     
  13. nuansa pena Says:
  14. Ingin segera mencobanya!

     
  15. aura pelupa Says:
  16. script yang mantab!

     
  17. makasih banyak infonya...

     
  18. mas doyok Says:
  19. kalau saya kasih keknya bakal jadi tambah berat lagi mas :D
    tapi ya memang bisa menghemat tempat

     
  20. buxer Says:
  21. bang, kalau untuk yang otomatis seperti apa scripnya, misalnya u category, recent comment, recent post, atau semacamnya?
    Maksudnya tanpa anchor gitchu...

     
  22. Aku dulu pernah pasang tab view tapi sering 'error', tab yg 'disembunyikan' gak bisa di klik... hehehe
    Entah aku salah dimananya...
    Akhirnya aku hapus aja.. :D

     
  23. Alhamdulillah.., aku bisa belajar banyak hal dari sini.
    Makasih ya... :D

     
  24. Ega Says:
  25. Mantabs. Wah, langsung di coba di blog baruku

     
  26. Ferdinand Says:
  27. Waduh biarpun bisa hemat tempat aku masih ga niat untuk pake tab Sob...

     
  28. Nugraha Says:
  29. Waahh kayaknya sobat ini tidak pernah kehabisan bahan untuk berkreasi seputar widget atau trik2 blogging yah ? Salut deh :)

     
  30. iklan gratis Says:
  31. Mantabs Bos Infonya.. Thanks bgt lho...

     
  32. thanks infonya mas...

     
  33. perlu dicoba-coba dulu

     
  34. Wet .. Mantaf bggt nih gan .. ;)

     
  35. Rudy Azhar Says:
  36. kalau jquery memakai versi yang terbaru bisa nggak ya???

     
  37. Bunglon Blog Says:
  38. asalamualaikum...mamapir sobat
    hmmm dengantab view akan menghemat tempat yach
    wah ini ada backsoundnya kren sob, lagu ESQ hmmm menyejukkan
    Sukses Slalu!

     
  39. Assalamualikum ya Akhi... Maaf baru berkunjung lagi... ada prioritas lain yang di dahulukan.

    Pengen juga sih pasang tab view, biar bisa menghemat ruang..... Bagus infonya. Disimpan deh alamannya.

     
  40. mas hapia dapat ilmu kerren ini dari maa sihh..... :D

     
  41. apa nanti nggak nambah berat blogya mas, tapi simpel sih

     
  42. Rizky2009 Says:
  43. wah sip dah nih sob, g pakai edit HTML

     
  44. tanks infonya, oke banget tuh

     
  45. asslkm..jazakumullah atas infonya sobat,,sngt inspiratif,,ana lngsng ke TKP ne,biar blog ana tmbh cakep..:-)slm kenal bt smua para blogger,,jngn lupa sambung tali silaturrohim dg saling kunjung mengunjungi..:-)

     
  46. Ryoichikuga Says:
  47. Tutorila yang bagus

     
  48. ihsan Says:
  49. gmn cara bikin judul seperti { archive | topic | pages } tepat ditengah yya., kalo yg ini kan rata kiri:)

    thanks

     
  50. Wisata Murah Says:
  51. thank infonya. lain waktu ini pasti berguna

     
  52. sherlina Says:
  53. www.indobet77.com

    Master Agen Bola , Casino , Tangkas , Togel Terbesar
    dan Terpercaya Pilihan Para Bettor

    Promo Terbaru :
    - Bonus  10% New Member Sportsbook
    - Bonus 5% New Member Casino Online
    - Bonus 10% Setiap Hari Bola Tangkas
    - CASHBACK untuk Member
    - BONUS REFERRAL 5% + 1% Seumur Hidup

    untuk Informasi lebih jelasnya silahkan hubungi CS kami :
    - YM : indobet77_sb2@yahoo.com
    - EMAIL : indobet77@gmail.com
    - WHATSAPP : +63 905 213 7238
    - WECHAT : indobet77
    - SMS CENTER : +63 905 213 7238
    - PIN BB : 2B65A547 / 24CC5D0F

    Salam Admin ,
    http://indobet77.com/

     

Post a Comment