All In One Social Subscription Widget For Blogger

So here I am sharing a new all in one social subscription widget for blogger which is quite appealing and compact. Social subscription links are most important for any website to bring much social points to your social accounts. It never been easier to do so but adding code to the website or blog can bring much positive response to your site. 

As you can see this widget contains links to your Google+ Follow Button and Recommendation Button, Facebook Like Button, Twitter Follow Button, RSS, Twitter and Google Plus page links and most importantly an attractive subscription form that will further increase the number of your Email subscribers.

How To Add Social Subscription Widget to Blogger?

STEP #1: Log on to Blogger.

STEP #2: Go to Dashboard > Layout

STEP #3: Click on Add a Gadget

STEP #4: Select HTML/Java Script widget

STEP #5: Paste the following code inside it

<style type="text/css">
/*<!CDATA[*/
#soc-mega{width:320px;margin:auto;padding:0;}
.soc-googleplus {height: 51px;width:320px;margin-top:-2px;}
.soc-facebook {background:#ffffff;border: 1px solid #DCDCDC;margin-top: -2px;padding: 5px 10px;}
.soc-gplusone {background-color: #ffffff;border: 1px solid #d8e6eb;border-top: 1px solid white;font-size: .87em;color: black;padding: 9px 0 0 11px;line-height: 24px;height:30px;}
.soc-gplusone span {display: inline-block;vertical-align: middle;height: 20px;margin-top: -17px;font-size: 14px;font-family: "Arial","Helvetica",sans-serif; font-weight: bold;}
.soc-twitter {background-color: #ffffff;border: 1px solid #c7dbe2;border-top: 0;}
.soc-twitter a.twitter-follow-button {display: block;}
.soc-twitter iframe {margin: 9px 11px;}
.soc-email{
background:#444444 ;
width:100%;
padding:10px 0 10px 0;
float:left;
font-size:18px;
text-align:center;
font-weight:bold;
margin:0 0 20px 0;
color:#ffffff;
}
.soc-emailsubmit{
background:#E98313;
border:1px solid #E98313;
cursor:pointer;
color:#fff;
padding:3px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font:14px sans-serif;
}
.soc-emailsubmit:hover{
background:#686B6C;
border:1px solid #686B6C;
}
.textarea{
padding:2px;
margin:6px 2px 6px 2px;
background:#f9f9f9;
border:1px solid #ccc;
resize:none;
box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px; 
width:170px;
color:#666;}
.social-widget
{
width:318px;
border:1px solid #d7d7d7;
}
.social-widget img
{
padding:0px 15px 2px 2px;
}
/*]]>*/
</style>

<div id="soc-mega">
<div class="soc-email">
Get free tutorials via email
<form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="http://feedburner.google.com/fb/a/mailverify?uri=WIKITECHNOL', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" class="textarea" name="email" value='Enter email address here' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter email address here&quot;;}' onfocus='if (this.value == &quot;Enter email address here&quot;) {this.value = &quot;&quot;;}' />
<input type="hidden" value="WIKITECHNOL" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="soc-emailsubmit" value="Submit" type="submit" />
</form>
</div>
<div class="social-widget" align="center">
<a href='http://feeds.feedburner.com/WIKITECHNOL' target='_blank'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPWxTyWjnkbswafrPAxo2-8KACWRiN9r3DrEd_D38_qn31MJcFfGBY1ss1lDQlBP_US9rw3VfaIvmab0fOy6sbBhQQ0VYiOBnYVXHPZzumkOe1OGNLiuRbirZJMeLTlPspJRBUKCKd5Tei/s1600/rss.png" alt="Subcribe to our RSS feeds" /></a>
<a href='http://www.facebook.com/WIKITECHNOL' target='_blank'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD1U2LBmDSqNhyRiGqDbFxlOF0jD5SeBnUdtuZvg3D_Xy4S6snFJ5f9K2nkeRpOqdAx_dhYFht5y1YsFHTFKCeqyyAV9TWzJziST4NmuXhGegoZfgLAiLFVIEuWm51Obqb4n2ChoaZ-tsb/s1600/fbook.png" alt="Join Us on Facebook" /></a>
<a href='https://twitter.com/WIKITECHNOL' target='_blank'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIDY6P_LVWUnmz570Im9Y9_OvSN5RCdpV8gqM8q5qcOY_Tem5X-ZUtI1DwfqP9NIbbhFHpKsBdwM6j_eC5Kd_ohd0CjHtKrhK7cvfb-LkmtZhUk0qdR0f2I3oxE8bWBAFXkS566pnGklDw/s1600/twit.png" alt="Follow us on Twitter" /></a>
<a href='https://plus.google.com/107244857879006042054' target='_blank'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw6vwJ0Zyp6S6i51j16UC1rlKJMDdB0fSOL42JMsjI0TMkYtGHDLSLbL_ohoTCLvxVrhUCC8PxsSgOXRUE_Uix7pZki6SO1NC7MTdaUK-yFBF8vLfgqWSBlWSA0M1VxCgmXeNBriOZaZIU/s1600/gplus.png" alt="Add to Circles" /></a>
<a href='http://www.youtube.com/WIKITECHNOL' target='_blank'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhliUlj0ysGixyyDMj9nwN_WpR7oubVRhuv5zSpzu_b4CQmbYAXrIp3rY09pI1LJ22HkjoDEDalYii6JoM7ug6FJre-don4ZFuvj3WxOi52Z1QK97MnAgJJEgXBzwEaOgKeZsUPby1lx0vw/s1600/ytube.png" alt="Watch us on Youtube"/></a>
</div>

<div class="soc-twitter">
     <a href="https://twitter.com/WIKITECHNOL" class="twitter-follow-button" data-show-count="true" data-size="large">Follow @WIKITECHNOL</a>
     <script type="text/javascript">/*<![CDATA[*/!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");/*]]>*/</script>
<br/>
 </div>

<div class="soc-googleplus">
     <script type="text/javascript">
  /*<![CDATA[*/
  window.___gcfg = {lang: 'en'};
  (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>
     <div class="g-plus" data-href="https://plus.google.com/107244857879006042054" data-width="320" data-height="69" data-theme="light"></div>
</div>

<div class="soc-gplusone">
     <script type="text/javascript">/*<![CDATA[*/
       (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>
          <span>Recommend On Google</span>    <div class="g-plusone" data-size="large" data-href="http://www.digitaltechinspiration.com/"></div>
 </div>

<div class="soc-facebook">
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FWIKITECHNOL&amp;width=300&amp;height=200&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;show_border=false&amp;header=false&amp;appId=136993703047102" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:155px;" allowTransparency="true"></iframe>
 </div>

  <div class="soc-googleplus">
     <script type="text/javascript">
  /*<![CDATA[*/
  window.___gcfg = {lang: 'en'};
  (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>
     <div class="g-plus" data-href="https://plus.google.com/103576187731291423463" data-width="320" data-height="69" data-theme="light"></div>
<span style="float:right; padding:10px; margin-right:-10px; font-size:10px;font-family: "arial","helvetica",sans-serif;"><a href="http://www.digitaltechinspiration.com/">.</a></span>
</div>
</div>

Customization:

• Replace http://feeds.feedburner.com/WIKITECHNOL with your feedburner link.
• Replace WIKITECHNOL with your Facebook username.
• Replace WIKITECHNOL with your twitter username.
• Replace https://plus.google.com/107244857879006042054 with your Google Plus page link.
• Replace https://plus.google.com/103576187731291423463 with your Google Plus profile link.   
• Replace http://www.youtube.com/WIKITECHNOL with your YouTube link.
• Replace http://www.digitaltechinspiration.com/ with your blog/website address.

STEP #6: Now Save the template. 

So execute steps correctly and you are done. Head to your blog and check the trick executed. So don't forget us. We will only survive with your generosity. Like, Share, Follow and Subscribe. If you are facing any problem with implementing these codes just comment below for help. Stay tuned for more posts.

Tweet

Comments

• share ▼
  • tweet
  • share
  • comment
  • plus
• subscribe ▼
  • rss
  • newsletter
  • faq
• connect ▼
  • follow
  • fan page
  • youtube
  • google