komputerdia.com - Membuat tombol show hide pada widget blogger merupakan salah satu alternatif terbaik yang dapat kalian lakukan untuk menghemat space di halaman side kafe blog. Dengan kalian menerapkan teknik ini, tentunya kalian dapat menerapkan fitur lainnya menyerupai aba-aba iklan dan lain-lain.
Dalam artikel kali ini, saya akan mencoba menjelaskan bagaimana cara menciptakan tombol tutup buka atau show hide pada bab widget blogger. Unuk lebih jelasnya silahkan kalian perhatikan langkah - langkahnya dibawah ini .
Baca Juga :
- Cara Daftar Webmaster Tools dan Mengkonfigurasi Blog Pada Webmaster Tools .
- Cara Membuat Menu Bar Responsive dan Keren Tanpa Edit Html Di Blog .
- 6 Cara Membuat Tombol Tutup Buka (spoiler) Di Postingan Blog .
Cara Membuat Tombol Show Hide Di Widget / Gadget Blog
- Pertama silahkan kalian masuk ke akun blogger kalian
- Pilih sajian Tema atau Theme, lalu klik tombol edit Html.
- Setelah masuk ke bab halaman edit html, silahkan kalian cari kode ]]></s:kin> .
- Langkah selanjutnya silahkan kalian copy aba-aba dibawah ini dan letakkan sempurna diatas kode ]]></s:kin> .
.spoiler{background:#f9f9f9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGg3zvd34fgozCH5nE_Fxs18SsZWb5bOS3dGX3_rMxLIldFoFaVOuMgw7hBowHsPnMOuKtJGRdAoL9-4YuxmCZ7dmlDY-GRJLMNDLZCbDw6XJXyzGkOUfWnIpY3NCEay6B_C023mN7xobF/h120/gradient2.php.png) repeat-x;border:1px solid #ddd;padding:3px}.spoirel {font-family:arial;font-size:12px;color:#000; margin-bottom:0;font-weight:bold;text-align:left} - Kode warna Merah dapat kalian ganti dengan url gambar yang kalian inginkan
- Kode warna Biru merupakan aba-aba warna dan dapat kalian sesuaikan sesuai harapan .
- Setelah semua sehabis telah kalian buat, silahkan tekan tombol Save Theme atau Simpan Tema .
- Langkah selanjutnya silahkan kalian beralih ke bab sajian Layout atau Tata Letak .
- kemudian kalian pilih sajian Add Widget atau Tambahkan gadget .
- Setelah itu kalian akan melihat sebuah halaman dengan jenis jendela popup, disini silahkan kalian pih sajian Html/JavaScript .
- Langkah selanjutnya, kalian copy aba-aba dibawah ini dan tempelkan pada bab konten widget tersebut .
<div class="spoiler"> <div class="spoirel">Judul Widget Kalian<input onclick="if (this.parentNode.parentNode.getElementsByTagName('div') [1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div') [1].getElementsByTagName('div')[0].style.display = ''; this.innerText = 'tutup'; this.value = 'tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div') [1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = 'buka'; this.value = 'buka'; }" style="background: #1E90FF; border: 0px solid #000; color: #ffffff; font-family: arial; font-size: 10px; margin: 0px;font-weight:bold; text-transform:uppercase;float:right;" type="button" value="LIHAT" /> </div> <div style="border: 0px inset #fff; color: blue; margin: 0 10px 0px 10px; text-align:center;padding: 0px;"> <div style="display: none;"> <br /> Masukan Kode Widget Kalian Disini</div> </div> </div> - Setelah semua setelan telah kalian buat, langkah terakhir silahkan kalian klik tombol Save / Simpan .
