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>⇝</blink> Here is a free space.<br />Contact <inf>αⅾмїη for more information</inf><blink>⇜</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.
Beautiful <3
ReplyDeleteI was looking for this only :D
HPBolly
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
ReplyDeletethanks ^_^
ReplyDeleteYou saved me. Thank you for the awesome widget. Thumbs Up :)
ReplyDelete