Cara Memasang Spoiler Keren pada Postingan Blog - TRIK SIMPLE

Cara Memasang Spoiler Keren pada Postingan Blog

Cara Memasang Spoiler Keren pada Postingan Blog - Menambahkan spoiler pada blog sobat juga dapat menambahkan keistemaan pada blog sobat, spoiler ini tentunya sangat responsive dan mobile friendly enak dipandang.

Apa sih fungsinya dari spoiler ini? spoiler ini tombol yang digunakan untuk memunculkan misalkan daftar isi dan isi text yang biasanya menurut si penulis itu penting atau bisa yang lainnya seperti gambar maupun video.

Baca Juga : Cara Memasang PopUp Selamat Tahun baru di Blogger


---ISI KONTEN ANDA TERAPKAN DISINI---

Cara Memasang Spoiler Keren pada Postingan Blog


Pertama sobat masuk terlebih dahulu ke Blogger > Tema > Edit HTML copy kode CSS dibawah ini dan patekan tepat diatas kode ]]><b:skin> atau </style>

.centerflip{text-align:center}
.flippy{text-align:center}
button.flippy{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}
.flippy button:hover,.flippy button:focus{background:#9e4fbf;outline:none}
.flippanel{padding:1px;text-align:left;background:#f5f5f5;border:0}
.flippanel{padding:24px;display:none}

Kemudian memasang kode JQuery copy kode dibawah ini dan pastekan tepat diatas kode </body> atau &lt;/body&gt;

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

Simpan tema sobat kemudian memasang pada postingan sobat., copy kode dibawah ini dan pastekan didalam postingan artikel sobat.

<div class="centerflip"><button class="flippy">SPOILER</button>
<div class="flippanel">
---ISI DARI SPOILER DISINI---
</div>
</div>

Jika sudah klik pulikasikan coba lihat hasilnya sobat.

Baca Juga : Cara Membuat Efek Salju Terbaru di Blog

Oke sekian yang bisa saya sampaikan tentang Cara Memasang Spoiler Keren pada Postingan Blog Terima Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua.

Cara Memasang Spoiler Keren pada Postingan Blog


السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ
Cara Memasang Spoiler Keren pada Postingan Blog

Cara Memasang Spoiler Keren pada Postingan Blog - Menambahkan spoiler pada blog sobat juga dapat menambahkan keistemaan pada blog sobat, spoiler ini tentunya sangat responsive dan mobile friendly enak dipandang.

Apa sih fungsinya dari spoiler ini? spoiler ini tombol yang digunakan untuk memunculkan misalkan daftar isi dan isi text yang biasanya menurut si penulis itu penting atau bisa yang lainnya seperti gambar maupun video.

Baca Juga : Cara Memasang PopUp Selamat Tahun baru di Blogger


---ISI KONTEN ANDA TERAPKAN DISINI---

Cara Memasang Spoiler Keren pada Postingan Blog


Pertama sobat masuk terlebih dahulu ke Blogger > Tema > Edit HTML copy kode CSS dibawah ini dan patekan tepat diatas kode ]]><b:skin> atau </style>

.centerflip{text-align:center}
.flippy{text-align:center}
button.flippy{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}
.flippy button:hover,.flippy button:focus{background:#9e4fbf;outline:none}
.flippanel{padding:1px;text-align:left;background:#f5f5f5;border:0}
.flippanel{padding:24px;display:none}

Kemudian memasang kode JQuery copy kode dibawah ini dan pastekan tepat diatas kode </body> atau &lt;/body&gt;

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

Simpan tema sobat kemudian memasang pada postingan sobat., copy kode dibawah ini dan pastekan didalam postingan artikel sobat.

<div class="centerflip"><button class="flippy">SPOILER</button>
<div class="flippanel">
---ISI DARI SPOILER DISINI---
</div>
</div>

Jika sudah klik pulikasikan coba lihat hasilnya sobat.

Baca Juga : Cara Membuat Efek Salju Terbaru di Blog

Oke sekian yang bisa saya sampaikan tentang Cara Memasang Spoiler Keren pada Postingan Blog Terima Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua.

وَ السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ

Disqus Codes
  • To write a bold letter please use or
  • To write a italic letter please use or
  • To write a underline letter please use
  • To write a strikethrought letter please use
  • To write HTML code, please use or
    or

    And use parse tool below to easy get the style.
Show Parser Box

strong em u strike
pre code pre code spoiler
embed

Jangan Lupa Subcribe