Cara Membuat Spoiler di Blogger


Rendiansyah.com - Cara Membuat Spoiler di Blogger - Spoiler merupakan sebuah tombol buka tutup yang dapat menyembunyikan sebuah konten. Konten tersebut dapat berupa teks, gambar, video dan sebagainya. Konten tersebut akan muncul ketika user mengklik tombol spoiler tersebut.

Fungsinya bukan hanya untuk menyembunyikan sebuah konten yang seperti diatas saja. Tapi juga berfungsi untuk menghemat space artikel atau agar artikel tersebut tidak tampil terlalu banyak.

Anda juga dapat menggunakan tombol spoiler pada halaman artikel dan juga halaman statis page. Anda juga dapat mengisi sebuah teks, gambar, video dan sebagainya pada spoiler tersebut.

Cara Membuat Spoiler di Blogger

Pertama-tama seperti biasanya, Anda harus login telebih dahulu kedalam dashboard Blogger. Jika sudah pilih menu Tema > klik tombol Edit HTML, dan tambahkan CSS dibawah ini pada tag </style> ataupun tag ]]></b:skin>

/* Spoiler Button by Rendiansyah.com */
#soore-spoiler{display:inline-block;margin:15px auto;}#soore-spoiler button{display:inline-block;background:#292e34;color:#fff;padding:10px 53px;border-radius:6px;border:none;outline:0;}
#soore-spoiler-content{display:none;background:#f0f8ff;margin:10px auto;padding:15px;border-radius:6px;}

Dan tambahkan juga kode JavaScript dibawah ini tepat diatas kode </body>. Fungsi kode JavaScript berikut adalah untuk membuat buka tutup konten.

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
  $('#soore-spoiler').click(function(){
    $('#soore-spoiler-content').slideToggle('normal');
  })
});
//]]>
</script>

Dan juga tambahkan kode jQuery berikut diatas </body>. Jika kode berikut sudah terdapat pada template Anda tidak usah menambahkannya.

<script async="async" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Terakhir, tinggal klik Simpan Tema. Untuk menggunakannya gunakan kode HTML berikut.

<div id='soore-spoiler'>
<button>Klik Disini</button>
</div>
<div id='soore-spoiler-content'>
••••
</div>

Dan lihat hasilnya yang sudah Anda buat tadi. Saya juga sudah menyediakan tombol untuk melihat hasilnya dibawah ini.



Demikian artikel tentang cara membuat spoiler di blogger. Semoga artikel diatas dapat membantu Anda dan semoga dapat bermanfaat. Sekian dan Terimakasih 🙏

Post a Comment

Previous Post Next Post