How To Add Multiple Social Sharing Widget to Blogger

Add Tool

Add Multiple Social Sharing Widget to Blogger


Add Multiple Social Sharing Widget to Blogger

Social Media have made our business and entertainment spread to each and every age of the world, it have been really helpful for those who need more and more readers to their websites and business stuff, We have personally experienced our half traffic from our subscribers and followers,The Social Sharing & Subscription Widget contains each and every important widgets in it, it have designed to be place just below you blogger post, it contains Like Buttons and subscription box and Facebook Like Box Widget,it have been designed by MBT, all the credit goes to them,soon we will post on the same Multiple Social Sharing & Subscription Widget which will be more interesting and attractive to your readers.

Interesting Features:

The widget contains many interesting feature in it, it has been designed for all blogger and other templates it automatically adopted the color of the template which makes it even more interesting ,

  1. Contains Facebook Like Box With Thumbnail image,
  2. Contains Facebook Like Button,
  3. Twitter Followers Button, And Google Plus,
  4. Email Suscribtion Box with social media followers links,

Adding The Widget In Blogger:

First of all backup your template,
Now Move to----> Template and-------> EDIT HTML ,
Press (Ctrl F) to find the below Following Code,

<data:post.body/>

The above code may appear many times in the template but we need to paste just below the first accordance of the above code.

<!--No Ordinary Social Subscription Widget-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
.tbibox {
background: #fff;
border: 1px solid #ddd;
height: 360px;
margin: 10px auto;
padding: 10px;
width: 572px;
-webkit-border-radius: 10px;
border-radius: 10px;
}

.tbisubscribe {
border: 1px solid #D3D3D3;
padding: 8px;
width: 300px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

.tbisubscribe:hover {

-moz-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);

-webkit-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);

box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);

}

.tbimailbox {

border: 1px solid #D3D3D3;

-webkit-border-radius: 4px;

border-radius: 4px;

-moz-box-shadow: 1px 1px 1px 1px rgba(255, 172, 84, 0.4) inset;

-webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;

box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;

color: #666;

font: 14px "trebuchet ms", sans-serif;

padding: 7px 15px;

width: 160px;

-webkit-transition: all 0.5s ease-in-out;

-moz-transition: all 0.5s ease-in-out;

-ms-transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-in-out;

}

.tbimailbox:hover {

-webkit-box-shadow: none;

box-shadow: none;

-webkit-transition: all 0.5s ease-in-out;

-moz-transition: all 0.5s ease-in-out;

-ms-transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-in-out;

}

.tbisubmit {

font: bold 12px Tahoma, Geneva, sans-serif;

font-style: normal;

color: #ffffff;

background: #ff5714;

border: 0px solid #ffffff;

text-shadow: 0px -1px 1px #222222;

box-shadow: 2px 2px 5px #000000;

-moz-box-shadow: 2px 2px 5px #000000;

-webkit-box-shadow: 2px 2px 5px #000000;

border-radius: 10px 10px 10px 10px;

-moz-border-radius: 10px 10px 10px 10px;

-webkit-border-radius: 10px 10px 10px 10px;

padding: 8px 15px;

cursor: pointer;

margin: 0 auto;

}

.tbisubmit:active {

cursor: pointer;

position: relative;

top: 2px;

}

.tbisubmit::-moz-focus-inner {

border: 0;

padding: 0;

margin: 0;

}

.tbisharebox {

border: 1px solid #D3D3D3;

margin: -157px 0 0 330px;

padding: 8px;

width: 225px;

-webkit-transition: all 0.5s ease-in-out;

-moz-transition: all 0.5s ease-in-out;

-ms-transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-in-out;

}

.tbisharebox:hover {

-moz-box-shadow: 1px 1px 2px #CCC inset;

-webkit-box-shadow: inset 1px 1px 55px 1px rgba(249, 215, 126, 1);

box-shadow: inset 1px 1px 55px 1px rgba(249, 215, 126, 1);

-webkit-transition: all 0.5s ease-in-out;

-moz-transition: all 0.5s ease-in-out;

-ms-transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-in-out;

}

</style>

<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' />

<div class='tbibox'>

<div class='tbisubscribe'>

<div style='color: #666666; font-weight: bold; font: 22px Oswald, cursive; margin: 0px 0px 10px 15px;'>Get Free Updates in your Inbox</div>

<div style='margin: 10px 0 0 6px;'>

<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform'

method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=MyBloggerRecipes&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true'

style='margin: 0pt;' target='popupwindow'>

<input name='uri' type='hidden' value='MyBloggerRecipes' />

<input name='loc' type='hidden' value='en_US' />

<input class='tbimailbox' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}'

onfocus='if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}'

type='text' value='Enter your email...' />

<input alt='' class='tbisubmit' title='' type='submit' value='Subscribe'/>

</form>

</div>

<div style='border: none; color: #666666; font: 22px Oswald, cursive; margin: 25px 0 0 5px;'>Follow us on:</div>

<div style='margin: -32px 0 0 120px;'>

<a href='FACEBOOK Profile URL' target='_blank' title='Join us on Facebook'><img src='https://lh5.googleusercontent.com/-hbgtzN6sfys/UC_Rt4HCCUI/AAAAAAAAGI4/sNVfSO9oubo/s32/facebook500.png' alt='facebook'/></a>

<a href='TWITTER URL' rel='nofollow' target='_blank'

title='Follow us on Twitter'><img src='https://lh5.googleusercontent.com/-cBjXpo4xiHA/UC_RvG1JfwI/AAAAAAAAGJI/cQF9OReQCog/s32/twitter.png' alt='twitter'/></a>

<a href='GOOGLE PLuse URL' rel='nofollow' target='_blank'

title='Follow us on Google+'><img src='https://lh4.googleusercontent.com/-dzFCD4A8UqU/UC_Rtz0xGDI/AAAAAAAAGI8/iz4dYkboPZ0/s32/googleplus-revised.png' alt='gplus'/></a>

<a href='PINTEREST URL' rel='nofollow' target='_blank'

title='Follow us on Pinterest'><img src='https://lh3.googleusercontent.com/-VHXyLvPpEBg/UC_Rt63AIdI/AAAAAAAAGJA/xMdGrSFINE4/s32/pinterest.png' alt='pinterest'/></a>

<a href='RSS URL' rel='nofollow' target='_blank'

title='Subscribe to RSS'><img src='https://lh6.googleusercontent.com/-14vjEhUXrMk/UC_RuxvrOgI/AAAAAAAAGJQ/OQT6x8yxTXY/s32/rss.png' alt='rss'/></a>

</div>

</div>

<div class='tbisharebox'>

<script type='text/javascript'>

var switchTo5x = true;

</script>

<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>

<script type='text/javascript'>

stLight.options({

onhover: false

});

</script>

<div style='margin: 5px 5px;'>

<span class='st_fblike_hcount' displaytext=''></span>

</div>

<div style='margin: -30px -20px 0 0; float: right;'>

<a href='http://twitter.com/share' rel='nofollow' class='twitter-share-button'

expr:data-url='data:post.canonicalUrl' expr:data-text='data:post.title'

data-count='horizontal'  data-lang='en'></a>

<b:if cond='data:post.isFirstPost'>

<script type='text/javascript' src='http://platform.twitter.com/widgets.js'></script>

</b:if>

</div>

<div class='addthis_toolbox addthis_default_style' style='margin: 10px 0 12px 85px;'>

<a class='addthis_counter'></a>

<script type='text/javascript' src='http://s7.addthis.com/js/250/addthis_widget.js'></script>

</div>

<div style='margin: 5px 5px;'>

<su:badge layout='1'></su:badge>

<script type='text/javascript'>

(function () {

var li = document.createElement('script');

li.type = 'text/javascript';

li.async = true;

li.src = ('https:' == document.location.protocol ? 'https:' : 'http:') + '//platform.stumbleupon.com/1/widgets.js';

var s = document.getElementsByTagName('script')[0];

s.parentNode.insertBefore(li, s);

})();

</script>

</div>

</div>

<div style='float: right; margin: -40px -5px 0 0;'>

<div class='g-plusone' data-size='medium' expr:data-href='data:post.url'></div>

<script type='text/javascript'>

(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>

<div style='margin-top: 20px;'>

<iframe allowTransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fbloggertricks&amp;width=570&amp;colorscheme=light&amp; show_faces=true&amp;stream=false&amp;header=false&amp;height=180'

style='border:none; overflow:hidden; width:570px; height:180px;' />

</div>

</div>

</b:if>

<!--No Ordinary Social Subscription Widget-->

Now we have successfully added the widget in blogger but we are not done yet,Replace the Highlighted Words with your social media profile links,

  1. Replace MyBloggerRecipes with your (feed burner) FEED TITLE.
  2. Replace FACEBOOK Profile URL With your profile Link,
  3. Replace TWITTER URL  With Twitter Profile LINK,
  4. Replace GOOGLE Pluse URL With Google Profile URL,
  5. Replace PINTEREST URL With Pinteress URL,
  6. Replace RSS URL with your RSS Feed Link,
  • Now for Facebook like box follow the below few steps
  1. Copy your Facebook fan page URL (Do not include http://)
  2. Replace all the back slashes ( / ) with %2F
  3. Now replace www.facebook.com%2Fpages%2FMy-Blogger-Recipes%2F1423411951219788 with your URL you achieved just now.

Tags: social share buttons, social media share buttons, social share buttons, easy social share buttons, add social sharing buttons to your website
Payza

About Masum Billah

Add Multiple Social Sharing Widget to Blogger 1stWebSuite website seo tool is a free website ranking tool site provides a lot of on page and off page seo useful tools for you. On this site, we have a large number of website ranking tools


SIGN UP TO GET UPDATE TO YOUR INBOX




Discuss about: How To Add Multiple Social Sharing Widget to Blogger


adf.ly