Cara Membuat Popup Dengan Animation Effects Di Blogger

Assalamualaikum, salam sjatera , kali ini saya akan bincangkan tentang Cara Membuat Popup Dengan Animation Effects Di Blogger.
Cara Membuat Popup Dengan Animation Effects Di Blogger

Penerangan

Pada Posting saya sebelumnya, saya tlah kongsikan Cara Mudah Membuat Subscribe Pop Up di Blogger tanpa effects Animation & Beberapa jam selepas saya kongsikan Tips Cara Mudah Membuat Subscribe Pop Up di Blogger , Saya menerima email yang bertanyakan cara untuk Membuat Popup Dengan Animation Effects Di Blogger, Oleh itu saya akan kongsikan tutorialnya.

Kita teruskan shaja ke cra pemasanganya , Pasangkan Css berikut tepat di atas code </head>

Peringatan

Di sini suka saya ingatkan agar sebelum membuat pengubahan template , silakan buat backup template anda.

<style type='text/css'> 

/* Popup Animation By onet4u.com */
.white-popup {
position: relative;
background: #FFF;
padding: 25px;
width:auto;
max-width: 400px;
margin: 0 auto;
}


.mfp-animated {

/* start state */
.mfp-with-anim {
opacity: 0;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.5s;

transform: scale(0) rotate(500deg);
}

&.mfp-bg {
opacity: 0;
transition: all 0.5s;
}

/* animate in */
&.mfp-ready {
.mfp-with-anim {
opacity: 1;
transform: scale(1) rotate(0deg);
}
&.mfp-bg {
opacity: 0.8;
}
}

/* animate out */
&.mfp-removing {

.mfp-with-anim {
transform: scale(0) rotate(500deg);
opacity: 0;
}
&.mfp-bg {
opacity: 0;
}

}

}



</style>

Selanjutnya Pasangkan code berikut di bawa code <body>

<!-- Ubah Code Popup Ini Mengikut Kemahuan anda -->
<div id="popup" class="white-popup mfp-with-anim mfp-hide">You may put any HTML here. This is dummy copy. It is not meant to be read. It has been placed here solely to demonstrate the look and feel of finished, typeset text. Only for show. He who searches for meaning here will be sorely disappointed.</div>

Untuk code popup ini isikan sesuai kemahuan anda, sama ada popup iklan ataupun popup subscriber, ia apa saja sesuai kehendak anda.

Selanjutnya kita akan memasang code javascript di atas code </body>

<script type='text/javascript'>// o4u popups
$('#o4u-popups').magnificPopup({
delegate: 'a',
removalDelay: 500,
callbacks: {
beforeOpen: function() {
this.st.mainClass = this.st.el.attr('data-effect');
}
},
midClick: true
});



</script>

Selanjutnya pasangkan code berikut untuk menampilkan butang popup sesuai kehendakkamu, sama ada di heder nav or sidebar

<div id="o4u-popups"><a href="#popup" data-effect="mfp-animated">Popup On</a></div>

Selanjutnya simpan template anda,

Penutup

Bagai mana? Senang bukan Cara Membuat Popup Dengan Animation Effects Di Blogger, Sekiranya anda kurang faham silakan tinggalkan comment untuk mendapatkan pencerahan tentang Cara Membuat Popup Dengan Animation Effects Di Blogger
Related Posts!
Comments!