Stylish Social Media Widget for Blogger

Stylish Social Media Widget for Blogger

Social media connect widget is an important element of a professional blog site. You can stay connected y

our blog visitor by using this widget. Some people are use lower stylish social connect widget, that cannot attract their blog visitor/reader. That’s way they are not get enough social media followers. For this kinds of blogger we are created a social connect widget, that can easily attract any visitor. This widget created with Facebook, Twitter, Google Plus, LinkedIn, StumbleUpon and RSS icons. You can see how this widget is on Bellows screenshot.

How to add this Social Profile Icon Widget to your blogger blog

• step 1: Go to blogger blog dashboard> Layout
• step 2: Click on “Add a Gadget”
• step 3: Chose a “Html JavaScript” Gadget
• Step 4: Copy all bellows code and past inside the “Html JavaScript” Gadget

<style>
/***** Social Profile Icon Widget CSS *****/
.social-profile-icons { margin: 20px 0 0; overflow: hidden; }
.social-profile-icons ul { display: inline-block; margin: 0 auto !important; text-align: center; }
.social-profile-icons ul li { background: transparent !important; border: none !important; float: left; list-style-type: none !important; margin: 0 4px 10px !important; padding: 0 !important; }
.social-profile-icons ul li a, .social-profile-icons ul li a:hover { background: url(“https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3V4RPOVqvn25F0KXyVls167arBzLKoTeQbLiUVzQ6kymnqUf3jWDSHnqvWl87g64sa9lemnUVjpj-8SaDkdhjloWcB962nI8a6JyiYDhXssMtuW_iDF020yvai4Be5nPjoeyBU6PGsvJg/s1600/sprite_32x32.png”) no-repeat scroll 0 0; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; display: block; height: 38px; overflow: hidden; text-indent: -999px; transition: all 0.25s linear 0s; width: 38px; }
.social-profile-icons ul li.social-facebook a { background-color: #3b5998; background-position: -60px 3px; }
.social-profile-icons ul li.social-twitter a { background-color: #00aced; background-position: -253px 3px; }
.social-profile-icons ul li.social-gplus a { background-color: #dd4b39; background-position: -93px 3px; }
.social-profile-icons ul li.social-linkedin a { background-color: #007bb6; background-position: -125px 3px; }
.social-profile-icons ul li.social-pinterest a { background-color: #cb2027; background-position: -157px 3px; }
.social-profile-icons ul li.social-rss a { background-color: #F87E12; background-position: -189px 3px; }
.social-profile-icons ul li a:hover { background-color: #333; }
</style>
<div class=”social-profile-icons”>
<ul>
<li class=”social-facebook”><a href=”#” title=”Facebook”>Facebook</a></li>
<li class=”social-twitter”><a href=”#” title=”Twitter”>Twitter</a></li>
<li class=”social-gplus”><a href=”#” title=”Google+”>Google+</a></li>
<li class=”social-linkedin”><a href=”#” title=”LinkedIn”>Linkedin</a></li>
<li class=”social-pinterest”><a href=”#” title=”Pinterest”>Pinterest</a></li>
<li class=”social-rss”><a href=”#” title=”RSS”>RSS</a></li>
</ul>
</div>

• Step 5: Click on “Save”
• Step 6: You are done!

Now you need a simple customization:

1. Replace the red highlighted # symbol with your Facebook fan page or profile url.
2. Replace the green highlighted # symbol with your Twitter profile url.
3. Replace the blue highlighted # symbol with your Google+ page or profile url.
4. Replace the vibrant purple highlighted # symbol with your LinkedIn profile page url.
5. Replace the pink highlighted # symbol  with your Pinterest profile url.
6. Replace the vibrant green highlighted # symbol with your blog RSS url.

Socializer Widget By Blogger Yard

SOCIALIZE IT →

Tweet

FOLLOW US →

SHARE IT →