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

Cara membuat iklan popup persegi panjang di blogger

Hello sobat icloudZer kali ini admin bakalan memberikan informasi mengenai bagaimana caranya membuat iklan popup persegi panjang di blogger

Info: Oke sobat icloudZer jika kamu sudah penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama

Iklan Popup

Banyak sekali tampilan iklan yang bisa di ciptakan pada website salah satunya iklan popup persegi panjang yang sangat responsif untuk di gunakan, iklan popup persegi panjang tersebut sangat simple dan mudah untuk di gunakan, dan jika kamu ingin mengetahui fungsi iklan popup di blogger baca terus artikel ini hingga selesai

Fungsi Iklan Popup

Fungsi iklan popup di blogger tersebut adalah untuk menampilkan sebuah informasi atau bisa juga menampilkan informasi suatu produk di dalam iklan popup tersebut, dan sebenarnya penggunaan fungsi iklan popup di blogger tersebut sesuai selera aja, bisa untuk sebagai panjangan alias hiasan pada blog juga gak papa, ok

Dibuat menggunakan CSS

Tampilan iklan popup di blogger tersebut hanya di buat menggunakan kode CSS saja tanpa ada unsur kode javascript di dalamnya, sehingga membuat tampilan iklan popup tersebut semakin responsive tentunya

Contoh Tampilan

Jika kamu penasaran dengan bagaimana contoh tampilan dari iklan popup di blogger tersebut kamu bisa mengklik tombol di bawah ini

Periksa

Info: Bagaimana sobat dengan contoh tampilan nya keren sekai yak

Cara pembuatan

Jika kamu penasaran Bagaimana cara membuat iklan popup di blogger baca terus artikel ini hingga selesai ok

Kode CSS

langkah pertama untuk membuat tampilan iklan popup tersebut kamu bisa menyalin kode CSS di bawah ini kemudian kamu bisa meletakkannya di atas kode ]]></b:skin>

.fixrah53{left:20px;top:53px;background-color:#fefefe;padding:12px 15px 12px 12px;border-radius:15px;box-shadow:0px 8px 60px -10px rgba(13, 28, 39, 0.6);display:flex;position:fixed;align-items:center;max-width:300px;min-width:260px;color:#505050;overflow:hidden;z-index:50}
.fixrah53.dis-30:after{content:'-35%';font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:flex-end;width:55px;height:25px;padding-right:10px;background-color:#de3535;border-radius:80px 0 0 0;color:#fefefe;position:absolute;bottom:0;right:0}
.fixrah53 .fixrah53-close{position:absolute;top:8px;right:8px}
.fixrah53 .fixrah53-close svg{width:22px;height:22px;fill:#989b9f}
.fixrah53 .fixrah53-img{width:60px;max-width:60px;height:60px;max-height:60px}
.fixrah53 .fixrah53-img a{display:flex;align-items:center;justify-content:center;height:100%;background-color:transparent;box-shadow:0 -6px 18px 0 rgba(9,32,76,.1);border:2px solid #de3535;border-radius:8px;color:inherit;font-family:'Ubuntu', sans-serif;font-weight:700;font-size:28px}
.fixrah53 .fixrah53-content{width:calc(100% - 60px);padding-left:15px}
.fixrah53 .fixrah53-content a{display:block;color:inherit}
.fixrah53 .fixrah53-content a .rahtitle{display:block;font-weight:700;font-size:13px}
.fixrah53 .fixrah53-content a .desc{display:block;font-size:11px;margin-top:5px;color:#989b9f}

Info: Atau kamu bisa menggunakan tag kode style untuk meletakkan kode CSS di atas

Kode HTML

Langkah selanjutnya ka.u bisa menyalin lagi kode CSS di bawah ini kemudian kamu bisa meletakkannya di atas kode </body>

<div class="fixrah53 dis-30" id="fixrah53">
 <div class="fixrah53-close" onclick='document.getElementById("fixrah53").style.display="none"'>
<svg viewbox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
 <path d="M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z">
 </path>
</svg>
 </div>
 <div class="fixrah53-img">
<a href="your_link">
 R
</a>
 </div>
 <div class="fixrah53-content">
<a href="your_link">
 <span class="rahtitle">
Template Rah UI
 </span>
 <span class="desc">
Diskon terbatas 35%
 </span>
</a>
</div>
</div>

Info: Fungsi dari kode HTML diatas adalah untuk menampilkan iklan popup tersebut di dalam blog

Penjelasan Kode

Jika kamu masih bingung dengan penjelasan di atas bahwa fungsi kode CSS tersebut adalah untuk membuat tampilan dari iklan popup di blogger, dari kode CSS tersebut kamu bisa mengubah element warna, sedangkan untuk mdngubah text dan gambar kamu bisa melakukan nya pada kode HTML yang admin berikan di atas, jika kamu merasa tampilan iklan popup tersebut tidak responsif alias kebesaran ataupun kekecilan kamu bisa menghubungi admin entar admin sesuaikan sesuai template masing masing

About the Author

Keindahanmu akan kuabadikan disetiap karyaku.

تعليق واحد

  1. kenapa saya coba terapkan di template plus ui gak responsive ya? Saya ganti pakai adsense juga tetap gak responsive, adakah solusi?
Menghasilkan uang melalui survei berbayar
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.