Creating Links Opener When Login Blog

Updated on March 19, 2016 - Post a Comment

This time I will share how to create a welcome message when a blog entry with a background that covers the entire look of the blog with a button to eliminate it like in the picture below or just try the demo.

CSS Code 

#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/AVvXsEi1IpScHxIR5qTd5xek-88CQBD2hiPIAeFt7EFghEgXkTScMV5ipTbXjE54-5KHbhDETTjXv3jZetK0ULCqLzl_p1hDS9JIaGvPH2STnmE61tS1URjbc9aebvRHHxBXQPalg7tcj3Sr0Zej/s1600/Wallpaper.jpg) no-repeat top center;}
For the background you can replace with your own pictures, please use an image with large dimensions but try to have a small size (under 100kb) in order not to interfere with loading blog.

HTML code

Keep right under the code <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>
For the message please adjust to your liking. Good luck.
http://www.kompiajaib.com/2014/06/membuat-pesan-pembuka-ketika-masuk-blog.html 
Share this: pinterest