logo
Home » Trik WordPress » Optimasi Page dan Post Wordpress Dengan Spoiler

Optimasi Page dan Post Wordpress Dengan Spoiler

Optimasi Page dan Post Wordpress Dengan Spoiler


Spoiler merupakan cara yang digunakan untuk menyembukan suatu element sperti link, kumpulan link, kumpulan teks, gambar maupun video. Prinsip dari spoiler adalah buka tutup atau show hide, dimana jika spoiler dalam keadaan tertutup kemudian tombol spoiler di tekan maka element yang disembunyikan di dalam spoiler akan tampil, dan sebaliknya jika spoiler dalam keadaan terbuka kemudian tombol spoiler di tekan maka element yang ada di spoiler akan di sembunyikan. Cara memasang spoiler juga dapat di terapkan pada blog wordpress maupun blogger. Caranya sangat mudah, cukup dengan menambahkan script/kode pada halaman page atau post yang ingin ditampilkan.

Berikut adalah Optimasi Page dan Post Wordpress Dengan Spoiler untuk menyembunyikan teks dan gambar:

Cara membuat spoiler untuk menyembunyikan teks.
Cara membuat spoiler di blog wordpress maupun blogger untuk menyembunyikan teks dapat dilakukan dengan menambahkan kode berikut pada teks editor tampilan HTML post.
Spoiler untuk menyembunyikan teks

<div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><input style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" 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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button" value="Show" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px; background: #FAFAF7;">
<div style="display: none;">ini adalah tampilan spoiler untuk menyembunyikan teks</div>
</div>
</div>

Cara membuat spoiler untuk menyembunyikan gambar.
Cara membuat spoiler di blog wordpress maupun blogger untuk menyembunyikan file gambar dapat dilakukan dengan menambahkan kode berikut pada halaman teks editor tampilan HTML post.
Spoiler untuk menyembunyikan gambar

<div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><input style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" 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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button" value="Show" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px; background: #FAFAF7;">
<div style="display: none;"><img class="aligncenter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikNcfqGbsOetgEpxnAWyTUWFXDJ9VQVPR5sy0Rr546IGV9eKunxbS9Soq2f6DyZogtjqFyxZ2IyzeYZ8_vRGXO0d-nqpoS4T8PcTXV2LfRt4b6-347Xduq-p4gMRa-ffiBp4RILZXXNNM/s320/monyet.jpg" alt="monyet" width="300" height="280" /></div>
</div>
</div>

Demikian trik Optimasi Page dan Post Wordpress Dengan Spoiler untuk menyembunyikan teks dan gambar
Semoga Sukses...
Categories:

Related Post:



0 komentar:

Posting Komentar

Copyright © Belajar WordPress. All rights reserved.

Supported by Blogger Terbaru Theme by Tricks-Collections