Animated 'Advertise Here' widget for Blogger

Animated 'Advertise Here' widget for Blogger
If your blogsite receive a good amount of visitor, for your profit you can host 'advertise here' campaigns on your site. For creating ‘advertise here’ campaigns you will need widget space of 125x125 on widget area, a image/text what contains your offer and contact page’s hyperlink. For making you job easy here I developed a simple, fresh and trendy ‘Advertise here’ widget. It got flat colored images (10 colors), CSS3 transition effects and it’s very easy to configure. Let’s take a look at this widget, and how to add and configure.

Animated 'Advertise Here' widget for Blogger


Preview-
Animated advertise here widget for Blogger

Live Demo- (Click here)

Codes for copy-

<style>
/*crawlist.net CSS starts*/
.ks-adver {
    list-style: none;
    padding:0;
    width:300px;
}
.ks-adver li {
    display: inline-block;
    margin: 3px 3px 3px 3px;
    vertical-align: top;
}
.ks-adver li > a,
.ks-adver li > a img {
    width:125px;
    border: none;
    outline: none;
    display: block;
    position: relative;
    transition: all 0.7s ease-in-out;
    -moz-transition: all 0.7s ease-in-out;
    -webkit-transition: all 0.7s ease-in-out;
    -o-transition: all 0.7s ease-in-out;
}
.ks-adver li > a img:hover {
    border-radius:50%;
    z-index: 9999;
    opacity:.7;
}
/*crawlist.net CSS ends*/
</style>

<!--crawlist.net widget starts-->
<ul class="ks-adver">
<li>
<a href="contact page link" target="_blank"><img src="http://2.bp.blogspot.com/-7FMGsNk1ZMo/VLuMWnmupKI/AAAAAAAAFSo/W4UPsyu_KYM/s1600/blue.png"/></a>
</li>
<li>
<a href="contact page link" target="_blank"><img src="http://3.bp.blogspot.com/-vvrnP2yztGc/VLuMWsDvTaI/AAAAAAAAFS0/x1DfQOCFrvU/s1600/gray.png"/></a>
</li>
<li>
<a href="contact page link" target="_blank"><img src="http://3.bp.blogspot.com/-s65RzJkWSao/VLuMW5ZZ9LI/AAAAAAAAFSs/JAPeTGiXdjs/s1600/green.png"/></a>
</li>
<li>
<a href="contact page link" target="_blank"><img src="http://4.bp.blogspot.com/-XJQbKpY4rkE/VLuMYrRf8hI/AAAAAAAAFTA/mK-021-luPk/s1600/nevy.png"/></a>
</li>
<li>
<a href="contact page link" target="_blank"><img src="http://2.bp.blogspot.com/-yDhbRWm8oUY/VLuMYhTTGnI/AAAAAAAAFTE/Se2QmAK3jMo/s1600/orange.png"/></a>
</li>
<li>
<a href="contact page link" target="_blank"><img src="http://4.bp.blogspot.com/-tWoPzXF1ry0/VLuMZDUZ3wI/AAAAAAAAFTI/0b8ZdgMwwso/s1600/purple.png
"/></a>
</li>
<li>
<a href="contact page link" target="_blank"><img src="http://1.bp.blogspot.com/-MLxOsJmzefM/VLuMZxmLq0I/AAAAAAAAFTU/om7-md91wUw/s1600/red.png"/></a>
</li>
<li>
<a href="contact page link" target="_blank"><img src="http://2.bp.blogspot.com/-rhnpoK2pgmw/VLuMb2B-SyI/AAAAAAAAFTk/V-IdzbmY4kA/s1600/sky.png"/></a>
</li>
<li>
<a href="contact page link" target="_blank"><img src="http://2.bp.blogspot.com/-w_QLt9-Pb8Q/VLuMbg5g8tI/AAAAAAAAFTg/TAy35y8MS3s/s1600/teal.png"/></a>
</li>
<li>
<a href="contact page link" target="_blank"><img src="http://3.bp.blogspot.com/-ohxWOR-STK4/VLuMdFTuKtI/AAAAAAAAFTw/_kEWRY2Is44/s1600/yallow.png"/></a>
</li>
</ul>
<!--crawlist.net widget ends-->



How to add-
  • First log in to your Blogger, select your Blog,
  • Go to 'Layout' tab then click 'add a gadget’ 
  • Select 'html/javascript' from pop up menu. 
  • Copy following codes and configure.

How to configure-
  • I made 10 kind of label, but you maybe will use 2 or 4. So remove what color you don’t want to use. Example- If you don’t want to use Blue one, just remove this line from whole codes. 
<li>
<a href="contact page link" target="_blank"><img src="http://2.bp.blogspot.com/-7FMGsNk1ZMo/VLuMWnmupKI/AAAAAAAAFSo/W4UPsyu_KYM/s1600/blue.png"/></a>
</li>
  • In ‘contact page link’ replace your contact page address starts with http://
  • Save gadget, and check out your Blogger blog for see this widget working.
So what you think about this widget don’t’ forget to mention, New widget will be release soon so stay subscribed…

Popular posts from this blog

Add Cool Social Media Sharing icons below posts in Blogger

13 Best Forum CMS/Script to use

Easily Get 50000 free Backlink for your website

7 best CMS/script for building Social networking website

Read Download Stephen King's Novels ePub & Apk

Read Download ePub Harry Potter Books & Apk

10 Best Free Flash Editor software to use

12 best free Article Rewriter/Spinner you can use

Top 6 Best Alternatives to ZBIGZ

6 Best Local Web Server software