TUTORIAL= Accordian Tab Menu

ASSALAMUALAIKUM #maaf penggunaan 'aku'#
Sudah sekian lamanya tak buat tutorial :') rindu weh. Sampai dah tak ingat dan step by step. Haha. Well tutorial accordian Tab Menu ni atas permintaan Nur Syurga so aku cuba untuk merajinkan diri untuk tutorial ni :) Untuk pengetahuan newbie, Accordian Tab Menu ni ialah tab menu yg terletak di sidebar uolls bila korang hala cursor kat sidebar tuh dia akan jatuh ke bawah. Mcm kat sidebar kat blog aku. Cer tngok gmbar kat bwh ni.

So if nak try jom follow step kat bawah ni :

1) Log in > Dashboard > Layout > Add gadjet >  Html/ Javascript

2) Copy kod kat bawah ni :

<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">
<center>
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> 

3) HIJAU= Warna tulisan tab menu

OREN= warna background tab menu

MERAH= Warna background isi tab menu

BIRU= Tuliskan tajuk tab itu.

UNGU= Pastekan kod mcm kod shoutmix dan lain-2

4) Pastekan kod tersebut kat ruangan HTML/ JAVASCRIPT

5) Dah siap? preview dulu baru save :)

Tweet

---

Sudah baca??sila like or komen:)

---