Membuat Accordion Di Blogspot

Membuat Accordion Di Blogspot

Accordion merupakan widget yang digunakan untuk mempercantik blog dan membuat blog anda semakin canggih. Banyak blog bahkan website menggunakan widget ini contohnya adalah Kompas dan Kompasiana.

Saya terinspirasi dari mereka (kompas dan Kompasiana). Saya mencari-cari di pencuru blog dan website. Berjam-jam bahkan berhari-hari berselancar di dunia internet sambil menatap layar monitor dengan mata merah, sungguh sangat melelahkan. Jarang ada blog yang mempublish tentang cara membuat accordion. Maka dari itu saya tidak ingin para blogger yang lain tersiksa seperti saya. Bagi yang ingin melihat demonya anda bisa melihat di blog ini terpatnya di sebelah kanan anda atau bisa saya perjelas dengan gambar di bawah ini. Yang saya di kelilingin oleh warna orange itu adalah accordion anda bisa mencoba otak-atik accordion saya.

Tutorial ini berasal dari Kang-onk, ia adalah blogger juga. Saya memodifikasi sedikit tutorial dari beliau, alsannya adalah karena saya ingin menyamakan seperti accordion yang terdapat pada kompasiana. Mungkin accordionnya tidak terlalu sama, tapi setidaknya bisa dibilangan sama walau sedikit. Langsung saja saya akan berikan tutorial tentang cara membuat accordion di blogspot harap perhatikan dengan seksama !

Yang perlu anda lakukan adalah :
1. Loggin ke blogger.com
2. Pergi ke Rancangan ---> Edite HTML.
   Untuk anda yang menggunakan bahasa inggris anda mengklik Design ---> Edite HTML
3. Beri ceklis di Expand Widget Templates. Terdapat di atas form edite HTML atau di bawah form upload.
4. Cari kode ]]></b:skin>
    Untuk mempermudah pencarian anda klik F3 nanti akan muncul tool pencarian yang terdapat di sebelah
    kiri bawah layar monitor anda, dan kemudian masukan kode yang anda cari
5. Masukkan ganti kode tersebut dengan kode di bawah ini !

]]></b:skin>
<script src='http://terindikasi-inc.googlecode.com/files/accordionv2.js.txt'/>
<script>
   $(document).ready(function() {
      $(&quot;#accordion&quot;).accordion();
});
</script>

6. Klik save

Langkah pertama sudah selesai, jika anda berhasil maka saya ucapkan selamat. Langkah kedua adalah sebagai berikut:

1. Cari kode  ]]></b:skin> 
2. Ganti kode tersebut dengan kode di bawah ini !

/*According
-------------------------------*/
.ui-accordion{border:none;padding:0;width:320px;position:relative;left:0;top:-13px;z-index:2;}
.ui-accordion-header{border-top:2px solid #ccc; padding:5px 10px;background-color:#eee;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6vBY-cVQgoK4IFCS3HugEw0uhxyt9zMVeJcNQ8G70dwJTsbIgfmEeFMEYK65mLax8mOpSpZr263gIkYtz0rywhnnTRikdSTMCWy9Za767__kl65sYeqRx3JoT3wptGChqkOePho3NAGk/s1600/arrow_right.gif);background-repeat: no-repeat;background-position: right center;font:normal 12px Arial;cursor:pointer;margin-bottom:-12px;}
.ui-accordion-header:hover{background-color:#bbb;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilQPwYDEY9yPr1C9yc0w4Ve0am1yP-z1eBEIQbCMcJ31MLPMJhvtb-maETLmpRijO0qX_a4yYmMuD-5vUanMuY6cY8aS7oCx3GY0x1avGlCaIqSnT5OOdZBqP_r0ZOFTSLPgYNjJzD-PI/s1600/arrow_down.gif);background-repeat: no-repeat;background-position: right center;}
.ui-tabs{font:normal 11px Arial;padding:5px 10px;background:#fefefe;}
.ui-accordion-header a:visited {background-color:#bbb;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilQPwYDEY9yPr1C9yc0w4Ve0am1yP-z1eBEIQbCMcJ31MLPMJhvtb-maETLmpRijO0qX_a4yYmMuD-5vUanMuY6cY8aS7oCx3GY0x1avGlCaIqSnT5OOdZBqP_r0ZOFTSLPgYNjJzD-PI/s1600/arrow_down.gif);background-repeat: no-repeat;background-position: right center;}
.header_highlight{background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilQPwYDEY9yPr1C9yc0w4Ve0am1yP-z1eBEIQbCMcJ31MLPMJhvtb-maETLmpRijO0qX_a4yYmMuD-5vUanMuY6cY8aS7oCx3GY0x1avGlCaIqSnT5OOdZBqP_r0ZOFTSLPgYNjJzD-PI/s1600/arrow_down.gif);background-repeat: no-repeat;background-position: right center;background-color:#ddd;}
.ui-tabs ul {list-style:none;margin:0 0 0;padding:0 0 0;}
.ui-tabs li {color:#000;background-image: url(); background-repeat: no-repeat;background-position: left center;margin:0;padding:2px 0 3px 0;text-indent:0px;border-bottom:1px solid #dfdfdf;line-height:1.3em;}
.ui-tabs li a:hover {text-decoration:none;color:#000;}
.ui-accordion .widget {border:none;margin:0 0 0.5em;padding:5px 0;}
#accordion ul {list-style:star;margin:10px 0 0 10px;padding:10px 0 0 10px;line-height:1.7em;}
#accordion li {border-bottom: 1px dashed #ccc;}


]]></b:skin>

 3. Klik save.

Cara ketiga

1. Klik Page Element atau Halaman Elemen
2. Klik Add Gadget
3. Pilih JavaScript/HTML
4. Masukkan kode di bawah ini

 <div id="accordion">
    <h3><a href="#">Judul 1</a></h3>
    <div>
    <ul>
    Tulisan anda disini

    Tulisan anda disini

    Tulisan anda disini

    </ul>
    </div>
    <h3><a href="#">Judul 2</a></h3>
    <div>
    <ul>
    Tulisan anda disini

    Tulisan anda disini

    Tulisan anda disini
    </ul>
    </div>
    <h3><a href="#">Judul 3</a></h3>
    <div>
     <ul>
     <li>Link anda disini</li>
     <li>Link anda disini</li>
     <li>Link anda disini</li>
     </ul>
    </div>
    <h3><a href="#">Judul 4</a></h3>
    <div>
      <ul>
     <li>Link anda disini</li>
     <li>Link anda disini</li>
     <li>Link anda disini</li>
     </ul> 
    </div>
    </div>

5. Klik save

Selesailah sudah tentang cara membuat accordion di blogspot. Jika tutorial ini berhasil saya harap anda bisa komentar di bawah ini sebagai tanda bahwa tutorial ini bisa digunakan dan juga sebagai tanda terima kasih anda ke pada kami.

Membuat Accordion Di Blogspot