Cara Membuat Tombol Spoiler Show dan Hide Keren Pada Blog - Hallo sahabat Apkpure, Pada Artikel yang anda baca kali ini dengan judul Cara Membuat Tombol Spoiler Show dan Hide Keren Pada Blog, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Blogging, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Cara Membuat Tombol Spoiler Show dan Hide Keren Pada Blog
link : Cara Membuat Tombol Spoiler Show dan Hide Keren Pada Blog

Cara Membuat Tombol Spoiler Show dan Hide Keren Pada Blog

Cara Membuat Tombol Spoiler Show dan Hide Keren Pada Blog - Banyak posting Blog yang kami gunakan sumber paragraf atau tepatnya kutipan apa yang diterbitkan. Ini bisa kita gunakan spoiler konten. Karena konten spoiler membantu menyembunyikan dan menunjukkan ayat-ayat tertentu. Terkadang hal-hal opsional yang dapat kami tunjukkan dengan spoiler konten dan juga digunakan dalam kasus kode widget presentasi blok dengan menampilkan dan menyembunyikan pilihan. Efek ini juga dikenal sebagai spoiler atau mengintip. Meskipun saya harus berbagi gambar widget spoiler dan dalam tutorial ini saya akan menunjukkan cara tentang spoiler konten.

Cara Membuat Tombol Spoiler Show dan Hide Keren Pada Blog

Berikut langkah langkahnya agar tampilan tombol spoiler lebih menarik :

1. Pada blogger anda pergi ke Blogger Dashboard
2. klik Template - Edit HTML
3. Temukan ]]></b:skin> temukan dengan cara CTRL + F
4. Copy kode dibawah ini dan paste sebelum ]]></b:skin>

#content-spoiler {text-align:center;}
#content-spoiler button{margin:10px auto;cursor:pointer;background-color:#5a6269;color:#fff;padding:10px 14px!important;text-transform:uppercase;border:none;font-size:14px;transition:all .3s ease-out}
#content-spoiler button:hover, #content-spoiler button:focus {outline:none;opacity:1;color:#fff;}
#spoilerpanel {padding:1px;text-align:left;background:#fafafa;border:1px solid #e6e6e6;}
#spoilerpanel {padding:24px;display:none;}
#spoilerpanel img {background:#f5f5f5;margin:10px auto;}

5. Temukan </head> dengan CTRL + F
6. Copy script dibawah ini dan Paste sebelum </head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
//Spoiler
$(document).ready(function(){$("#content-spoiler").click(function(){$("#spoilerpanel").slideToggle("normal")})});
</script>

7. Jika template anda sudah berisi Jquery terbaru maka Anda tidak perlu menambahkan File jquery seperti dibawah in. Hapus saja Jquery pada langkah 06... !!

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>

8. Save Template
9. Sekarang cara kerjanya menggunakan tombol khusus ini Anda harus menambahkan kode dalam tampilan HTML saat menulis Postingan Blog. Hanya menulis posting dan dari modus Posting Editor Pilih HTML. Sekarang tambahkan kode di bawah :

<div id="content-spoiler">
<button>Content Spoiler</button></div>
<div id="spoilerpanel">
ADD TEXT HERE
<div class="separator" style="clear: both; text-align: center;"><a href="IMAGE URL HERE" style="margin-left: 1em; margin-right: 1em;"><img src="IMAGE URL HERE" style="border: none;" /></a></div>
ADD TEXT HERE
</div>
</div>

10. Lihat hasilnya dibawah ini

Keterangan :

1. Untuk menambahkan teks pada Spoiler hanya mengganti ADD TEXT HERE
2. Untuk menambahkan Gambar di Spoiler hanya mengganti URL IMAGE HERE

Demikian informasi tentang Cara Membuat Tombol Spoiler Show dan Hide Keren Pada Blog. Maaf jika ada kekurangan, silahkan tambahkan beberapa kekurangan pada artikel di kolom komentar. Saya harap informasi ini bermanfaat.

Demikianlah Artikel Cara Membuat Tombol Spoiler Show dan Hide Keren Pada Blog

Sekianlah artikel Cara Membuat Tombol Spoiler Show dan Hide Keren Pada Blog kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Cara Membuat Tombol Spoiler Show dan Hide Keren Pada Blog dengan alamat link https://apkpure-123.blogspot.com/2018/10/cara-membuat-tombol-spoiler-show-dan.html

Cara Membuat Tombol Spoiler Show dan Hide Keren Pada Blog 2018-10-21T05:27:00-07:00 Rating: 4.5 Diposkan Oleh: BLOG LIRIK LAGU