In this tutorial i will give you some Beautiful and Good Looking Sharing widget/gadget code which you can easily add on your blog for Social Media Sites and also share you content or post on these social website for get visitors by sharing your content.
I am going to give you some HTML/Javascript Coding which you can easily install in your blog by visiting layout in blogger. First i show you small tutorial for adding these widget or gadget in blogger layout and after that we also install some sharing widget in blog post like Facebook Sharing icon in float right or left side or also add in below every post.
 |
| Add 6 Best | Beautiful | Cool Looking Social Bookmarking Sharing Buttons Widget | Gadget On Blogger Blogspot |
Go to Blogger.com.
Go to Layout.
Find HTML/Javascript.
Click on it.
Now paste any of your desire coding in this box and check it out and also if you can not like it then replace with other code.
Add Facebook Like Box Widget/Gadget On Blogger By Facebook Developer Plugin
Easy | Best | Simple Tricks To Make Money From Youtube | Chitika
The Code are give below pick any one and add this by following above small tutorial.
The name of this Social Sharing Widget Is.
1) Touch Me Social Media Sharing Widget.
<style>
/*--------TOB Touch Me Sharing Widget ------*/
.touchme a {
display:block;
height:50px;
width:50px;
padding:0 4px;
float:left;
background:transparent url(http://beautifulbloggerwidgets.googlecode.com/files/Sharing%20Touch%20Me.png) no-repeat;
-webkit-transition: ease-in 0.2s all;
-moz-transition: ease-in 0.2s all;
-o-transition: ease-in 0.2s all;
-ms-transition: ease-in 0.2s all;
transition: ease-in 0.2s all;
cursor:pointer;
}
.touchme a.googleplus {
background-position: 0px -58px;
}
.touchme a.googleplus:hover {
background-position: 0px 0px;
}
.touchme a.twitter {
background-position: 0px -290px;
}
.touchme a.twitter:hover {
background-position: 0px -232px;
}
.touchme a.facebook {
background-position: 0px -406px;
}
.touchme a.facebook:hover {
background-position: 0px -348px;
}
.touchme a.rss {
background-position: 0px -174px;
}
.touchme a.rss:hover {
background-position: 0px -116px;
}
</style>
<p style="display:none;">Add 6 Best | Beautiful | Cool Looking Social Bookmarking Sharing Buttons Widget | Gadget On Blogger Blogspot<a href="http://trickofblogging.blogspot.com/2013/06/add-best-cool-social-bookmark-share-gadget-on-blogger.html">Beautiful Blogger Widgets</a></p>
<div class='touchme'>
<!--RSS-->
<a class='rss' href="http://feeds.feedburner.com/blogspot/LPkip" rel='external nofollow' target='_blank'></a>
<!--Google Plus-->
<a class='googleplus' href="https://plus.google.com/u/0/113224303869289827964/posts" rel='nofollow' target='_blank'></a>
<!--Facebook-->
<a class='facebook' href="https://www.facebook.com/pages/Trick-Of-Blogging/447187668684161" rel='nofollow' target='_blank'></a>
<!-- Twitter -->
<a class='twitter' href="https://twitter.com/trickofblogging" rel='nofollow' target='_blank' ></a>
</div>
Now Change the Orange Highlighted Link with your RSS Feed link of your blog.
Change the Pink Highlighted Color Link with your Google+ Profile link or post of your blog.
Change the Red Highlighted Color Link with your Facebook Page link of your blog.
Change the Blue Highlighted Color link with your Twitter Page or Profile link.
2) Floating Social Media Social Sharing Widget For Blogger:
Just follow the small above tutorial and add this in your blogger blogspot easily.
<p style="display:none;">Floating Social Media Buttons for Blogger by <a href="http://beautifulbloggerwidgets.blogspot.com/">Beautiful Blogger Widgets</a></p> <style type="text/css">
* html #ss-box{
position: absolute;
}
#ss-box{
width: 70px;
background:#ffffff;border:1px solid #dedede;border-radius:px;-moz-border-radius:px;-webkit-border-radius:px;position:fixed;left:4%;
top: 20%;
height:200px;
height:auto;
}
#ss-box div{
padding:6px 6px 4px 5px;
}
#icon_twitter,#icon_digg{
margin-left:-2px;
}
#icon_linkedin{
margin-left:-5px;
}
#sfs{
margin-left:-5px;
}
#ss-get{
bottom: -20px;
clear: both;
color: #666666;
font-size: 9px;
left: 18px;
position: absolute;
text-align: center;
text-decoration: none;
}
</style>
<div id="ss-box">
<div id="ssl-box">
<div id="icon_facebook">
<iframe src="http://www.facebook.com/plugins/like.php?app_id=235665053131744&href&send=false&layout=box_count&width=50&show_faces=false&action=like&colorscheme=light&font&" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:60px; margin-left: 2px;" allowtransparency="true"></iframe>
</div>
<div id="icon_googleplus">
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone>
</div>
<div id="icon_twitter">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
<div id="icon_digg">
<script type="text/javascript">
(function() {
var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBefore(s, s1);
})();
</script>
<a class="DiggThisButton DiggMedium"></a>
</div>
<div id="icon_linkedin">
<script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="top"></script>
</div>
</div>
<a id="ss-get" href="http://beautifulbloggerwidgets.blogspot.com/2012/03/floating-social-media-buttons-for.html">Get This</a>
<div style="clear:both;"></div>
</div>
3) Spinning Social Icons Sharing Widget | Gadget For Blogger Template:
This Social Icons sharing buttons are formed in CSS3 Coding which you can install in HTML/Javascript Box and save and enjoy it.
<style>p#hb_socialicons img {
/* Spinning Social Icons Widget By TOB */
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
p#hb_socialicons img:hover {
-moz-transform: rotate(120deg);
-webkit-transform: rotate(120deg);
-o-transform: rotate(120deg);
-ms-transform: rotate(120deg);
transform: rotate(120deg);
}
/* Spinning Social Icons Widget By TOB */
</style>
<center><p id="hb_socialicons">
<a href="http://www.facebook.com/btsnts/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvCYPlfJGfj1-nZ8TkxztHsbKtsVsboeUCtpRBCy_MrMquSHD3-Q84Lbp1DDDuwV3oTAUKtmlR5_Q58hPJuqmmAoTzhLWoT7LT6BXyWQBHlj6YZR8vSVhJCFWufjoJJvzp8psaXuVbly4/s1600/helperblogger.com-facebook.png" /></a>
<a href="http://www.twitter.com/helperblogger/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAFINrnARsBpzttuafuuw8kOuOKKvwfGeF3hkMEqv-QpwKYMC__wbBurSqwX24ALxoAqpHzNCfSMy9DJxihewd1ayQ8_2eKMBm8AOUs_SCtQq2hM4Y9qJbsUY9TL0GPcAnmKT59WuyLqs/s1600/helperblogger.com-twitter.png" /></a>
<a href="https://plus.google.com/u/0/106527290580119996124">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBasW9QRKOldIa7GylUqizw7oa4DPc0qKl8Zu1mAPOUe6l862jwdbAHDlFZ-HiRVuTYbwUmM2o1EEz2PdbSu0fZ1egTTZ81a8vjSp9CMb3OdOy-tWWUaHTQMzOwAUItyqH-eQvNfcR1x4/s1600/helperblogger.com-google_plus.png" /></a>
<a href="http://www.feeds.feedburner.com/hblogger/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOWFxWmveQ-pyHOWHZPMYnYnfzdueZ96A2Xl7qANzJ0EBhS1J10798FrsNh23nBSLkSkebhM-gRvD8AY9PdirvOOW0LxXlg7Ea50Yh2VP3unoJqr71jQsJrfdKEo4GJaXzNwBCu1ElE8g/s1600/helperblogger.com-rss.png" /></a>
<a href="http://www.youtube.com/helperblogger1/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs5wau5KCbpbuLcgT0hD_1pQB82ivV5Tx_UG8cnWRD6yUMpxncARaLzdk6itFh90TxEvj2kdbFM1zmbNXeOBVpMQ4B8NI1j92KAW0HZ5zWcHbNfUa1Xsr7wSSDZZ_wuFdh8aOgczXv9NE/s1600/helperblogger.com-youtube.png" /></a>
</p></center>
4) "Add This" Widget For Blogger For Social Sharing:
This is the widget or gadget for blogger simple adding in HTML Box and choose your desire place where you want to add or put this widget for sharing easily.
<!-- Add This Code Starts -->
<div class='addthis_toolbox addthis_default_style '>
<a class='addthis_button_facebook_like' fb:like:layout='button_count'/>
<a class='addthis_button_tweet'/>
<a class='addthis_button_google_plusone' g:plusone:size='medium'/>
<a class='addthis_counter addthis_pill_style'/>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4ec4dd3d1e59e9dc' type='text/javascript'/>
<!-- Add This Code Ends -->
5) Social Bookmarking Or Sharing Widget With Egg Sliding For Blogger Blog:
Go to Blogger.com.
Go to Template.
Click on Edit HTML.
Press Ctrl+F in HTML coding box.
Paste the </head> tag or code in this appear search box and press enter.
When you Find </head> and paste the following code just above it.
Use Best Blogger Settings Option Basic For SEO And Others Option Links
Customise Blogger Default Template To Make Professional Template
<script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/><script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/><script type='text/javascript'>stLight.options({publisher: "bea50586-2b9f-448d-947a-01385f28e305", onhover:false}); </script><link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/>
Now find for </body> and place the following code just above it.
<div style='position: fixed; bottom: 2%; left: 2%;'><div class='shareEgg' id='shareThisShareEgg'/></div><script type='text/javascript'>stlib.shareEgg.createEgg('shareThisShareEgg', ['facebook','twitter','googleplus','linkedin','blogger','stumbleupon','sharethis'],{title:'<data:blog.pageTitle/>',url:'<data:blog.url/>',theme:'shareegg'});</script>
Save Template.
Now click on View Blog and check this out left bottom the Egg Type sharing widget with beautiful effect is appear.
6) Cool Social Sharing Shareaholic Sassy Bookmarks Widget For Blogspot:
Go to Blogger.com.
Go to Template.
Click on Edit HTML.
Press Ctrl+F to find the </body> tag.
When search box appear then paste </body> tag in it and press enter.
Now paste the below code just above/before of the </body> tag.
<!-- Start Shareaholic Sassy Bookmarks HTML (trickofblogging.blogspot.com)-->
<div class="shr_ss shr_publisher">
</div>
<!-- End Shareaholic Sassy Bookmarks HTML (trickofblogging.blogspot.com) -->
<!-- Start Shareaholic Sassy Bookmarks settings -->
<script type="text/javascript">
var SHRSS_Settings = {"shr_ss":{"src":"//dtym7iokkjlif.cloudfront.net/media/downloads/sassybookmark","link":"","service":"5,7,2,313,38,201,88,74","apikey":"b87f5899d80a5edce8b5e55f58542ef0f","localize":true,"shortener":"bitly","shortener_key":"","designer_toolTips":true,"tip_bg_color":"black","tip_text_color":"white","viewport":true,"twitter_template":"${title} - ${short_link} via @Shareaholic"}};
</script>
<!-- End Shareaholic Sassy Bookmarks settings -->
<!-- Start Shareaholic Sassy Bookmarks script -->
<script type="text/javascript">
(function() {
var sb = document.createElement("script"); sb.type = "text/javascript";sb.async = true;
sb.src = ("https:" == document.location.protocol ? "https://dtym7iokkjlif.cloudfront.net" : "http://cdn.shareaholic.com") + "/media/js/jquery.shareaholic-publishers-ss.min.js";
var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(sb, s);
})();
</script>
<!-- End Shareaholic Sassy Bookmarks script (trickofblogging.blogspot.com) -->
Now Save your Template.
Click On View Blog and enjoy these amazing effects.
If you have any problem to adding these or other widgets then contact me and also leave your nice comment on my blog then i will definitely reply you with my best answers.
Related Articles:
How Easliy/Simple To Manage Page Layout In Blogger Blogspot
Add Flickr/Picasa Web/Photobucket/Other Albums Slideshow On Blog Easy Tricks
Add | Put HTML Color Code Generator Tool To Your Blogger With Easy Tricks
Add Manually CSS Jqeury Drop Down Menu By Replace/Remove Pages On Blogger
Add | Put | Embed Three Or Four Column Footer Widget/Gadget In Blogger Blogspot
Add Facebook Like Box Widget/Gadget On Blogger By Facebook Developer Plugin
Add | Make About Us Page Widget | Gadget On Your Blog Footer Or Sidebar
Add | Put Three Tab Gadget/Widget In Blog Layout Sidebar On Blogspot
