Sebagian orang tentunya sudah tahu apa tersebut spoiler, lagipula kalau tidak jarang bermain di forum. Spoiler sudah tentu sering digunakan.
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.
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>.
Ketiga, Copy kode javascript berikut ini dan letakan sebelum kode </body>.
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:
Contoh penerapan bisa dilihat dibawah ini:
Demikian untuk tips kali ini, semoga bermanfaat.
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.
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:
Video:
Demikian untuk tips kali ini, semoga bermanfaat.
Source : https://www.arlinadzgn.com/2014/11/memasang-spoiler-di-postingan.html
