♥ ASSALAMUALAIKUM ♥

Since last month I noticed many user's of hover accordion having trouble.The gadgets did not work as usual..Then Finally I found the answer.So for those already have this gadget on their page but not working..
You may just adding the code below after </style> on your previously coding.There's No need to change anything or reapply the codes,ok..Just Add!!
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
And for those not install this yet and you interested to install it on your blog..Here How You do it..


<style type="text/css">
h5 {
font-family: Berlin sans FB;
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;
border:2px solid #ffffff;
background-color:#ff54a7;
margin:10px 0;
-moz-border-radius: 35px;
border-radius: 35px;
}
.msg_body {
padding: 5px 10px 15px;
background-color:transparent;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://pinkdiva.googlecode.com/files/ddaccordion.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"> Title 1 </ H5>
<div class="msg_body">
<center>
Content here </ div>
<h5 class="msg_head"> Title 2 </ H5>
<div class="msg_body">
Content here
</ div>
<h5 class="msg_head"> Title 3 </ H5>
<div class="msg_body">
Content here
</div>
</div>
h5 {
font-family: Berlin sans FB;
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;
border:2px solid #ffffff;
background-color:#ff54a7;
margin:10px 0;
-moz-border-radius: 35px;
border-radius: 35px;
}
.msg_body {
padding: 5px 10px 15px;
background-color:transparent;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://pinkdiva.googlecode.com/files/ddaccordion.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"> Title 1 </ H5>
<div class="msg_body">
<center>
Content here </ div>
<h5 class="msg_head"> Title 2 </ H5>
<div class="msg_body">
Content here
</ div>
<h5 class="msg_head"> Title 3 </ H5>
<div class="msg_body">
Content here
</div>
</div>
You’re Done ..
Note :
✿ # ffffff: color of your text; font-family : Type Of Your Font ; font-size : Size of your text Click Here
✿✿ #ff54a7 - color background of tab title.
✿✿✿ #fad7e8 - Color of background body of the tab..Or should just placed transparent.
✿✿✿✿ 2px solid #ffffff - Change the border size,Border Type And Border Color
✿✿✿✿✿ Title 1,2,3 - Title of your tab
✿✿✿✿✿✿ Content Here -HTML codes you want
If you want to add another tab, just add the code below before </div>.
<h5 class="msg_head"> Title </ h5>
<div class="msg_body">
Enter codes here.
<div class="msg_body">
Enter codes here.
That's it..Goodluck!!!
I don't install that. My page is already 'heavy' with Javascripts, oho. I think you should ping this post on Wasaber. Ladies will be happy so much for this tip, haha!
ReplyDelete@samizul.net
ReplyDeleteNevermind ..:)
Moreover, I'll made this Tutorial exclusively for our ladies friends out there..hehehe because am sure enough most of them loved modifying and beautify their blog..:)..
Note : I am ashamed to ping this in WASABER..ngeee:)