Multi Spoiler Blogger - Agiel Triono

Multi Spoiler Blogger

Baca Juga
thumbs

Malam sob kali ini saya ingin berbagi tutorial Cara Pasang Multi Spoiler Pada Halaman Postingan. Spoiler sendiri berguna untuk menyembunyikan konten dan menampilkan konten jika kita klik. Spoiler berguna untuk membuat konten di postingan jadi semakin terorganisir dengan maksud agar tidak terlalu banyak konten yang di tampilkan , contoh nya saja seperti list gambar, kode html,javascript dll.
bagaimana cara pasang nya , mari langsung kita mulai.

Pertama kita buka draft.blogger.com lalu pilih tab template , lalu pilih edit html.
cari </body> CTRL + F lalu tambahkan kode di bawah ini di atas kode </body>.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
// Multiple Spoiler By Agiel Triono
$(function(){
var e = $(".post-body > spoiler"),
    d = "<div class='spoiler'><span>Spoiler</span></div>",
    c = "spoiler-panel spoiler-hide";
    e.before(d);
    e.addClass(c);
$('.spoiler').click(function (){
  if ($( this ).next().is(".spoiler-hide")) {
    $(this).next().removeClass("spoiler-hide");
    $(this).next().addClass("spoiler-show");
  } else if ($( this ).next().is(".spoiler-show")) {
    $(this).next().removeClass("spoiler-show");
    $(this).next().addClass("spoiler-hide");
  }
 });
});
//]]>
</script>
</b:if>

Setelah itu tambahkan kode CSS di bawah ini sesudah tag ]]></b:skin> gunakan CTRL + F untuk mencari.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/* Multi Spoiler Agiel Triono */
.spoiler{text-align:center}
.spoiler span{text-rendering:auto;letter-spacing:normal;word-spacing:normal;text-transform:none;text-indent:0;display:inline-block;margin:0;background:#aa65c7;color:#fff;text-align:center;border:none;border-radius:3px;padding:8px 16px;margin:10px auto;font-size:14px;font-weight:bold;vertical-align:middle;cursor:pointer;user-select:none;text-shadow:0 1px rgba(0,0,0,0.3);transition:background 0.1s ease-in-out}
.spoiler span:hover,.spoiler span:focus{background:#9e4fbf;outline:none}
.spoiler-panel{padding:1px;text-align:left;background:#f5f5f5;border:0}
.spoiler-panel{padding:24px}
.spoiler-hide{display:none}
.spoiler-show{display:block}
</style>
</b:if>

Oke Simpan Template.

Kode Pada Postingan.
<spoiler>KONTEN ANDA DI SINI</spoiler>
Ganti KONTEN ANDA DI SINI dengan konten yang ingin anda sembunyikan.


Silahkan kreasikan sendiri jika ada kekurangan. Semoga tutorial ini dapat bermanfaat untuk sobat.

  • Untuk memasukan gambar silakan upload gambar pada komentar disqus.
  • Untuk memasukan link silahkan cantumkan link pada komentar tanpa menggunakan tag <a>.
  • Untuk menulis huruf bold silahkan gunakan <strong>...</strong> atau <b>...</b>.
  • Untuk menulis huruf italic silahkan gunakan <em>...</em> atau <i>...</i>.
  • Untuk menulis huruf underline silahkan gunakan <u>...</u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike>...</strike>.
  • Untuk menulis kutipan pendek gunakan <q>...</q>.
  • Untuk menulis kutipan panjang gunakan <blockqoute>...</blockqoute>.
  • Untuk menyembunyikan konten panjang gunakan <spoiler>...</spoiler>.
  • Untuk menulis syntax highlighter silahkan gunakan <pre><code>...</code></pre>, dan silahkan parse kode pada tab TOOLS.