cara membuat spoiler di blogspot
Istilah spoiler ini sudah tiga artkel yang neng buat untuk menbuat modifikasi spoiler agar tidak membosankan dan memang kalau kita mengumpamanakan spoiler ini sebagai makanan maka manakala kita melihat spoiler yang bertebaran itu itu saja , kadang kadang kita bosan juga untuk melihatnya walaupun kegunaanya hampir sama yaitu untuk buka tutup gambar atau text atau script atau bahkan hanya gambar saja ,namun apabila kita modifikasi dengan berbagai trik yang telah dikuasai atau memadukannya dengan berbagai variasi bentuk tentu saja akan menghilangkan kejenuhan yang melihat atau menggunakan spoiler yang itu ,dari dua ketiga postingan sebelumnya tentulah postingan tentang buka-bukaan dan tutup tutupan ini tentulah kita dapat mengetahui beberapa perbedaannya ,, hehehehe..jika belum sempat membacanya silahkan untuk dilihat-lihat sebagai bahan referensi saja
1.cara membuat spoiler disertai keterangan tentang spoiler tersebut
spoiler pada artikel yang pertama bentuknya seperti ini dan apa bila ingin lebih lengkap silahkan menuju postingan dengan kllik lik di atasDan sekarang saatnya neng membahas tentang spoiler ini yang ke-empat kalinya ini sangat berbeda karena menggunakan value image untuk button buka tutupnya walaupun memang istilah spoiler ini lebih populer di forum kaskus , akan tetapi , tentu saja flatform blog blogspot maupun wordpress atau platform blog lainnyapun tentu saja bisa. namun untuk platform mywapblog belum pernah di coba karena konon katanya MWB tidak support javascript kalau di gunakan di flatform blog seperti xtgem neng yakin bisa karena memang xtgem ini support dengan javascript
<input title="Click to show/hide content" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnSWn90VCjaHpfwMMN_Yx4yBz-mITshJlhgNj_GabW5u3rt3AFK9PkWtm5L-yuiwfA1laFMwmwa5uEqyZYrbipWPOZeuRRGvUXyByjT8f5sfGPagmhSjs_is0Q52dvoi20YTagbD5KKeo/s320/spoiler.gif" type="image" onclick="if(document.getElementById('guardian') .style.display=='none') {document.getElementById('guardian') .style.display=''}else{document.getElementById('guardian') .style.display='none'}"></input>
<div id="guardian" style="display:none">
#isi dengan gambar atau text atau script
</div>
Setelah kita membuat kode spoiler dengan berbagai bentuk tersebut sekarang saatnya membuat spoiler dengan menggunakan gambar sebagai buttonnya kita akan variasikan spoiler yang sudah biasa tersebut untuk menampilkan gambar berbingkkai dengan bingkai variasi div style
Akan tetapi sebelum kita membuat double spoiler dengan mode ini di dalam satu halaman artikel , maka kita harus mengganti terlebih dahulu value ini ("guardian") dan menggantinya dengan value apapun yang penting berbeda , satu sama lain ,karena apabila value ini tidak di rubah maka akan mengakibatkan efek domino ( yaitu pada saat satu button di tekan akan membuka button lainnya) maka dari itu kita akan ubah value yang di beri warna agar supaya efek domino tersebut tidak terjadi
<input title="Click to show/hide content" src="http://localhost/wordpress/wp-content/uploads/2016/01/spoiler-for-blog.jpg" type="image" onclick="if(document.getElementById('dila') .style.display=='none') {document.getElementById('dila') .style.display=''}else{document.getElementById('dila') .style.display='none'}"></input> <div id="dila" style="display:none"> #isi dengan gambar atau text atau script </div>
- Ganti saja url gambar yang berwana biru ini apabila tidak di ganti juga tidak apa apa http://localhost/wordpress/wp-content/uploads/2016/01/spoiler-for-blog.jpg
- Value yang ini guardian wajib di ganti neng menggantinya dengan webtool31
- Ganti #isi dengan gambar atau text atau script dengan gambar atau text script
Dan di bawah ini adalah kode spoiler dengan animasi gif untuk buka tutup gambar silahkan tinggal copas saja
<input title="Click to show/hide content" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvZUYS2eUFk3oftBTyALVA9Rhan8XiZn3Hx8ekSAUdr32o8BvFU58Fk6n7NeFqrCb1brjKBcqETcARUyfbhtNg3IVo8Y-QExopbQGYGNhENyTzBkSX8IC_ZQas-P5EcMSxsUo6tixkvwg/s200/ezgif.com-add-text.gif" type="image" onclick="if(document.getElementById('webtool31') .style.display=='none') {document.getElementById('webtool31') .style.display=''}else{document.getElementById('webtool31') .style.display='none'}"></input>
<div id="webtool31" style="display:none">
<div style="border:2px solid#2c2c2c"><div style="border:2px solid#444444"><div style="border:2px solid#5a5a5a"><div style="border:2px solid#727272"><div style="border:2px solid#888888"><div style="border:2px solid#a0a0a0"><div style="border:2px solid#b8b8b8"><div style="background-color:#fff;border:2px solid#d0d0d0"><center><div class="code" style="overflow: scroll; width: 98%; height: 350px;"><pre><code class="javascript"><span class=#2c2c2c"><font color="black">
<img class="wp-image-146 aligncenter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoyq2KBm1fwcbwjer_FxbMBFWOUtjtTTP2bNrwS2AiyUeHotnXPpXs6eMqSux5EVmtYgfGzZjanHCBplj7eQABdik212HHU66rQaBDCJO3zHT_REtZUlf_-eABSvoGfNv5P6kLHWID1fs/s320/spoiler.jpg" alt="spoiler" width="551" height="343" />
</font></code></pre></div></center> </div></div></div></div></div></div></div></div>
</div>
Selanjutnya adalah membuat spoiler mode text area
Untuk merubah button mode spoiler dengan textarea sangat mudah sekali kita tinggal menambahkan textarea saja ke dalam script yang tadi
akan tetapi apabila sahabat malas untuk membuatnya neng sediakan yang sudah jadi , jadi tinggal di copy paste saja masalah nantinya
baiklah langsung saja llihat kemunculan spoiler dengan button image ditambah textarea
Ambil kodenya di bawah ini
<input title="Click to show/hide content" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZdJeHdO7vrzE1qdfLwIUIfEkwcqLZAHJm1R7d6EvlUb78c03t9zfmXuBfrKAx5EM3cANkPTSSLUKF-IiEB5VXbEAMCLedomz0Flz9bk8_7N7EFRqzsxnsY6qShgmG07U8ExC0GRNWx74/s200/spoiler+textarea+.gif" type="image" onclick="if(document.getElementById('webtool31.blogspot') .style.display=='none') {document.getElementById('webtool31.blogspot') .style.display=''}else{document.getElementById('webtool31.blogspot') .style.display='none'}"></input><div id="webtool31.blogspot" style="display:none"><div style="border:2px solid#2c2c2c"><div style="border:2px solid#444444"><div style="border:2px solid#5a5a5a"><div style="border:2px solid#727272"><div style="border:2px solid#888888"><div style="border:2px solid#a0a0a0"><div style="border:2px solid#b8b8b8"><div style="background-color:#fff;border:2px solid#d0d0d0"><center><div class="code" style="overflow: scroll; width: 98%; height: 350px;"><pre><code class="javascript"><span class=#2c2c2c"><font color="black">
<div class="css textarea">
<button>copy saja semua Code di bawah ini</button>
<form name="copy">
<div align="center">
<textarea cols="50" name="txt" rows="5" style="max-width: 95%; min-width: 250px; overflow: auto;" wrap="VIRTUAL">
# GANTI DENGAN KODE SCRIPT YANG AKAN DI SEMBUNYIKAN DENGAN SPOILER
</textarea></div>
<div align="center">
<input onclick="javascript:this.form.txt.focus();this.form.txt.select();" value="Select All Code" type="button"> </div>
</form>
</div>
</font></code></pre></div></center> </div></div></div></div></div></div></div></div></div>
1 Response to "cara membuat spoiler di blogspot "
ini yang saya cari dari kemaren, terimakasih mba scriptnya membantu sekali
mampir juga mba ke blog lowongan kerja saya
Post a Comment