How To Add Animated Advertisement Space Widget To Blogger

VIEW DEMO

Today I am publishing code for advertisement space that you can add in your sidebar or below the navigation menu to show to your advertiser in a more professional way. There are lots of ways to earn money from blogging and one of them is direct advertisement. So it will be good for you id you do this in a more professional way because your blog must look professional to impress advertiser.

Animated call to action Navigation menu

Tooltip Effect on Link hover

Bubble widget for blogger

So below is the html and css code for this widget. You can edit the effects and images as per your choice. This widget is animated i tell you why. It has some beautiful css hover effect. When you move your mouse cursor over the banner then banner moves up and ad spaces are shown with tooltip effect.

Click and expand panel widget for blogger

Rounded button widget for blogger

I have added images for 125 *125 ad spaces. You can also customize them and you can remove them with your images. You can also edit the css hover effects with you.

This is made in html and css and without any use of javascript. Now lets see how to add this advertisement widget to blogger.

<style type="text/css">
.avd-banner {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #CCCCCC;
box-shadow: 0 14px 2px -10px #CCCCCC;
margin-bottom: 30px;
padding: 8px;
position: relative;
width: 652px;
z-index: 15;
}
.small-image {
cursor: pointer;
height: 167px;
overflow: hidden;
position: relative;
}
.small-image > img {
-moz-transition: all 500ms;
-webkit-transition: all 500ms;
-o-transition: all 500ms;
transition: all 500ms;
position: absolute;
z-index: 50;
opacity: 1;
left: 0;
}
.avd-banner:hover .small-image > img {
opacity: 0;
margin-top: -167px;
}
.avd-pl-ghar {
position: absolute;
top: 0;
z-index: 10;
}
.avd-pl-ghar a {
border-radius: 4px 4px 4px 4px;
box-shadow: 0 0 2px 0 #333333 inset;
display: block;
float: left;
margin: 13px;
padding: 6px;
position: relative;
text-decoration: none;
width: 125px;
height: 125px;
-moz-transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
.avd-pl-ghar a:hover {
background: #07aaee;
}
.avd-banner .avd-pl-ghar a strong {
background-color: rgba(0, 0, 0, 0.7);
border-radius: 2px 2px 2px 2px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
color: #FFFFFF;
font-weight: normal;
right: -20px;
padding: 3px 6px;
position: absolute;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.75);
top: 0;
z-index: 9999;
}
.avd-banner .avd-pl-ghar a strong {
opacity:0;
-webkit-transition-property: opacity, top;
-webkit-transition-duration: 500ms;
-moz-transition-property: opacity, top;
-moz-transition-duration: 500ms;
-o-transition-property: opacity, top;
-o-transition-duration: 500ms;
transition-property: opacity, top;
transition-duration: 500ms;
}
.avd-pl-ghar a:hover strong {
opacity:1;
top: 120px;
}
</style>

<div class="avd-banner">
<div style="position:relative">
<div class="small-image">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDGnEcZUlFg4NgRYT6ZSyH2msUHxL6HjoAfbIqSJqfTH2JDgG8IINAkNsLpzknCa4riEFrK5M6TSNOIWY5vZZMQk9z5DGSsqsmIip1gjDyZkoDf2FaMUMlBbPF1o54mSG-9Ljd63DQJp4/s1600/MOVE-CURSOR-HERE.gif" />
</div>
<div class="avd-pl-ghar">
<a target="_blank" href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjev-1arGDkxC7_S4sehyphenhyphenf2gjqH_mGJTsX6EM_PQnPxYmJ1tAXiZc9DhqJSaEFwVNWTWDJwNqm104sCGIxa_s0Mfm8XmJfQNSYFYem-_JBn-caYvAe_j6Znbx-TGtm6JLTmbv1mKeXadY4/s1600/125x125.jpg" width="125px" height="125px" border="0"/>
<strong>Our Ad Policy</strong>
</a>
<a target="_blank" href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjev-1arGDkxC7_S4sehyphenhyphenf2gjqH_mGJTsX6EM_PQnPxYmJ1tAXiZc9DhqJSaEFwVNWTWDJwNqm104sCGIxa_s0Mfm8XmJfQNSYFYem-_JBn-caYvAe_j6Znbx-TGtm6JLTmbv1mKeXadY4/s1600/125x125.jpg" width="125px" height="125px" border="0"/>
<strong>3 $ only per month</strong>
</a>
<a target="_blank" href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjev-1arGDkxC7_S4sehyphenhyphenf2gjqH_mGJTsX6EM_PQnPxYmJ1tAXiZc9DhqJSaEFwVNWTWDJwNqm104sCGIxa_s0Mfm8XmJfQNSYFYem-_JBn-caYvAe_j6Znbx-TGtm6JLTmbv1mKeXadY4/s1600/125x125.jpg" width="125px" height="125px" border="0"/>
<strong>Purchase this adspace</strong>
</a>
<a target="_blank" href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjev-1arGDkxC7_S4sehyphenhyphenf2gjqH_mGJTsX6EM_PQnPxYmJ1tAXiZc9DhqJSaEFwVNWTWDJwNqm104sCGIxa_s0Mfm8XmJfQNSYFYem-_JBn-caYvAe_j6Znbx-TGtm6JLTmbv1mKeXadY4/s1600/125x125.jpg" width="125px" height="125px" border="0"/>
<strong>Advertise With Us</strong>
</a>
</div>
</div></div>

You can edit the complete widget.

If you want to insert your logo as a banner images than search in the html code "MOUSE-CURSOR" replace that images with your logo url.

If you want to change the default images of ad spaces than search for 125*125 images and then replace the image url with your  own images.

Replace the # tag with your url.

These are all the customization that you can make in this widget and if you want to make changes in the appearance of widget than edit the css code.

So this was the animated css based advertisement space widget for blogger. please share it and comment if you like it.