Friday, December 7, 2012

Colorful Social Media Widget For Blogger

In this tutorial im gonna explain, how to add colorful social media widget for your blogger. This is very attractive because of colors. four different  colors  for  every  social  network.It include  nice  hover  style. you can  link  with Rss,Facebook,Twitter and Stumbleupon.You can add it with easy steps.get my other socialmedia widgets by clicking here
colorful++social+media+widget+for+blogger
Demo

1. Log in to blogger account and Click drop down.
blog-post-option
2. Now select "Layout" Like Below.

3. Click Add Gadget and select 'HTML/Javascript

4. Paste below one of below code.

/*--------Social Sharing Widget bloggertrix.com ------*/
<style type="text/css">
.bloggertrix-social-widget {
width: 280px;
margin-top: -10px;
border:1px solid #000000;   
}
.bloggertrix-social-widget ul {
margin: 0;
padding: 0;
   
}
.bloggertrix-social-widget ul li {
list-style:none;
padding: 0;
text-transform: none;
}
.bloggertrix-social-widget ul li a {
color: #fff;
display:block;
}
.bloggertrix-social-widget ul li a:hover {
color: #c9c9c9;
}
.bloggertrix-social-widget ul li .rss:hover {
background-color:#d86601;
border: 0px solid black;
color:#000000;
font-size:17px;
font-style: italic;
font-weight:bold;}  

.bloggertrix-social-widget ul li .twitter:hover {
background-color:#0d8be1;
border: 0px solid black;
color:#000000;
font-size:17px;
font-style: italic;
font-weight:bold;}

.bloggertrix-social-widget ul li .facebook:hover {
background-color:#224ba1;
border: 0px solid black;
color:#000000;
font-size:17px;
font-style: italic;
font-weight:bold; }

.bloggertrix-social-widget ul li .stumbleupon:hover {
background-color:#198b09;
color:#000000;
font-size:17px;
font-style: italic;
font-weight:bold;  }   
    
.bloggertrix-social-widget ul li .rss {
background:
 
url("http://3.bp.blogspot.com/-4VZV8h6ohdg/UMG3lHvbnzI/AAAAAAAAARI/pUkhJXYozVA/s1600/bloggertrix-Rss.png")
 no-repeat scroll 2px center #F87E12;
background-size: 30px;
padding: 17.5px 45px;
}
.bloggertrix-social-widget ul li .twitter {
background:
 
url("http://3.bp.blogspot.com/-D3Xl0kpvi20/UMG3pPmEowI/AAAAAAAAARg/OVYgBBp-X44/s1600/bloggertrix-twitter.png")
 no-repeat scroll 2px center #59a5d9;

background-size: 30px;
padding: 17.5px 45px;
}
.bloggertrix-social-widget ul li .facebook {
background:
 
url("http://1.bp.blogspot.com/-_Gni1B_qAEY/UMG3meWK4GI/AAAAAAAAARQ/v98YhDZOxQY/s1600/bloggertrix-facebook.png")
 no-repeat scroll 2px center #3B5998;
background-size: 30px;
padding: 17.5px 45px;
}
.bloggertrix-social-widget ul li .stumbleupon {
background:
 
url("http://4.bp.blogspot.com/-VdKR-fJgsD4/UMG43EqieOI/AAAAAAAAARo/SCsfp5u-2SQ/s1600/bloggertrix-stumbleupon.png")
 no-repeat scroll 2px center #26a615;
background-size: 30px;
padding: 17.5px 45px;
}

</style>
<div class="bloggertrix-social-widget">
<ul>
<li><a class="rss" href="http://feeds.feedburner.com/bloggertrix">Subscribe to the RSS Feed</a></li>
<li><a class="twitter" href="https://twitter.com/bloggertrix">Follow me on Twitter</a></li>
<li><a class="facebook" href="https://www.facebook.com/bloggertrix">Find me on Facebook</a></li>
<li><a rel="author" class="stumbleupon" href="http://www.stumbleupon.com/stumbler/soharox/">Stumble on Stumbleupon</a></li>
</ul>
</div>
Replace with your profile URLs where i highligh with red color text.

7. Now save your HTML/Javascript'.

    You are done...

4 comments:

  1. Nice post. thanks you.

    ReplyDelete
  2. Wow.. should try this on my blog, Are there more widgets like this? If so where can I find them?

    ReplyDelete