Contact Us:

If You Have Any Problem, Wanna Help, Wanna Write Guest Post, Find Any Error Or Want To Give Us Feedback, Just Feel Free To Contact Us. We Will Reply You Soon.

Name: *


Email: *

Message: *


Skillblogger

Download our app on Google Play Store

Sunday, April 14, 2013

Easy Way To Add Stylish Advertise Banners To Blogger

Easy Way To Add Stylish Advertise Banners To BloggerYou might find an empty space in your blog and you do not know how well served! many blogs containing a lot of announcements and buttons for many websites scattered randomly all over the blog, which increases the slowness caused to your blogs while browsing, and this bothers visitors inevitably, and prevent them from getting what they prefer and it is content.
Each blogger must be interested in content that frees and his blog’s template, because your blog is a mirror to your face in the field of blogging. If you look at some of the blogs professionalism, you will be impressed by the unique view features of each one separately, and this is due to the good selection of their templates and the rational management of widgets and advertisements, which makes their blogs multiple income sources. In addition to Google AdSense or any other announcements company,
you find often in the side bar some ads for other websites/blogs ranked and organized which makes the possibility of pressure very high, and this is what will explain it in this lesson.
Our day tool is a set of boxes ad with a colored background, made up of HTML and CSS, exploit a small area of your blog.
For the previous lesson:

Features:

  • Whenever I passed the mouse pointer over the announcement moves the background color, giving him snatch the attention of the visitor attraction…
  • Attractive and harmonious form.
  • Does not take a large area of the template.
  • The possibility of developing more than 4 ads.

Demo:

You can take a look on our sidebar:

How to add this in Blogger

Firstmethod:

  • Login to Blogger.com » Dashboard.
  • Press  drop-down menu of your blog and select "Layout" »»» Add a Gadget
  • Scroll down and choose "HTML/JavaScript".
Now just copy and paste the below code inside the "HTML/JavaScript box".

<!--CSS Hover Effects To (125 x 125) Advertisement Banners By CoolDoodTricks and MyWay2Blogging--><style>.CoolDoodTricks-Ads ul{list-style-type:none;margin: 0px auto;padding: 10px 0px 10px 0px;width:300px;overflow:hidden;}.CoolDoodTricks-Ads ul li{list-style-type:none;margin: 0px 5px 10px 5px;float:left;display:inline;background:orange;-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;-o-transition:all 0.2s ease;border-radius:100%;-webkit-border-radius:100%;-moz-border-radius:100%;-o-border-radius:100%;}.CoolDoodTricks-Ads ul li:hover {-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-o-transition:all 0.3s ease;-o-border-radius:15%;-webkit-border-radius:15%;-moz-border-radius:15%;border-radius:15%;}.CoolDoodTricks-Ads ul li:active {-webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;-o-transition:all 0.2s ease;-o-border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;}.CoolDoodTricks-Ads ul li a img{-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;}</style><div class="CoolDoodTricks-Ads"><ul><li style="background:#e42b2b !important;"><a href="http://myway2blogging.blogspot.com/p/contact-us.html " rel="nofollow"><img height="125" src="http://s4.postimage.org/9i4j6ew4p/your_ad_here_52.jpg" width="125" /></a></li><li style="background:#FFE500 !important;"><a href="http://myway2blogging.blogspot.com/p/contact-us.html " rel="nofollow"><img height="125" src="http://s4.postimage.org/j1e7zvjmx/your_ad_here_36.gif" width="125" /></a></li><li style="background:#a800ff !important;"><a href="
http://myway2blogging.blogspot.com/p/contact-us.html" rel="nofollow"><img height="125" src="http://s4.postimage.org/ridqasobt/your_ad_here_17.png" width="125" /></a></li><li style="background:#41d05f !important;"><a href="  http://myway2blogging.blogspot.com/p/contact-us.html" rel="nofollow"><img height="125" src="http://s4.postimage.org/hjsrobew9/ad_placeholder.jpg" width="125" /></a></li></ul></div><!--CSS Hover Effects To 125x125 Advertisement Banners By CoolDoodTricks and MyWay2Blogging-->

Now Save and you’re done !

Customization:

  • Replace  http://myway2blogging.blogspot.com/p/contact-us.html with the website’s link of your advertiser.
  • Replace http://s4.postimage.org/9i4j6ew4p/your_ad_here_52.jpg with banner link of the advertiser.
  • If you want to add more banners just add this code :

<li style="background:#41d05f !important;"><a href="  http://myway2blogging.blogspot.com/p/contact-us.html " rel="nofollow"><img height="125" src="http://s4.postimage.org/9i4j6ew4p/your_ad_here_52.jpg" width="125" /></a></li>


Just above this tag :

</ul>
</div>

In other way if you want to delete a banner then just delete the same above code .

secondmethod:

If the above method didn't work very well, then you should try this second method over here:

Go to Blogger.com » Layout » Edit HTML
Don't forget to backup your Template.
Now using CTRL+F search for ]]></b:skin> and just above it copy and paste the below code.






/* -------------------MyWay2Blogging 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;}/*------------------MyWay2BloggingAds------------------*/
Finally Save Template.


  • Go to Layout >>> Page Elements >>> add HTML/JavaScript


Copy and past the code below in HTML/JavaScript widget.

For the 125x125:

<center>
<div id="bsap_125" class="bsap_125 bsap">
<a href="http://myway2blogging.blogspot.com/p/contact-us.html" class="ad1" title="Ad Title" id="bsa_1451626" target="_blank"> <img src = "http://s4.postimage.org/hjsrobew9/ad_placeholder.jpg"alt ="AdName"height =" 125 "width =" 125 "/> </a><a href="http://myway2blogging.blogspot.com/p/contact-us.html" class="ad2 even" title="Ad Title" target="_blank"> <img src = "http://s4.postimage.org/ridqasobt/your_ad_here_17.png"alt =" AdName "height =" 125 "width =" 125 "/> </a><a href="http://myway2blogging.blogspot.com/p/contact-us.html" class="ad3" title="AdTitle" target="_blank"> <img src = "http://s4.postimage.org/j1e7zvjmx/your_ad_here_36.gif"alt =" AdName "height =" 125 "width =" 125 "/> </a>
<a href="http://myway2blogging.blogspot.com/p/contact-us.html" class="ad4 even" title="Ad Title" target="_blank"> <img src = "http://s4.postimage.org/9i4j6ew4p/your_ad_here_52.jpg"alt =" AdName "height =" 125 "width =" 125 "/> </a>
</div></center>

For the 468x60:

<center><div id="bsap_468" class="bsap_468 bsap"><a href="http://myway2blogging.blogspot.com/p/contact-us.html" class="ad5" title="Ad Title" id="bsa_1451626"target="_blank"> <img src = "target="_blank"> <img src = "http://s4.postimage.org/9i4j6ew4p/your_ad_here_52.jpg"alt ="AdName"height =" 60
"width =" 468 "/> </ a>
</ Div>
</ Center> "width =" 468 "/> </ a></ Div></ Center>

For the 728x90:

<center><div id="bsap_728" class="bsap_728 bsap"><a href="http://myway2blogging.blogspot.com/p/contact-us.html" class="ad6" title="Ad Title" id="bsa_1451626"target="_blank"> <img src = "http://s4.postimage.org/9i4j6ew4p/your_ad_here_52.jpg"alt ="AdName"height =" 90 "width =" 728 "/> </ a></ Div></ Center>

For the 336x280:

<center><div id="bsap_336" class="bsap_336 bsap"><a href="http://myway2blogging.blogspot.com/p/contact-us.html" class="ad8" title="Ad Title" id="bsa_1451626"target="_blank"> <img src = "http://s4.postimage.org/9i4j6ew4p/your_ad_here_52.jpg"alt ="AdName"height =" 280 "width =" 336 "/> </ a></ Div></ Center>

Customization



  • Replace http://myway2blogging.blogspot.com/p/contact-us.html with the website’s link of your advertiser.
  • Replace http://s4.postimage.org/9i4j6ew4p/your_ad_here_52.jpg with banner link of the advertiser.
  • You should change the BLUE (ad8 ad6 ad5) with what you like among ad1 - ad11.

Take Your Gift From MyWay2Blogging.BlogSpot.Com:

As a gift for you my readers, i would like to share with you two collections of free banners to use it on your blogs, just click the two links bellow and download:





What Next?

    That’s all, finally hope you like this tutorial, expect my next posts, if you like this one share it with your friends.
    If you have any questions about this lesson then feel free to ask by leaving comment or send me a PM trought Contact Form.
    Like the Post? Share with your Friends:-

    Team SB
    Posted By: Team SB
    Comment Using

    Comment Policy : We’re enthusiastic to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

    6 comments :

    1. Nice post bro. I like style of 125 banner. great work keep it up.

      Regard
      Ashu Insan
      - NewBloggerTips

      ReplyDelete
      Replies
      1. Good for you Ashu, you've done a good job in your blog.

        Delete
    2. Wow, nice dude, thanks for the Freebies ! :)

      Regards,
      Bishnu
      Pokharatech[dot]com

      ReplyDelete
      Replies
      1. Thank you Bishnu, it look good on your blog too, but you have to add http:// in the beginner of your links.

        Delete
    3. AJ Printing & Graphics has perfected the art of business cards abd Banners that reflect your corporate identity.

      ReplyDelete

    Download our app on Google Play Store

    Contact Us

    Name

    Email *

    Message *

     
    Copyright © . Skill Blogger . All Rights Reserved.
    Designed by :- Way2themes