Cara membuat pop up ucapan ramadhan di blog

Hai Sahabat linkmagz,

Pada postingan kali ini Anda akan belajar cara membuat pop up ucapan ramadhan di blog.

Anda ingin lebih dekat dengan audiens Anda?

Salah satu cara untuk membangun kedekatan dengan para pengujung blog Anda adalah dengan memberikan sebuah ucapan " Selamat Datang " saat pengunjung masuk di blog Anda.

Bulan ramadhan, adalah moment paling tepat untuk Anda membangun ikatan emosional dengan pengunjung blog Anda. sehingga Anda akan mendapatkan pengunjung yang loyal.

lalu apa yang harus Anda lakukan?

Salah satu cara agar Anda lebih dekat dengan Audiens, dan pengunjung situs Anda semakin loyal adalah dengan memberi mereka ucapan selamat menjalakan ibadah puasa.

ini penting terutama jika Audiens Anda mayoritas umat muslim.

Ucapan selamat Puasa Ramadhan ini dapat Anda tampilkan saat pengunjung masuk di blog Anda. Jadi Anda hanya perlu membuat widget pop up dengan gambar ucapan selamat menjalankan ibadah puasa.

Lalu bagaimana cara membuat pop up di Blog

Untuk membuat Widget Pop up di blog sangat mudah, Karen Anda dapat mengikuti langkah - langkahnya dibawah ini, Plus Anda tidak perlu menghabiskan waktu untuk membuat kode scriptnya, karena dalam postingan ini Anda dapat mengcopy nya kemudaian Anda edit sesuai kebutuhan sebelum Anda paste kan kedalam blog Anda.

Mengapa harus memasang Pop up ucapan selamat puasa ramadhan di blog?

Alasan mengapa Anda harus memasang pop up di blog adalah agar para pengunjung blog Anda merasa bahwa Anda Care dengan mereka. sehingga pengunjung Anda semakin senang berkunjung di blog Anda, karena mereka merasa diperhatikan.

mereka merasa mendapatkan hal spesial yang tidak mereka dapatkan dari blog lain. dan ini bagus untuk perkembangan blog Anda.

Cara Membuat Pop Up Ucapan selamat puasa ramadhan di Blog :

Sebelum Anda mengikuti langah2 dibawah, hal penting yang harus Anda lakukan adalah Anda harus menyiapkan gambar yang akan Anda gunakan untuk memasang pop up ini.

Tips :

Gunakanlan gambar dengan resolusi tinggi agar hasilnya tidak blur dan terkesan amatir.

Gunakan gambar dengan file jpg / jpeg, jangan PNG agar ukuran filenya kecil sehingga ringan saat loading.

Gunakan logo blog pada gambar ucapan selamat ramadhan agar blog Anda terkesan lebih profesional.

Setelah Anda siapkan gambar yang akan Anda gunakan pada pop up ucapan selamat ibadah puasa, berikut langkah - langkah cara membuat widget pop up nya :

#1 Buka dasbor blogger Anda

#2 Klik "Tata Letak" lalu Tambahkan gadget kemudian klik "HTML/Javascript"

#3 Lalu Copy dan paste kode di bawah ini.

#4 Klik simpan - Lalu lihat hasilnya.

<style>
.hide{display:none;visibility:hidden;}
.popbox{position:fixed;top:0;left:0;bottom:0;width:100%;z-index:1000000;}
.pop-content{width:350px;height:350px;display:block;position:absolute;top:50%;left:50%;margin:-200px 0 0 -400px;z-index:2;box-shadow:0 3px 20px 0 rgba(0,0,0,.5);}
.popcontent{width:100%;height:100%;display:block;background:#fff;border-radius:5px;overflow:hidden}
.pop-overlay{position:absolute;top:0;left:0;bottom:0;width:100%;z-index:1;background:rgba(0,0,0,.7)}
.popbox-close-button{position:absolute;width:20px;height:20px;line-height:20px;text-align:center;top:-10px;right:-10px;background-color:#fff;box-shadow:0 -1px 1px 0 rgba(0,0,0,.2);border:none;border-radius:50%;cursor:pointer;font-size:34px;font-weight:lighter;padding:0}
.popcontent img{width:100%;height:100%;display:block}
.flowbox{position:relative;overflow:hidden}
@media screen and (max-width:840px){.pop-content{width:90%;height:auto;top:20%;margin:0 0 0 -45%}
.popcontent img{height:auto}
}
</style>
<div class="popbox hide" id="popbox">
<div aria-label='Close' class="pop-overlay" onclick='document.getElementById("popbox").style.display="none";removeClassonBody();' role="button" tabindex="0"/>
<div class="pop-content">
<a href="#" target="_blank" rel="noopener noreferrer" title="nulisiklan.com">
<div class="popcontent">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_swhhz_BYA1uMWC8PQjE4D48LriD7Mk_70K_Mm5CcbAcX_k-jLf_sQ2Z7bSbo5zdMk7xzJ-Kfbiq1zTGrLVOxDIEyW8NvTIcbY1PcNg6YG4YLhCOIPH8DlmHYviqO5EKjiUirV0aLCzUO/s1600/nulis+iklan+ramadhan.jpg" alt="banner" width="850" height="450"/>
</div>
</a>
<button aria-label='Close' class='popbox-close-button' onclick='document.getElementById("popbox").style.display="none";removeClassonBody();'>&times;</button>
</div>
</div>
<script>
//<![CDATA[
setTimeout(function(){
 document.getElementById('popbox').classList.remove('hide');
 document.body.className+=" flowbox"
 }, 5000);
function removeClassonBody(){var element=document.body;element.className=element.className.replace(/bflowboxb/g,"")}
//]]>
 </script>

Catatan : Fokus pada tulisan berwarna kuning, rubahlah sesuai dengan keinginan Anda.

Ada 2 Hal yang perlu Anda rubah :

1. ukuran widget, pada contoh diatas ukurannya adalah persegi 350x350 pixel. jadi Anda bisa merubah sesuai dengan ukuran gambar yang Anda buat

2. link gambar

Kini Anda dapat menyapa dan dan dapat lebih dekat dengan pengunjung. Mudah2 an bermanfaat....

Baca juga : Cara memasang random post with tumbnail di blog | support dark mode

Template Linkmagz