Creating Links Opener When Login Blog

Adhy Suriady, HTML, Tutorial 0 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/AVvXsEjcRLb-sLn9BoJZ-bP35SXV5_uC8EUyUcevGx67urwcJGNaGVsEQuMMyPquqI1hjnbyJcqJqs4AeRty8g1pIb8PfRzPJMKT_QFdf1Q-HpdsKGoXwci_jzM0O_3fLroFA4NDaewObV_efaIw/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 on Google+ Tumblr

Leave a comment

To insert a link, use tag [url=http://your_link]your-link[/url]
To insert the code , use the tag <i rel="code">your-code</i>
The long code can use the tag <i rel="pre">your-long-code</i>
To insert an image , use the code [img]URL Image[/img]
To insert a title , use tag <b rel="h4">Your Title here...</b>
To creat Bold text <strong>Your text here...</strong>
To create Italic text used tag <em>Your text here...</em>

:) :( :p :D :o ;) 8-) 8:) :/ :'( 3:) O:) :* <3 ^_^ -_- o.O O.o >:o :v :3
Cancel