Jquery Tab Sajian Accordion Versi 2!
Jika anda ingin menjimatkan ruang dibahagian sidebar, anda boleh mencuba Jquery Tab Menu Accordion menyerupai yang boleh dilihat pada demo di sini(sila klik). Pada Jquery Tab Menu Accordion tersebut, anda boleh masukkan banyak sekali jenis widget menyerupai Shout box, Top Post,Recent Post, Recent Comment, Top Commentator dan sebagainya mengikut citarasa anda sendiri. Jquery tab hidangan accordion ini semamangnya sangat menarik dan gampang kerana anda hanya perlu meletakkan cursor mouse pada title tab hidangan tersebut.
Untuk memasang Jquery tab hidangan accordion sila ikut beberapa langkah yang gampang dibawah.
Langkah 1
Login Blogger Dashboard --> Design --> Add A Gadget --> HTML/Javascript.
Copy dan paste kod di bawah pada content HTML/Javascript.
Untuk mengubah warna background title box, title font dan background accordion box, sila edit kod yang di bold dengan warna biru.
color: #ffffff; ( title font )
background-color:#F80680; ( background title box )
background-color:#F4F4F8; ( background accordion box )
Untuk memasukkan widget menyerupai Shout box,Top Post,Recent Post, Recent Comment, Top Commentator dan sebagainya, gantikan teks Masukkan kod disini. dengan kod widget yang anda inginkan.
Edit teks Tajuk, 1 Tajuk 2, dan Tajuk 3 dengan title yang anda inginkan.
Langkah 2
Akhir sekali, klik Save
Sumber: maribinablog Sumber http://johanrakyat.blogspot.com
Untuk memasang Jquery tab hidangan accordion sila ikut beberapa langkah yang gampang dibawah.
Langkah 1
Login Blogger Dashboard --> Design --> Add A Gadget --> HTML/Javascript.
Copy dan paste kod di bawah pada content HTML/Javascript.
<style type="text/css">
h5 {
font-family: trebuchet-ms, arial, tahoma;
font-size: 13px;
padding: 0 0 1em;
font-weight:bold;
color: #ffffff;
}
.msg_list {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
.msg_head {
padding: 5px 10px;
cursor: pointer;
position: relative;
background-color:#F80680;
margin:1px;
}
.msg_body {
padding: 5px 10px 15px;
background-color:#F4F4F8;
}
</style>
<script type="text/j4vascript" src="https://sites.google.com/site/jquery01/tabmenuaccordion.js"></script>
<script type="text/j4vascript">
$(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">Tajuk 1</h5>
<div class="msg_body">
Masukkan kod disini.
</div>
<h5 class="msg_head">Tajuk 2</h5>
<div class="msg_body">
Masukkan kod disini.
<h5 class="msg_head">Tajuk 3</h5>
<div class="msg_body">
Masukkan kod disini.
</div>
</div>
Untuk mengubah warna background title box, title font dan background accordion box, sila edit kod yang di bold dengan warna biru.
color: #ffffff; ( title font )
background-color:#F80680; ( background title box )
background-color:#F4F4F8; ( background accordion box )
Untuk memasukkan widget menyerupai Shout box,Top Post,Recent Post, Recent Comment, Top Commentator dan sebagainya, gantikan teks Masukkan kod disini. dengan kod widget yang anda inginkan.
Edit teks Tajuk, 1 Tajuk 2, dan Tajuk 3 dengan title yang anda inginkan.
Langkah 2
Akhir sekali, klik Save
Sumber: maribinablog Sumber http://johanrakyat.blogspot.com
0 Response to "Jquery Tab Sajian Accordion Versi 2!"
Posting Komentar