Cara Membuat Spoiler Di Blogger - Deny Listianto

April 3, 2018

Cara Membuat Spoiler Di Blogger

Sebagian orang tentunya sudah tahu apa tersebut spoiler, lagipula kalau tidak jarang bermain di forum. Spoiler sudah tentu sering digunakan.

Cara Membuat Spoiler Di Blogger

Sebelumnya bila ada yang belum tahu apa tersebut spoiler. saya jelasin singkat saja. Spoiler ialah tombol yang diguanakan untuk menyingkat lokasi atau menyembunyikan konten (teks, potret atau video) dengan cara button atau tombol buka tutup.

Spoiler dapat juga diciptakan di blog, biasanya di terapkan pada dipostingan dan dipakai untuk menciptakan penasaran si pembaca dengan menyembunyikan terlebih dahulu. Bagi melihatnya dengan mengklik tombol spoiler itu.

Selain tersebut juga untuk menghemat tempat, ya sebab buka tutup tersebut (spoiler). Lalu bagaimana teknik membuat spoiler di blog? Langsung simak tutorial di bawah ini.

Cara Membuat Spoiler Di Postingan Blogger


Pertama, masuk ke Blogger lalu buka menu Tema dan pindah ke Edit HTML.

Kedua, Copy dan letakan kode di bawah ini sebelum Kode ]]></b:skin> atau </style>.

.centerspoiler{text-align:center}
.spoiler{text-align:center}
button.spoiler{background:#aa65c7;color:#fff;text-align:center;margin:0 auto;border:none;border-radius:3px;padding:8px 16px;margin:10px auto;font-size:14px;font-weight:bold;box-shadow:0 3px 0 0 #883da7;vertical-align:middle;cursor:pointer;text-shadow:0 1px rgba(0,0,0,0.3);transition:background 0.1s ease-in-out}
.spoiler button:hover,.spoiler button:focus{background:#9e4fbf;outline:none}
.spoilerpanel{padding:1px;text-align:left;background:#f5f5f5;border:0}
.spoilerpanel{padding:24px;display:none}

Ketiga, Copy kode javascript berikut ini dan letakan sebelum kode </body>.

<script>
$(function(){
  $(".spoiler").on("click", function(){
    $(this).parent().children(".spoilerpanel").slideToggle("normal");
  });
});
</script>

Keempat, Cara memasang Spoiler di postingan Blog
1. Login ke Blogger
2. Pilih New Post atau Entri Baru seperti membuat postingan biasa
3. Pilihlah pada mode Edit HTML atau HTML saat membuat postingan
4. Gunakan kode berikut ini untuk membuat spoiler:

<div class="centerspoiler"><button class="spoiler">Spoiler</button>
<div class="spoilerpanel">
---ISI KONTEN ANDA DISINI---
</div>
</div>

Contoh penerapan bisa dilihat dibawah ini:

Tulisan:


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget molestie libero. Proin purus nunc, fringilla vehicula egestas at, pellentesque id urna. Donec malesuada nec erat vitae rutrum. Ut malesuada leo in pulvinar vulputate.

In commodo volutpat luctus. Pellentesque id fringilla dolor. Sed vulputate mauris eu lacus dapibus aliquam in non ipsum. Nunc varius feugiat justo, a auctor libero sodales eget. Sed magna augue, tempor id molestie ac, bibendum quis orci.

Vivamus volutpat enim dignissim libero sodales eleifend. Cras ullamcorper elit et dolor commodo, sed porttitor diam hendrerit. Sed pellentesque pulvinar dolor. Nullam viverra massa tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Gambar:


Logo Deny

Video:



Demikian untuk tips kali ini, semoga bermanfaat.

Source : https://www.arlinadzgn.com/2014/11/memasang-spoiler-di-postingan.html
Disqus Codes
  • To write a bold letter please use <strong></strong> or <b></b>
  • To write a italic letter please use <em></em> or <i></i>
  • To write a underline letter please use <u></u>
  • To write a strikethrought letter please use <strike></strike>
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>
    And use parse tool below to easy get the style.
Show Parser Box

strong em u strike
pre code pre code spoiler
embed

Notifications

Disqus Logo