Membuat Pesan Pembuka Dikala Masuk Blog
Ketika memasuki waktu-waktu istimewa menyerupai memasuki bulan Ramadhan, Hari Raya Idul Fitri, Tahun Baru dan lain-lain biasanya para admin blog menciptakan pesan-pesan khusus untuk para pengunjungnya. Banyak macam dan cara yang dipakai untuk menampilkan pesan-pesan tersebut. Mulai dengan goresan pena memakai marquee, obrolan box, banner, dan lain-lain.
Kali ini saya akan share cara menciptakan pesan pembuka dikala masuk blog dengan background yang menutupi seluruh tampilan blog dengan tombol untuk menghilangkannya menyerupai 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/AVvXsEgEOkWkYUwdj4yTd5SFtvh5RhR4oL20n3WEcLzO9rC4C9mOUVjFBBhUnDzYvKq8VXQp0IEXNW-u8KT60NNCZPh2mOGLi31uY9NIz1B6dkcURMu8BTFTjoAUAMDb7unFGQ41PX2TvRwO8m-Z/s1600/Wallpaper.jpg) no-repeat top center;}
Untuk background-nya dapat Anda ganti dengan gambar Anda sendiri, silahkan gunakan gambar dengan dimensi yang besar namun usahakan mempunyai size yang kecil (di bawah 100kb) supaya tidak terlalu mengganggu loading blog.
Kode HTML
Simpan sempurna di bawah arahan <body>
<div id='welcomeoverlay'/>
<div id='welcomebox'>
<p>“Marhaban Ya Ramadhan”<br/>
Saya, Adhy Suryadi selaku admin Kompi Ajaib 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>
Untuk pesannya silahkan sesuaikan dengan impian Anda. Selamat mencoba...
Sumber https://www.kompiajaib.com/
0 Response to "Membuat Pesan Pembuka Dikala Masuk Blog"
Posting Komentar