×

Author / Admin / Editor

     Jagoan Redesign    

Blog yang membahas Tutorial Blogger, Games, Template, Tips Adsense, SEO, Web Design dan Teknologi

Iklan Bawah Posting

Cara Membuat Show/Hide Spoiler Mirip Median UI di Blogger

Jagoanredesign - Kali ini saya  membagikan sebuah tutorial Cara Membuat Show/Hide Spoiler Seperti Median UI di Blogger, Spoiler bisa anda gunakan untuk menyembunyikan sebuah konten berupa teks, gambar, atau video.


Cara kerja spoiler ini adalah saat anda mengeklik tombol spoiler maka otomatis teks, gambar, maupun video yang disembunyikan pada spoiler akan muncul.

Fungsi spoiler yaitu menyembunyikan konten yang mungkin tidak terlalu penting agar tidak terlalu mengganggu pembaca, juga dapat memperindah tampilan postingan blog anda. Show hide spoiler dibuat mirip spoiler template Median UI tutorial kali ini dibuat  menggunakan css dan html, tanpa javascript.

Cara Membuat Show/Hide Spoiler Mirip Median UI di Blogger

1. Silahkan Login ke Blogger.
2. Selanjutnya masuk ke menu TEMA > klik Edit HTML.
3. Kemudian cari kode berikut ini ]]></b:skin>  atau </style>dan pastekan kode css dibawah ini tepat DIATAS kode tersebut.

/* Spoiler by Jagoan Redesign */
.jagoanredesign_spoiler p{font-size:13px;margin:1.7em 0;}
.jagoanredesign_spoiler{border:1px solid rgba(0,0,0,.1);border-left:0;border-right:0;padding:25px 15px;margin:30px 0;font-size:15px;}
.spoilerTitle{display:flex;align-items:center;outline:0;}
.spoilerTitle label{margin-left:auto;color:#fefefe;background-color:#fd0000;border-radius:2px;padding:3px 15px;font-size:11px;font-weight:400;line-height:2.5em;cursor:pointer;}
.spoilerTitle label::before{content:' Show all';}
.spoilerContent{max-height:0;overflow:hidden;}
.spoilerInput:checked + .spoilerTitle label::before{content:' Hide all';}
.spoilerInput:checked ~ .spoilerContent{max-height:1000vh;}

4. Selanjutnya anda SIMPAN TEMA

5. Cara menggunakan Show/Hide Spoiler  di Postingan, silahkan anda masuk ke menu HTML bukan COMPOSE, Pastekan kode dibawah ini di Postingan HTML.
<div class="jagoanredesign_spoiler">
  <input class="spoilerInput hidden" id="jagoan-1" type="checkbox" />
  <div class="spoilerTitle">
    <b>Spoiler</b>
    <label></label>
  </div>
  <div class="spoilerContent">
    <!-- ganti ini dengan spoiler anda -->
</div>
</div>
Silahkan anda ganti <!-- ganti ini dengan spoiler anda --> dengan  text spoiler anda.
6. Silahkan anda SIMPAN TEMA dan Selesai.
Nah, itu adalah tutorial Cara Membuat Show/Hide Spoiler Mirip Median UI di Blogger semoga totorial bermanfaat bagi anda semua. jika ada yang ingin  anda tanyakan silakan berkomentar saja di bawah.
Latest
Previous
Next Post »
avatar
Penulis Blog dan redesigner template blogger.

Related Posts

Komentar
Tutup Komentar

0

Post a Comment

  • Berkomentarlah secara bijaksana dan bertanggung jawab.
  • Tidak diperbolehkan mempromosikan barang atau berjualan.
  • Tulis komentar Anda untuk hal yang masih berhubungan dengan posting pada halaman ini.
  • Dilarang memuat Link Aktif pada kolom komentar
  • Komentar dengan link aktif akan otomatis dihapus.
  • Jika ingin menulis kode silahkan anda parse terlebih dulu (terutama Javascript dan HTML)
  • Centang kotak Beri tahu saya untuk mendapatkan notifikasi via email jika ada yang membalas komentar.
  • Gunakan tag <i> dan diakhiri dengan kode </i> untuk menuliskan kode. Contoh:
    <i>#comments</i>
  • Gunakan tag <em> dan diakhiri dengan kode </em> untuk menuliskan kode yang lebih panjang atau URL. Contoh:
    <em>#comments {margin:0; padding:10px 15px}</em>

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel