Selamat Datang di http://nthoeng.blogspot.com, Terima Kasih Sudah Berkunjung, Jangan Lupa Tinggalkan komentar. | Selamat Datang di http://nthoeng.blogspot.com, Terima Kasih Sudah Berkunjung, Jangan Lupa Tinggalkan komentar. |

Jumat, 02 Maret 2012

Membuat Tab View According dengan Jquery


Tab View, merupakan sebuah widget yang dapat digunakan untuk menghemat tempat pada blog agar kelihatan lebih ringkas dan rapi, berbeda dengan Multi Tab, Tab View According menggunakan gaya slide kebawah untuk membuka lembar gadget, dengan efek Jquery, sehingga berkesan dinamis.
Pada posting kali ini saya akan memberikan cara untuk membuat Tab View According dengan efek Jquery, untuk cara kerjanya adalah tab akan membuka jika judul tab tersentuh oleh Cursor, berikut langkah membuat Tab View According :




  1. Log in ke Blogger.
  2. Pilih Rancangan, kemudian Elemen Laman.
  3. Klik Tambah Gadget, dan pilh HTML/Javascript.
  4. Masukan script berikut :

<style type="text/css">
h5 {
font-family:Verdana;
font-weight:bold;
text-transform:uppercase;
font-size: 13px;
padding: 0 0 1em;
color: #b2b2b2;
}
.msg_list {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
.msg_head {
padding: 7px 8px;
cursor: pointer;
position: relative;
-moz-border-radius-topright: 11px;
-webkit-border-top-right-radius: 11px;
border-top-right-radius;11px;
-moz-border-radius-bottomright: 11px;
-webkit-border-bottom-right-radius: 11px;
border-bottom-right-radius;11px;
background : url (http://xxxxxx/FWgOHLBMKL0/s1600/sidebar-tab.png);
margin:1px;
}
.msg_body {
padding: 0px 0px 15px;
background-color:transparent;
}
</style>

<script type="text/javascript" src="http://javscript-code.googlecode.com/files/menuaccordion.js"></script>

<script type="text/javascript">
$(document).ready(function()
{
//hide the all of the element with class msg_body
$(".msg_body").hide();
//slides the element with class "msg_body" when paragraph with class "msg_head" is clicked
$("#firstpane h5.msg_head").click(function()
{
$(this).next("div.msg_body").slideToggle(700).siblings("div.msg_body").slideUp("slow");
});
//slides the element with class "msg_body" when mouse is over the paragraph
$("#secondpane h5.msg_head").mouseover(function()
{
$(this).next("div.msg_body").slideDown("slow").siblings("div.msg_body").slideUp("slow");
});
});
</script>
<div class="msg_list" id="secondpane">
<h5 class="msg_head">Tab 1</h5>
<div class="msg_body">

......
</div>


<h5 class="msg_head">Tab 2</h5>
<div class="msg_body">

......
</div>
<h5 class="msg_head">Tab 3</h5>
<div class="msg_body">

.......
</div>

</div>
5. Edit script sesuai kebutuhan, tambahkan script gadget lain untuk memasangnya pada Tab View.
6. Untuk Background Tab, dapat menggunakan gambar / kode warna.
7. Kemudian Simpan.
Semoga Berhasil !!!

13komentar:

Mukhlismengatakan...

ini bikin berat blog gak sob ??

kunjungan sore ,,numpang makan disini :D

Galihmengatakan...

kalau pengalaman sih, ,sama saja, ,tinggal script gadget yang di masukan ke dalam tab itu berat atau nggak, ,ya contoh blog ini yag menggunakan Tab view jquery, ,silahkan nilai sendiri. .kalau blog terasa berat di compres aja Css dan Html nya. .Thankz Kunjungannya. . :D .

Planet Kentirmengatakan...

Liat http://planetkentir.blogspot.com
tab lamannya bagus.,., :D

Яіѕӓӏађаті Тђё Ѕіӏеисё ԁіӓяуmengatakan...

sangat keren blognya, tutorial ini dah saya coba dan berhasil

Galihmengatakan...

Thankz Soob !! Terima kasih telah berkunjung..

Яіѕӓӏађаті Тђё Ѕіӏеисё ԁіӓяуmengatakan...

kalo kayak yg punya agan gmn caranya?

Galihmengatakan...

Kalau untuk blog ini saya memakai According dengan klik untuk membuka, kalau mau sabar nnti saya share tutornya.

Яіѕӓӏађаті Тђё Ѕіӏеисё ԁіӓяуmengatakan...

oke saya tunggu deh tutorialnya, soalnya kalo yg ini kena kursor lgsng muncul, bikin mata tdk nyaman,

Galihmengatakan...

Hehehe iya sob saya juga ganti kok.

Faril Lukmanmengatakan...

sob, kode html widget yang dicopy ke script yang mana ya? aku udah nyoba dari <*widget> sampe <*/widget> tak copy semua, kog nggak bisa ya?? isinya cuma kosongan..

Anonimmengatakan...

blognya keren bro

akrom adabimengatakan...

sob..blog ane kog tabnya cuma huruf??
apa gara 2 ada jquery lain??
mohon pencerahan
http://kampussantri.blogspot.com/

Faris Asyrafmengatakan...

maaf bang,... cara menambah kotak tab gimana bang???

Posting Komentar

TwitterDeliciousFacebookDiggStumbleuponFavoritesMore