TUTORIAL PASANG SLIDE JQUERY ACCORDION

Seperti mana kau sedia maklum pada blog utama aku ada satu tab yang bila diletakkan cursor atasnya akan bergerak. menunjukkan recent visiors, recent posts, popular post, recent comments, and top commentors. Jadi ramai dah tanya sekarang aku nak ajar macam mana nak buat. Ini untuk 5 tab okey. 4 tab utama, 1 tab mini.

Langkah-langkah:

1. Log masuk ke akaun blooger > design

2. Copy code ini dan pastekan pada notepad dahulu

<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:#000000;
   margin:1px;
   }
   .msg_body {
   padding: 5px 10px 15px;
   background-color:#F4F4F8;
   }
   </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 ANDA</h5>
<div class="msg_body">
MASUKKAN CODE ANDA
</div>

<h5 class="msg_head">Recent Posts</h5>
<div class="msg_body">

<script style="" src="http://new-post.eclipselabs.org.codespot.com/files/Script%20postterbaru.txt"></script><script style="">var numposts = 10;var showpostdate = true;var showpostsummary = true;var numchars = 100;var standardstyling = true;</script><script src="http://NAMABLOGANDA.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script>
</div>

<h5 class="msg_head">Popular Posts</h5>
<div class="msg_body">

<script language="JavaScript">
aBold = false;
numposts=1000;
maxshowresult=5;
home_page = "http://NAMABLOGANDA.blogspot.com/";
</script>
<script src="http://sites.google.com/site/testingsahaja/toppost.js" type="text/javascript"></script>

</div>
<h5 class="msg_head">Recent Comments</h5>
<div class="msg_body">

   <script style="text/javascript" src=" http://hilmifir1312.fileave.com/comments terbaru.js"></script><script style="text/javascript">var numcomments =10;var showcommentdate = true;var showposttitle = true;var numchars = 100;var standardstyling = true;</script><script src="http://NAMABLOGANDA.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>

<h5 class="msg_head">Top Commentors</h5>
<div class="msg_body">
<script type="text/javascript"> function pipeCallback(obj) { document.write('<ol>'); var i; for (i = 0; i < obj.count ; i++) { var href = "'" + obj.value.items[i].link + "'"; if(obj.value.items[i].link == "") var item ="<li>" + obj.value.items[i].title + "</li>"; else var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>"; document.write(item); } document.write('</ol>'); } </script> <script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=7b5e76fd684f11e94320abd4e00fbbca&url=http%3A%2F%2FNAMABLOGANDA.blogspot.com&num=10&filter=NAMA ANDA YANG DIGUNAKAN WAKTU KOMEN" type="text/javascript"></script>

</div></div></div>

3. Setelah mengubah ayat yang berwarna merah klik add a gadget dibahagian design.

4. Klik HTML/Javascript

5. Copy semula yang anda telah ubah di notepad tadi dan paste pada bahagian HTML/Javascript tadi

6. Save.

Tambahan :

1. Kalau tak mahu tambah apa-apa pada bahagian yang tulis masukkan code anda. Boleh buang bahagian ini

<h5 class="msg_head">TAJUK ANDA</h5>
<div class="msg_body">
MASUKKAN CODE ANDA
</div>

2. Pastikan anda tak terbuang bahagian lain kalau tidak ia tak akan berfungsi.

Peringatan :

1. Pastikan setiap tab bergerak apabila anda menggerakkan cursor ke bahagian tab itu.

2. Pastikan anda tidak terpadam bahagian </div>

3. Setiap bahagian ini disetkan 10 post atau 10 komen. Anda boleh mengubahnya pada nombor berwarna oren

4. Anda boleh menukar warna tab ini dengan mengubah code yang berwarna hijau. Rujuk entry ini untuk mengubah warna tab ini -> JQUERY TAB MARIBINABLOG

Thursday, April 14, 2011

TUTORIAL PASANG SLIDE JQUERY ACCORDION

No comments: