Hello Guys! This time, i will give you css based stylish Buysellads marketplace widgets. If your blog is receiving handsome traffic and you have planned to apply for buysellads, these ads widgets can be very helpful in approval process.Our widgets are cool, attractive and colorful with hover effect.It will not affect your blog load time. The widgets come in four different sizes which are standard.Apply according to blog design and space.It can be added to both Blogger and WordPress.Before going to code section, we should know how to add widgets to your blog.
It is very simple and quick. You have surely added such kind of widget on your blogger blog.
1..Go to Blogger Dashboard.Select Design tab. Open Page Element tab.
2.Now click on add a gadget and select HTML/Java Script
3.copy below code for any widget and paste into widget. Now save the widgets.
WordPress also has direct widget option.
1.Go to Dashboard >> Appearance >> Widget
2.Select "Add a text widget".
3.Paste the below code.Now save widget.
1.First Ads Style Code:
2. Second Ads Style Code:
3.Third Ads Style Code:
4. Fourth Ads Style Code:
How to add buysellads widgets to blogger:
It is very simple and quick. You have surely added such kind of widget on your blogger blog.
1..Go to Blogger Dashboard.Select Design tab. Open Page Element tab.
2.Now click on add a gadget and select HTML/Java Script
3.copy below code for any widget and paste into widget. Now save the widgets.
How to add buysellads in WordPress?
WordPress also has direct widget option.
1.Go to Dashboard >> Appearance >> Widget
2.Select "Add a text widget".
3.Paste the below code.Now save widget.
1.First Ads Style Code:
<style>
html > body div.bsap_1272098 a.adhere {
width: 258px;
height: 258px;
}
div.bsap_1272098 a.adhere {
width: 260px;
height: 260px;
line-height: 2080%;
}
div.bsap_1272098 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_1272098 a {
line-height: 100%;
}
div.bsap_1272098 a {
display: block;
font-size: 11px;
color: rgb(136, 136, 136);
font-family: verdana,sans-serif;
margin: 0px;
text-align: center;
text-decoration: none;
overflow: hidden;
}
div.bsap_1272098 a {
width: 260px;
}
.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">
<!-- Ads Zone Code -->
<div id="bsap_1272098" class="bsap_1272098 bsap"><a href="http://bloggertrendytricks.blogspot.com/" title="Advertise Here" class="adhere ad1 odd" target="_blank">Advertise Here</a></div>
<!-- End Ads Zone Code -->
</div>
2. Second Ads Style Code:
<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://bloggertrendytricks.blogspot.com/" title="Advertise Here" class="adhere ad5 odd" target="_blank">Advertise Here</a>
<a href="http://bloggertrendytricks.blogspot.com/" title="Advertise Here" class="adhere ad6 even" target="_blank">Advertise Here</a>
</div>
<!-- End BuySellAds Zone Code -->
</div>
3.Third Ads Style Code:
<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://bloggertrendytricks.blogspot.com/" class="adhere ad1 odd" target="_blank">Advertise Here</a></div>
<!-- End BuySellAds Zone Code -->
</div>
4. Fourth Ads Style Code:
<style>You can comment here if you are facing problem.
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://bloggertrendytricks.blogspot.com/" class="adhere ad1 odd" target="_blank">Advertise Here</a></div>
<!-- End BuySellAds Zone Code -->
</div>
</div>
