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 7, 2013

Add Cool Banners With Beautiful Effect to Blogger

add-stylish-advertise-here-banners-to-blogger
My lesson today is about a very special widget, which by it you can advert your blog on some other blogs. By adding banners on blogs, which exchange the visitors between the blogs.
This addition it work by jquery, as when the mouse pointer passing on the banner, this last emerges forward wonderfully, and when cursor away it goes back to its previous state.
You should take a look on this example:


We should stop talking now and let add it to your BlogSpot.
Go Dashboard --> Edit HTML --> Expand widget Templates.….
And search for this tag:   ]]></b:skin>
copy the code below and past it just before  ]]></b:skin>


ul.thumb {
float: left;
list-style: none;
margin: 0; padding: 10px;
width: 360px;
}
ul.thumb li {
margin: 0; padding: 5px;
float: left;
position: relative;
width: 110px;
height: 110px;
}
ul.thumb li img {
width: 100px; height: 100px;
-ms-interpolation-mode: bicubic;
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;
left: 0; top: 0;
}
ul.thumb li img.hover {
background:url(http://s17.postimage.org/w2s8ih9in/borderblogger.png) no-repeat center center;
border: none;
}
After that search for the tag </head>
and copy the code below and past it just before  </head> 
 
<script src='http://code.jquery.com/jquery-latest.js'
type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){

//Larger thumbnail preview

$(&quot;ul.thumb li&quot;).hover(function() {
$(this).css({&#39;z-index&#39; : &#39;10&#39;});
$(this).find(&#39;img&#39;).addClass(&quot;hover&quot;)
.stop()
.animate({
marginTop: &#39;-110px&#39;,
marginLeft: &#39;-110px&#39;,
top: &#39;50%&#39;,
left: &#39;50%&#39;,
width: &#39;174px&#39;,
height: &#39;174px&#39;,
padding: &#39;20px&#39;
}, 200);

} , function() {
$(this).css({&#39;z-index&#39; : &#39;0&#39;});
$(this).find(&#39;img&#39;).removeClass(&quot;hover&quot;)
.stop()
.animate({
marginTop: &#39;0&#39;,
marginLeft: &#39;0&#39;,
top: &#39;0&#39;,
left: &#39;0&#39;,
width: &#39;100px&#39;,
height: &#39;100px&#39;,
padding: &#39;5px&#39;
}, 400);
});

//Swap Image on Click
$(&quot;ul.thumb li a&quot;).click(function() {

var mainImage = $(this).attr
(&quot;href&quot;); //Find Image Name
$(&quot;#main_view img&quot;).attr({ src: mainImage });

});

});<font size="0">
<a href="http://myway2blogging.blogspot.com/"></a>
</font>
</script>
 
Save your template and go to Add elements, and add JavaScript element --> past the code below on it:
 
<ul class="thumb">
<li><a href="Link advertiser"><img src="http://s2.postimage.org/rgytp9qhx/1268.jpg" alt="" /></a></li>
<li><a href="Link advertiser"><img src="http://s2.postimage.org/6vk1xd8x1/youradhere06.jpg" alt="" /></a></li>
<li><a href="Link advertiser"><img src="http://s2.postimage.org/iuvk4oehx/your_ad_here_54_thumb.png" alt="" /></a></li>
<li><a href="Link advertiser"><img src="http://s2.postimage.org/fcjk8adlx/your_ad_here125x125.gif" alt="" /></a></li>
</ul>

Enter the link advertiser that you want.

If you want to advertise on my blog then contact me and make your order.
That is all happy blogging followers . Please take just 5 second to help us enjoy and share it..
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.

5 comments :

  1. Nice blog and post visit my blog LOYFLY 

    ReplyDelete
  2. wow this is very nice sharing i realy like it very much . hey do you want more header or more information about blogs so you can visit on this blog thanks.
    infopowers.blogspot.com

    Must watch!

    ReplyDelete
  3. Really good information and I enjoy it. You can make styles Banners .

    ReplyDelete
  4. @Kulwant & @Arslan & @Boter

    Thank you all.

    ReplyDelete
  5. Hello dear.You have written a great post. Going to share with my followers on twitter. Thanks for sharing.

    Sign making supplies

    ReplyDelete

Download our app on Google Play Store

Contact Us

Name

Email *

Message *

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