SANG RADJA COPAS

Membuat Sidebar Accordion dengan jQuery, Maximum Tips Trick kali ini akan membahas bagaimana cara dan apa manfaat membuat Sidebar Accordian akan dibahas pada post ini. Apa itu Sidebar Accordion mungkin teman teman akan lebih jelas pembahasannya bila searching di google, tapi untuk contohnya, sobat blogger bisa lihat di sidebar Blog ini.<div> </div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1aQqzF-IbJUbRx0J3nkbdrxea4GB4ZMxIL0gMdkAvcdzxz1jvKcui9cYLZK1pO72gQEmZtPJ4Ej5ro6yqzbDiLA0uam9GGdXMhnu8N7MltouOyaKJ0d3pvuPb2nOiEq6mfW2R7cdcttY/s1600/Membuat+Sidebar+Accordion+dengan+jQuery.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Sidebar Accordion dengan jQuery" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1aQqzF-IbJUbRx0J3nkbdrxea4GB4ZMxIL0gMdkAvcdzxz1jvKcui9cYLZK1pO72gQEmZtPJ4Ej5ro6yqzbDiLA0uam9GGdXMhnu8N7MltouOyaKJ0d3pvuPb2nOiEq6mfW2R7cdcttY/s1600/Membuat+Sidebar+Accordion+dengan+jQuery.jpg" title="Membuat Sidebar Accordion dengan jQuery" /></a></div><div><div style="text-align: center;">Sidebar Accordion dengan jQuery</div><div> </div><div>Kriteria Post Hari Ini :</div><div><ul><li>Goal : Sidebar kuno kita akan berubah tampilan menjadi lebih elegant</li><li>Tujuan : Memperindah Blog kita sehingga visitor akan betah</li><li>Harapan : Theme Blog kita lebih user friendly</li></ul></div><div>How To Make Sidebar Accordion With JQuery :</div></div><div> </div><div>Berikut lengkap Membuat Sidebar Accordion dengan jQuery : <ul><li>Masuk pada bagian Template » Edit HTML </li></ul>Kemudian Letakkan kode berikut ini atas kode ]]></b:skin> </div><div> <blockquote class="tr_bq" style="background-color: #f4f4f4; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-color: rgb(238, 238, 238) rgb(238, 238, 238) rgb(238, 238, 238) rgb(102, 102, 102); border-style: solid; border-top-left-radius: 3px; border-top-right-radius: 3px; border-width: 1px 1px 1px 4px; box-sizing: border-box; font-family: 'Courier 10 Pitch', Courier, monospace; font-size: 12px; margin: 5px 0px; outline: 0px; overflow: auto; padding: 5px; position: relative; vertical-align: baseline;">#sidebar-wrapper h2 { margin: 0 2px; padding:3px 7px 3px 13px;  text-shadow:0 1px 0 black; background-color:#AD3000;  border:1px solid #ccc;  font:normal bold 12px "Trebuchet MS", Trebuchet, sans-serif;  color:#fff;  text-transform:uppercase;  }  #sidebar-wrapper h2:hover {  margin: 0 2px;  padding:3px 7px 3px 13px;  background:#860000;  font:normal bold 12px "Trebuchet MS", Trebuchet, sans-serif;  color:#fff;  text-transform:uppercase;  border-bottom:1px solid #404040;  }  #sidebar-wrapper h2.active {  background-color:#B60000;  color:#FFF;  }  #sidebar-wrapper .widget {  margin:0 0;  padding:0 0;  }  #sidebar-wrapper .widget-content {  padding:5px 5px 5px 13px;  max-height:auto;  overflow:auto;  }  #sidebar-wrapper1 .widget-content ul li {  border-top:1px solid #444;  border-bottom:1px solid #222;  }</blockquote>- Selanjutnya Letakkan kode berikut ini diatas kode <span style="background-color: white; border: 0px; box-sizing: border-box; color: blue; font-family: 'Segoe UI'; font-size: 14px; line-height: 21px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"></head> <blockquote class="tr_bq" style="background-color: #f4f4f4; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-color: rgb(238, 238, 238) rgb(238, 238, 238) rgb(238, 238, 238) rgb(102, 102, 102); border-style: solid; border-top-left-radius: 3px; border-top-right-radius: 3px; border-width: 1px 1px 1px 4px; box-sizing: border-box; font-family: 'Courier 10 Pitch', Courier, monospace; font-size: 12px; margin: 5px 0px; outline: 0px; overflow: auto; padding: 5px; position: relative; vertical-align: baseline;"><script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> //<![CDATA[ $(function() {     $('#sidebar-wrapper .widget-content').hide();     $('#sidebar-wrapper h2:first').addClass('active').next().slideDown('slow');     $('#sidebar-wrapper  h2').css('cursor', 'pointer').click(function() {         if($(this).next().is(':hidden')) {             $('#sidebar-wrapper h2').removeClass('active').next().slideUp('slow');             $(this).toggleClass('active').next().slideDown('slow');         }     }); }); //]]> </script> </blockquote> - Simpan Template Keterangan: <div style="background-color: white; border: 0px; box-sizing: border-box; font-family: 'Segoe UI'; font-size: 14px; line-height: 21px; margin: 0px; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">Kode yang berwarna merah merupakan background pada judul widget. </div><div style="background-color: white; border: 0px; box-sizing: border-box; font-family: 'Segoe UI'; font-size: 14px; line-height: 21px; margin: 0px; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">Kode yang berwarna hijau merupakan ID sidebar.</div><div style="background-color: white; border: 0px; box-sizing: border-box; font-family: 'Segoe UI'; font-size: 14px; line-height: 21px; margin: 0px; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">Kode yang berwarna ungu merupakan jQuery, jika template anda sudah terdapat kode ini, maka tidak usah ditambahkan lagi, atau anda juga bisa mengganti jQuery yang lama dengan yang versi terbaru.</div></div><div style="background-color: white; border: 0px; box-sizing: border-box; font-family: 'Segoe UI'; font-size: 14px; line-height: 21px; margin: 0px; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"> </div><div style="background-color: white; border: 0px; box-sizing: border-box; font-family: 'Segoe UI'; font-size: 14px; line-height: 21px; margin: 0px; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;"><div style="color: #333333; font-family: 'Segoe UI', Calibri, 'Myriad Pro', Myriad, 'Trebuchet MS', Helvetica, sans-serif; line-height: 19.59375px; text-align: center;">Blog Tested : <a href="http://maxtrick.blogspot.com/">MaxTrick.blogspot.com</a></div> <div style="border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; border-top-left-radius: 15px; border-top-right-radius: 15px; border: 5px solid rgb(104, 104, 104); box-sizing: border-box; color: #333333; font-family: 'Segoe UI', Calibri, 'Myriad Pro', Myriad, 'Trebuchet MS', Helvetica, sans-serif; line-height: 19.59375px; padding: 10px;"><div style="box-sizing: border-box; font-family: Verdana, Geneva, sans-serif; font-size: 11px; line-height: 17.59375px;"><div style="box-sizing: border-box; clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img align="right" height="108" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKikrKE8nS5IyS1mClsx0MRSg_nox6g9yVHfeLjrNxiQymJjdRZ3ZxAulZZ27WlyLjv-vyl6E56SUduK_0vDZILrcKn-2YSHjiIJ1toahMXvPb57eZNggM-PCVn7qaoSoRFQHphBKYT_k/h120/jempol2.gif" style="-webkit-box-shadow: rgb(181, 181, 181) 0px 0px 2px; -webkit-transition: all 0.4s ease-in-out; border: 1px solid rgb(224, 224, 224); box-shadow: rgb(181, 181, 181) 0px 0px 2px; box-sizing: border-box; display: inline; float: right; height: auto; max-width: 100%; padding: 5px;" width="78" /></div></div>Bila merasa keksusahan dalam setting Tag Heading ini, SOBAT BISA MEMESAN PADA SAYA UNTUK SETTING pada Theme sobat. Blogspot. Masalah harga saya tidak prioritaskan yang terpenting saya bisa membantu kawan semua How To Order to us To Setting Your Tag Heading : <ol><li>Just comment in post below and said that you want to order.</li></ol>Feature : Fast Respon & Pengerjaan paling lambat 2 hari ^^</div><div> </div></div>

Membuat Sidebar Accordion dengan jQuery, Maximum Tips Trick kali ini akan membahas bagaimana cara dan apa manfaat membuat Sidebar Accordian ...

Baca selengkapnya »