28 February 2013
Ad Boxes with Awesome CSS Effects also used in Spice Up Your Blog 2013
Hello Guys: Today I am gonna tell you
how to add ad boxes to your blogger with Awesome CSS effects like Spice
Up Your Blog.This Widget increases the Beautification of your ads and
inspire advertisers to advertise on your blog/site.This is a really
great gadget and it is also used by Spiceupyourblog.com.This Gadget is
well designed with cool effects to get cool advertisers.
Adding CSS Codes:
Go to Blogger Dashboard >Templates
Note : Please backup your template before making any changes
Search for the Below code
Paste the below code above it
]]></b:skin>
Paste the below code above it
/* -------------------http://itsimtiazforum.blogspot.com/ Ads------------------*/
div.bsap_125 a{width:125px;display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;text-align:center;text-decoration:none;overflow:hidden;float:left;line-height:100%;margin:0 4px 10px 0;}
div.bsap_125 img{border:2px solid #ddd;clear:right;padding:5px;}
div.bsap_125 a.adhere{color:#666;font-weight:bold;font-size:12px;border:2px solid #ccc;background:#e7e7e7;text-align:center;width:125px;height:125px;line-height:1000%;}
div.bsap_125 a.adhere:hover{border:2px solid #999;background:#ddd;color:#333;}
html>
body div.bsap_125 a.adhere{width:123px;height:123px;}
div.bsap_468 a{width:468px;display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;text-align:center;text-decoration:none;overflow:hidden;line-height:100%;margin:0;}
div.bsap_468 img{border:0;clear:right;}
div.bsap_468 a.adhere{color:#666;font-weight:bold;font-size:12px;border:1px solid #ccc;background:#e7e7e7;text-align:center;width:468px;height:60px;line-height:480%;}
div.bsap_468 a.adhere:hover{border:1px solid #999;background:#ddd;color:#333;}
html>
body div.bsap_728 a.adhere{width:726px;height:90px;}
div.bsap_728 a{width:468px;display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;text-align:center;text-decoration:none;overflow:hidden;line-height:100%;margin:0;}
div.bsap_728 img{border:0;clear:right;}
div.bsap_728 a.adhere{color:#666;font-weight:bold;font-size:12px;border:1px solid #ccc;background:#e7e7e7;text-align:center;width:128px;height:90px;line-height:730%;}
div.bsap_728 a.adhere:hover{border:1px solid #999;background:#ddd;color:#333;}
html>
body div.bsap_336 a.adhere{width:334px;height:280px;}
div.bsap_336 a{width:468px;display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;text-align:center;text-decoration:none;overflow:hidden;line-height:100%;margin:0;}
div.bsap_336 img{border:0;clear:right;}
div.bsap_336 a.adhere{color:#666;font-weight:bold;font-size:12px;border:1px solid #ccc;background:#e7e7e7;text-align:center;width:336px;height:280px;line-height:2200%;}
div.bsap_336 a.adhere:hover{border:1px solid #999;background:#ddd;color:#333;}
html>
body div.bsap_468 a.adhere{width:466px;height:58px;}
.bsap a{text-shadow:1px 1px 1px #111!important;color:#eee!important;overflow:visible!important;-webkit-transition:all .2s ease;-moz-transition:all .2s ease;-o-transition:all .2s ease;border:0 none!important;-webkit-border-top-left-radius:80px;-webkit-border-bottom-right-radius:80px;-moz-border-radius-topleft:80px;-moz-border-radius-bottomright:80px;border-top-left-radius:80px;border-bottom-right-radius:80px;margin:0 10px 10px 0 !important;padding:7px!important;}
.bsap a:hover{-webkit-border-top-left-radius:40px;-webkit-border-bottom-right-radius:40px;-moz-border-radius-topleft:40px;-moz-border-radius-bottomright:40px;border-top-left-radius:40px;border-bottom-right-radius:40px;}
.bsap a img{border:0 none!important;-webkit-box-shadow:0 0 8px rgba(0,0,0,0.5);-moz-box-shadow:0 0 8px rgba(0,0,0,0.5);box-shadow:0 0 8px rgba(0,0,0,0.5);padding:3px!important;}
.bsap .even{margin-right:0!important;}
.bsap .ad1{background:#e42b2b!important;}
.bsap .ad2{background:#ff8400!important;}
.bsap .ad3{background:#a800ff!important;}
.bsap .ad4{background:#49a7f3!important;}
.bsap .ad5{background:#41d05f!important;}
.bsap .ad6{background:#B24700!important;}
.bsap .ad7{background:#FFE500!important;}
.bsap .ad8{background:#007D47!important;}
.bsap .ad9{background:#330000!important;}
.bsap .ad10{background:#990000!important;}
.bsap .ad11{background:#f70000!important;}
Save Your Template
Adding HTML Codes:
Choose your Ad Box size > Go to Layout > Add a Gadget > HTML/Javascript and Paste the code in it
125x125 Code
<center>
<div id="bsap_125" class="bsap_125 bsap">
<a href="ADVERTISE URL" class="ad1" title="Ad Title" id="bsa_1451626" target="_blank"> <img src = "IMAGE URL "alt ="AdName"height =" 125 "width =" 125 "/> </a>
<a href="ADVERTISE URL" class="ad2 even" title="Ad Title" target="_blank"> <img src = "IMAGE URL"alt =" AdName "height =" 125 "width =" 125 "/> </a>
<a href="ADVERTISE URL" class="ad3" title="AdTitle" target="_blank"> <img src = "IMAGE URL "alt =" AdName "height =" 125 "width =" 125 "/> </a>
<a href="ADVERTISE URL" class="ad4 even" title="Ad Title" target="_blank"> <img src = "IMAGE URL"alt =" AdName "height =" 125 "width =" 125 "/> </a>
</div></center>
468x60 Code
<center>
<div id="bsap_468" class="bsap_468 bsap">
<a href="ADVERTISE URL" class="ad5" title="Ad Title" id="bsa_1451626"
target="_blank"> <img src = "IMAGE URL "alt ="AdName"height =" 60
"width =" 468 "/> </ a>
</ Div>
</ Center>
728x90 Code
<center>
<div id="bsap_728" class="bsap_728 bsap">
<a href="ADVERTISE URL" class="ad6" title="Ad Title" id="bsa_1451626"
target="_blank"> <img src = "IMAGE URL "alt ="AdName"height =" 90
"width =" 728 "/> </ a>
</ Div>
</ Center>
336x280 Code
<center>
<div id="bsap_336" class="bsap_336 bsap">
<a href="ADVERTISE URL" class="ad8" title="Ad Title" id="bsa_1451626"
target="_blank"> <img src = "IMAGE URL "alt ="AdName"height =" 280
"width =" 336 "/> </ a>
</ Div>
</ Center>
0 comments:
Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
Note:
1. To add HTML CODE in comments then please use our HTML Encoder
2. You can always Test the tutorial on our HTML Editor
3. Please do not spam Spam comments will be deleted immediately upon our review.
Regards,
Imtiaz Ahmed