Wednesday 9 April 2014
Add an Outstanding Subscription and Social Share Widget to Blogger
Do you like this ?
How to Add Social Sharing bar or widget to Blogspot blog. Here is a tips to add Share widget to blogger website. This widget is really Stunning and beautifull. This is such an awesome gadgets for blog, with many features like Subscription box, Facebook like box, Social Sharing buttons, Follow us. This widget is really necessary for your blog and to promote your blog, this looks really cool. I will show you simple tutorial for adding this widgets.
How To Add this Outstanding Widget:
Adding this widget really simple, Just copy the below Code and paste it wherever you want the widgets to appear. But we consider mainly sidebar, but as it's width quite long.
SO better Add WIDGET this Below Post.
Note : you can find this code 3 times, paste the below code just below/After the 2nd <data:post.body/> If this do not works try below other <data:post.body/>
If you want this widget to appear above post or below post tile paste the code just above/before <data:post.body/>
Now Time for Some Customization:
How To Add this Outstanding Widget:
Adding this widget really simple, Just copy the below Code and paste it wherever you want the widgets to appear. But we consider mainly sidebar, but as it's width quite long.
SO better Add WIDGET this Below Post.
- First go to Blogger > Template >Edit Html
- and search for this code <data:post.body/>
Note : you can find this code 3 times, paste the below code just below/After the 2nd <data:post.body/> If this do not works try below other <data:post.body/>
If you want this widget to appear above post or below post tile paste the code just above/before <data:post.body/>
- Paste the Below code just AFTER/BELOW <data:post.body/>
<!--No Ordinary Social Subscription Widget-->
<b:if cond='data:blog.pageType == "item"'>
<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('http://feedburner.google.com/fb/a/mailverify?uri=LiveMecca', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true'
style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='LiveMecca' />
<input name='loc' type='hidden' value='en_US' />
<input class='tbimailbox' name='email' onblur='if (this.value == "") {this.value = "Enter your email...";}'
onfocus='if (this.value == "Enter your email...") {this.value = ""}'
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='https://www.facebook.com/Mecca.Live' target='_blank' title='Join us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJFw44h2PQ9qAzVpcZ-f2CooSm21OYRdUd6u8YzsCU8ir7xydwuJHKIDXFusgi3vEsiiK5fNSuXVsq2EenE9JiiIIUosobN38LNT4tZkO7BQ3CvyjznthyeB-WcEeq5aH6OeyG3ElSvzY/s32/facebook500.png' alt='facebook'/></a>
<a href='https://twitter.com/LiveMeccaBD' rel='nofollow' target='_blank'
title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsBsVQzqgULfsuLVDaJgcSwdcE8Vv7_xl5LvZMr9JfHcvrpa8su-g8DuPD4NdUfCoticx8ixOXrM1C2eMQhJNXuGgxA6_XnCd08hJ3CpaMEHNbXqI8P-QLIZ7-hHmoM4216E5hX355jJ0/s32/twitter.png' alt='twitter'/></a>
<a href='https://plus.google.com/u/0/+RashedulIslamCTG' rel='nofollow' target='_blank'
title='Follow us on Google+'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3JUUoZDONmXTW7yyiy-bgwbmlYKu5xEYt2_HQZbtpRR2Inu0tZt6P5BkEv1aShCK05WGgszvzhRWLnNzk-KfR_TpxW5gdViw77WdJm_2fgTK495KlDpTARjerOcRspwXE8G040N-940Y/s32/googleplus-revised.png' alt='gplus'/></a>
<a href='PINTEREST URL' rel='nofollow' target='_blank'
title='Follow us on Pinterest'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizUDt3ThKpm8oz0JW9Qj2wHUT42Q-ElAzuy0hQIDDbmoECOGCD2EcZsR9o4k33iDW3jP6vAO93meKE66YrEMl-QMJZ0MPGD8oAgy8DKak48M6iHSjwyG2ZzLLM8Rst-fiujWeaSPgT23A/s32/pinterest.png' alt='pinterest'/></a>
<a href='RSS URL' rel='nofollow' target='_blank'
title='Subscribe to RSS'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizIIdYaV8QoxnRbEJvoFKFrtudbpLNuNgk5J0wzrJilpGmLzjHxL1NjXpSxReN91PF6hBb1udgnL9qwjrdNJyo0bAWvYkgQBo4gyM8XnPaMap_W5l8WGKZmK_5uFODH9DBXnUVDYbeEKE/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/Mecca.Live&width=570&colorscheme=light& show_faces=true&stream=false&header=false&height=180'
style='border:none; overflow:hidden; width:570px; height:180px;' />
</div>
</div>
</b:if>
<!--No Ordinary Social Subscription Widget-->
Now Time for Some Customization:
- Replace LiveMecca with feedburner username.
- Replace u/0/+RashedulIslamCTG With you Google+ Username.
- Replace LiveMeccaBD with your Twitter Username.
- Replace Mecca.Live with your Facebook page Username.
- Replace PINTEREST URL with your Pinterest Url.
- Now Save you template.
If you face any problem or the widget is not appearing or for any problem or suggestion let me know. I will try to Help you in sha Allah.
Courtesy MyBloggerTricks
This post was written by: Rashedul Islam
Assalamualaikum, I am Rashedul Islam Arman from Chittagong,Bangladesh. Founder of this Blog Alhamdulillah.If you Have any Problem,Complain,Suggestion or for Anything don't Hezitate to Contact ME,You can Directly contact me on my Facebook I'D
Subscribe to:
Post Comments (Atom)
0 Responses to “Add an Outstanding Subscription and Social Share Widget to Blogger”
Post a Comment