Awesome Advertise Here Text with Hover Effect

Posted On // 4 comments


Advertise Here
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.

4 comments

Haider Afridi Author
7 July 2013 at 04:21

Beautiful <3

I was looking for this only :D

HPBolly

Reply
Olu Isaac Author
16 August 2013 at 13:42

thanks for this awesome widget i have addded it to my blog here: http://dudurepublic.blogspot.com/ but i will love to know the dimension of the ads space thank you

Reply
Jeffrey Reyes Author
24 September 2014 at 20:46

thanks ^_^

Reply
Shafi Khan Author
15 January 2016 at 07:22

You saved me. Thank you for the awesome widget. Thumbs Up :)

Reply

Post a Comment

Please do not spam here. All comments will be moderated.
Don't You Think this Awesome Post should be shared ??
| Awesome Advertise Here Text with Hover Effect |