Skip to main content

Social Sharing Widget Box for Blogger Blogs

Hello and Welcome here. In this post I will share an interesting and cool social sharing widget for Blogger. Blogger is a popular and very easy to use Blogging platform but many bloggers often face many difficulties in Search Engine Optimization and Social Connecting Features in this blogging platform. But you don't have to worry much about it because there are many SEO techniques available for Blogger. Today I will share a very cool Social Sharing widget for Blogger. Having a Social Sharing section in a blog is very important and it also plays a role in search engine optimization. Not only SEO but it will help your users to easily share your blog and posts to their favorite social sites and connecting with you socially. This social sharing widget includes many functions and offers many social sharing sites to share with this social widget. The social sharing widget is designed by me. It is very easy to add the socialize widget to Blogger. You will just need to follow the very simple steps given below.

Before going further to the installation you would like to know something about this Social Sharing Widget for Blogger. The widget is made with CSS3 and little JavaScripts. It includes three sections in which the firts section deals with liking or interests with your Blog, the second one is for connecting with you on social sites and the third one is sharing your Blogger content to social sharing sites. It is simple but very beautiful sharing widget which is designed with CSS3 to make it look awesome and it loads amazingly fast. Just take a look at the image below and I am sure you will like it.

Social Sharing Widget Box for Blogger Blogs

In the above image you are seeing two effects of social sharing widget. The first one is normal and the second one will show up on hover. Don't Worry about the attribution as I have not added any type of attribution on this widget. It has some very cool shadow effects. And the effects of social sharing widgets will also change on hover. The widget is specially designed for Blogger blogs but it can be used in any platform with little tweaks. It may look little like my sharing box but the widget has some unique effects and sharing icons that I don't use in my blog. The widget is fully free to use. If you like it follow the steps given below to add this to your blogger blog.
  • First thing first, sign in to your Blogger Account.
  • After signing in Go to Dashboard.
  • Now you have to go to Template from the Dashboard.
  • In the the Template page click on the Edit HTML which is located just below the preview of your Blog.
  • Now search for the code given below.
<data:post.body/>
Quick Tip: You can search by pressing CTRL+F.
  • Now add the code given below just after/below the code you just searched in the previous step.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <style>
#ht-so {
    width: 500px;
    height: 240px;
    margin:5px;
padding:5px 5px 5px 20px !important;
text-indent:0px;
line-height:1.3em;
list-style:none;
display:block;
border-radius: 10px;
border-top:1px solid #e9e9e9;
border-left:1px solid #e9e9e9;
border-right:1px solid #e9e9e9;
border-bottom:1px solid #e9e9e9;
background: #f9f9f9;
color: #FF0000;
-moz-box-shadow: 0 1px 4px #bbb inset;
-webkit-box-shadow: 0 1px 4px #bbb inset;
-ms-box-shadow: 0 4px 4px #bbb inset;
box-shadow: 0 1px 4px #bbb inset;
    overflow: hidden;
  -webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#ht-so:hover {
    background: #fff;
-moz-box-shadow: 0 4px 4px #bbb inset;
-webkit-box-shadow: 0 4px 4px #bbb inset;
-ms-box-shadow: 0 4px 4px #bbb inset;
box-shadow: 0 4px 4px #bbb inset;
}
#ht-so-title {
    text-align: center;
    font-size: 20px;
    font-weight: 2000;
    font-family: Magneto;
    padding: 5px;
    color: #000;
text-shadow: 2px 2px 2px;
}
#ht-so-title:hover {
  color: #292832;
  -webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
  }
#SocializeIt {
    float: left;
    border-top: 1px solid #eaeaea;
    border-bottom: 1px solid #eaeaea;
    margin-left: -10px;
    margin-top: 10px;
}
.tweet, .like, .plusone, .stumbleit {
    float: left;
    border-left: 1px solid #eaeaea;
    padding-left: 18px;
    padding-top: 15px;
    padding-bottom: 10px;
}
.g-plusones {
    margin-left: 20px;
}
.heading {
    float: left;
    padding-right: 20px;
    padding-top: 15px;
    text-transform: uppercase;
    font-weight: bold;
    margin: 0px;
    padding-left: 30px;
    font-family: oswald;
     color: #808080;
}
   .heading:hover {color: #FF0000;}
#followus, #share {
    float: left;
    border-bottom: 1px solid #eaeaea;
    margin-left: -10px;
}
.likeonfb, .sharing {
    float: left;
    border-left: 1px solid #eaeaea;
    padding-left: 10px;
    padding-bottom: 10px;
    padding-top: 15px;
     padding-right: 10px;
}
.followontwitter {
  float: right;
    border-left: 1px solid #eaeaea;
    padding-left: 10px;
    padding-bottom: 10px;
    padding-top: 15px;
  }
</style>
   <script type='text/javascript'>
(function (_0x2162x1, _0x2162x2, _0x2162x3) {
    var _0x2162x4 = _0x2162x1[&#39;getElementsByTagName&#39;](_0x2162x2)[0];
    if (!_0x2162x1[&#39;getElementById&#39;](_0x2162x3)) {
        _0x2162x1 = _0x2162x1[&#39;createElement&#39;](_0x2162x2);
        _0x2162x1[&#39;id&#39;] = _0x2162x3;
        _0x2162x1[&#39;src&#39;] = &#39;//platform.twitter.com/widgets.js&#39;;
        _0x2162x4[&#39;parentNode&#39;][&#39;insertBefore&#39;](_0x2162x1, _0x2162x4);
    };
})(document, &#39;script&#39;, &#39;twitter-wjs&#39;);
   </script>
<div id='fb-root'/>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&amp;appId=208388826000339&quot;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>
<script type='text/javascript'>
    var switchTo5x = false;
</script>
<script src='https://apis.google.com/js/plusone.js'/>
 <center>
<div id='ht-so'>
 <div id='ht-so-title'>
   Connect With Social Sites
 </div>
 <div id='SocializeIt'>
  <font class='heading'>SOCIALIZE IT &#8594;</font>
  <div class='tweet'>
   <a class='twitter-share-button' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a>
  </div>
  <div class='like'>
   <iframe allowtransparency='true' expr:src='&quot;//www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:80px; height:21px;'/>
  </div>
  <div class='plusone'>
   <div class='g-plusone' data-size='medium' expr:data-href='data:post.url'/>
   </div>
  </div>
  <div id='followus'>
   <font class='heading'>FOLLOW US &#8594;</font>
   <div class='likeonfb'>
     <iframe allowtransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FMobileTechz=450;=80=light=standard=like=true=false&amp;layout=button_count&amp;width=77&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=21' style='border:none; overflow:hidden; width:77px; height:21px;'/>
   </div>
   <div class='followontwitter'>
    <a class='twitter-follow-button' data-button='grey' data-link-color='#289728' data-show-count='false' data-size='large' href='http://twitter.com/sashish302' rel='nofollow'/>
    <script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
   </div>
  </div>
  <div id='share'>
   <font class='heading'>SHARE IT &#8594;</font>
   <div class='sharing'>
     <span class='fb-share-button' data-type='button_count' expr:data-href='data:blog.canonicalUrl'/>
     <span><a class='twitter-share-button' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a></span>
<span class='g-plus' data-action='share' data-annotation='bubble' expr:data-href='data:blog.canonicalUrl'/>
   </div>
  </div>
 </div>
 </center>
 </b:if>

Note: You will need to replace MobileTechz in line 143 with your Facebook page user name. Also, replace sashish302 in line 146 with your Twitter username.
  • After adding the above code in the specified place quickly preview your template to see if there isn't any errors on your Template.
  • If everything is fine than save your Template.
  • Congrats! You have just added a cool social sharing widget in your Blogger Blog.
That's All. I hope you liked this widget for social sharing. For more tips and tricks keep visiting. If you are facing any type of problems in adding this widget in your Blogger blog than feel free to ask me.
Labels:

Comments

Post a Comment

Popular posts from this blog

Need for Speed (NFS) Carbon Cheats, Codes and Unlock Parts

Need for Speed makes some great racing games like NFS Most Wanted, Rivals etc. and Need for Speed Carbon is another 10th addition to their NFS series. It's the first game to get the PEGI rating 12+. It's a very good game with it's story line. If you are looking for some adventure and a good racing than this one will be in your game list. While playing the game you will face some difficulty in completing this game. And from than onwards you may look some cheat codes that can help you in completing NFS carbon. And to make it easier for you here is the list of some working cheat codes and trainer. But you proceed to know about cheats and tricks for Need for Speed Carbon you would like to know the adventurous story of the game. So let's start. The game is set in the fictitious city of Palmont. Soon after the player leaves the Rockport City ( remember jumping of an old bridge in last scene of NFS Most Wanted) the player drives on a route to Palmont city with his BMW ca...
2 comments
Read more

How to Watch Any TV Show or Movie on Kodi

Kodi is a cross-platform media center solution developed by XBMC/Kodi Foundation, a non-profit technology association. Kodi which was previously known as XBMC has been growing rapidly from last few years. While the application offers to play local media files, but, it has plethora of third party add-ons, which, we can use to increase it's usefulness. In this post, you'll learn the process to install Indigo and Exodus on Kodi 18 (64-bit). The process is similar on version 17 of this app, however, I haven't checked the previous versions. Note : Streaming copyrighted content is illegal, nevertheless, it's completely legal to use Kodi for viewing the content you've purchased. First, we'll need to add Indigo Installer. Follow the following steps to know how to do it: Open Kodi . Click on the Gear button (settings). Select File Manager . Double Click on Add Source . Click on <None> ... ...type  http://fusion.tvaddons.ag and...
Post a Comment
Read more

Top 5 Alternatives to Extratorrent

In an unforeseen move, Extratorrent decided to shut down few months ago. It was one of the most popular torrent site, but now users who visit it's homepage are greeted with a message which clearly states they are not going to return in the future. Now that they are gone, various clone sites such as extratorrent.cd has been setup to squeeze money from the confused visitors via its advertisements. People visiting these clone sites should know that the original ExtraTorrent owners have deleted all data, and none of the impostors have access to the old ExtraTorrent files. There are many alternatives out there. You just need to look at the right place. Take a look at the following original torrent sites which might entice you. 1337x.to 1337x is probably the best designed torrent site you'll ever come across. Although it lacks the ExtraTorrents' rating system, nonetheless, most of the contents are verified by moderators. The site has easy-to-navigate subsections whic...
Post a Comment
Read more