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

Cara membuat konten muncul saat diklik (Responsif)

Hello sobat IcloudZer kali ini admin akan memberikan informasi seputar blogging dan informasi informasi terbaru pastinya, oke kali ini admin akan membahas mengenai bagaiamana caranya membuat tombol atau text apapun yang diklik akan memunculkan konten pada saat diklik

Info:Baca hingga selesai agar lebih memahami mengenai artikel kali ini oke

Tombol Klik

Sebenarnya bukan cuma membuat tombol Tapi mulai dari Text, icon, dan apapunlah yang diklik akan memunculkan konten didalam Blogger, nah sebanrnya admin juga pusing memberikan judul atau nama dari fitur ini, yang penting saat kamu mengklik tombol tersebut akan memunculkan gambar ataupun kontenNya

Contoh Tampilan

Dari pada penasaran baiklah saya akan membuatkan contoh tampilan ataupun contoh demonya biar lebih detail, hehehe

icloudice.com

Info: Sudah diklik dan bagaiamana dengan contoh tampilan nya, keren bukan

Cara pembuatan

Baiklah admin akan mulai membahas bagaiaman cara membuat tombol klik kemudian bisa memunculkan konten gamabr diblogger terbaru, okel

Kode CSS

Langkah pertama yang bisa kamu lakukan adalah menyalin kode CSS dibawah ini, kemudian letakkan diatas kode ]]></b:skin>

/* Tombol Click and Show ~ by Icloudice.com */
.rah-imginner{background-color:#fefefe;width:auto;height:auto;border:2px solid #f80000;padding:5px 3px 0 0;z-index:8px;border-radius:4px;opacity:1;visibility:hidden}
.rah-imginner .cnt{justify-content:center; align-items:center;margin-left:auto;margin-right:auto;margin-buttom:auto;margin-top:auto;}
.rah-imginner .cnt:before{content:'Icloudice.com';position:relative;color:#161617;margin:6px;}
.rah-imginner .cnt:after{content:'Made with Icloudice.com';display:flex;color:red;float:center; background-color;#fefefe;border:2px solid #ebeced;width:auto;margin:10px;margin-top:3px}.rah-imgiinner:checked + .rah-imginner .cnt{opacity:1;visibility:visible;display:block;}.rah-imgiinnner:checked ~ .rah-imginner .cnt{display:none}

Kode HTML

Langkah selanjutnya adalah menyalin kode HTML dibawah ini kemudian letakkan kodenya dibawah kode <body>

<input class='rah-imgiinner hidden' id='rah-rah-imginner-open' type='checkbox'/>
<div class='rah-imginner'>
<div class='rah-imginner cnt'>
<!-- Letakkan gambarnya disini -->
</div></div>

Kode Penggunaan

Jika sudah melakukan langkah langkah diatas, selanjutnya untuk menggunakan atau membuat tombolnya gunakan kode dibawah ini

<label for='rah-rah-imginner-open'>
Tuliskan Text anda disini
</label>

Info: Kode Diatas bisa kamu letakkan dimana saja, bisa kamu gunakan didalam postingan, ataupun bisa kamu taruh didalam mode edit HTML

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.