CSS
Membuat Pesan Pembuka Ramadhan Versi Kartun
Kali ini saya akan share Membuat Pesan Pembuka Versi Kartun
Berhubung Bulan ramadhan sudah dekat, saya berfikiran untuk membuat Pesan pembuka ini di blog
Supaya Blog agan menghormati Bulan penuh berkah ini, dan mencerminkan Nama baik Blog agan
Tutorialnya bisa kalian lihat dibawah ini
MENAMBAHKAN KODE CSS
Kemudian pindah Opsi ke menu Template pilih Edit HTML
Salin kode CSS berikut di atas kode ]]></b:skin>
Gunakan CTRL F untuk mempermudah pencarian
#welcomebox {position:fixed;top:5%;left:50%;width:70%;margin-left:-35%;z-index:1000000;text-align:center;}
#welcomebox p{color:#fff;font-size:150%;line-height:1.6em;margin:-5px 0 50px;}
.welcomeclose {background:#bbb;color:#111;border-radius:3px;padding:4px 10px;text-align:center;margin:0 auto;cursor:pointer;display:inline;}
.welcomeclose:hover {background-color:#aaa}
#welcomeoverlay {position:fixed !important;position:absolute; z-index:999999;top:0px;right:0px;bottom:0px;left:0px;background:#005629 url(http://th02.deviantart.net/fs71/PRE/i/2013/192/d/1/ramadhan_mubarak_by_nayzak-d6d3533.jpg) no-repeat top center;}
Url yang berwarna pink adalah URL gambar yang sama persis dengan demo, kalian bisa menggantinya dengan gambar yang lain atau bisa juga menggunakan Gambar di bawah ini
Gambar Alternatif
PENAMBAHAN CODE
Salin Code berikut di atas code </body>
Gunakan CTRL F untuk mempermudah pencarian
<div id='welcomeoverlay'/>
<div id='welcomebox'>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<p>“Marhaban Ya Ramadhan”<br/>
Saya, Rudi Ardiansyah selaku admin CoretaNewbiee mengucapkan<br/>
"Selamat menunaikan ibadah puasa,<br/>
semoga kita selalu diberkahi di bulan yang penuh mahrifah ini...amin."</p>
<div class='welcomeclose' onclick='document.getElementById("welcomebox").style.display="none";welcomeoverlay.style.display="none";'>Lanjutkan Membaca →</div>
</div>
Tulisan yang berwarna Merah bisa kalian ganti dengan Nama Sobat dan Nama Blog Sobat.
Simpan Template dan lihat hasilnya
Sekian Pembelajaran tentang CSS
Semoga bermanfaat, Terima Kasih
Post a Comment
12 Comments
keren niih..sya coba.......
ReplyDeletesudah ane terapkan dengan sedikit modif css :)
ReplyDeleteloading blog jadi berat gk gan ?
ReplyDeleteIzin nyimak ya sob :-D hehe
ReplyDeletetinggal ganti URL doang ya gan,, gampang nih, ntar ane terapin dah,,
ReplyDeleteWalah gan versi baru ya ? :D , bisa dicoba nih :D
ReplyDeletemau gue pasang dulu di blog gue, biar keren dikit :D
ReplyDeletepas benget nig bulan ramadhan....
ReplyDeletesaya coba dulu gan :-)
Wah, sangat lucu dan bermanfaat. :)
ReplyDeleteTerima kasih.
Wah bagus gan (Y)
ReplyDeleteTapi bikin blognya lemot gk??
mantep dah keren :D cocok banget buat blog niche anime :D
ReplyDeletewah mantap gan
ReplyDeletenice post
Peraturan Berkomentar Di Coretanewbiee
HARAP MEMBACA TERLEBIH DAHULU
SEBELUM BERKOMENTAR
|| Dilarang Spam ||
|| Dilarang Meninggalkan Link Aktif ||
|| Diharapkan berkomentar Sesuai Dengan Post ||
|| Berkomentar Yang Mengarah Ke Sisi Positif ||
|| Utamakan Baca Artikel sebelum berkomentar ||
|| Dilarang SARA , PORN, atau sebagainya ||
|| Diharapkan berkomentar menggunakan bahasa yang sopan ||
Komentar Yang Melanggar Akan Segera DiHapus
Tertanda "CoretaNewbiee" ✔