For world peace, liberate Al-Aqsa, eliminate Israel and anyone who is with Israel, they are the real terrorists
Bacakan

Membuat tombol spoiler box di Blogger menggunakan CSS

Cara membuat Tombol spoiler dengan mudah hanya mengandalkan kode CSS periksa sekarang bagaimana cara penerapannya

Hello sobat IcloudZer kembali lagi nih saya akan menjelaskan bagaimana Cara membuat Tombol spoiler di blog ataupun di website, pertama Tama apa itu Tombol sopiler?

Info: Bagi kamu yang sudah penasaran dengan pembahasan kita kali ini yakni cara membuat tombol spoiler mudah diblogger, yuk langsung aja kita bahas

Fungsi Tombol Spoiler

Tombol spoiler didalam sebuah blog atau website berfungsi untuk menyembunyikan Sebuah text dengan format atau induknya menggunakan Tombol, Ketika anda mengklik tombol tersebut maka Tampilan Text anda akan muncul

Contoh Tampilan

Nah apabila kamu telah menerapkan Tombol spoiler ini didalam blog kamu maka tampilannya akan seperti berikut ini



Contoh Tombol Spoiler
Nantinya Tuslisan anda akan tampil disini jika anda menerapkan kodenya pada situs blog anda

Info: Pada proses penerapan Tombol spoiler ini hanya dibuat dengan menggunakan kode CSS, maka tidak menghambat kelajuan situs blog anda

Oke kita akan masuk kecara penerapan nya, sebelum memulai lebih baik lakukan hal berikut sebagai kewaspadaan atau keamanan Template anda, yaitu backup atau cadangkan template anda terlebih dahulu

Cara penerapan

  1. Login keakun blogger kamu
  2. Pergi ke Template dan pilih edit html
  3. Cari kode ]]></b:skin> kemudian letakkan kode CSS berikut tepat diatas kode tadi
  4. /* Spoiler Box by Icloudice */
    .rahSpo{display:block;margin:12px 0;border:5px solid #f80000;padding:7px 10px;border-radius:3px;-moz-border-radius:3px}
    .rahSpo .tbl{background:#f80000;color:#fff;display:inline-block;cursor:pointer;font:normal 600 14px Tahoma,sans-serif;padding:0;border:none;outline:0;line-height:20px;border-radius:3px;-moz-border-radius:3px}
    .rahSpo .tbl:focus{pointer-events:none}
    .rahSpo .tbl:before{content:'Mau Lihat';display:inline-block;padding:7px 10px;border-radius:3px;-moz-border-radius:3px}
    .rahSpo .tbl:focus::before{content:'Udah Lihat';background:#c00}
    .rahSpo .cnt{background:#e4e4e4;pointer-events:auto;visibility:hidden;opacity:0;height:0;transition:all .5s ease}
    .rahSpo .tbl:focus+.cnt{visibility:visible;opacity:1;height:auto;margin:10px 0 5px;padding:10px 15px;transition:all .5s ease}
  5. Kemudian simpan Template nya
  6. Untuk cara penerapan pada postingan, Tulis kode dibawah pada mode Html di postingan
<b> Judul Spoiler Anda </b>
<div class="rahSpo">
<div class="tbl" tabindex="0"></div>
<div class="cnt">
<!--Isi Spoiler-->
Tuliskan Isi Spoiler anda disini
</div>
</div>

Warning: ⚠️ Ingat yak pada kode diatas ubah atau edit pada judul dan tuliskan isi spoiler anda

Baiklah sobat postingan saya kali ini, menurut saya sangat simple sekali untuk diterapkan pada situs blog anda, jika kurang mengerti tanyakan kepada saya melalui kolom komentar dibawah, berilah saran dan kritik anda jika memungkinkan, terimaksih

About the Author

Keindahanmu akan kuabadikan disetiap karyaku.

تعليقان (2)

  1. Trimakasih tips cara bikin spoiler. Mau saya terapkan biar postingan enggak terlihat terlalu panjang. Sekalian nyoba kalau komentar pakai memasukkan video youtube spt apa jadinya. Tp kalau sekiranya bikin berat silahkan dihapus komentar saya. Terimakasih.
    https://youtu.be/VeBl_1UBN3s
    1. Tenang aja gan ane udah pasang kode khusus untuk YouTube biar loadingnya kagak berat
Menghasilkan uang melalui survei berbayar
Best Viral Premium Blogger Templates from Icloudice


kami menawarkan berbagai template blogger dan produk istimewa untuk anda, support karya anak bangsa dengan membeli produk yang kami jual

Welcome to my store limited

  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Download theme blogger mirip xmlthemes

    Template mirip xmlthemes

    Template blogger terlaris nomor 1 di seluruh Indonesia bahkan di seluruh dunia lagi Diskon 50%
    Rp.153.000
  • Cookie Consent
    We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
    Oops!
    It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
    AdBlock Detected!
    We have detected that you are using adblocking plugin in your browser.
    The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
    Site is Blocked
    Sorry! This site is not available in your country.