Tuesday, August 6, 2013

Bitty Social Media Subscription Widget For Blogger

Author: Gagan Masoun
Bitty Social Media Subscription Widget For Blogger
A blog without subscription widget look like body without skin. Get thousands visitors daily if you need good ranking and Alexa for your blog. For this you need subscription widget on your blog or website. So! I’ve made amazing widget for you lovely readers. There are so many widgets available for bloggers but this is a extra ordinary which make your blog more professional and get five (Facebook, Twitter, RSS, YouTube and Google+) social subscription in one place. It has option for . This widget can attract more visitors to your Blog.

Recommend For You:

Live Demo

How To Add Social Subscription Widget to Blogger:

  • Go to Blogger Dashboard » Layout
  • Click On Add a Gadget
  • Choose HTML/JavaScript and Paste The Below Code In It.
<style type="text/css">
/*<!CDATA[*/
#soc-mega{width:320px;margin:auto;padding:0;}
.soc-googleplus {height: 57px;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=BlogsDaddy', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == "") {this.value = "Enter email address here";}" onfocus="if (this.value == "Enter email address here") {this.value = "";}" value="Enter email address here" type="text" />
<input type="hidden" value="BlogsDaddy" 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/BlogsDaddy' target='_blank'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzC7lepB8ajWJi23Q6eO8G1YHZOdiZju94XNW2xeO48pfEDVLXrwvf9XjVnxmWVrW22_3ltm7v03DjVAJ54mB0Gzc7ETvoPgeU58z332X8WaG8c4kZZKjbrwzlAGNkPXVktEPLggxZrWd-/s1600/rss.png" alt="Subcribe to our RSS feeds" /></a>
<a href='http://www.facebook.com/BlogsDaddy' target='_blank'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgQEP02VeH68ImIo5Kg5tkPIdEb9YrNJ05AIvYseQZxLBI37ysWp0zzd9cVAffZFacvoR2VYBQgMsT1IvsO3grr76i0yWetJmMleQNG2TkV4Z7XCQqoiDhy0OEoz__ku7Z6WSGWjQrLfJj/s1600/fbook.png" alt="Join Us on Facebook" /></a>
<a href='https://twitter.com/BlogsDaddy' target='_blank'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlmFyxshJ_4woWRuUX_ibTzPjGiEoVMlrkK9FXsP49uSa_iHVwfvSRC70imMDfnG73IQs8NmqqhsrDJSyVBRAhtBagHPN4rIUQkHKIk4y8APjuOzoKVr2OPmYtRnD3T5Ubg5raF4F_-85P/s1600/twit.png" alt="Follow us on Twitter" /></a>
<a href='https://plus.google.com/117100549673033253859' target='_blank'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ_9y1AgfeIoyfhQzFZAlL8yPkBPzbbCr4rXZFn57R5Zxw4sWFh1VBzaw1HQAE90K79qQRxSpuTbBj9K015D7oED6apyddB7h-q_5dNQDCkSIBiCHA6y97rDSu0U_NNr5RLvCOsfbtCec1/s1600/gplus.png" alt="Add to Circles" /></a>
<a href='http://www.youtube.com/user/5abiRaag' target='_blank'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnhXo0yj2cA7x_sKybeVA-mM1kP909v8Y_z2DxFrlVrGcZYNlyW9p6_6I3oW1z2ptPRhe9_E2K36KMlBKgjXh0qvWUCyNXcAzolElT6OC7eCphq4UYnghFj0Kk-GAgT0XJ7ft8bGzWhawv/s1600/ytube.png" alt="Watch us on Youtube"/></a>
</div>

<div class="soc-twitter">
     <a href="https://twitter.com/BlogsDaddy" class="twitter-follow-button" data-show-count="true" data-size="large">Follow @BlogsDaddy</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/106217413057730068740" 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.blogsdaddy.com/"></div>
 </div>

<div class="soc-facebook">
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FBlogsDaddy&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/117100549673033253859" data-width="320" data-height="69" data-theme="light"></div>
<span style=" float:right; padding:15px; margin-right:-10px;"><a href="http://www.blogsdaddy.com/2012/07/how-to-add-social-subscribe-with-css3.html" rel='nofollow'>Grab It</a></span>
 </div>
</div>

Customization

  • Replace Red Color Highlighted URL's & Username With Your Own URL's & Usernames.
  • Replace Green Color Highlighted Text With Your RSS Feed Username.
  • All Done! Now, Press Save Button. :)
Hope you guy like this widget. Please share this with your friend circle. Sharing is Caring <3. Stay Tuned :)

8 comments:

  1. Replies
    1. Hello Hammad,

      Thanks bro to like this widget. Make use of this widget to promote your blog. :)

      Delete
  2. OH MY GOD ! WHAT A BEAUTY
    Its the best social widget on the net i have ever seen
    Very creative One , Gagan

    Regards,
    Rizwan @ Blogger Kid

    ReplyDelete
    Replies
    1. Thanks For Your Feedback Rizwan. Keep Visiting For More Cool Articles

      Delete
  3. Hello Gagan Masoun

    Its Really Nice Widget In This Widget We Will Get All Widget Its Really Awesome Widget Thank You For Sharing


    Regards
    Akhil Swatantra

    ReplyDelete
    Replies
    1. I am so happy to see your comment here @Akhil. Stay tuned brother. :)

      God Bless..!!!

      Delete