Animated 'Advertise Here' widget for Blogger
Animated 'Advertise Here' widget for Blogger
Preview-
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.
<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.