« »
August 3, 2011 | 6:21 PM




yana bukak blog. then tgk kat shoutmix ada orang tnya macam mana nak buat column yg macam peek a boo yana nie. benda nie yana panggil Accordian Tabs Menu.

1. Dashboard > Design > Add Gadget

2. Copy dan paste code kat bawah nie ke dalam HTML/JavaScript box

<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:#FFB6D6;
margin:1px;
-moz-border-radius: 35px;
border-radius: 35px;
}
.msg_body {
padding: 5px 10px 15px;
background-color:#FFFFFF;
}
</style>
<script type="text/javascript" src="https://sites.google.com/site/jquery01/tabmenuaccordion.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">Tajuk 1</h5>
<div class="msg_body">
Isi dalam tajuk 1</div>
<h5 class="msg_head">Tajuk 2</h5>
<div class="msg_body">
Isi dalam tajuk 2
</div>
<h5 class="msg_head">Tajuk 3</h5>
<div class="msg_body">
Isi dalam tajuk 3</div>
</div>

yang code warna merah tu korang boleh la letak ayat ape pun yang korang nak. :)

3. Preview dulu. Kalau dah puas hati, Save! :)



2 Comments

Blogger mr_jingga said...

thnx,,,,awk

 
Blogger apple ♥ sidz said...

@mr_jingga sama sama :)

 

Post a Comment

No harsh word here please. Thanks for the comments :)



|


Disclaimer



This blog belongs to me and me only. No ripping, spamming and copying w/o my permission. Respect me and I'll respect you. Thank you :)





Tagboard





Credits


This template 100% made by me. Akira Himesamat. With little help from my old skins and Dinamic Drive. For header and background, I used Photoshop CS5. Color got from HTML color code. Font from Dafont and Google Web Font. Gifs picture made by me and some taken from Tumblr. Other image get from We♥It, Google and Tumblr. Kindly inform me if I'm using your materials but i don't mention here. (c) Copyright by Akira Himesama. All right reserved 2012 (c)