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

Cara membuat spoiler keren dan responsif di blogger

Hello sobat IcloudZer bagaiamana dengan kabar kamu hari ini, apakah sehat dan baik baik saja, semoga selalu di diberikan kesehatan oke, bagi kamu yang sedang sakit atau apalah semoga diberikan kesembuhan ok

Kali ini admin akan memberikan informasi seputar blogging dan tips terbaru mengenai perkembangan dunia blogger, nah pada sebelumnya kan admin telah membahas bagaiamana carannya membuat tombol spoiler dengan tampilan simple memgggunakan kode CSS, sekarang admin juga akan memberikan informasi mengenai bagaiamana caranya membuat spoiler dengan tampilan yang lebih keren, yang jelas berbeda dari artikel yang admin posting sebelumnya mengenai cara membuat tombol spoiler di blogger tersebut

Info: Oke jika kamunya sudah penasaran yuk langsung aja kita bahas bersama sama oke 😊

Tampilan Keren

Tombol spoiler kali ini apabila kamu terapkan didalam blog kamu, pastinya akan memiliki tampilan yang lebih keren dari pada postingan sebelumnya mengenai cara membuat tombol spoiler atau kotak spoiler diblogger

Info: Jika kamunya sudah penasaran bagaimana dengan tampilan spoilernya silahkan baca dan pelajari artikel ini hingga selesai agar tidak penasaran oke

Contoh Tampilan

Baiklah untuk contoh tampilan dari spoiler box atau spoiler buttonnya kamu bisa melihat contoh tampilan nya sebagai berikut

QS. Ali 'Imran 3: Ayat 191
"(yaitu) orang-orang yang mengingat Allah sambil berdiri, duduk, atau dalam keadaan berbaring, dan mereka memikirkan tentang penciptaan langit dan bumi (seraya berkata), "Ya Tuhan kami, tidaklah Engkau menciptakan semua ini sia-sia; Maha Suci Engkau, lindungilah kami dari azab neraka."

Info: Bagaiamana sobat dengan tampilan nya berbeda serta keren bukan dari tombol-tombol spoiler lainnya yang bertebaran di internet

Cara Pembuatan

Okay sekarang saatnya admin akan membahas bagaiamana carannya membuat tombol spoiler dengan tampilan yang berbeda serta lebih keren dari biasanya, simak dan pelajari artikel ini hingga selesai ok

Kode CSS

Seperti biasanya langkah pertama yang bisa kamu lakukan adalah meletakkan dan menyimpan kode CSS dibawah ini untuk membuat tombol spoilernya

.Blog .rahSpoiler{border:2px solid #ebeced;border-left:0;border-right:0;padding:25px 15px;margin:30px 0;font-size:15px}
.Blog .rahSpoiler .rahSpoiler-judul{outline:0;font-weight:700;font-family:Noto Sans, sans-serif;color:#161617;display:flex;}
.Blog .rahSpoiler{padding:20px 15px}
.Blog .rahSpoiler .rahSpoiler-judul{align-items:center}
.Blog .rahSpoiler .rahSpoiler-judul .button{margin:0 0 0 auto;padding:5px 15px;font-size:11px;font-weight:400;font-family:'Noto Sans', sans-serif;}
.Blog .rahSpoiler .rahSpoiler-judul .button:before{content:' Show all'}
.Blog .rahSpoiler .rahSpoiler-isi{max-height:0;margin-top:0;transition:all .2s ease;-webkit-transition:all .2s ease;overflow:hidden}
.Blog .rahSpoiler .rahSpoiler-isi p, .Blog .post .rahSpoiler .rahSpoiler-isi p{margin-top:10px}
.Blog .rahSpoiler .rahSpoiler-isi pre{margin:10px auto 0}
.Blog .rahSpoiler .rahSpoiler-input:checked + .rahSpoiler-judul .button:before{content:' Hide all'}
.Blog .rahSpoiler .rahSpoiler-input:checked ~ .rahSpoiler-isi{max-height:1000vh;margin-top:1em}

Sebagai informasi: kamu bisa meletakkan kode CSS diatas tepat diatas kode ]]></b:skin> atau sebelum kode tersebut

Cara Penggunaan

Kemudian untuk menampilkan tombol spoilernya, kamu harus menggunakan kode HTML nya, pelajari cara menampilkan tombol spoiler diblogger denafn membaca artikel ini hingga selesai

Kode HTML

Salin kode HTML dibawah ini untuk menampilkan tombol spoilernya okok hehehe

<div class='rahSpoiler'>
<input class='rahSpoiler-input hidden' id='rahSpoilerr' type='checkbox'>
<div class='rahSpoiler-judul'>
<b>Judul Spoiler</b>
<label aria-label='rahSpoiler' class='button' for='rahSpoilerr'></label>
</div>
<div class='rahSpoiler-isi'>
<div>Isi spoiler</div>
</div>
</div>

Sebagai informasi: Kamu bisa menggunakan kode HTML diatas pada saat kamu ingin menulis artikel diblog menggunakan mode HTML

Langkah Langkah

Sebagai pelengkap agar lebih detail pastinya kamu bisa melihat langkah langkah yang admin jabarkan untuk membuat tombol spoilernya

  1. Login keakun blogger kamu
  2. Pergi ke template kemudian piih edit HTML
  3. Salin dan letakkan kode CSS dibawah ini diatas kode ]]></b:skin>
  4. .Blog .rahSpoiler{border:2px solid #ebeced;border-left:0;border-right:0;padding:25px 15px;margin:30px 0;font-size:15px}
    .Blog .rahSpoiler .rahSpoiler-judul{outline:0;font-weight:700;font-family:Noto Sans, sans-serif;color:#161617;display:flex;}
    .Blog .rahSpoiler{padding:20px 15px}
    .Blog .rahSpoiler .rahSpoiler-judul{align-items:center}
    .Blog .rahSpoiler .rahSpoiler-judul .button{margin:0 0 0 auto;padding:5px 15px;font-size:11px;font-weight:400;font-family:'Noto Sans', sans-serif;}
    .Blog .rahSpoiler .rahSpoiler-judul .button:before{content:' Show all'}
    .Blog .rahSpoiler .rahSpoiler-isi{max-height:0;margin-top:0;transition:all .2s ease;-webkit-transition:all .2s ease;overflow:hidden}
    .Blog .rahSpoiler .rahSpoiler-isi p, .Blog .post .rahSpoiler .rahSpoiler-isi p{margin-top:10px}
    .Blog .rahSpoiler .rahSpoiler-isi pre{margin:10px auto 0}
    .Blog .rahSpoiler .rahSpoiler-input:checked + .rahSpoiler-judul .button:before{content:' Hide all'}
    .Blog .rahSpoiler .rahSpoiler-input:checked ~ .rahSpoiler-isi{max-height:1000vh;margin-top:1em}

    Info: Jika sudah kamu bisa menyimpan Template nya

  5. Gunakan kode HTML dibawah ini untuk menampilkan tombol spoiler oke
<div class='rahSpoiler'>
<input class='rahSpoiler-input hidden' id='rahSpoilerr' type='checkbox'>
<div class='rahSpoiler-judul'>
<b>Judul Spoiler</b>
<label aria-label='rahSpoiler' class='button' for='rahSpoilerr'></label>
</div>
<div class='rahSpoiler-isi'>
<div>Isi spoiler</div>
</div>
</div>

Info: Gunakan kode HTML diatas pada mode HTML diblogger bukan mode Compose

About the Author

Keindahanmu akan kuabadikan disetiap karyaku.

Post a Comment

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.