Membuat Pesan Pembuka Ketika Masuk Blog

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.

Membuat Pesan Pembuka Ketika Masuk Blog


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(http://1.bp.blogspot.com/-19vOQibfxVQ/U6f5ZZfFtdI/AAAAAAAAdIA/-3kB-n9pUkA/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.


Kode HTML
Simpan tepat di bawah kode <body>


<div id='welcomeoverlay'/>
<div id='welcomebox'>
    <p>&#8220;Marhaban Ya Ramadhan&#8221;<br/>
      Saya, Adhy Suryadi selaku admin Kompi Ajaib mengucapkan<br/>
&quot;Selamat menunaikan ibadah puasa,<br/>
semoga kita selalu diberkahi di bulan yang penuh mahrifah ini...amin.&quot;</p>
    <div class='welcomeclose' onclick='document.getElementById(&quot;welcomebox&quot;).style.display=&quot;none&quot;;welcomeoverlay.style.display=&quot;none&quot;;'>Continue Reading &#8594;</div>
  </div>

Untuk pesannya silahkan sesuaikan dengan keinginan Anda. Selamat mencoba...

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments