Widget Blogger SImple Accordion by Gyman Padlaw - Widget simple accordion ini saya buat menggunakan CSS & HTML, efek dari widget blogger simple accordion by Gyman Padlaw 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 Gyman Padlaw 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!
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 Gyman Padlaw */
#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;
}
#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 byGyman Padlaw :
<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>
<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...
Luangkan sejenak: Demikianlah artikel tentang Pengenalan Elemen Dasar Pada HTML diatas, semoga bermanfaat untuk sobat dimanapun berada.
133 Komentar Tersembunyi "Pengenalan Elemen Dasar Pada HTML"
Posting Komentar