بِسْــــــــــــــــمِ اﷲِالرَّØْÙ…َÙ†ِ الرَّØِيم
Puasa sebentar lagi. Umat islam di belahan dunia manapun serempak menyambut bulan penuh berkah ini. Tidak pandang muda tua laki dan perempuan. Mereka serempak menyampaikan suka cita menyambutnya.
Puasa adalah menahan rasa lapar dan dahaga. Sehari penuh kita menahan nafsu dari amarah, makan, minum dan perihal maksiat lainnya. Berusaha lebih dekat dan mendekatkan diri kepada Sang Pencipta.
Baca Juga : Membuat Javascript untuk Salam Pembuka Saat Pertama Kali Blog Dibuka
Berbagai macam ucapan mereka/para muslimin perlihatkan untuk menyambut bulan suci dengan beragam cara. Misal banner, pamflet dan juga ucapan langsung. Kita sebagai blogger bagaimana?
Sebagai blogger yang baik dan taat beragama terutama blogger muslim, saya menyebut demikian. Setidaknya kita ikut berpartisipasi dengan menyambut bulan Ramadhan ini dengan menampilkan kreasi kita.
Baca Juga : Cara Membuat Animasi Slideshow Gambar atau Foto dengan CSS dan HTML
Kreasi yang dimaksud adalah bentuk Pop Up Card Selamat Puasa Melayang di Blog. Jadi ketika kita membuka blog, maka ucapan selamat puasa ini akan pertama kali tampil sebelum kita menuju ke halaman blog.
Cara membuatnya ikuti langkah-langkah dibawah ini ya teman-teman.
Pop Up Card Selamat Puasa Melayang
HTML
Langsung masuk ke Tata Letak, kemudian pilih Tambah HTML/Javascript, lalu tempelkan kode dibawah ini di tempat kosong yang disediakan di Tata Letak itu. Kodenya sebagai berikut :<div id='alifacde'>
<div id='depan'></div>
<div class='tulisan' onclick='this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode)'><a>×</a></div>
<div class='isi'><a href='http://github.com/Alifacode' target='_blank'><img style="width: 700px; height: 400px;" alt='Alifacode on Github' src='https://blogger.googleusercontent.com/img/a/AVvXsEj2bQzVqSNeGbXtGZottWArLKizbZq4bX9cbQtl4wnIFT4CF7Q_gBhk9er7rxSsL1Zjz9hjYYnRPQvZaq1K2Iy4lyJU-N7az4lWiX818j0gwynCMmO3PURWmbn6LBWn3YpotfTLUPxrXWGA7IJr8B4ypCUQi2Nacez_Gl53ueHI-vC6Egmj4Ot990Ob'/></a>
</div>
</div>CSS
Kalian masuk ke template. Usahakan di back up dulu ya teman-teman. Soalnya bila terjadi galat/error kesalahan, template kita masih bisa kembali seperti sedia kala. Dan tentu saja kita akan obrak-abrik template yang kodenya mencapai jutaan. Pusing nggak tuh ngeliatnya? hadewhhh. Cari kode ]]></b:skin> dan tempelkan kode CSS dibawah ini diatas kode ]]></b:skin>. Kodenya berikut ini:#depan{left:0;background:#000 none repeat scroll 0% 0%;opacity:0.6;position:fixed;z-index:-1;top:0;height:100%;width:100%;}
.tulisan{font-size:20px;background:#FFF none repeat scroll 0% 0%;border-radius:50%;box-shadow:0 0 5px rgba(0,0,0,0.14);cursor:pointer;display:inline-block;padding:2px 9px;text-align:center;font-family:arial,sans-serif;position:absolute;top:-15px;right:-20px;collor:#344;return:false;}
.isi{border-radius:3px;box-shadow:0 0 5px rgba(0,0,0,0.2);width:700px;height:407px;border:4px solid #FFF;}Javascript
Dan terakhir kita masih di template ya. Cari kode </body>, biasanya letaknya paling bawah sendiri dari template. Tempelkan kode Javascript dibawah ini diatas persis dari kode </body>. Kodenya berikut ini :<script type='text/javascript'>
$(document).ready(function() {
$('#alifacde').click(function() {
$('#alifacde').fadeOut('500');
});
});
</script> Nah bila sudah selesai kalian mengerjakannya, sekarang saatnya save project kamu dan lihat blog kalian. Pasti sudah ada Pop Up Card Selamat Puasa Melayang. Indah bukan, kita bisa mengucap selamat puasa dengan kreasi kode CSS yang unik dan menarik. Diharapkan dengan Pop Up ini kita bisa kebanjiran ucapan selamat puasa balasan dari mereka yang mengunjungi blog kita. Terima kasih yang sudah mampir ke mari di artikel Pop Up Card Selamat Puasa Melayang. Wassalam dan sampai jumpa lagi.
Label Postingan :
CSS
Terima kasih ya udah mempraktekkan tutorial blog di web alifacode.com dengan judul Pop Up Card Selamat Puasa Melayang . Semoga tutorial blog ini dapat bermanfaat. Salam Blogger.
