Widget Blogger SImple Accordion by Seputar Ketramilan

Widget Blogger SImple Accordion by Seputar Ketramilan - Widget simple accordion ini saya buat menggunakan CSS & HTML, efek dari widget blogger simple accordion by Seputar Ketramilan 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 Seputar Ketramilan ini, karena meskipun masih tergolong widget sederhana bukan berarti widget ini tidak ada manfaatnya. Widget simple accordion by Seputar Ketramilan 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 Seputar Ketramilan, penampakannya bisa anda lihat pada gambar di bawah ini!

Untuk membuat widget simple accordion by Seputar Ketramilan ini caranya cukup mudah saja. Silahkan bisa anda simak dan ikuti tutorial cara membuat widget blogger simple accordion by Seputar Ketramilan 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 Seputar Ketramilan */
#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 Seputar Ketramilan :

<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 Seputar Ketramilan ini dan semoga bermanfaat bagi anda. Selebihnya saya mohon ma'af atas segala kekurangan yang ada. Salam sejahtera by Seputar Ketramilan...