Season’s greetings! Sometimes, bloggers want to say something to their blog visitors up front. For that particular purpose, having a simple pop-up banner will do.
Of course, such a pop-up will obstruct visitors from directly accessing the content as they need to close it down before proceeding further. Therefore, such pop-ups should be applied sparingly and wisely.
On Blogger, the pop-up banner can be done easily by applying below CSS and html script.
Here is how you can set it up.
Step 1:
Look for this html code: ]]></b:skin> or </style>
Step 2:
Place below CSS script right before the code
/*Widget Pop Up Card*/#UrbanIndonesia { z-index: 1000;
position: fixed !important; top: 100px; left: 50%; width: 700px;
margin-left: -350px;}#back { left: 0px; background: #000
none repeat scroll 0% 0%; opacity: 0.6; position: fixed;
z-index: -1; top: 0px; height: 100%;
width: 100%;}.writing {font-size: 20px;background: #FFF
none repeat scroll 0% 0%;border-radius: 50%;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.14)
;cursor: pointer;display: inline-block;
padding: 2px 9px;text-align: center;
font-family: arial,sans-serif;
position: absolute;top: -15px;right: -20px;
collor:#344; return:false;}.isinya { border-radius: 3px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
width: 700px; height: 400px; border: 4px solid #FFF;}
Step 3:
Look for this code </body>
Step 4:
Put this Javascript code before the code
<script type='text/javascript' >$(document).ready(function()
{ $('#UrbanIndonesia').click(function()
{ $('#UrbanIndonesia').fadeOut('500'); });});</script>
Step 5:
Save Template
Step 6:
Go to Layout, Add Gadget, and Add HTML/Javascript
Step 7:
Place below HTML script into the field. Don't forget to change the url link and image URL for your own custom website.
<div id='UrbanIndonesia'><div id='back'></div><div class='writing'
onclick='this.parentNode.parentNode.parentNode.removeChild
(this.parentNode.parentNode)'><a>×</a></div><div
class='content'><a href='urbanindonesia.com'
target='_blank'><img style="width: 700px; height: 400px;"
alt='My website' src='https://1.bp.blogspot.com/-m00Q8NNz8Jc
/Wj9QcF4TJ4I/AAAAAAAADKo/UuGM7yRpj3cqdEy49JcqUJCjj5gCRK_iQCLcBGAs/
s1600/Screen%2BShot%2B2017-12-24%2Bat%2B13.59.22.png'/></a>
</div></div></div>
One nagging catch remains that the popup banner will keep appearing whenever you open other pages. Definitely, such practice will discourage users from staying longer at the website.
Done! Happy blogging!