Monday, July 1, 2013

Spiky Social Subscription Widget For Blogger

Author: Gagan Masoun
Spiky Social Subscription WidgetPresenting yet another spiky social media subscription widget that lets your visitors to subscribe to your RSS Feeds, follow you on twitter, Facebook, Pinterest, Linkedin, Google+ and YouTube! This widget attract your blog visitors and hence you can increase your social fan following. So what are you waiting for? Let's check out how add a new social subscription widget to Blogger. I have edited the widget to make it a perfect social subscription tool. Please see the screenshot demo below:

Spiky Social Subscription Widget

Add Spiky Social Subscription Widget

  • Go to Blogger Dashboard ›› Design ›› Page Elements.
  • Click Add A Gadget ›› In New Window, Select HTML/Javascript .
  • Copy The Code Given Below and Paste It Inside The Box.
  • Save The Gadget and Its Done
<style>.mfollowh
{
background-image:url('http://1.bp.blogspot.com/-lIPkxu2IaZg/UVxqSqV5_GI/AAAAAAAAEAk/p4zMn5ii0R4/s1600/FollowHeader+copy.png');
width:300px;
height:33px;
background-repeat: no-repeat;
}
.mframe01
{
background-image:url('http://1.bp.blogspot.com/-3y3fQgR--ls/UaIt2n8qTHI/AAAAAAAAERg/WduSXyIQFfQ/s1600/MFrame.png');
width:300px;
height:70px;
background-repeat: no-repeat;
}
.mframe03
{
margin-top: -6px;
}
.mframe04
{
background-image:url('http://1.bp.blogspot.com/-3y3fQgR--ls/UaIt2n8qTHI/AAAAAAAAERg/WduSXyIQFfQ/s1600/MFrame.png');
width:300px;
height:70px;
margin-top:-6px;
background-repeat: no-repeat;
}
.mframe05
{
background-image:url('http://1.bp.blogspot.com/-3y3fQgR--ls/UaIt2n8qTHI/AAAAAAAAERg/WduSXyIQFfQ/s1600/MFrame.png');
background-repeat: no-repeat;
}
#subbox {
background:url('http://1.bp.blogspot.com/-3y3fQgR--ls/UaIt2n8qTHI/AAAAAAAAERg/WduSXyIQFfQ/s1600/MFrame.png');
border: 1px solid #d2d2d2;
padding: 5px 30px 5px 10px;
width: 400px;
color: #838383;
font-style: italic;
height: 28px;
font-family: 'Lora', Arial, Helvetica, Verdana;
outline: none;
width: 140px;
margin: 0 5px 0 0;
}
#subbutton {
background-color: #005c91;
border: 3px solid #005c91;
cursor: pointer;
color: white;
width: 90px;
height: 38px;
margin: 0px;
font-size: 14px;
font-family: 'Open Sans', sans-serif;
font-weight: 700;
margin-right: 4px;
float: right;
transition: all 0.3s ease-out;
}
#subbutton:hover {
background-color: #292929;
border: 3px solid #292929;
}
.mframe07
{
background-image:url('http://4.bp.blogspot.com/-9BRew27QIr0/UaIuZ7Kn-_I/AAAAAAAAERw/Mz19fN1bz1A/s1600/MFrame1+(1)11.png');
background-repeat: no-repeat;
margin-top: -19px;
}</style>
<div class="mfollowh"></div>
<div class="mframe01">
<table border="0" margin="0px" rules="none" cellspacing="0px" cellpadding="0px">
<tbody><tr valign="top">
<td style="padding-top: 12px; padding-left: 12px" width="60px">
<a href="http://feeds.feedburner.com/BlogsDaddy?ref=sb" target="_blank" title="Subscribe via RSS"><img src="http://cdn1.iconfinder.com/data/icons/minimalist-social-media-icons-by-design-bolts/48/RSS.png" alt="RSS" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=50" /></a>
</td><td style="padding-top: 12px" width="60px">
<a href="http://twitter.com/intent/user?screen_name=BlogsDaddy&amp;ref=sb" target="_blank" title="Follow on Twitter"><img src="http://cdn1.iconfinder.com/data/icons/minimalist-social-media-icons-by-design-bolts/48/Twitter.png" alt="Twitter" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=50" style="opacity: 1;" /></a>
</td><td style="padding-top: 12px" width="60x">
<a href="http://www.linkedin.com/company/Aagman?ref=sb" target="_blank" title="Follow on LinkedIn"><img src="http://cdn1.iconfinder.com/data/icons/minimalist-social-media-icons-by-design-bolts/48/Linkedin.png" alt="LinkedIn" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=50" /></a>
</td><td style="padding-top: 12px" width="60x">
<a href="http://pinterest.com/gaganmasoun?ref=sb" target="_blank" title="Follow on Pinterest"><img src="http://cdn1.iconfinder.com/data/icons/minimalist-social-media-icons-by-design-bolts/48/Pinterest.png" alt="Pinterest" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=50" /></a>
</td><td style="padding-top: 12px" width="60px">
<a href="http://www.youtube.com/5abiRaag?ref=sb" target="_blank" title="Subscribe on YouTube"><img src="http://cdn1.iconfinder.com/data/icons/minimalist-social-media-icons-by-design-bolts/48/YouTube.png" alt="YouTube" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=50" /></a>
</td></tr></tbody></table>
</div>
<div align="center" class="*mframe02">
<fb:like-box href="http://www.facebook.com/BlogsDaddy" width="300" height="185" *style="padding-top:2px; padding-bottom:8px;" show_faces="true" border_color="#dcdcdc" stream="false" header="false" fb-xfbml-state="rendered" class="fb_iframe_widget"><span style="height: 185px; width: 300px;"><iframe id="f38cfbee68" name="fc28b09b" scrolling="no" style="border: none; overflow: hidden; height: 185px; width: 300px;" class="fb_ltr" src="http://www.facebook.com/plugins/likebox.php?api_key=171399682920450&amp;locale=en_US&amp;height=185&amp;header=false&amp;show_faces=true&amp;stream=false&amp;width=300&amp;href=http%3A%2F%2Fwww.facebook.com%2FBlogsDaddy&amp;colorscheme=light&amp;border_color=%23dcdcdc&amp;show_border=true"></iframe></span></fb:like-box>
<div align="left" class="mframe04">
<div style="padding:18px 0 5px 10px;">
<a href="https://twitter.com/BlogsDaddy" class="twitter-follow-button" data-show-count="true" data-size="large">Follow @BlogsDaddy</a>
<script>!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></div>
 </div>
<div class="mframe05">
<g:plus href="http://plus.google.com/106217413057730068740" width="300" height="131" theme="light"/></g:plus>
</div></div>
<div class="mframe07">
<div style="padding:18px 0 13px 10px;">
<form action="http://feedburner.google.com/fb/a/mailverify" id="subscribe" method="post" onsubmit="window.open( 'http://feedburner.google.com/fb/a/mailverify?uri=BlogsDaddy', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input id="subbox" name="email" onblur="if ( this.value == &#39;&#39; ) { this.value = &#39;Enter your email address...&#39;; }" onfocus="if ( this.value == &#39;Enter your email address...&#39;) { this.value = &#39;&#39;; }" type="text" value="Enter your email address..." />
<input name="uri" type="hidden" value="BlogsDaddy" />
<input name="loc" type="hidden" value="en_US" />
<input id="subbutton" type="submit" value="Subscribe!" />
</form></div></div>

Customization

The social and RSS feed links are highlighted in pink color, you need to change these to your own. If you have any questions related to Spiky Social Subscription widget then do not hesitate to ask via comments below. Stay Blessed :)

Author
Author - is the owner of Blogs Daddy Blog. Gagan lives in India, has been blogging since 2010 and writing Blogs Daddy Blog since 2011.You can follow him on twitter @BlogsDaddyYou can also follow him on Google+.

4 comments:

  1. bro can u tell me how to add readers button.....nice tutorial...

    Regards
    Ariful Haque

    ReplyDelete
  2. bro i cant added youtube button. i want to add stumbleupon button please where is the change need....thnx

    Regards
    Ariful Haque

    ReplyDelete
    Replies
    1. Which button you want to remove for adding stumbleupon button?

      Delete
  3. nice one i like it very much
    http://technologyfreaksout.blogspot.in/

    ReplyDelete