How To Add Social Subscription Box Widget To Blogger Blog?

Nowadays Social Media are increasing very fast and day by day and it becomes a very important part of our site/blog. With Social Media you can drive more traffic to your blog and you can redirect your visitors to your social networks fan pages.So today i post a very attractive and new social subscription box with Google+, Facebook, Twitter and RSS Feed Buttons. It looks so cool on any template and make attractive your blog. We also use this widget for our blog and you can see it on right sidebar. This widget is perfectly suits to your blog and it is also easy to customize. In this post you will learn how you can add this to your blog and get more traffic to your blog and can make your blog cool. See below post and learn this.You have to do some simple steps and you can add this cool widget to your blog.

DEMO

Method To Add This Widget:-

• Open Blogger.com and Login To Your Account.
• Go To Layout And Click On Add a Gadget.
• Open HTML/JavaScripts.
• Now Copy The Below Given Code And Paste It Into The Opened Window And Click On Save.

<style>  #socialnetworking {     border: 1px solid #ebebeb;     width: 280px; }  .fb-likebox {     padding: 10px 10px 0 10px;     border-bottom: 1px solid #ebebeb; }  .googleplus {     background: #787c7b;     border-top: 1px solid white;     border-bottom: 1px solid #ebebeb;     font-size: 12px;     color: #000;     padding: 9px 11px;     line-height: 1px;     font-family: Verdana, Geneva, sans-serif; }  .googleplus span {     color: #000;     font-size: 11px;     position: absolute;     margin: 9px 70px;     width: 280px; }  #widgetbox {     background: #EBEBEB;     padding: 2px 8px 2px 3px;     text-align: right;     border-image: initial; }  #widgetbox .author-credit a {     font-size: 10px;     font-weight: bold;     text-shadow: 1px 1px white;     color: #1E598E;     text-decoration: none; }  .g-plusone {     float: left; }  .twitter {     background: #b1dff5;     border-top: 1px solid #fff;     padding: 10px; }  .fb {     background: #0a94d4;     border-top: 1px solid white;     border-bottom: 1px solid #ebebeb;     font-size: 12px;     color: #000;     padding: 9px 11px;     line-height: 1px;     font-family: Verdana, Geneva, sans-serif; }  .fb span {     color: #000;     font-size: 11px;     position: absolute;     margin: -12px 100px;     width: 280px; }  .pterest {     background: #EFF5FB;     border-bottom: 1px solid #ebebeb;     font-size: 12px;     color: #000;     padding: 9px 11px;     line-height: 1px;     font-family: Verdana, Geneva, sans-serif;     border-top: 1px solid #ddd; }  #email-news-subscribe .email-box {     padding: 5px 10px;     font-family: "Arial","Helvetica",sans-serif;     border-top: 0;     border-image: initial;     height: 35px;     background: #fbfbfb;     width: 260px; }  #email-news-subscribe .email-box input.email {     background: #FFFFFF;     border: 1px solid #dedede;     color: #999;     padding: 7px 10px 8px 10px;     -moz-border-radius: 3px;     -webkit-border-radius: 3px;     -o-border-radius: 3px;     -ms-border-radius: 3px;     -khtml-border-radius: 3px;     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: -moz-linear-gradient(center top,#afafaf 0,#FF9B00 100%);     background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FFCA00),color-stop(1,#FF9B00));     background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);     -pie-background: linear-gradient(270deg,#ffca00,#ff9b00);     font-family: "Arial","Helvetica",sans-serif;     border-radius: 3px;     -moz-border-radius: 3px;     -webkit-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: -moz-linear-gradient(top,#ffda4d,#ff9b00);     background-image: -webkit-gradient(linear,left top,left bottom,from(#ffda4d),to(#ff9b00));     filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb);     outline: 0;     -moz-box-shadow: 0 0 3px #999;     -webkit-box-shadow: 0 0 3px #999;     box-shadow: 0 0 3px #999          background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffda4d),color-stop(1,#ff9b00));     background: -moz-linear-gradient(center top,#ffda4d 0,#ff9b00 100%);     -pie-background: linear-gradient(270deg,#ffda4d,#ff9b00);     border-radius: 3px;     -moz-border-radius: 3px;     -webkit-border-radius: 3px;     border: 1px solid #cc7c00;     color: #FFFFFF;     text-shadow: #d08d00 1px 1px 0 }    </style>    <div id="socialnetworking">  <!-- Begin Widget -->  <div class="fb-likebox">   <!-- Facebook -->   <center>   <a style="margin-right: 10px;" rel="me" href="http://profiles.google.com/111105864615990660621" target="_blank">   <img src="http://cdn1.iconfinder.com/data/icons/inside/PNG/048x048/icontexto-inside-google.png" /></a>   <a style="margin-right: 10px;" href="http://www.facebook.com/TrickyTricksOnly" target="_blank" rel="nofollow">   <img src="http://cdn1.iconfinder.com/data/icons/inside/PNG/048x048/icontexto-inside-facebook.png" /></a>   <a style="margin-right: 10px;" href="http://feeds2.feedburner.com/TrickyTricksOnly" target="_blank" rel="nofollow">   <img src="http://cdn1.iconfinder.com/data/icons/inside/PNG/048x048/icontexto-inside-rss.png" /></a>   <a style="margin-right: 10px;" href="http://twitter.com/#!/TrickyTrickOnly" target="_blank" rel="nofollow">   <img src="http://cdn1.iconfinder.com/data/icons/inside/PNG/048x048/icontexto-inside-twitter.png" /></a>   </center>  </div>  <div class="googleplus">   <span><font><font color="white">Recommend Us On Google </font></font></span>   <!-- GooglePlus -->   <!-- Place this tag where you want the  1 button to render -->   <g:plusone size="medium"></g:plusone>   <!-- Place this render call where appropriate -->   <script type="text/javascript">   (function() {     var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;     po.src = 'https://apis.google.com/js/plusone.js';     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);   })(); </script>   <script type="text/javascript">   gapi.plusone.render   (    'plusone-div',    {     "size": "medium",     "count": "true"    }   );   </script> </div> <div class="fb"> <!-- Twitter --> <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Ffacebook.com%2FTrickyTricksOnly&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font=verdana&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowtransparency="true"> </iframe> <span><font color="white">Like Us On Facebook</font></span> </div> <div class="twitter"> <!-- Twitter --> <iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.1335513764.html#_=1335528101755&amp;id=twitter-widget-0&amp;lang=en&amp;screen_name=TrickyTrickOnly&amp;show_count=true&amp;show_screen_name=true&amp;size=m" class="twitter-follow-button" style="width: 244px; height: 20px; " title="Twitter Follow Button"> </iframe> <script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script> </div> <div id="email-news-subscribe"> <!-- Email Subscribe --> <div class="email-box">  <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=TrickyTricksOnly', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">   <input class="email" type="text" style="width: 140px; font-size: 12px;" id="email" name="email" value="Enter Your Email here.." onfocus="if(this.value==this.defaultValue)this.value=&#39;&#39;;" onblur="if(this.value==&#39;&#39;)this.value=this.defaultValue;"/>   <input type="hidden" value="TrickyTricksOnly" name="uri"/>   <input type="hidden" name="loc" value="en_US"/>   <input class="subscribe" name="commit" type="submit" value="Subscribe"/>  </form> </div> </div> <!-- End Widget --> </div>

• Now Replace The All Highlighted Names With Your One. 

After Doing This All Simple Steps You Can Access The Social Subscription Box Widget And Place It To Anywhere. We Placed It On Right Sidebar. If You Like This Post Then Share It With Your Friends And Also Comment Something Below.

You Might Also Like:-

• The Best Free Responsive Blogger Templates.
• How To Add Facebook Like Box To Blogger Blog?
• Facebook Shortcut Keys To Use Facebook Faster.

Share it Please

Tweet

Do you Like this Article?

Get Subscribe to Free Email Updates!!

*Your email address will not be shared with anyone.