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.
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>
Di sini suka saya ingatkan agar sebelum membuat pengubahan template , silakan buat backup template anda.
Selanjutnya Pasangkan code berikut di bawa code <body>
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>
Selanjutnya pasangkan code berikut untuk menampilkan butang popup sesuai kehendakkamu, sama ada di heder nav or sidebar
Penerangan
Kita teruskan shaja ke cra pemasanganya , Pasangkan Css berikut tepat di atas code </head>
Peringatan
<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
Caution - In the recruitment process, legitimate companies never charge a fee from candidates. If there are companies that charge for interviews, tests, ticket reservations, etc., it is better to avoid them because there are indications of fraud. Do not transfer any payments when applying for a job.
-
-
-
-
-
-
Post a Comment
Post a Comment
