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
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