Social networking websites have influenced blogging to a great extent. You publish a new post and share it to your social networks; it gives your followers and fans instant updates about your content. They visit your blog and you get plenty of traffic. In order to make all this happen you need to build a good following and fan base on social networks like Facebook and Twitter.

Many people add separate widgets for each network on their blogs and websites, which can hurt page loading time. To reduce the page loading time and the space used by all these widgets, you can smartly use one widget that includes all of them: Facebook, Twitter, a recommend button, and email subscription via FeedBurner. You will save a lot of space by adding this widget, and you can use the freed space for other purposes such as monetizing your blog with ad networks.

How to add the all-in-one social network widget

First of all, go to your Blogger dashboard by logging in to your account.
Click on Layout to open the layout of your template.
Now click on Add a Gadget and select the HTML/JavaScript gadget.
Paste the following code in it and change the profile names to your own profile names.

<style>
/* Social Widget */
#UT-mashable-bar {
border: 0;
margin-bottom: 10px;
margin: 0 auto;
width:300px;
}
.fb-likebox {
background: #fff;
padding: 10px 10px 0 10px;
border: 1px solid #D8E6EB;
margin-top: -2px;
height:80px;
}
.googleplus {
background: #F5FCFE;
border-top: 1px solid #FFF;
border-bottom: 1px solid #ebebeb;
border-right: 1px solid #D8E6EB;
border-left: 1px solid #D8E6EB;
border-image: initial;
font-size: .90em;
font-family: "Arial","Helvetica",sans-serif;
color: #000;
padding: 9px 11px;
line-height: 1px;}
.googleplus span {
color: #000;
font-size: 11px;
position: absolute;
display:inline-block;
margin: 9px 70px;}
.g-plusone { float: left;}
.twitter {
background: #EEF9FD;
padding: 10px;
border: 1px solid #C7DBE2;
border-top: 0;}
#mashable {
background: #EBEBEB;
border: 1px solid #CCC;
border-top: 1px solid white;
padding: 2px 8px 2px 3px;
text-align: right;
border-image: initial;}
#mashable .author-credit a {
font-size: 10px;
font-weight: bold;
text-shadow: 1px 1px white;
color: #1E598E;
text-decoration:none;}
#email-news-subscribe .email-box{
padding: 5px 10px;
font-family: "Arial","Helvetica",sans-serif;
border-top: 0;
border-right: 1px solid #C7DBE2;
border-left: 1px solid #C7DBE2;
border-image: initial;
height:35px;}
#email-news-subscribe .email-box input.email{
background:#FFFFFF;
border: 1px solid #dedede;
color: #999;
padding: 7px 10px 8px 10px;
border-radius: 3px;
border-image: initial;
font-family: "Arial","Helvetica",sans-serif;}
#email-news-subscribe .email-box input.email:focus{color:#333}
#email-news-subscribe .email-box input.subscribe{
background: linear-gradient(180deg,#FFCA00 0,#FF9B00 100%);
font-family: "Arial","Helvetica",sans-serif;
border-radius:3px;
border:1px solid #cc7c00;
color:white;
text-shadow:#d08d00 1px 1px 0;
padding:7px 14px;
margin-left:3px;
font-weight:bold;
font-size:12px;
cursor:pointer;
border-image: initial;}
#email-news-subscribe .email-box input.subscribe:hover{
background: #ff9b00;
background-image:linear-gradient(180deg,#ffda4d,#ff9b00);
outline:0;
box-shadow:0 0 3px #999;
border-radius:3px;
border:1px solid #cc7c00;
color:#FFFFFF;
text-shadow:#d08d00 1px 1px 0}
#other-social-bar {
background-color: #D8E6EB;
box-shadow: 0 1px 1px #FFFFFF inset;
padding: 0px;
font-family: "Arial","Helvetica",sans-serif;
font-weight:bold;
overflow: hidden;
border: 1px solid #B6D0DA;
height:37px;
}
#other-social-bar ul {list-style: none outside none; padding-left: 4px;}
#other-social-bar .other-follow {
float: left;
color:#1E598E;
overflow: hidden;
height:20px;
padding:5px;
width: 270px;}
#other-social-bar .other-follow ul li, #other-social-bar .other-follow li {
font-size: 12px;
font-weight: bold;
display:inline;
border:0;
text-shadow: 1px 1px white;}
#other-social-bar .other-follow ul li a, #other-social-bar .other-follow li a {
font-size: 12px;
color:#1E598E;
font-weight: bold;
display:inline;
text-shadow: 1px 1px white;}
#other-social-bar .other-follow li.my-rss {
line-height: 1;
padding: 0px 3px 1px 20px;
width: 60px;
margin-bottom:0px;
margin-left:5px;}
#other-social-bar .other-follow li a{
text-decoration:none;
}
#other-social-bar .other-follow li a:hover{
text-decoration:underline;
}
#other-social-bar .other-follow li.my-linkedin {
line-height: 1;
padding: 0px 3px 1px 20px;
width: 60px;
margin-bottom:0px;}
</style>

<!--begin of social widget-->
<div style="margin-bottom:10px;">
<div id="UT-mashable-bar"> <!-- Begin Widget -->
<div class="fb-likebox"> <!-- Facebook -->
<iframe src="//www.facebook.com/plugins/like.php?href=http://facebook.com/YOUR_PAGE&amp;send=false&amp;layout=standard&amp;width=200px&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;height=100px" scrolling="no" frameborder="0" style="border:none; overflow:hidden;"></iframe>
</div>
<div class="twitter"> <!-- Twitter -->
<a href="https://twitter.com/YOUR_USERNAME" class="twitter-follow-button" data-show-count="true">Follow @YOUR_USERNAME</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
<div id="email-news-subscribe"> <!-- Email Subscribe -->
<div class="email-box" style="background:#EDF4FF">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=YOUR_FEED_ID', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input class="email" type="text" style="width: 150px; font-size: 12px;" id="email" name="email" value="Enter Your Email here.." onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" />
<input type="hidden" value="YOUR_FEED_ID" name="uri" />
<input type="hidden" name="loc" value="en_US" />
<input class="subscribe" name="commit" type="submit" value="Subscribe" />
</form>
</div>
</div>
<div id="other-social-bar"> <!-- Other Social Bar -->
<ul class="other-follow">
<li class="my-rss">
<a rel="nofollow" title="RSS" href="http://feeds.feedburner.com/YOUR_FEED_ID" target="_blank">RSS Feed</a>
</li>
<li class="my-linkedin">
<a rel="nofollow" title="linkedin" href="#" target="_blank">LinkedIn</a>
</li>
</ul>
</div>
</div>
<!-- End Widget -->
</div>
<!--end of social widget-->

Once you have done this, click on Save and re-arrange the gadget where you want it to be displayed.

The things you need to change in the code are the placeholders YOUR_PAGE (your Facebook page name), YOUR_USERNAME (your Twitter username) and YOUR_FEED_ID (your FeedBurner feed ID). Make sure you do not modify the other parts, or the widget may stop working.

If the widget does not fit in your sidebar, change the width value (width:300px) in the #UT-mashable-bar CSS rule.

You should also check out our Blogger tips and tricks section for more cool tutorials. It will improve your blogging experience.

How to Add an All-in-One Social Network Widget in Blogger

How to add the all-in-one social network widget