Widget Blogger SImple Accordion by Ngeposta

Widget Blogger SImple Accordion by Ngeposta - Widget simple accordion ini saya buat menggunakan CSS & HTML, efek dari widget blogger simple accordion by ngeposta ini memang masih agak kaku dan belum begitu sempurna karena masih dalam tahap pengembangan. Namun tidak ada salahnya jika anda ingin mencoba widget blogger simple accordion by ngeposta ini, karena meskipun masih tergolong widget sederhana bukan berarti widget ini tidak ada manfaatnya. Widget simple accordion by ngeposta ini sangat berguna sekali untuk menampung content yang panjang/cukup berat. Karena fungsi utama dari widget ini adalah untuk menghemat ruang/tempat.

Dan ini dia widget simple accordion by ngeposta, penampakannya bisa anda lihat pada gambar di bawah ini!

Untuk membuat widget simple accordion by ngeposta ini caranya cukup mudah saja. Silahkan bisa anda simak dan ikuti tutorial cara membuat widget blogger simple accordion by ngeposta berikut ini!

1. Login ke blogger.com menggunakan akun anda.
2. Masuk ke halaman "Template".

3. Lalu pilih "Edit HTML", klik "Lanjutkan" dan jangan lupa centang "Expand Template Widget".

4. Kemudian cari kode ]]></b:skin> (gunakan Ctrl+F untuk mencarinya) dan letakkan script CSS berikut ini tepat di atasnya!

/* Simple Accordion by Ngeposta */
#acc{
background: none;
font: 12px trebuchet ms;
line-height: 1.2em;
padding: 5px;
margin: 0;
}
#acc h3{
background: green;
padding: 5px;
margin: 0;
color: white;
}
#acc h3 a{
color: white;
}
#acc h3 a:hover{
color: black;
}
#acc .post{
background: #999999;
padding: 5px;
margin: 5px;
display: none;
}
#acc :target h3 + .post{
display: block;
height: 200px;
overflow: auto;
}
#acc :target h3 a{
color: white;
}

5. Setelah itu klik save/simpan template.

Sekarang anda tinggal memanggil script CSS accordion tersebut dengan menggunakan HTML, letakkan script HTML ini di tempat yang anda inginkan, misalnya di postingan, sidebar, dll. Berikut script HTML untuk memanggil dan menampilkan widget simple accordion by ngeposta :

<div id="acc">
<div id="isi1">
<h3><a href="#isi1">Judul 1</a></h3>
<div class="post">Letakkan content yang ingin anda
tampilkan di sini! Bisa iklan, artikel populer, atau yg lainnya...
</div></div>
<div id="isi2">
<h3><a href="#isi2">Judul 2</a></h3>
<div class="post">Letakkan content yang ingin anda
tampilkan di sini! Bisa iklan, artikel populer, atau yg lainnya...
</div></div>
<div id="isi3">
<h3><a href="#isi3">Judul 3</a></h3>
<div class="post">Letakkan content yang ingin anda
tampilkan di sini! Bisa iklan, artikel populer, atau yg lainnya...
</div></div>
</div>

Jika sudah, tinggal simpan widgetnya dan lihat hasilnya... Selamat mencoba! Mungkin cukup sekian dulu postingan tentang widget blogger simple accordion by ngeposta ini dan semoga bermanfaat bagi anda. Selebihnya saya mohon ma'af atas segala kekurangan yang ada. Salam sejahtera by ngeposta...

Anda sedang membaca Artikel berjudul Widget Blogger SImple Accordion by Ngeposta, dan dengan URL http://kabarkabaru.blogspot.com/2012/12/widget-blogger-simple-accordion-by.html. Anda boleh membagikan artikel Widget Blogger SImple Accordion by Ngeposta ini kepada Teman - Teman anda namun jangan lupa mencantumkan link Widget Blogger SImple Accordion by Ngeposta sebagai Sumbernya.Terima Kasih