How To Add Mashable Style And Advanced Social Subscription Widget In Blogger And WordPress

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 likeFacebook, 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 asGoogle +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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaWQZAPswk3gv_Rh0VLUwR10GODI83WX2CFLiMd9wPAy3Pf7B_npvNQGweK1QY-gJkApiolkra5f4cNtRq0bF6UuQ8xvYzU8N1hL0zCSQhEd_YKe951ECE6RvjLCaLSbAKNMTr1C1Z0xI/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSRMCGmeAw3uQletq_YwNYiaGlk-QTji7B3QXXdkQSzs6qzmNBsz-rnN-6aR9g7NSraKIAbBAm2CCLG7RNTSySCwEWp0vrjr4ns0uVDkuCK275fmfHcHRbqj2ev-0F1puyy_uohMovPzg/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigq0rjGLuNIrrTIhRQxX-_EBc0yu6_Ei0jVNmHNS9kuIx5hxI9rZnhCC65BSLYS9bz61FULP65QIXKCplz2tZ1TPXfxRbn1euIZh2kCBCUFIsMktL5PbJrSEjCV3JaUT4hO0UY7JQ0IUo/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.

How to Insert a Twitter Feeds Blogger Widget in Blogger?

Adding A Twitter Widget To Your Sidebar

Twitter is one among the most high-powered and extremely prevailing social networkingportal on the planet. At TipTechNews.com, we continually using our twitter profile for relationship, aiding members to fix their Blogger specific difficulties as well as does quite a lot dialogue. Just lately, we got a large amount of queries from our users requesting a way that the way to add Twitter Feeds in Blogger. Fortunately, Twitter itself offers an incorporated widget which you may conveniently be included your blogger blog. In this post, we are able to help you how to add Twitter Feeds Widget in Blogger?

The initial thing you should do is always to reach the Twitter Widget page. When you find yourself already signed within your account, then it will reveal the specific overview of the widget on your own account. There are numerous ways for modification you can easily set the dimension, pattern, color and design of the widget. By default, the widget rapidly takes shape and sets its widget, so you will almost always be in the risk-free hands. When things are all done press "Create Widget” button and go to the second step.

If anyone want to add the user timeline feeds widget to blogger or other blogger platform then add the widget code to blogger HTML code. Now go to Blogger.com >> Layout >> Add a Gadget >> Add HTML/JavaScript. Now paste the widget code inside the HTML Box, when everything is Okay. Press “Save” button to end. 

At this point you will note the widget on your website. If it would not discover any problems, and then congrats the twitter feed widget is correctly added to your Blogger sidebar. Nonetheless, you can even add this gadget in any section of your site, check out Post editor and give it a shot.

This is simply not it just because Twitter also gives 3 unique variations of Gadgets for instance timeline of your favorite tweets, Hash tag and search keyword. If you would like add them, then they are essentially the similar.

The advantages of employing Twitter recent tweets widget is not limited by just showing the recent tweets. Moreover it displays button that enables your visitors to follow your accountwith just one click. Aside from that, it also enables your visitors to talk about you in a tweet straight from your website.

With a little luck this little but usefully widget would likely aid you in achieving some kinds of social contact. When you have any kind of question or query related to Twitter then, you should not hesitate to place a comment below we will try to help you by your problems.