Awesome Advertise Here Text with Hover Effect

Every blogger wants to make good amount of money right. A blogger can earn money by providing services, selling digital products, affiliate marketing, Link Sales, Adspace Sale etc. So today I am going to focus on Adspaces. These adspaces generate a large amount of money for a blogger. You can add an image/notice on the desired space you want to sell and people may contact you. Well this makes it the space look quite dull and boring so here I will show you how you can add Awesome Advertise Here Text Widget with really cool hover effect to your blogger blog.

This widget is made up of Pure CSS and has no use of Image or JavaScript. The live working demo of this widget can be seen by clicking the below download button.


Live Demo

Once you have seen the demo, to add this widget to your blogger blog follow the below given step.

Adding the HTML/CSS in Layout

To add this widget firstly go to Blog Title → Layout → Add Widget → HTML/JavaScript and paste the code in the box below.

<style>
#text{-moz-transform:rotate(-5deg);-o-transform:rotate(-5deg);-webkit-transform:rotate(-5deg);color:#FFF!important;font-family:arial;font-size:60px;font-weight:300;letter-spacing:-5.5px;line-height:45px;text-align:center;margin:20px 10px}
#text a{color:#333;text-shadow:1px 1px #000, 3px 3px #EEEEEE, 5px 5px #DDDDDD, 7px 7px #AAAAAA, -1px -1px #000;text-transform:lowercase;-moz-transition:all .3s ease-in 0;-webkit-transition:all .3s ease-in 0;-o-transition:all .3s ease-in 0;-kmoz-transition:all .3s ease-in 0}
#text a:hover{-moz-transition:all .3s ease-in 0;-webkit-transition:all .3s ease-in 0;-o-transition:all .3s ease-in 0;-kmoz-transition:all .3s ease-in 0;text-shadow:1px 1px #000, 3px 3px #EEEEEE, 5px 5px #DDDDDD, 7px 100px transparent, -1px -100px transparent;color:transparent}
inf{color:#d2a}
#text a:focus,#text a:active{color:#eee!important;-moz-transition:all 0 ease-in-out!important;-o-transition:all 0 ease-in-out!important;-kmoz-transition:all 0 ease-in-out!important;-webkit-transition:all 0 ease-in-out!important}
</style>
<div id="text" class="rent"><a href="#link" target="blank"><blink>&#8669;</blink> Here is a free space.<br />Contact <inf>α&#8574;мїη for more information</inf><blink>&#8668;</blink></a></div>

After adding the code change #link with the link of the page you want your visitors to be redirected to.

You are done now. Now you and your visitors can see this Awesome Advertise Here Text with Super Cool Hover Effect in your blogger blog.