smart widget

assalamualaikum .
okay , last tutorial for today ); btw , the title , i just simply write .
follow the steps , like you always do ; 
0 sign in 0 dashboard0 design 0 page element 0 add a gadget 0 HTML/Javascript 0 paste this code 0

<style type="text/css">

h5 {
text-align:center;

text-shadow: 2px 2px 3px #000000;

font-family: trebuchet-ms, arial, tahoma;

font-size: 13px;

padding: 0 0 1em;

font-weight:bold;

color: #000000;

}


.msg_list {

list-style: none;

margin: 0;

padding: 0;

width: 100%;

}

.msg_head {

padding: 5px 10px;

cursor: pointer;

position: relative;

background-color:#FAAFBA;

margin:1px;

}

.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">YOUR TITLE</h5>

<div class="msg_body">

YOUR TEXT

</div>
<h5 class="msg_head">YOUR TITLE</h5>

<div class="msg_body">

YOUR TEXT

</div>
<h5 class="msg_head">YOUR TITLE</h5>

<div class="msg_body">

YOUR TEXT

</iframe>
<!-- End ShoutMix -->

</div>

</div>

0 change the red font with the color text you want .
0 change the orange font with the background color you like .
0 change the YOUR TITLE with the title you want .
0 change the YOUR TEXT with the text you want .
0 save it & you're done .

0 comments :