Home » » Membuat Daftar Isi Jquery Akordion Otomatis

Membuat Daftar Isi Jquery Akordion Otomatis

Written By Unknown on Sabtu, 12 Mei 2012 | 00.12

Membuat Daftar Isi Jquery Akordion Otomatis - Untuk memudahkan para pengunjung yang datang ke blog kita mencari artikel atau posting yang ada diperlukan sebuah daftar isi yang mencakup semua kontent dalam blog tersebut. dan kali ini belajar blog share cara membuat daftar isi yang bisa di tempatkan di sidebarr atau widget secara otomatis. Jadi daftar isi ini tidak perlu mengedit setiap kali kita posting. Daftar isi ini saya ambil dari blog tetangga yaitu gubug reyot yang saya edit agar bisa otomatis tanpa harus mengedit tiap kali kita posting dan lebar juga bisa menyesuaikan lebar widget.

1. Langkah pertama buka templete anda lalu simpan templete dulu
- pastekan kode ini di atas kode <head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

2. Langkah selanjutnya.. cari Kode ]]></b:skin> dan Pastekan kode ini di atasnya




/*--- BB Jquery Daftar isi --- */
.boxtama {background:#5B5B5B;width: 100%;margin: 0 auto;border-left:1px solid #fff;
 border-right:1px solid #fff;border-bottom:1px solid #fff;border-top:3px solid #777;
 font-size:12px;}
.boxtama .wadah {margin: 0 0 5px 2px;padding: 0;overflow: hidden;font-size: 16px;
 width: 98%;clear: both;background: #FFF;border: 1px solid #d6d6d6;
 border-bottom-right-radius: 5px;border-bottom-left-radius: 5px;}
.boxtama .wadah .anakwadah {padding:15px 8px 10px;}
.boxtama .wadah .anakwadah p {padding: 5px 0;margin: 5px 0;font:12px normal;
 color:#222;}
.boxtama .wadah h3 {font: 18px normal Georgia;margin: 0 0 10px;padding: 0 0 5px 0;
 border-bottom: 1px dashed #0B9Af3;color: #0015FF;}
.boxtama .wadah img {float:left;margin:10px 8px 0px 0;padding:3px;background:#0B9Af3;
 border: 1px solid #444;width:60px;height:60px;}
.boxtama .wadah .anakwadah ul {padding:0;margin:0;list-style:none;}
.boxtama .wadah .anakwadah li {background:url(http://animated-jquery-vertical-accordion-menu.googlecode.com/files/miniArrow-gubhugreyot.png) top left no-repeat;
 background-position:5px 5px;list-style:none;margin:0px;padding:0px;
 border-bottom:1px dotted #999;transition:0.4s;
 -o-transition:0.4s;
 -moz-transition:0.4s;
 -webkit-transition:0.4s;}
.boxtama .wadah .anakwadah li:hover{background:url(http://animated-jquery-vertical-accordion-menu.googlecode.com/files/miniArrowHov-gubhugreyot.png) top left no-repeat;
 background-position:10px 5px;}
.boxtama .wadah .anakwadah li a {font-family:Trebuchet MS;padding:0 0 0 25px;
 font-size:11px;color:#222;font-weight:500;text-decoration:none;}
.boxtama .wadah .anakwadah li a:hover {color:#09B6FA;}
 h4.sedul {padding: 0;margin: 0 0 5px 0;background: #666 url(http://4.bp.blogspot.com/-MK-LRQUgGLU/T5rndgnwFXI/AAAAAAAABVQ/3NU9Jv4rukE/s1600/hyt.gif) bottom left repeat-x;height: 36px;line-height: 36px;width: 100%;font-size: 14px;
font-weight: bold;float: left;}
h4.sedul:hover { /* hor.png */
 padding: 0;margin: 0 0 5px 0;background:#0727F5 url(http://animated-jquery-vertical-accordion-menu.googlecode.com/files/bgFadeBlue-gubhugreyot.png) left center no-repeat;background-position:-1px 0;border-right:1px solid #999;}
h4.sedul a {background: url(http://animated-jquery-vertical-accordion-menu.googlecode.com/files/ArrowRedRight-gubhugreyot.png) left center no-repeat;
 background-position:8px 5px;border-left:2px solid #fff;border-right:2px solid #fff;
 font-family:Droid Serif;font-size:14px;color:/*silver*/ #003366;
 text-decoration: none;/*opacity:0.5;-moz-opacity:0.5;filter:alpha(opacity=50); */
 display: block;padding: 0 0 0 45px;transition:1s;
 -o-transition:1s;
 -moz-transition:1s;
 -webkit-transition:1s;}
h4.sedul a:hover {background:#09B6FA url(http://animated-jquery-vertical-accordion-menu.googlecode.com/files/ArrowRightDownAnima-gubhugreyot.gif) left center no-repeat;
 background-position:8px 5px;color:#0727F5;text-shadow:0px 1px 1px #888;opacity:1.0;
 filter:alpha(opacity=100);}
h4.active {background:url(http://animated-jquery-vertical-accordion-menu.googlecode.com/files/bgblueV35H1-gubhugreyot.gif) top left repeat-x;}

3. Masih di kode tersebut pastekan kode ini di bawah kode ]]></b:skin>


 <script type='text/javascript'>
$(document).ready(function(){
$(&#39;.wadah&#39;).hide();
$(&#39;.sedul:first&#39;).addClass(&#39;active&#39;).next().show();
$(&#39;.sedul&#39;).click(function(){
if( $(this).next().is(&#39;:hidden&#39;) ) {
$(&#39;.sedul&#39;).removeClass(&#39;active&#39;).next().slideUp(&#39;slow&#39;);
$(this).toggleClass(&#39;active&#39;).next().slideDown(&#39;slow&#39;);
}
return false;
});
});
</script>



4. Lalu simpan Templete.
5. Langkah selanjutnya tambahkan widget HTML dan pastekan ini didalamnya


<div style="float:left;background:#CFCDCC;border:1px solid #e6e4e3padding:3px;">
<div class="boxtama"><h4 class="sedul"><a class="pilih" href="#">NEWS</a></h4>
<div class="wadah">
<div class="anakwadah">
<ul class="accor">
<div style="overflow:auto; width:auto; height:200px; padding:0px;">
<h3>International News</h3>
<ul>
<script style="text/javascript">
var numposts = 100;
var standardstyling = true;
</script>
<script type='text/javascript' src='http://mr-form.googlecode.com/files/label-post.js'></script>
<ul>
<script src="http://ken-zoo.blogspot.com/feeds/posts/default/-/International%20News?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul> </ul>
<h3>National News</h3>
<ul>
<script style="text/javascript">
var numposts = 100;
var standardstyling = true;
</script>
<script type='text/javascript' src='http://mr-form.googlecode.com/files/label-post.js'></script>
<ul>
<script src="http://ken-zoo.blogspot.com/feeds/posts/default/-/National%20News?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul></ul>
<h3>Sport</h3>
<ul>
<script style="text/javascript">
var numposts = 100;
var standardstyling = true;
</script>
<script type='text/javascript' src='http://mr-form.googlecode.com/files/label-post.js'></script>
<ul>
<script src="http://ken-zoo.blogspot.com/feeds/posts/default/-/Sport?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul></ul></div></ul></div></div>

<h4 class="sedul"><a class="pilih" href="#">COUPLE</a></h4>

<div class="wadah">
<div class="anakwadah">
<ul class="accor">
<div style="overflow:auto; width:auto; height:200px; padding:0px;">
<h3>Parent</h3>
<ul>
<script style="text/javascript">
var numposts = 100;
var standardstyling = true;
</script>
<script type='text/javascript' src='http://mr-form.googlecode.com/files/label-post.js'></script>
<ul>
<script src="http://ken-zoo.blogspot.com/feeds/posts/default/-/Parent?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul> </ul>
<h3>Dating</h3>
<ul>
<script style="text/javascript">
var numposts = 100;
var standardstyling = true;
</script>
<script type='text/javascript' src='http://mr-form.googlecode.com/files/label-post.js'></script>
<ul>
<script src="http://ken-zoo.blogspot.com/feeds/posts/default/-/Dating?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul> </ul></div></ul></div></div>

<h4 class="sedul"><a class="pilih" href="#">TECHNO</a></h4>
<div class="wadah">
<div class="anakwadah">
<ul class="accor">
<div style="overflow:auto; width:auto; height:200px; padding:0px;">
<h3>Otomotif</h3>
<ul>
<script style="text/javascript">
var numposts = 100;
var standardstyling = true;
</script>
<script type='text/javascript' src='http://mr-form.googlecode.com/files/label-post.js'></script>
<ul>
<script src="http://ken-zoo.blogspot.com/feeds/posts/default/-/Otomotif?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul> </ul>
<h3>Electronick</h3>
<ul>
<script style="text/javascript">
var numposts = 100;
var standardstyling = true;
</script>
<script type='text/javascript' src='http://mr-form.googlecode.com/files/label-post.js'></script>
<ul>
<script src="http://ken-zoo.blogspot.com/feeds/posts/default/-/Electronick?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul> </ul>
<h3>Internet</h3>
<ul>
<script style="text/javascript">
var numposts = 100;
var standardstyling = true;
</script>
<script type='text/javascript' src='http://mr-form.googlecode.com/files/label-post.js'></script>
<ul>
<script src="http://ken-zoo.blogspot.com/feeds/posts/default/-/Internet?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul> </ul></div></ul></div></div>

<h4 class="sedul"><a class="pilih" href="#">HEALTH</a></h4>
<div class="wadah">
<div class="anakwadah">
<ul class="accor">
<div style="overflow:auto; width:auto; height:200px; padding:0px;">
<h3>Mens Health</h3>
<ul>
<script style="text/javascript">
var numposts = 100;
var standardstyling = true;
</script>
<script type='text/javascript' src='http://mr-form.googlecode.com/files/label-post.js'></script>
<ul>
<script src="http://ken-zoo.blogspot.com/feeds/posts/default/-/Mens%20Health?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul> </ul>
<h3>Women Health</h3>
<ul>
<script style="text/javascript">
var numposts = 100;
var standardstyling = true;
</script>
<script type='text/javascript' src='http://mr-form.googlecode.com/files/label-post.js'></script>
<ul>
<script src="http://ken-zoo.blogspot.com/feeds/posts/default/-/Women%20Health?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul> </ul>
<h3>Child Health</h3>
<ul>
<script style="text/javascript">
var numposts = 100;
var standardstyling = true;
</script>
<script type='text/javascript' src='http://mr-form.googlecode.com/files/label-post.js'></script>
<ul>
<script src="http://ken-zoo.blogspot.com/feeds/posts/default/-/Child%20Health?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul> </ul></div></ul></div></div>

<h4 class="sedul"><a class="pilih" href="#">LIFE STYLE</a></h4>
<div class="wadah">
<div class="anakwadah">
<ul class="accor">
<div style="overflow:auto; width:auto; height:200px; padding:0px;">
<h3>Mens Corner</h3>
<ul>
<script style="text/javascript">
var numposts = 100;
var standardstyling = true;
</script>
<script type='text/javascript' src='http://mr-form.googlecode.com/files/label-post.js'></script>
<ul>
<script src="http://ken-zoo.blogspot.com/feeds/posts/default/-/Mens%20Corner?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul></ul>
<h3>Women Corner</h3>
<ul>
<script style="text/javascript">
var numposts = 100;
var standardstyling = true;
</script>
<script type='text/javascript' src='http://mr-form.googlecode.com/files/label-post.js'></script>
<ul>
<script src="http://ken-zoo.blogspot.com/feeds/posts/default/-/Women%20Corner?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul></ul>
<h3>Child Corner</h3>
<ul>
<script style="text/javascript">
var numposts = 100;
var standardstyling = true;
</script>
<script type='text/javascript' src='http://mr-form.googlecode.com/files/label-post.js'></script>
<ul>
<script src="http://ken-zoo.blogspot.com/feeds/posts/default/-/Child%20Corner?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</ul></ul></div></ul></div></div>
<h4 class="sedul"><a class="pilih" href="#">ABOUT US</a></h4>
<div class="wadah">
<div class="anakwadah">
<h3>Indonesian Blogger</h3>
<a href="http://ken-zoo.blogspot.com/" target="_blank"><img src="http://3.bp.blogspot.com/-bhwhaRmdEXc/T5a3TTrGqNI/AAAAAAAABS8/DDVfH1pQW9Q/s1600/kenzoo.jpg" alt="" /></a>
<p>There is no record of anything about <a href='http://ken-zoo.blogspot.com/'>Kenzoo</a> because I am also still in the early stages of learning. Please read the article and I am very grateful if you are willing to comment. All comments will be published so that it can be read by other visitors. And I would be grateful if you participate and provide tips and tricks related to an existing article or related to this blog.</p><p>All comments will be re-published and I will visit again as soon as possible. I do not mind if there among the visitors who will copy this article, but do not forget to include the source..! I am truly grateful for the web master for the tutorial so I can finish this blog. !</p>
</div></div></div></div>


Catatan :
A. Ganti kode yang di sorot ........... dengan Judul yang anda inginkan.
B. Ganti kode yang di sorot ........... dengan Judul yang sesuai label atau terserah anda.
C. Ganti kode yang di sorot ........... dengan URLanda
D. Ganti kode yang di sorot ........... dengan label anda. Ini harus benar benar sesuai label...!!!

6. Simpan Widget dan lihat hasilnya..

Share this article :

2 komentar:

Posting Komentar

Berkomentarlah dengan baik dan relevan. No Spam.!!

Deskripsi Iklan
Deskripsi Iklan
Deskripsi Iklan
Deskripsi Iklan
Advertise Now!
 
Support : About Me | Contact Us | Privacy Policy
Copyright © 2013. Belajar Blog - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger