Cara Membuat Tombol Show Hide Keren Di Widget Blogger

komputerdia.com - Membuat tombol show hide pada widget blogger merupakan salah satu alternatif terbaik yang bisa kalian lakukan untuk menghemat space di halaman side bar blog. Dengan kalian menerapkan teknik ini, tentunya kalian bisa menerapkan fitur lainnya seperti kode iklan dan lain-lain.

Dalam artikel kali ini, saya akan mencoba menjelaskan bagaimana cara membuat tombol tutup buka atau show hide pada bagian widget blogger. Unuk lebih jelasnya silahkan kalian perhatikan langkah - langkahnya dibawah ini .

Baca Juga :

Cara Membuat Tombol Show Hide Keren Di Widget Blogger

Cara Membuat Tombol Show Hide Di Widget / Gadget Blog

  • Pertama silahkan kalian masuk ke akun blogger kalian
  • Pilih menu Tema atau Theme, kemudian klik tombol edit Html.
  • Setelah masuk ke bagian halaman edit html, silahkan kalian cari kode ]]></s:kin> .
  • Langkah selanjutnya silahkan kalian copy kode dibawah ini dan letakkan tepat diatas kode ]]></s:kin> .
.spoiler{background:#f9f9f9 url(https://lh3.googleusercontent.com/-CoP7gpji2kI/UAlWXkvzDfI/AAAAAAAABA0/i49o5VKz3F0/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 bisa kalian ganti dengan url gambar yang kalian inginkan
  • Kode warna Biru merupakan kode warna dan bisa kalian sesuaikan sesuai keinginan .
  • Setelah semua setelah telah kalian buat, silahkan tekan tombol Save Theme atau Simpan Tema .
  • Langkah selanjutnya silahkan kalian beralih ke bagian menu Layout atau Tata Letak .
  • kemudian kalian pilih menu Add Widget atau Tambahkan gadget .
Cara Membuat Tombol Show Hide Keren Di Widget Blogger
  • Setelah itu kalian akan melihat sebuah halaman dengan jenis jendela popup, disini silahkan kalian pih menu Html/JavaScript .
  • Langkah selanjutnya, kalian copy kode dibawah ini dan tempelkan pada bagian 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 .
Cara Membuat Tombol Show Hide Keren Di Widget Blogger


.
.

Berlangganan Artikel terbaru (free):

Post a Comment