Saturday, September 26, 2020
Home Blogging Tips & Tweaks How to Add a Cool Street Lamp to Blogger, WordPress and Websites

How to Add a Cool Street Lamp to Blogger, WordPress and Websites

A blog is like a house that harbor different posts and articles. Imagine having a lamp installed in your blog that can be switched on to illuminate your blog page once a visitor visits the blog. This means that your blog will be like a house at night with its lamp switched off. In such situation, the house owner or visitors to the house will have to switch on the lamp to be able to see around the house. Since I said earlier that a blog is like a house which harbors different posts and articles, it means that you can apply the lamp effect to your blog too such that visitors to your blog will have to click on the lamp to be able to view the contents of the blog.

This lamp effect can be added to your blog by using a script which am going to provide here. All you need to do is follow the steps I have outlined below and your blog should start appearing like a dark house that asks visitors to switch on the light by clicking on the lamp to be able to view the contents of the blog. To add the effect,

  • Log into your Blogger Dashboard.
  • Navigate to Layout >>> Add a Gadget.
  • Locate and select HTML/JavaScript form the pop-up page.
  • Copy the script below and paste into the HTML/JavaScript box.
<!doctype html><style type="text/css">div.tht-position{position:fixed;z-index:6010;}div.tht-s-e{top:72px;right:0px;}</style><style type="text/css">div.tht-position{_position:absolute;}div.tht-s-e{_bottom:auto;_top:expression(ie6=(document.documentElement.scrollTop+document.documentElement.clientHeight - 52+"px") );}</style><easytins></easytins><div class="tht-position tht-s-e"><a id="lamp_et"  onclick="document.getElementById('lamp-et').style.display='block';document.getElementById('lamp_et').style.display='none';document.getElementById('gölgem').style.display='none';" style="margin:0px !important;padding:0px !important;border:none !important;background-color:transparent !important;cursor:pointer;"  title="Street Lamp"><img style="margin:0px !important;padding:0px !important;border:none !important;background-color:transparent !important;" src="https://www.educativehelper.com/wp-content/uploads/2020/01/EH-LampOff.png" border="0" /></a><script language='Javascript'>

<!--

document.write(unescape('%3Ca%20href%3D%22https%3A%2F%2Fwww.educativehelper.com%2F2020%2F01%2F27%2Fhow-to-add-a-cool-street-lamp-to-blogger-wordpress-and-websites%2F%22%20target%3D%22_blank%22%20id%3D%22lamp-et%22%20%20style%3D%22display%3Anone%3Bmargin%3A0px%20%21important%3Bpadding%3A0px%20%21important%3Bborder%3Anone%20%21important%3Bbackground-color%3Atransparent%20%21important%3Btext-decoration%3Anone%3B%22%3E%0A%3Cimg%20style%3D%22margin%3A0px%20%21important%3Bpadding%3A0px%20%21important%3Bborder%3Anone%20%21important%3Bbackground-color%3Atransparent%20%21important%3B%22%20src%3D%22https%3A%2F%2Fwww.educativehelper.com%2Fwp-content%2Fuploads%2F2020%2F01%2FEH-LampOff.png%22%20border%3D%220%22%2F%3E%3C%2Fa%3E'));

//-->

</script></div><style type="text/css">div.gtg-position{position:fixed;text-align:center;z-index:6008;background-color:black;opacity:0.98;

filter:alpha(opacity=98);width:100%;height:100%;}div.gtg-s-e{top:0px;right:0px;padding-top:20%;}</style><style type="text/css">div.gtg-position{_position:absolute;}div.gtg-s-e{_bottom:auto;_top:expression(ie6=(document.documentElement.scrollTop+document.documentElement.clientHeight - 52+"px") );}</style><div id="gölgem" class="gtg-position gtg-s-e"><a style="opacity:1;

filter:alpha(opacity=100);color:#777;font-size:26px;margin:0px;padding:0px;background-color:transparent;border:none;text-decoration:none;font-weight:normal;">Click on the Lamp by the right<br/><br/><br/>To Turn on the Light and View This Page.</a></div></!doctype>
  • Finally click on Save and you are done.

Adding in WordPress and Webpages:

To add the lamp effect in your WordPress or any other webpage, simply copy the script above and paste just above/before the </head> tag.

We try as much as possible to make our posts as simple as we can but since everyone’s level of assimilation isn’t the same, we welcome questions and inquiries.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

List of All JavaScript Arithmetic Operators With Examples

JavaScript offers several operators to help us work with numbers. All these operators are binary operators, which means they operate on two operands. The operands...

How to Find a Website’s RSS Feed’s URL

Having access to the RSS feed of a website gives you the opportunity to stay up-to-date on everything that website publishes. Whether that’s a...

Laravel: String data, right truncated: 1406 Data too long for column (SOLVED)

I was working on a project today when i ran into the error message "String data, right truncated: 1406 Data too long for column...

How to Enable or Disable Chrome’s Autofill on Android Devices

Storing your login details and other information in Chrome and/or your Google Account isn’t as secure as using an encrypted password manager, but it’s...

Recent Comments