Dalam penulisan content di sebuah website atau blog penggunaan spoiler umum di gunakan, bagaimana tidak, dengan menggunakan spoiler buka tutup atau pun spoiler 2 bahasa sangat efesien untuk menambah style (tampilan) content/artikel. Selain itu spoiler juga digunakan beberapa penulis untuk memendek-kan artikel yang terlalu panjang, spoiler buka tutup contoh nya atau biasa disebut dengan spoiler open/hide. Pada artikel ini saya akan membagikan 2 jenis spoiler yang umum di gunakan oleh para blogger yaitu: Spoiler tombol buka tutup (open/hide) dan spoiler 2 bahasa.
Namun sebelum-nya saya jelaskan sediki mengenai spoiler 2 bahasa ini, agar pembaca Borisinil tidak salah paham. "Spoiler 2 bahasa tidak menerjemahkan content artikel secara otomatis, melainkan kita sendiri yang menerjemahkan nya" kemudian artikel tersebut dibungkus dengan spoiler 2 bahasa sebelum di publikasikan. lihat demo nya di bawah ini.
Hi, My Name Is somad ...! I just joined the Borisinil blog, they invited me to handle Desinger / Layout of this themes site and this is my first post here.
Untuk membuat spoiler seperti diatas, kamu hanya perlu menggunkan script html yang telah saya sediakan sebelum-nya.
Selanjut-nya adalah spoiler open/hide atau tombol buka/tutup, Spoiler buka tutup mungkin sudah tidak asing lagi karena setiap blogger umum-nya sudah sering melihat spoiler buka tutup ini, baik itu di tutorial google atau pun di tutorial blogger lainya. Jadi langsung saja ambil kode spoiler buka tutup dibawah ini.
Namun sebelum-nya saya jelaskan sediki mengenai spoiler 2 bahasa ini, agar pembaca Borisinil tidak salah paham. "Spoiler 2 bahasa tidak menerjemahkan content artikel secara otomatis, melainkan kita sendiri yang menerjemahkan nya" kemudian artikel tersebut dibungkus dengan spoiler 2 bahasa sebelum di publikasikan. lihat demo nya di bawah ini.
Baca dalam bahasa:
Untuk membuat spoiler seperti diatas, kamu hanya perlu menggunkan script html yang telah saya sediakan sebelum-nya.
<div id="tEN" onclick=" document.getElementById('tEN').style.display='none'; document.getElementById('tID').style.display='block'; document.getElementById('EN1').style.display='none'; document.getElementById('ID1').style.display='block'; ">
<div style="text-align: right;">
Baca dalam bahasa: <button>Indonesia</button></div>
</div>
<div id="tID" onclick=" document.getElementById('tID').style.display='none'; document.getElementById('tEN').style.display='block'; document.getElementById('ID1').style.display='none'; document.getElementById('EN1').style.display='block'; " style="display: none;">
<div style="text-align: right;">
Read In: <button>English</button></div>
</div>
<span id="EN1">Isi dengan artikel bahasa inngris atau bahasa lainnya</span>
<span id="ID1" style="display: none;">Isi dengan artikel bahasa indonesia atau bahasa lainnya</span>
</div>
Selanjut-nya adalah spoiler open/hide atau tombol buka/tutup, Spoiler buka tutup mungkin sudah tidak asing lagi karena setiap blogger umum-nya sudah sering melihat spoiler buka tutup ini, baik itu di tutorial google atau pun di tutorial blogger lainya. Jadi langsung saja ambil kode spoiler buka tutup dibawah ini.
<div><input value="Show" onclick="if(this.parentNode.getElementsByTagName('div')[0].style.display != ''){this.parentNode.getElementsByTagName('div')[0].style.display = '';this.value = 'Hide Content';}else{this.parentNode.getElementsByTagName('div')[0].style.display = 'none'; this.value = 'Show Content';}" type="button" />
<div style="display: none;">HIDE CONTENT GOES HERE</div></div>
Tags:
Blogger Tips