Spoiler Buka Tutup Dan 2 Bahasa

Dalam penulisan content di sebuah website atau blog penggunaan spoiler umum di gunakan, bagaimana tidak, dengan memakai spoiler buka tutup atau pun spoiler 2 bahasa sangat efesien untuk menambah style (tampilan) content/artikel. Selain itu spoiler juga dipakai beberapa penulis untuk memendek-kan artikel yang terlalu panjang, spoiler buka tutup pola 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, semoga pembaca Maxloger 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: 

Read In: 

Hi, My Name Is somad ...! I just joined the Maxloger blog, they invited me to handle Desinger / Layout of this themes site and this is my first post here. Hai, Namaku somad ...! Saya gres saja bergabung dengan blog Maxloger, mereka merekrut saya untuk menghanle Desinger / Layout template situs ini dan ini yaitu posting pertamaku di sini.

Untuk menciptakan spoiler menyerupai diatas, kau 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:&nbsp;<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:&nbsp;<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 yaitu spoiler open/hide atau tombol buka/tutup, Spoiler buka tutup mungkin sudah tidak aneh lagi alasannya setiap blogger umum-nya sudah sering melihat spoiler buka tutup ini, baik itu di tutorial google atau pun di tutorial blogger lainya. Makara pribadi saja ambil isyarat 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>