DK BLOGGER TRICKS

Tuesday, 9 December 2014

Tabbed Table of Contents for Blogger

Table of Contents is what every blogger likes to add to his blog. It helps in decreasing the bounce rate of the blog and increasing the pageviews.

Today I am going to show you how you can add an amazing Table of Contents widget to a page of your blog. This widget is made by Taufik Nurrohman of DTE. The concept of this widget is very simple. It is coded with the help of JavaScript and CSS. It also has many options and setting which I will describe below.

A live working demo of this widget can be seen by clicking the below button.

Live Demo

After seeing the demo if you wish to add this widget in your blog then follow the below steps.

Step 1 : Creating a New Page

First of all we need to create a new page and to do this firstly go to Blog Title → Pages → New Page → Blank Page. Page editor will open, now click on HTML tab.

Step 2 : Adding the code

Once you are in the HTML tab of Page Editor add the below code in it.

<link rel="stylesheet" href="http://dte-project.googlecode.com/svn/trunk/tabbed-toc-skin.css" type="text/css" media="screen" />
<div id="tabbed-toc"><span class="loading">Loading...</span></div>
<a style="display:block;text-align:right;font:normal bold 8px Arial,Sans-Serif;text-decoration:none;margin:10px;" href="http://www.allbloggertricks.com/" title="Tabbed TOC">All Blogger Tricks</a>
<script type="text/javascript">
var tabbedTOC = {
    blogUrl: "http://your-url.blogspot.com", // Blog URL
    containerId: "tabbed-toc", // Container ID
    activeTab: 1, // The default active tab index (default: the first tab)
    showDates: false, // `true` to show the post date
    showSummaries: false, // `true` to show the posts summaries
    numChars: 200, // Number of summary chars
    showThumbnails: false, // `true` to show the posts thumbnails (Not recommended)
    thumbSize: 40, // Thumbnail size
    noThumb: "http://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png", // A "no thumbnail" URL
    monthNames: [ // Array of month names
        "January",
        "February",
        "March",
        "April",
        "May",
        "June",
        "July",
        "August",
        "September",
        "October",
        "November",
        "December"
    ],
    newTabLink: true, // Open link in new window?
    maxResults: 99999, // Maximum post results
    preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
    sortAlphabetically: true, // `false` to sort posts by published date
    showNew: 7, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked
    newText: " - <em style='color:red;'>New!</em>" // HTML for the "New!" text
};
</script>
<script type="text/javascript" src="http://dte-project.googlecode.com/svn/trunk/tabbed-toc.js"></script>

Copy and paste the above given code in the post editor.

Step 3 : Table of Content Settings

Now change the URL in the blogUrl field. You may change other settings. It is briefly described in the code what they are and how to change them. After making the changes save the page.

You are done now. Now you can link the page wherever you want. You and your visitors may now see this amazing table of content in your blogger blog.

Awesome Contact Form Widget for Blogger

Today I am going to show you how you can add a really awesome and cool lookingContact form in a page of your blogger blog. This contact form looks really elegant and is very eye-catching.

This contact form inspired from Bloggertut works on CSS and has a very rich feel in it. You can make your Contact page more awesome by adding this widget to one of your blog's pages. A live working demo of this widget can be seen by clicking the below button.

Live Demo

After seeing the demo if you wish to add this contact form in your blog then follow the steps below.

Step 1 : Adding the Contact Form

First of all add a Contact form widget to your blog. To do so go to my post Official Contact Form Widget released for Blogger.
Do not worry about that the widget will be visible everywhere on the blog and our motive is to show contact us form only on a particular page. We will fix it in the second step.

Step 2 : Adding the CSS

Once you have added the Contact form widget go to Blog Title → Template → Edit HTML. Now add the below given CSS code just above ]]></b:skin> .

#ContactForm1{
display:none;
}
#contact_wrap {
margin: auto;
width: 321px;
height: 380px;
padding: 25px;
border-radius: 1em;
border-top:1px solid #dbdbdb;
border-right:1px solid #b2b2b2;
border-left:1px solid #dbdbdb;
border-bottom:1px solid #9d9d9d;
background-color:#cccccc;
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#f2f2f2', endColorstr='#cccccc');
background-image:-webkit-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
background-image:-moz-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
background-image:-ms-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
background-image:-o-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
background-image:linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
box-shadow: 1px 1px 5px #ccc;
}
#contact_wrap h3{
color: #e8f3f9;
font-family:Georgia;
font-size: 20px;
font-style:italic;
font-weight:bold;
margin: 0 -36px 20px -36px;
padding: 12px;
text-align: center;
text-shadow: 2px 0 0 #1f4962;
-webkit-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
-moz-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
background-color: #3689b9;
position: relative;
}
#contact_wrap h3:before {
content: ' ';
position: absolute;
bottom: -10px;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 0 10px;
border-color: #333 transparent transparent transparent;
}
#contact_wrap h3:after {
content: ' ';
position: absolute;
bottom: -10px;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 10px 10px;
border-color: transparent transparent transparent #333;
}
#ContactForm1_contact-form-name{
width: 270px;
height:auto;
margin: 5px auto;
padding: 10px 10px 10px 40px;
background:#f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGqx5sC4eGjoCIkjFKQiyhl0HyzGMT0WJ8EnAj_0aR9BxdfjwyXNyc5V_F6JxQ7DI6vHFzOwY4uJNp5QiUnjfRUITI5rYt4rPdQuUpyNYWxswDOZkbFDrIciawblc9br8Rhzm_3N5tejE/s1600/user.png)no-repeat 10px center;
color:#777;
border:1px solid #ccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
}
#ContactForm1_contact-form-email{
width: 270px;
height:auto;
margin: 5px auto;
padding: 10px 10px 10px 40px;
background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHHdVsbXT5EVL0F2xVZGWg0yg3HxXj2b7vTHoooa5355K2xudSo7LWj6OzvieftHIV6aZUn7H5npi9jWmMf2jK5WfNanNrnyGXBsr8x8RqMCoNjewxuwhwZjwIvcXPqKSMlPYHjeOxdDc/s1600/pen.png)no-repeat 10px center;
color:#777;
border:1px solid #ccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
}
#ContactForm1_contact-form-email-message{
width: 270px;
height: 150px;
margin: 5px auto;
padding: 10px 10px 10px 40px;
font-family:Arial, sans-serif;
background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMC7MbdKrSefNdoF4bptADTuHWWRzoMmYqT5Q45cc3AligeEjNgPDl9rTbmQABJDcei7ZSht4qjvuEy20HEuhj5ySmvBkfsVxiXLStix_xfPR7AWWwsgMuf3OYayMCZ-OhaxqYx9F05mE/s1600/msg2.png)no-repeat 10px 10px;
color:#777;
border:1px solid #ccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
}
#ContactForm1_contact-form-submit {
width: 95px;
height: 30px;
float: right;
color: #FFF;
padding: 0;
cursor:pointer;
margin: 25px 0 3px 0 0;
background-color:#005a8a;
border-radius:4px;
text-shadow: 1px 0 0 #1f4962;
-webkit-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
-moz-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
background-color: #3689b9;
border:1px solid #194f6d;
}
#ContactForm1_contact-form-submit:hover {
background:#4c9bc9;
}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width: 320px;
margin-top:35px;
}

After adding the code save the template.

Step 3 : Adding the HTML in Page

First of all we need to create a new page and to do this firstly go to Blog Title → Pages → New Page → Blank Page. Page editor will open, now click on HTML tab and paste the below given code in it.

<div id="contact_wrap">
<h3>Contact Us</h3>
<form name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" />
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Submit" />
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>

<style type="text/css">
#comments, #blog-pager, .breadcrumbs, .post-footer{display:none}
</style>

After adding the above code, publish the page.

You are done now. Now you and your visitors can see this awesome and cool contact form widget in your blog.

Numbered Popular Posts Widget for Blogger

So I am back with yet another Popular Posts customization for blogger blogs. This one is quite special as it looks extremely elegant and has cool transition effects when hovered.

We can rarely see blogs which do not use Popular Posts widget. This widget decreases bounce rate and increase the pageviews of your blog. Making them attractive and eye-catching will make more people click on it hence making your blog more awesome and better.

I have already posted Popular Posts customization tutorials many a times. You can check them out below.

You can see a live working demo of this popular posts widget by clicking the button below.

Live Demo

After seeing the demo in order to add this widget to your blog follow the steps below.

Adding the widget in Layout

Firstly go to Blog Title → Layout → Add Widget → Popular Posts. Add the widget in the desired location and save the template.

Adding the CSS in Edit HTML

Now go to Blog Title → Template → Edit HTML. Press Ctrl + F and search for ]]></b:skin> in search box. After getting the code add the below given code just above ]]></b:skin>

.popular-posts ul li a {
    background: none repeat scroll 0 0 #222222;
    color: #FFFFFF;
    display: block;
    margin: 10px 0;
    padding: 25px 15px 30px;
    position: relative;
    text-decoration: none;
    transition: all 0.3s ease-out 0s;
width: 85%;
}
.popular-posts ul li a:before {
    background: none repeat scroll 0 0 #2DB3E9;
    color: #FFFFFF;
    font-weight: 700;
    height: 2em;
    line-height: 2em;
    margin-left: 88%;
    padding: 4px;
    position: absolute;
    text-align: center;
    width: 2em;
    transition: all 0.2s ease-in-out 0s;
   -moz-transition: all 0.3s ease-in-out 0s;
}
.popular-posts ul li a:hover {
    opacity: 0.8;
}
.popular-posts ul li a:hover:before {
    border-left-color: #CCCCCC;
    left: -1px;
     -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
}
.popular-posts ul li:first-child + li + li + li + li + li + li + li + li + li a:before {
    content: "10";
}
.popular-posts ul li:first-child + li + li + li + li + li + li + li + li a:before {
    content: "9";
}
.popular-posts ul li:first-child + li + li + li + li + li + li + li a:before {
    content: "8";
}
.popular-posts ul li:first-child + li + li + li + li + li + li a:before {
    content: "7";
}
.popular-posts ul li:first-child + li + li + li + li + li a:before {
    content: "6";
}
.popular-posts ul li:first-child + li + li + li + li a:before {
    content: "5";
}
.popular-posts ul li:first-child + li + li + li a:before {
    content: "4";
}
.popular-posts ul li:first-child + li + li a:before {
    content: "3";
}
.popular-posts ul li:first-child + li a:before {
    content: "2";
}
.popular-posts ul li:first-child a:before {
    content: "1";
}
.item-snippet {
    display: none;
}
.PopularPosts .item-thumbnail {
    display: none;
}

After adding the code save the template. Now you and your visitors can see this awesome numbered popular posts widget in your blogger blog.

Pure CSS Elegant Share buttons for Blogger

Hey Folks ! After a month without posting and digging the books for my exams I am back with yet another great post on how you can add some cool buttons under every post of your blog.

These buttons are made of pure CSS and look extremely elegant. They have cool hover effect and are very light too. You can add these buttons under every post of your blog and increase the user interaction in your blog. The demo of the same can be seen just below

Adding the CSS

First of all we would have to add the CSS and for that so go to Blog Title → Template → Edit HTML. Search for the tag ]]></b:skin> Add the below given code just above ]]></b:skin>

@import url(http://weloveiconfonts.com/api/?family=zocial);
/* zocial */
[class*="zocial-"]:before {
font: 2.5em/2em 'zocial', sans-serif;
color: white;
line-height: 2.2;
}

.post-social .facebook {
background: #3B5998;
}
.post-social .twitter {
background: #4099FF;
}
.post-social .googleplus {
background: #db5a3c;
}
.post-social .social {
float: left;
}
.post-social .zocial-facebook {
margin: 0 15px;
}
.post-social .zocial-twitter {
margin: 0 25px;
}
.post-social .zocial-googleplus {
margin: 0 25px;
}
.post-social li {
min-width: 180px;
width: 210px;
height: 80px;
cursor: pointer;
list-style: none;
text-align: left;
float: left;
}
.post-social li:hover [class*="zocial-"]:before {
opacity: 0.5;
text-align: right;
}
.post-social li:hover iframe {
opacity: 1;
}
.post-social li iframe {
margin-top: 30px !important;
opacity: 0;
transition: all .3s ease-in-out;
}
.post-social li .fb_ltr {
margin: 30px 20px !important;
}

Adding the HTML

Now we have to add the HTML.
First go to Blog Title → Template → Edit HTML. Press Ctrl + F and search for<data:post.body/> code and paste the below given code just below<data:post.body/>.

NOTE : There maybe more than one <data:post.body/> so make sure that you have selected the right code.

<ul class="post-social">

<li class="facebook">
      <span class="social zocial-facebook"></span>
    <div class="fb-like" data-send="false" data-layout="button_count" data-width="250" data-show-faces="true"></div>
</li>
<li class="twitter">
      <span class="social zocial-twitter"></span>
    <a href="https://twitter.com/share" class="twitter-share-button" data-via="Rushtips">Tweet</a>
</li>
<li class="googleplus">
        <span class="social zocial-googleplus"></span>
    <g:plusone size="medium"></g:plusone>
</li>
</ul>

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

<div id="fb-root"></div>
<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 = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

After adding the codes save the template.

You are done now. Now you and your visitors can see these awesome and elegant pure CSS share buttons on your blogger blog.

Floating Social Share Buttons for Blogger

CODE UPDATED !
Note: Does Not Work On Small Posts.

This tutorial will help you in adding Floating Social share buttons under every post of your blogger blog. I personally use this widget in my blog.

The widget is light in size and looks elegant. In every post after scrolling the widget will pop up at the lower bottom of the screen. The widget contains four social sharing buttons - Facebook, Twitter, Google+, LinkedIn. There is a close button too to close down the floating share buttons.

A live demo can be seen on my blog itself. Just scroll down to the comments section and this floating social share buttons bar will appear. You can also close it by clicking the close button.

Once you have seen the demo to add this widget in your blog just follow the below steps.

Adding the Marker

First go to Blog Title → Template → Edit HTML. Press Ctrl + F and search for<data:post.body/> code and paste the below given code just below<data:post.body/>.

NOTE : There maybe more than one <data:post.body/> so make sure that you have selected the right code.

<b:if cond='data:blog.pageType == "item"'>
<div id='md-active-share-comment-marker'/>
</b:if>

Add the code and follow the next step.

Adding the HTML/CSS/JS in HTML Editor

To add this widget you have to go to Blog Title → Template → Edit HTML and add the below given code just above </body>. The code has been optimized and made lite so it loads faster.

     <b:if cond='data:blog.pageType == "item"'>
    <script src='http://files.dkbloggertricks.com/Scripts/abt-floating-share.js' type='text/javascript'/>
    <div id='md-share-window' style='width: 100%; display: block; position: fixed; bottom: -450px; left: 0px; background-color: rgba(128, 128, 128, 0.6); z-index: 100; padding: 0 0 10px 0;'>
    <div style='width: 800px; margin: 20px auto;'> <a class='boxclose' id='boxclose'/>
<style>
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400);
@import "//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css";
#share-buttons{border-radius:5px;background:#FFF;width:660px;overflow:hidden;margin-left:60px;box-shadow:0 2px 3px rgba(71,71,71,0.31);padding:14px 7px}.share-button{background:#DCE0E0!important;position:relative;display:block;float:left;height:40px;overflow:hidden;width:150px;border-radius:3px;-o-border-radius:3px;-ms-border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;margin:0 7px}.icon{display:block;float:left;position:relative;z-index:3;height:100%;vertical-align:top;width:38px;-moz-border-radius-topleft:3px;-moz-border-radius-topright:0;-moz-border-radius-bottomright:0;-moz-border-radius-bottomleft:3px;-webkit-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;text-align:center}.icon i{color:#fff;line-height:42px}.slide{z-index:2;display:block;height:100%;left:38px;position:absolute;width:112px;-moz-border-radius-topleft:0;-moz-border-radius-topright:3px;-moz-border-radius-bottomright:3px;-moz-border-radius-bottomleft:0;-webkit-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;margin:0}.slide p{font-family:Open Sans;font-weight:400;border-left:1px solid rgba(255,255,255,0.35);color:#fff;font-size:16px;left:0;position:absolute;text-align:center;top:10px;width:100%;margin:0}.share-button .slide{-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out}.facebook iframe{display:block;position:absolute;right:16px;top:10px;z-index:1}.twitter iframe{width:90px!important;right:5px;top:10px;z-index:1;display:block;position:absolute}.google #___plusone_0{width:70px!important;top:10px;right:15px;position:absolute;display:block;z-index:1}.linkedin .IN-widget{top:10px;right:22px;position:absolute;display:block;z-index:1}.facebook:hover .slide{left:150px}.twitter:hover .slide{top:-40px}.google:hover .slide{bottom:-40px}.linkedin:hover .slide{left:-150px}.facebook .icon,.facebook .slide{background:#305c99}.twitter .icon,.twitter .slide{background:#00cdff}.google .icon,.google .slide{background:#d24228}.linkedin .icon,.linkedin .slide{background:#007bb6}</style>
<div id='share-buttons'> <div class='facebook share-button'> <i class='icon'> <i class='icon-facebook'> </i> </i> <div class='slide'> <p> facebook </p> </div> <iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2FDkbloggertricks&send=false&layout=button_count&width=80&show_faces=false&font&colorscheme=light&action=like&height=20&appId=568581339861351' style='border:none; overflow:hidden; width:80px; height:20px;'> </iframe> </div> <div class='twitter share-button'> <i class='icon'> <i class='icon-twitter'> </i> </i> <div class='slide'> <p> twitter </p> </div> <a class='twitter-share-button' data-via='Dkbloggertricks' href='https://twitter.com/share'> Tweet </a><script>
    !function(d,s,id){
      var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
      if(!d.getElementById(id)){
        js=d.createElement(s);
        js.id=id;
        js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
</script>
</div> <div class='google share-button'> <i class='icon'> <i class='icon-google-plus'> </i> </i> <div class='slide'> <p> google+ </p> </div> <div class='g-plusone' data-size='medium'> </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 class='linkedin share-button'> <i class='icon'> <i class='icon-linkedin'> </i> </i> <div class='slide'> <p> linkedin </p> </div> <script data-counter='right' type='IN/Share'> </script> <script src='//platform.linkedin.com/in.js' type='text/javascript'> lang: en_US </script> </div></div><div style='display:block; margin: 0 200px; padding: 5px 0px 0px;font-family: Oswald; font-weight: 700;color: #000'> Don't You Think this Awesome Post should be shared ??<br/> <span style='color: #000; font-size: 18px;'>| <data:blog.pageName/> |</span> </div> </div> </div> </b:if>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>

After adding the code change change Dkbloggertricks with your Facebook Page's ID. Finally save the template.

You are done now. Now you and your visitors can see this awesome Floating Social Share Buttons in your blogger blog.

Facebook Slide Out Share Button for Blogger

It has been long time since I have not posted a new widget so here is a much awaited Facebook Slide Out Share button for Blogger blogs.

This widget has many features such as -

Lightweight Size
Compact Design
Supports all Major Browsers
Attractive and Elegant
Made with CSS3 and beautiful transitions.
Shown only on Post pages

The live demo of this widget can be seen by clicking the below button.

Live Demo

Once you have seen the demo, to add this widget in your blog you can use the following methods -

Method 1 : One Click Installation

You can add this slide out share button to your blogger blog with the click of a button. To add this widget just click the below button and choose the blog in which you want to add this widget.

Save the layout and you are done. The slide out share button will be on your blog and would be shown on all the post pages.

Method 2 : Adding Manually

Many people would like to add and customize the code on their own. If so, you can copy the below code and paste it in the HTML/JavaScript widget.

<b:if cond='data:blog.pageType == "item"'>
<style>
/* Widget by AllBloggerTricks.com */
#fixed-share {background: none repeat scroll 0 0 #4C6699;border-bottom: 3px solid #30476F;bottom: 60px;box-shadow: 0 8px 8px #888888;font-family: Arial;font-size: 16px;padding: 15px 30px 15px 15px;position: fixed;right: -147px;text-align: left;text-transform: uppercase;transition: all 1s ease 0s;z-index: 10;}
#fixed-share:hover {right: 0}
#fixed-share:hover > #share-box {right: 147px}
#share-box {background: none repeat scroll 0 0 #4C6699;bottom: 72px;box-shadow: 0 8px 8px #888888;height: 40px;position: fixed;right: 1px;text-align: center;transition: all 1s ease 0s;width: 40px;}
</style>
<div id="fixed-share">
<div id="share-box">
<img src="http://s10.postimg.org/s1a8ghl6t/Fb_Logo.png" />
</div>
<span>Support Us<br/> <script>(function(d){ var js, id =
'facebook-jssdk'; if (d.getElementById(id)) {return;} js =
d.createElement('script'); js.id = id; js.async = true; js.src =
"//connect.facebook.net/en_US/all.js#xfbml=1";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script> <fb:share-button expr:href='data:post.url'
type='button_count'/> </fb:share-button>
</span></div>

</b:if>

After adding, save the widget and template.

You are done now. Now you and your visitors can see this awesome Facebook Share button on your blogger blog.