Multicolor Social Networking Sites Profile Widget for Blogger

Social bookmarking widget plays an important role on a blog site. Facebook, Twitter, Google Plus, Linked In are one of the most popular social networking sites. So, these sites help us to generate traffics and also make a good engagement with subscribers.

Today I am going to be sharing a multicolor social networking site profile widget for blogger. Which will highlight your social media profile link to visitors on your blog site. This blogger widget has a multicolor hover effect which looking really attractive.

Multicolor Social Networking Sites Profile Widget Live Demo

How to Add Multicolor Social Networking Sites Profile Widget for Blogger?

• Log in to Blogger dashboard.
• Go to Layout > Add a HTML/JavaScript Gadget
• Paste below code in HTML / JavaScript gadget code section.

<style type=’text/css’>
/*Social Profile Blogger WIdget by Rupayon.Com*/
.rupayon-multi-color-social-profile { width: 300px; margin: -10px; text-decoration: none; }
.rupayon-multi-color-social-profile ul { margin: 0; padding: 0; text-decoration: none;}
.rupayon-multi-color-social-profile ul li { list-style:none; padding: 0; text-transform: none; text-decoration: none;}
.rupayon-multi-color-social-profile ul li a { color: #fff; display:block; text-decoration: none;}
.rupayon-multi-color-social-profile ul li a:hover { color: #c9c9c9; background-color: #333; text-decoration: none; }
.rupayon-multi-color-social-profile ul li .rss { background: url(“http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/RSS-1.png”) no-repeat scroll 10px center #F87E12; background-size: 20px; padding: 17.5px 45px; }
.rupayon-multi-color-social-profile ul li .twitter { background: url(“http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Twitter.png”) no-repeat scroll 10px center #4CACEE; background-size: 20px; padding: 17.5px 45px;}
.rupayon-multi-color-social-profile ul li .facebook { background: url(“http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Facebook-1.png”) no-repeat scroll 10px center #3B5998; background-size: 20px; padding: 17.5px 45px; }
.rupayon-multi-color-social-profile ul li .google { background: url(“http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/google.png”) no-repeat scroll 10px center #D44937; background-size: 20px; padding: 17.5px 45px; }
.rupayon-multi-color-social-profile ul li .linkedin { background: url(“http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/LinkedIn-1.png”) no-repeat scroll 10px center #3692C3; background-size: 20px; padding: 17.5px 45px; }
/*WIdget by www.widgetgenerators.blogspot.com*/
</style>
<div class=”rupayon-multi-color-social-profile”>
<ul>
<li><a class=”facebook” href=”Your Facebook Profile or Page Link Here“>Stay Connected on Facebook</a></li>
<li><a class=”rss” href=”Your Feedburner Username Here“>Subscribe to the RSS Feed</a></li>
<li><a class=”twitter” href=”Your Twitter Profile Link Here“>Follow Us on Twitter</a></li>

<li><a class=”google” href=”Your Google Plus Link Here“>Follow Us on Google+</a></li>
<li><a class=”linkedin” href=”Your Lined In Profile Link Here“>Connect With Us on LinkedIn</a></li>

</ul>
</div>

Social Profiles Widget Customization

• Look at above codes. Replace Respectively With Your Facebook Profile or Page Link Here, Your Feedburner Username Here, Your Twitter Profile Link Here, Your Google Plus Link Here, Your Lined In Profile Link Here
• You can also change the width of this widget. Change 300px with your desiredamount to change the width.
• Do you want to make more customization? Ya! You can if you have a basic HTML, CSS knowledge.

This is not so hard tutorial to add a social networking sites profile widget on your blogger blog. Yet you couldn’t add it or face any problem, please leave a comment below. I will help you. This is the first post of Rupayon. Com blog. So, stay with us. We will try to post manytips, tricks which you want.