This is a very useful and beautiful widget for advertising option on your blog or website.It has a very beautiful hover effect when mouse rolls over.
HOW TO ADD WIDGET TO BLOGGER
- Go to Blogger Dashboard --> Design --> Page Elements
- Click on Add a Gadget then select HTML/JavaScript Widget
HOW TO ADD WIDGET TO WORDPRESS
- Go to Dashboard > Appearance > Widget
- Add a Text Widget
- Paste the code shown below
- Save the Widget and You have done!
1. First ads style:
2) Seconds ads style:
<style>
html > body div.bsap_1264012 a.adhere {
width: 123px;
height: 123px;
}
div.bsap_1264012 a.adhere {
width: 125px;
height: 125px;
line-height: 1000%;
}
div.bsap_1264012 a.adhere {
color: rgb(102, 102, 102);
font-weight: bold;
font-size: 12px;
border: 1px solid rgb(204, 204, 204);
background: none repeat scroll 0% 0% rgb(231, 231, 231);
text-align: center;
}
.bsap a:hover {
border-top-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.bsap .ad5 {
background: none repeat scroll 0% 0% rgb(61, 164, 21) !important;
}
.bsap .ad6 {
background: none repeat scroll 0% 0% rgb(182, 118, 6) !important;
}
.bsap .even {
margin-right: 0px !important;
}
div.bsap_1264012 a {
line-height: 100%;
}
div.bsap_1264012 a {
display: block;
font-size: 11px;
color: rgb(136, 136, 136);
font-family: verdana,sans-serif;
margin: 0px 8px 15px 0px;
text-align: center;
text-decoration: none;
overflow: hidden;
float: left;
}
div.bsap_1264012 a {
width: 125px;
}
.bsap a {
text-shadow: 1px 1px 1px rgb(17, 17, 17) !important;
color: rgb(238, 238, 238) !important;
padding: 0px !important;
margin: 0px 10px 10px 0px !important;
overflow: visible !important;
transition: all 0.2s ease 0s;
border: 0px none !important;
border-top-left-radius: 80px;
border-bottom-right-radius: 80px;
}
#nav ul li a.current, #nav ul li a.current:visited, a:hover {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
:focus {
outline: 0px none;
}
</style>
<div class="widget-content">
<!-- BuySellAds Zone Code -->
<div id="bsap_1264012" class="bsap_1264012 bsap">
<a href="http://mypcheart.blogspot.com/" title="Advertise Here" class="adhere ad5 odd" target="_blank">Advertise Here</a>
<a href="http://modernradar.blogspot.com/" title="Advertise Here" class="adhere ad6 even" target="_blank">Advertise Here</a>
</div>
<!-- End BuySellAds Zone Code -->
</div>
3) Third ads style:
<style id="bsa_css" type="text/css">
div.bsap_1263441{width:100%;display:block}div.bsap_1263441 a{width:468px}div.bsap_1263441 a img{padding:0}div.bsap_1263441 a em{font-style:normal}div.bsap_1263441 a{display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;margin:0 4px 10px 0;text-align:center;text-decoration:none;overflow:hidden;float:left;}div.bsap_1263441 img{border:0;clear:right;}div.bsap_1263441 a.adhere{color:#666;font-weight:bold;font-size:12px;border:1px solid #ccc;background:#e7e7e7;text-align:center;}div.bsap_1263441 a.adhere:hover{border:1px solid #999;background:#ddd;color:#333;}div.bsap_1263441 a{line-height:100%}div.bsap_1263441 a.adhere{width:468px;height:60px;line-height:480%}
</style>
<div class="widget-content">
<!-- BuySellAds Zone Code -->
<div id="bsap_1263441" class="bsap_1263441 bsap"><a title="Advertise Here" href="http://modernradar.blogspot.com/" class="adhere ad1 odd" target="_blank">Advertise Here</a></div>
<!-- End BuySellAds Zone Code -->
</div>
4) Fourth ads style:
<style>
div.bsap_1263441 a.adhere:hover {
border: 1px solid rgb(153, 153, 153);
background: none repeat scroll 0% 0% rgb(221, 221, 221);
color: rgb(51, 51, 51);
}
html > body div.bsap_1263441 a.adhere {
height: 58px;
width: 466px;
}
div.bsap_1263441 a.adhere {
width: 468px;
height: 60px;
line-height: 480%;
}
div.bsap_1263441 a.adhere {
color: rgb(102, 102, 102);
font-weight: bold;
font-size: 12px;
border: 1px solid rgb(204, 204, 204);
background: none repeat scroll 0% 0% rgb(231, 231, 231);
text-align: center;
}
.bsap a:hover {
border-top-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.bsap .ad1 {
background: none repeat scroll 0% 0% rgb(17, 108, 165) !important;
}
div.bsap_1263441 a {
line-height: 100%;
}
div.bsap_1263441 a {
display: block;
font-size: 11px;
color: rgb(136, 136, 136);
font-family: verdana,sans-serif;
margin: 0px 4px 10px 0px;
text-align: center;
text-decoration: none;
overflow: hidden;
float: left;
}
div.bsap_1263441 a {
width: 468px;
}
.bsap a {
text-shadow: 1px 1px 1px rgb(17, 17, 17) !important;
color: rgb(238, 238, 238) !important;
padding: 0px !important;
margin: 0px 10px 10px 0px !important;
overflow: visible !important;
transition: all 0.2s ease 0s;
border: 0px none !important;
border-top-left-radius: 80px;
border-bottom-right-radius: 80px;
}
#nav ul li a.current, #nav ul li a.current:visited, a:hover {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
:focus {
outline: 0px none;
}
</style>
<div class="widget-content">
<div style="margin-top:35px;">
<!-- BuySellAds Zone Code -->
<div id="bsap_1263441" class="bsap_1263441 bsap"><a title="Advertise Here" href="http://modernradar.blogspot.com/" class="adhere ad1 odd" target="_blank">Advertise Here</a></div>
<!-- End BuySellAds Zone Code -->
</div>
</div>
Replace all RED LINKS with your links.
