Salam ne sobat..udah lama juga ane g' posting..apalagi tentang tips blogger.
maaf y sobat2 smw.minggu lalu saya telah
mempost tentang Cara buat text di navbar berjalan
dan sekarang saya ingin mempost dulu tentang
cara memasang menu spoilers/bukatutup. hehe
saya akan menjelaskan dulu secara singkat apa itu spoilers.
Spoiler adalah sebuah kolom yang bisa dibukadan ditutup serta ada border atau garis yang membentuk kolom. Fungsinya adalah sama seperti fungsi scroll yang bertujuan untuk menghemat
ruang halaman saat mempostinggambar atau
tulisan yang banyak sehingga terlihat tertata dan rapi.
Caranya :
Login terlebih dahulu ke Blogger ID Anda. Masuk ke Tata Letak/Rancangan. Lalu klik tambah Gadget
Dan ini Contoh Scriptnya :
Cara membuat Link warna-warni di blog
Sumber: fajarnoverdi.blogspot.com
maaf y sobat2 smw.minggu lalu saya telah
mempost tentang Cara buat text di navbar berjalan
dan sekarang saya ingin mempost dulu tentang
cara memasang menu spoilers/bukatutup. hehe
saya akan menjelaskan dulu secara singkat apa itu spoilers.
Spoiler adalah sebuah kolom yang bisa dibukadan ditutup serta ada border atau garis yang membentuk kolom. Fungsinya adalah sama seperti fungsi scroll yang bertujuan untuk menghemat
ruang halaman saat mempostinggambar atau
tulisan yang banyak sehingga terlihat tertata dan rapi.
Caranya :
Dan ini Contoh Scriptnya :
<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;"><b>Spoiler</b>: <input value="Open" style="margin: 0px;padding: 0px; width: 55px; font-size: 11px;" 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 = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" type="button">
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
Isikan kode, script, HTML atau teks Anda disini !!<br>
</div>
</div>
</div>
<div class="smallfont" style="margin-bottom: 2px;"><b>Spoiler</b>: <input value="Open" style="margin: 0px;padding: 0px; width: 55px; font-size: 11px;" 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 = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" type="button">
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
Isikan kode, script, HTML atau teks Anda disini !!<br>
</div>
</div>
</div>
Dan hasilnya akan seperti ini.
Spoiler:
NB :
1. Tulisan Open dan Close bisa Anda ganti yang di suka
2. Width : 55px = lebar spoiler
3. Font-size: 11px = besar tulisan pada kotak spoilers
4. Tulisan Spoiler adalah judul,bisa ganti sesuai keinginan Anda
5. Tulisan yang berwarna biru bisa juga Anda ganti sesuai dengan tulisan yang ingin Anda tuliskan pada kolom bagian dalam spoiler.
Baca juga : Cara membuat 3 kolom di bawah header blog
1. Tulisan Open dan Close bisa Anda ganti yang di suka
2. Width : 55px = lebar spoiler
3. Font-size: 11px = besar tulisan pada kotak spoilers
4. Tulisan Spoiler adalah judul,bisa ganti sesuai keinginan Anda
5. Tulisan yang berwarna biru bisa juga Anda ganti sesuai dengan tulisan yang ingin Anda tuliskan pada kolom bagian dalam spoiler.
Baca juga : Cara membuat 3 kolom di bawah header blog
Sumber: fajarnoverdi.blogspot.com
0 comments:
Post a Comment