Monday, March 4, 2013

3/04/2013 04:53:00 AM
semandseo social subscription buttons
Everyone want to include social subscription in their website or blog but mostly bloggers doesn’t know about how to add social subscription but now all bloggers problem are solve. How? Because this time I am providing you tips about social subscription. Have anyone ever imagined of merging all social subscription buttons into one figure? The core concept behind adding all the social buttons into one figure is to give several options to the users so, they can connect or subscribe to your site and blog with their all-time favorite social platform like Facebook, Twitter and Pinterest. The concept of connecting social buttons into one figure is not apart because there are various of Subscriptions widgets that work in the same fashion and I have seen different types of subscription buttons like Mashable and other style subscription buttons, Personally I like Mashable style subscription social button. Therefore, some subscription widgets are not good and don’t support all foremost social platforms. Today in this content we will learn about how to add advance Social Subscription Widget in Blogger.

This buttons is formulated to be used in the blogger sidebar of a website or blog. Therefore, anybody can use it according to their needs. We have shown a screenshot below, just review it. This subscription social button is highly strong and supports almost each and every single platform either it’s Android, iPhone, iPad and etc. This Social Subscription gadgets are free of cost and now every can get it because every bloggers get everything in just one widget. In this advance social widget, everyone get their all poplar social networking website such as Google +1/follow buttons, Facebook Like and Twitter Tweet/Follow buttons.

How To Add Advance Social Subscription Widget in Blogger and WordPress – Just Like Mashable Style Social Subscription Widget?

Step#1 Open Your Blogger Account
Step#2 Goto Your Blogger Layout
Step#3 Now Click on Add a Gadget
Step#4 Then Select Html/Java Script
Step#5 Pastes Your Social Subscription Button Code

<style>
/*--- MBL Advance Social Gadget --- */
#socialwid {
font-family:Arial, serif;
text-transform: uppercase;
font-weight:bold;
font-size:15px; color:white; text-align:center; margin-top:10px;}

#socialwid a {color:inherit;}

#mbladvance-sub div *{
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;}

#mbladvance-sub div #likered{
background-image:url(http://4.bp.blogspot.com/-O0Hpy4cRnvg/UO2oso7C2RI/AAAAAAAALKE/7kbHd9DlwcA/s1600/Sociala.png)!important;background-position:top left;
background-repeat:no-repeat;
height:242px;
width:300px;}
#mbladvance-sub div{
margin:0;
padding:0;
background-image:none!important;}

#mbladvance-sub{
margin-bottom:15px;
height:250px;
background-color:#ffffff}
</style>

<br />
<div class="block" id="mbladvance-sub" style="height: 257px!important;">
<div>
<div id="likered" style="height: 257px!important;">
<div style="height: 47px;">
</div>
<!--Google +1/Follow-->

<div style="border-bottom: none; border-top: none; border: 3px solid #8ec801; height: 54px; margin-top: 1px; overflow: hidden; width: 300px;">
<span style="display: inline-block; float: left; padding: 15px 0 0 23px; width: 75px;">
</span>
<div class="g-plusone" data-href="http://semandseo.blogspot.com">
</div>
<span style="display: inline-block; float: left; padding: 15px 0 0 23px; width: 75px;">
</span>

<span style="display: inline-block; float: right; width: 170px;">
<div class="g-plus" data-height="69" data-href="https://plus.google.com/u/0/105349855792673573254" data-width="170">
</div>
</span>
</div>
<!--Facebook Like-->
<br />
<div style="border-bottom: none; border-top: 1px solid #8ec801; border: 1px solid #8ec801; border: 3px solid #8ec801; padding: 10px 10px 0 10px;">
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/like.php?href=facebook.com%2Fsemandseonews&amp;send=false&amp;layout=standard&amp;width=280&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=36" style="border: none; height: 36px; overflow: hidden; width: 280px;"></iframe></div>
<!--Twitter Tweet/Follow-->
<br />
<div style="border-bottom: none; border-top: 1px solid #8ec801; border: 3px solid #8ec801; height: 50px; padding: 10px 0 5px 10px;">
<span style="display: inline-block; float: left; height: 35px; width: 195px;">
<a class="twitter-follow-button" data-show-count="false" data-size="large" href="http://twitter.com/semandseonews">Follow @semandseonews</a>
</span>

<span style="display: inline-block; float: left; line-height: 0; overflow: hidden; width: 78px;">
<a class="twitter-share-button" data-hashtags="design" data-show-count="false" data-size="large" data-text="The Best SEO and SEM Resource Blog" data-url="http://semandseo.blogspot.com" data-via="semandseonews" href="http://semandseo.blogspot.com/">Tweet</a>
</span>
 </div>
<!--Blogger--><br />
<div style="border-top: 1px solid #8ec801; border: 3px solid #8ec801; height: 54px; padding: 8px 0 5px 10px;">
<span style="display: inline-block; float: left; height: 30px; line-height: 0; margin-left: 16px; overflow: hidden; width: 120px;">
<a href="http://www.blogger.com/profile/02864238036070059765" target="_blank">
<img src="http://4.bp.blogspot.com/-hHcPJba-g4k/UOxPjTZDttI/AAAAAAAALDQ/RnlURlUJUJ4/s1600/Bloggerzzz.gif" style="margin-top: 2px;" width="110" /></a>
</span>

<!--Pinterest-->
<span style="display: inline-block; float: left; height: 50px; line-height: 0; margin-left: 20px; overflow: hidden; width: 111px;">
<a href="http://pinterest.com/semandseonews" target="_blank"><img src="http://2.bp.blogspot.com/-mKP2fHbgZyI/UOxOTpidswI/AAAAAAAALDA/_tpcxghaRfs/s1600/LogoRed.png" style="margin-top: 3px;" /></a>
<span style="display: inline-block; float: left; height: 50px; line-height: 0; margin-left: 20px; overflow: hidden; width: 1px;"></span></span><br />
<div id="socialwid">
</div>
<span style="display: inline-block; float: left; height: 50px; line-height: 0; margin-left: 20px; overflow: hidden; width: 111px;"><span style="display: inline-block; float: left; height: 50px; line-height: 0; margin-left: 20px; overflow: hidden; width: 1px;">
</span></span></div>
<script src="http://mybloggerlab.com/Scripts/advsub.js" type="text/javascript"></div>
</div>
</div>

Customization:
  1. Google +1/Follow URLs: Replace http://semandseo.blogspot with your Website URL. Also Replace https://plus.google.com/u/0/105349855792673573254 with your Google+ Profile or Page URL.
  2. Facebook Like Button: Replace semandseonews with your Facebook Page's username.
  3. Twitter Follow/Tweet: Replace http://twitter.com/semandseonews with your Twitter URL.
  4. Pinterest: Replace http://pinterest.com/semandseonews with your Pinterest URL.