BLOG DESIGN, MEMASANG POP-UP PADA HALAMAN UTAMA

Ref. : Arlina Design

Tips blog design kali ini memasang pop-up message yang muncul pada saat awal pengunjung masuk ke halaman utama blog kita. Isi message bisa bermacam², tergantung apa yang hendak kita sampaikan. Bisa ucapan selamat datang, deskripsi singkat blog, dll. Senyampang kita saai ini kebetulan sedang berada di bulan puasa Ramadan, maka pop-up message ini kita manfaatkan sebagai ucapan selamat menjalankan ibadah puasa. Nantinya bila momen bulan puasa sudah lewat, pop-up message tersebut bisa kita "simpan" untuk dimunculkan lagi pada momen/event lainnya. Terserah kita...

Sebelum mulai pembahasannya, perlu saya sampaikan credit terlebih dahulu pada blogger senior Indonesia, mbak Arlina, yang telah membagi script pop-up message ini di websitenya Arlina Design, sumber darimana script code ini saya ambil. Matur tengkyu bagi² ilmunya mbak Arlina. Sukses buat anda... 🙏

Let's do it...

Langkah pertama, seperti biasa pada pemasangan widget, tulis dulu script CSS-nya. Masuk ke Blogger, "Theme", "Edit HTML" (jangan lupa SOP safety first, backup terlebih dahulu template anda). Kemudian copy-paste-kan kode dibawah ini 👇 pada baris sebelum/diatas </head>

<b:if cond='data:view.isHomepage'> <style type='text/css'> /* CSS POP-UP RAMADAN, ARLINA DESIGN */ @keyframes slideDown{0%{opacity:0;transform:translateY(-10%)}100%{opacity:1;transform:translateY(0%)}} #arlinapuasa2019ku{line-height:1.55;display:block;background:#fff;position:fixed;top:25%;right:0;left:0;margin:auto;text-align:center;max-width:600px;box-shadow:0 0 2.5rem -1.5rem rgba(0,0,0,0.5);z-index:99;min-height:325px;padding:20px;border-radius:10px;animation:slideDown 2s}#arlinapuasa2019ku .puasa19{position:absolute;color:#222;font-size:1.5rem;font-weight:400;z-index:99999;text-align:center;margin:auto;padding:10px;left:0;right:0;top:17%;border-bottom:1px solid rgba(0,0,0,0.05);border-top:1px solid rgba(0,0,0,0.05)}#arlinapuasa2019ku .puasa19 p{margin:10px auto;font-style:normal;font-family:Georgia}#arlinapuasa2019ku .puasa19 .ramadhan2019{font-size:3rem;font-style:bold}#arlinapuasa2019ku a.close-popup{background:#428bca;position:absolute;bottom:20px;right:20px;color:#fff;text-align:center;cursor:pointer;z-index:99;border-radius:3px;display:inline-block;font-size:13px;padding:4px 14px;min-width:60px;border:1px solid #3885c7;transition:all 0.3s}#arlinapuasa2019ku a.close-popup:hover{background:#fff;color:#3885c7;border-color:#3885c7}#arlinapuasa2019ku a.close-popup:active{opacity:.9} .ketupat{position:absolute;left:0;right:0;top:-12px;margin:auto;width:10px;height:10px;background:#B9E937;box-shadow:10px 0 0 #57D131,10px 10px 0 #B9E937,0px 10px 0 #57D131,5px 5px 0 10px #fff;display:inline-block;text-align:center;transform:rotate(45deg);z-index:2}.ketupat.duaa{top:initial;bottom:3px} @media screen and (max-width:768px){#arlinapuasa2019ku .puasa19{font-size:1rem}#arlinapuasa2019ku .puasa19 .ramadhan2019{font-size:1.5rem}#arlinapuasa2019ku{min-height:260px;left:20px;right:20px}} </style> </b:if>

Berikutnya copy-paste-kan kode berikut 👇 pada baris sebelum/diatas </body>

<b:if cond='data:view.isHomepage'> <div id='arlinapuasa2019ku'> <div class='ketupat'/> <a class='close-popup' href='#' title='Close this message'>Close</a> <div class='puasa19'> <p> SELAMAT MENUNAIKAN IBADAH PUASA</p> <p> <span class='ramadhan2019'>RAMADAN 1440 H</span></p> <p> Semoga Gusti Allah ridlo' atas amal ibadah kita</p> </div> <div class='ketupat duaa'/> </div> <script type='text/javascript'> //<![CDATA[ $(window).bind("load",function(){$("#arlinapuasa2019ku").animate({top:"25%"},1e3),$("a.close-popup").click(function(){return $(this).parent().fadeOut(1e3),!1})}); //]]> </script> </b:if>

Langkah terakhir customisasi. Lakukan perubahan yang diperlukan. Jika sudah, "Save Theme". Selesai... View Blog untuk melihat hasilnya.


Jangan pernah berhenti belajar
SALAM PUSTAKA

You might also like :