Ketika memasuki waktu-waktu istimewa seperti
memasuki bulan Ramadhan, Hari Raya Idul Fitri, Tahun Baru dan lain-lain
biasanya para admin blog membuat pesan-pesan khusus untuk para
pengunjungnya. Banyak macam dan cara yang digunakan untuk menampilkan
pesan-pesan tersebut. Mulai dengan tulisan menggunakan marquee, dialog
box, banner, dan lain-lain.
Kali ini saya akan share cara membuat pesan pembuka ketika masuk blog
dengan background yang menutupi seluruh tampilan blog dengan tombol
untuk menghilangkannya seperti pada gambar di bawah atau silahkan coba
pada demonya.
Bagi yang ingin mencobanya silahkan copy kode-kode di bawah ini.
Kode CSS
#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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrHH9LptJwa-J-ckdb1fBnJ0g-Z_ob6PL1VtWKWVf8Y97CbKDGNHC5gSMY8O4PCjEwM6HXsCu8J5K0Nk5OtEX9gi5IXxYjJKA9qfQB7AHtqFU6uunFLNY37j4q1wGOzVxyxHHaoBjfhOSe/s1600/Wallpaper.jpg) no-repeat top center;}
Untuk background-nya bisa Anda ganti dengan gambar Anda sendiri,
silahkan gunakan gambar dengan dimensi yang besar namun usahakan
memiliki size yang kecil (di bawah 100kb) agar tidak terlalu mengganggu
loading blog.
Baca juga: Cara Menjadi Top Ranking 1 di Google
Kode HTML
Simpan tepat di bawah kode <body>
<div id='welcomeoverlay'/>
<div id='welcomebox'>
<p>“Marhaban Ya Ramadhan”<br/>
Saya, Erik S selaku admin ERIKPLUS 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";'>Continue Reading →</div>
</div>
Ganti huruf yang berwarna merah dengan nama anda dan nama blog anda . Untuk pesannya silahkan sesuaikan dengan keinginan Anda. Selamat mencoba...
6 komentar Add Comments
izin coba gan :D thanks tutor nya
Wih keren nih
nice post :-bd
wih keren gan, ijin pasang di blog sya ya
Gunakan sebagai Anonymous jika kamu tidak memiliki akun apapun.
Mohon agar tidak berkomentar "Link Aktif"
Terima Kasih Telah Berkunjung...
Konversi KodeOut Of TopicEmoticon