Cara Membuat Spoiler Lebih Dari Satu Di Blogspot Terbaru

Cara Membuat Spoiler Lebih Dari Satu Di Blogspot Terbaru
Cara Membuat Spoiler Lebih Dari Satu Di Blogspot Terbaru
Cara Membuat Spoiler Lebih Dari Satu Di Blogspot
Cara Membuat Spoiler Lebih Dari Satu Di Blogspot Terbaru - halo sahabat b38 selamat datang di blog sederhana ini, Alhamdulillah pada kesempatan kali ini admin akan berbagi tutorial kepada sobat blogger semua dimanapun berada, yaitu tentang bagaimana sih cara membuat spoiler di postingan blogspot?

Jika sobat tidak mengerti apa sih spoiler itu?
Spoiler itu gampangannya sih untuk menyembunyikan isi seperti gambar, tulisan atau video di dalam posting artikel,

Biasanya yang memakai fungsi spoiler kebanyakan seperti website forum (kaskus) atau website yang bertema pendidikan (dipakai untuk menyembunyikan jawaban dari soal atau kuis yang ada di posting),

Dan blog ini juga memakai fitur spoiler, dikarenakan agar postingan lebih terlihat rapi, apalagi jika gambar terlalu banyak dalam satu artikel, pastinya loading dalam memuat halaman juga akan terasa lambat dan berat,

Selain fungsi yang telah disebut diatas spoiler juga memiliki manfaat lain, yaitu agar loading suatu blog atau website tidak berat dikarenakan terlalu banyak iframe video, google drive dan file gambar yang besar,

Jika dipasang spoiler, maka gambar atau video yang ada di dalam posting tidak akan aktif, kecuali jika kita menekan tombol spoiler untuk membuka isinya,

Memang Tidak semua blogger atau website yang memakai fitur ini, karena setiap admin yang mempunyai blog atau web memiliki cara dan ciri tersendiri dalam membuat posting atau artikelnya,

Sebenarnya pada artikel yang lalu admin telah membuat bagaimana cara membuat multispoiler di blogspot, namun menurut admin pada tutorial yang lalu bisa dibilang tidak praktis dan di beberapa tema tidak berjalan dengan baik,

Nah pada kali ini admin kembali lagi membuat artikel yang juga membahas tentang bagaimana cara membuat spoiler di posting blogspot, dan yang pasti lebih keren dan mudah diterapkan di template apa saja, baik AMP maupun non AMP,

Cara Membuat Spoiler Lebih Dari Satu Di Blogspot

Dibawah ini adalah langkah bagaimana cara membuat spoiler di blogspot lebih dari satu, jika sobat merasa fitur spoiler ini berguna bagi web atau blog sobat, silahkan ikuti langkah dibawah ini:

Pertama silahkan masuk ke dashboard sobat, kemudian masuk menu Theme - Edit HTML, lalu masukkan kode dibawah ini diatas kode <head/> atau </head>,

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*spoiler*/
.spoiler .spoiler_title {display: inline;float: left;margin: 3px 10px 0 0;padding: 4px 0;font-size: 16px;line-height: 1;}.spoiler label {cursor: pointer;background: #26272a;margin: 0;padding: 4px 18px 4px 22px;outline: none;border-radius: 3px;color: #efefef;transition: all .3s ease-in-out;display: inline;font-size: 12px;font-family: arial, san-serif;line-height: 1;position: relative;}.spoiler input[type=checkbox] ~ label:before {content: &quot;&quot;;height: 0;width: 0;border-width: 4px 4px 4px 7px;border-style: solid;border-color: transparent transparent transparent #fff;position: absolute;top: 7px;left: 8px;}.spoiler input[type=checkbox]:checked ~ label:before {content: &quot;&quot;;height: 0;width: 0;border-width: 7px 4px 4px 4px;border-style: solid;border-color: #fff transparent transparent transparent;position: absolute;top: 8px;left: 8px;}.spoiler input {position: absolute;left: -999em;opacity: 0;}.spoiler .content_box {width: 100%;border: 1px solid #ddd;background: #efefef;height: auto;padding: 6px 10px;margin: 8px 0 0;overflow: hidden;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}.spoiler .content_box .content {display: none;}.spoiler .content p {padding: 0;margin: 0}.spoiler .content p img {margin: 4px 0 0;max-width: 100%;height: auto;}.spoiler input[type=checkbox]:checked ~ .content_box .content {display: block;-webkit-animation: slide-down .3s ease-out;-moz-animation: slide-down .3s ease-out;}@-webkit-keyframes slide-down {0% {opacity: 0;-webkit-transform: translateY(-100%)}100% {opacity: 1;-webkit-transform: translateY(0)}}@-moz-keyframes slide-down {0% {opacity: 0;-moz-transform: translateY(-100%)}100%{opacity: 1;-moz-transform: translateY(0)}}
</style>
</b:if>

Setelah itu klik simpan untuk menyimpan kode template, lalu untuk menerapkan spoiler di postingan atau artikel, silahkan sobat masuk menu HTML ketika membuat artikel (jangan menu Compose), dan tambahkan kode seperti dibawah ini:

<div class="spoiler">
<input type="checkbox" id="item-1">
<label for="item-1">Click to preview file :</label>
<div class="content_box">
<div class="content">
Masukkan gambar, kode iframe atau embed youtube disini
</div>
</div>
</div>

Perhatikan kode yang berwarna kuning item-1, silahkan ganti angka 1 dengan angka 2 jika sobat ingin menampilkan spoiler lebih dari satu di dalam postingan blogspot, dan begitu seterusnya,

Dan seperti dibawah ini hasilnya:





Sobat dapat menambahkan berapapun jumlah spoiler di postingan, tanpa ribet lagi, cukup mengganti angka 1 sesuai dengan jumlah spoiler yang ingin ditampilkan,

Kiranya cukup demikian tutorial tentang cara membuat spoiler lebih dari satu ini, jika dirasa ada yang kurang jelas atau kesulitan, silahkan tinggalkan komentar dibawah ini, selamat mencoba dan semoga bermanfaat, terima kasih telah berkunjung.
sumber kode : kompiajaib

Artikel Menarik Lainnya :

Comment Policy: Silahkan tinggalkan komentar Sobat sesuai dengan topik artikel di halaman ini. Komentar yang berisi Link tidak akan ditampilkan.
Buka Komentar