Browse » » » Get Ads Box with cool CSS effect as used in Spice Up Your Blog

Get Ads Box with cool CSS effect as used in Spice Up Your Blog

| Tags : Blogger Widgets, CSS Tricks

Click to enlarge the image (on the image)
Hi guys as every one knows these days the Spice Up Your Blog ads widget for the blogs are very hot to be seen and look well equipped ad box with some cool rates going high well with this post you can also get the same kind of ad widget as shown in the image beside even at your blog. This widget has got cool CSS effect  so that it makes all the advertisers think that this blog is well designed and developed and get cool advertisers.

To do this just follow the steps given below:

                 
                                                          LIVE EXAMPLE

Step 1. Step 1. Go to your Blogger Dashboard => Template => Click Edit HTML => Search ]]></b:skin> and paste the following code in the content area before the above given code asked to search for.


/* -------------------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;}


Step 2: Click Save Template
Step 3: Go to "Layout - Page Elements"=>Click on Add Gadget=>create new HTML / JavaScript widget
Step 4: Copy the code in the field below and paste it in the new widget created:

The size of 125x125
<center>
<div id="bsap_125" class="bsap_125 bsap">
<a href="http://AddURL" class="ad1" title="Ad Title" id="bsa_1451626" target="_blank"> <img src = "http://Imageurl "alt =" CODE "height =" 125 "width =" 125 "/> </ a>
<a href="http://AdURL" class="ad2 even" title="Ad Title" target="_blank"> <img src = "http://AdURL"alt =" AdName "height =" 125 "width =" 125 "/> </ a>
<a href="http://AdURL" class="ad3" title="AdTitle" target="_blank"> <img src = "http://Ad Image URL "alt =" AdName "height =" 125 "width =" 125 "/> </ a>
<a href="Ad URL" title="Advertise Here" class="adhere ad4" target="_blank"> Advertise Here </ a>
</ Div>
</ Center>


The size of 468x60

<div id="bsap_468" class="bsap_468 bsap">
<span class="bsap_468 bsap"> <a href="AdURL" title="Advertise Here" class="adhere ad4" target="_blank"> Advertise Here </ a> </ span>
</ Div>


The size of 728x90

<div id="bsap_728" class="bsap_728 bsap">
<span class="bsap_728 bsap"> <a href="ADURL" title="Advertise Here" class="adhere ad1" target="_blank"> Advertise Here </ a> </ span>
</ Div>


The size of 336x280

<div id="bsap_336" class="bsap_336 bsap">
<span class="bsap_336 bsap"> <a href="ADURL" title="Advertise Here" class="adhere ad1" target="_blank"> Advertise Here </ a> </ span>
</ Div>

Use the code below to add a picture

< img src="ImageURL" alt="AD Name" <img height="125" width="125" />
Orange Blocks Size color banner, change the numbers according to the code used.


P.S. The one Highlighted with purple should be changed with any thing you like among ad1 - ad11 (It changes the color of the background image)
And the one with red to be changed as directed.

 Hopefully helpful, Good luck. If you any doubts please ask by commenting below....

Enjoyed the article?
Subscribe to this Blog via Email:

Click here to subscribe to FREE email updates from "Everything About Blogging", so that you do not miss out anything that can be valuable to you and your blog!

    Other Recommended Posts

  • Blogger Widgets, CSS Tricks

Use the tab below to comment. No spam please!!!

POST YOUR COMMENT

Subscribe to: Post Comments (Atom)
[netinsert=0.0.1.11.14.1]