Animated 'Advertise Here' widget for Blogger

Posted on January 18, 2015 by 
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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimvca-XlzJxbGSDTZXP0AyUjeDfR31csvdx0Ty1-JI_InzEguowGrGY7A0PcTiHSVXFYtHLxTB1Q6H3392uySXatZWcDbTTD2Yz5cI71quxclctUFuqRfLSQbRVjKX6N2dD_zOw-9e4xA/s1600/blue.png"/></a>
</li>
<li>
<a href="contact page link" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHzPGJJZ7o_OJ1JxBSuVQ-u8j6vGGmUdwQOwxzfcjzwyj7kCbD-1lOO_6h_5Q4UEEtBN3QUMhR_vGY-HBHc6Z4jiWYO5MxP-C1XF4PpH7gOkI7MRVnefSe9F4nDsWOtj7-zHOMyRh6fIM/s1600/gray.png"/></a>
</li>
<li>
<a href="contact page link" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsf4t-pTJt0Rx5dQ7HnZCVS0q22yd_11k5_Yq6TsbJCy4t7IfJaBWc102TazaFsunHJY43uQ3lA6ly_hyphenhyphen3HfaqiRNgddCEDM4q-DU1TQgZ8NZCg3YEDXGm5gSdxMKIw7FzPc1cdampfCI/s1600/green.png"/></a>
</li>
<li>
<a href="contact page link" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUFoQn2KEWrpDWuLnv4EhC-Jf3pThpMWm7X5QC4TY7YRnlhMTw1YIGP-M5P8KgrBD9EM1F-_vgozNUN3R1TG9B2ofHpQR6knolAtzko4QxvV_aV1uvaRal7ZnWU3QdfHgQRNVxCZ-iGbA/s1600/nevy.png"/></a>
</li>
<li>
<a href="contact page link" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5DBH-LIMnlPExQ4RLmrtS9cXzu0AaE3pkfKuXxN1AvlSlnVkVeUlmk3AF3zWAoAmrdqLkawHALFyFeRRTXXLojPoCAgrH0eLCaKq_PY2ANBdBtQnvb6_D2KrlCrZgRxxKkFvUWl-RqGU/s1600/orange.png"/></a>
</li>
<li>
<a href="contact page link" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB8WLyJEZScN_5GAtzlFA1N1Or_TjkvzvYRNIeMKM7BvhAd4wMNAtv2r_8cq_lAbOq8cdWE-5pBHdUGCsdqh_UrT8_rRk4A25LF8JEDVf5apgoS0gM62pfcAipM5dHT9SdlQJtccTbQh8/s1600/purple.png
"/></a>
</li>
<li>
<a href="contact page link" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz84NO-aLdSo4HhN8MSh7aztaI7EvFq9D4IxgatHRSvakq106P3fF-XNY3dMsV7ZpAC9PK-ISmmD-NFt6FynY9M6JaRHQaxCJmP7vMPrPhcHFQZV-9_e6TpB-MT3w_tCynoNpU-ixnWzU/s1600/red.png"/></a>
</li>
<li>
<a href="contact page link" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvGsTkbONDGUxO5GsohGZzqfVn_ktbGRe5B_r-nLvXfNfAZGtt-iOFCBVDNpGXVufkW9y1BWDrM-L9OhQTR4u0ycj45SidKIcoSPa9EnTUKaz-G8edTqVQpMNjLOGX6kSV8jm8jM5v4JE/s1600/sky.png"/></a>
</li>
<li>
<a href="contact page link" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEqFx_Ab6kyRpukauAcsMHXwkEC2H7mV4o7rP60-3jwPs5MILRYJHGXCK5JMpRW2Z4mMy4ogZtRWVf3qXxSpTPXvvdbdqiuaqFz2b3LGPWxBlwAfXihzy-fTFvhBY81RYrtnCsYHIiwWE/s1600/teal.png"/></a>
</li>
<li>
<a href="contact page link" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkINc_LlPBaiOF_WTrSm_06xnzOsgW9LcZuU-bVC7yrrx8FQQCsE3FtpgwwTKko-tBH5MfgHbspEnIqgANlyyLai9Xg-MBoClR8oASyNzMnxLOnoJN97XMCXzBEoqW-tWrgfIxyundUzA/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimvca-XlzJxbGSDTZXP0AyUjeDfR31csvdx0Ty1-JI_InzEguowGrGY7A0PcTiHSVXFYtHLxTB1Q6H3392uySXatZWcDbTTD2Yz5cI71quxclctUFuqRfLSQbRVjKX6N2dD_zOw-9e4xA/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…