Showing posts with label Blogger Widgets. Show all posts
Showing posts with label Blogger Widgets. Show all posts

Friday, August 26, 2016

Add "Back To Top" Button In Blogger Blog With Smooth Scrolling

back-to-top-button-for-blogger


In today’s tutorial we’ll show you how to add "back to the top" button in blogger blog with smooth scrolling in a easy steps. The button we’re going to create will see in the bottom-right of the page and it appears only when users scroll down the page allowing them to scroll to the top of the page.

If your blog have a lot of information or you write very long posts then you must have to add this widget in your blogger blog to make better user experience.


 Note:  In the process a mistakes might be made, so please backup your template before making any changes.

Lets start the tutorial.

Step 1. In this button we are going to use font awesome so we need to add it in template.

 Note:  If there is already a font awesome library in your template, ignore below code and go for the further steps.

[<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>]

Step 2. To add Back to Top button in blogger just navigate to Blogger Dashboard >> Template >> Edit HTML and Search for the code ]]></ b: skin>.

Now copy the below CSS code and paste it exact before   ]]></b:skin>  section.

 [#return-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.7);
    width: 50px;
    height: 50px;
    display: block;
    text-decoration: none;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    display: none;

}
#return-to-top i {
    color: #fff;
    margin: 0;
    position: relative;
    left: 16px;
    top: 10px;
    font-size: 19px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#return-to-top:hover {
    background: rgba(0, 0, 0, 0.9);
}
#return-to-top:hover i {
    color: #fff;
}]

Step 3. Now, find a </body> tag in your templates and paste below piece of code before </body> tag.

[</script>
<a href='javascript:' id='return-to-top'><i class='fa fa-chevron-up'/></a>
<script type='text/javascript'>
// ===== Back to Top ====
$(window).scroll(function() {
    if ($(this).scrollTop() &gt;= 50) {       
        $(&#39;#return-to-top&#39;).fadeIn(200); 
    } else {
        $(&#39;#return-to-top&#39;).fadeOut(200);  
    }
});
$(&#39;#return-to-top&#39;).click(function() {    
    $(&#39;body,html&#39;).animate({
        scrollTop : 0                     
    }, 500);
});
</script>]

Step 4. Finally, Save your template and see the result.

Bottom Line


So, this was the easy tutorial on how to add back to top button in Blogger. usually you can customize this code easily but if you are newbie then use the default code.

I hope that you found it helpful and I’m sure it will benefit for your readers.

If you still facing any problem while installing this widget then just drop your query in below comment box. I would love to hear from you and help you out. Happy Blogging!

Saturday, July 30, 2016

How To Add Multiple Author Info Box Widget In Blogger Posts

Professional Author Box For Blogger

If you are looking for a professional multiple author info box widget for blogger, then today i come up with the author box widget that you must have in addition to increase your blog design and authority. it will looks very attractive at the end of your blog posts. This author box displays the author name, Short description and three social media icons.

After finished reading article, many readers even i am try to find out who is the author of behind this article and what are the other articles written by that author. 

They want to connect and interact with you or they want to follow you on various social media networking sites to get instant updates from your blog.  therefore i have coded this simple and professional author box for blogger.

This widget automatically fetch your Google Plus info like profile image, introduction so you don't have to add additional info for you and your guest author.

In the tutorial you are going to learn how to add multiple author box widget in blogger below every blog post.

Professional Multiple Author Box Features

 

  • Multiple Authors Support
  • Auto From Google Plus
  • Professional Look
  • Responsive Design 
  • Short Code (doesn't affect on your blog loading speed)
  • Simple CSS Design
  • Very Easy To Install & Customization
  • Suits To Your Template

 

Adding Multiple Author Info Box Widget In Blogger

 

 Note:  To be on the safe side, Please back up your Blogger template before making any changes.

Step 1: Go to your blogger dashboard >> Template >> Edit HTML:

Step 2: Search for ]]></b:skin> the following code by pressing Ctrl+F  

Step 3: Now just before/above this code add following CSS code.

 [/* Multiple Author Box CSS Code*/
.authorboxwrap{background:#fff;margin:10px auto 20px;padding:20px;overflow:hidden;border-top:4px solid #bdc3c7;}
.avatar-container{float:left;padding:10px;margin:0 20px 0 0;background:rgba(0,0,0,0.07);border-radius:100%}
.avatar-container img{width:90px;height:auto;max-width:100%!important;border-radius:100%;transition:all .3s;}
.avatar-container img:hover{transform:rotate(-15deg)}
.author_description_container h4{font-size:18px;font-weight:600;display:block;margin:0;margin-bottom:2px}
.author_description_container h4 a{color:#333}
.author_description_container p{margin:0;color:#333;font-size:16px;margin-bottom:8px;line-height:25px;font-weight:400}
.social-links li{list-style:none!important;float:left}
.social-links a{border-bottom:none}
.social-links a:after,.social-links a:before{content:none!important}
.social-links li a{background:rgba(0,0,0,0.5);color:#fff;font-size:13px;text-align:center;display:inline-block;padding:0;margin:0 10px 0 0;width:30px;height:30px;line-height:30px;border-radius:100%}
.social-links li:nth-child(1) a{background:#516ca4;}
.social-links li:nth-child(2) a{background:#00c3f3;}
.social-links li:nth-child(3) a{background:#f20000;}
.social-links li a:hover{opacity:.9;color:#fff}
/* Multiple Author Box CSS Code*/]

Step 4: Now find <div class='post-footer'> and just above it paste the following piece of HTML code.

[<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='authorboxwrap'>
<div class='authorboxfull'>
<div class='avatar-container'>
<a href=''>
<img class='author_avatar' expr:alt='data:post.author' expr:src='data:post.authorPhoto.url' height='90' width='90'/>
</a>
</div>
<div class='author_description_container'>
<h4><a href='#' rel='author'><data:post.author/></a>
<i class='fa fa-check-circle' style='color:rgb(17,143,249);font-size:14px;' title='Verified Author'/></h4>
<p><data:post.authorAboutMe/><b/>
</p>
<div class='social-links'>
<li><a class='external external-link' href='#' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a></li>
<li><a class='external external-link' href='#' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a></li>
<li><a class='external external-link' href='#' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/></a></li>
<div class='clr'/>
</div>
</div>
</div>
</div>
<div style='clear:both'/>
</b:if>]

Step 5:  Add Facebook, Twitter and Google Plus links in above code and finally save template.

Customizing Google Plus Profile  


1) Go to your Google Plus Profile About>>Click edit on story Section and add your short introduction as shown in below image.


2) Click on "Save" button. 

3) Now we need to activate  "Show Author profile widget". Go to Blogger >> Layout >> Blog Posts >> Edit and now scroll down and tick mark the "Show Author Profile below post" option as shown in below image. 


4) Now save this widget.and see the result.

Try It Yourself


I hope this tutorial will make easy for you to add multiple author info box widget in blogger. Try this widget  on your blog and let me know how it works.

If you are facing any type of problem while installing this widget feel free and drop your questions in below comment section. I would like to help you out. Happy Blogging :)

Tuesday, March 17, 2015

5 Examples To Customize Blockquote Style In Blogger And WordPress

Customize Blockquotes Style In Blogger And WordPress

Blockquotes are usually used to indicate the quotation of a large section of text from external sources or highlight someone's quotes, thoughts in blog article.

Now day's every blogger started to using it on their blog to make blog article stand out and grab the reader’s attention.

Usually all blogging platform has a default styling for Blockquotes, but we should modify a default styling with something in relevance with your theme/template. So, this tutorial will show you how to customize blockquote style in Blogger and WordPress. along with it I'll present 5 stylish examples of customized blockquotes styles for your blog using CSS.

We'll be using different pseudo-elements like   :before :after   for creating a unique look for 5 examples. 

Many bloggers have a curiosity to know Is there an advantage or impact for SEO of blockquotes?

No! I don't think so, there are many probloggers uses blockquote on their blog and I haven't seen any example that tells me it can heart SEO. but it actually help you to rank well on Google. What do you say about it?

How To Customize Blockquote Style In Blogger/Blogspot:


To add customized blockquote style in blogger just navigate to Blogger Dashboard >> Template >> Edit HTML and Search for </head>
 
Now choose one of the styles suggested below and copy the CSS code and paste it before </head> tag.
Done! Save your template!

Now whenever you want to add blockquote style in your blog post just copy that text which you want to appear as a blockquote and hit icon as shown in below screenshot:

Blogger Blockquote

 

How To Customize Blockquote Style In WordPress Themes:


It's quite simple to add blockquote style in WordPress themes, you need to add the following codes to style.css or custom.css file of your theme. You can do this with another way just go to Appearance » Editor in your WordPress admin or edit.

Now, pick out on of the styles suggested below and design your blog/website for a better user interface.

wordpress blockquote

 

#BlockQuote Style 1: Simple

 

 In this example I have used Unicode for left double quote. you can increase the size of quotation mark just edit  font-size:4em;  with you size.

blockquote

BlockQuote Style 1 For Blogger:


<style>
.post blockquote {
background:#f9f9f9;
border-left:6px solid #ccc;
font-family: Georgia, serif;
margin:1.5em 10px;
padding:.5em 10px;
quotes:"\201C""\201D""\2018""\2019";
}
.post blockquote:before {
color:#ccc;
content:open-quote;
font-family: cambria, Georgia;
font-size:4em;
line-height:.1em;
margin-right:.25em;
vertical-align:-.4em;
}
.post blockquote p {
display:inline;
}
.post blockquote cite {
color: #999999;
font-size: 14px;
display: block;
margin-top: 10px;
}
</style>

BlockQuote Style 1 For WordPress:

    blockquote {
    background:#f9f9f9;
    border-left:6px solid #ccc;
    font-family: Georgia, serif;
    margin:1.5em 10px;
    padding:.5em 10px;
    quotes:"\201C""\201D""\2018""\2019";
    }
    blockquote:before {
    color:#ccc;
    content:open-quote;
    font-family: cambria, Georgia;
    font-size:4em;
    line-height:.1em;
    margin-right:.25em;
    vertical-align:-.4em;
    }
    blockquote p {
    display:inline;
    }
    blockquote cite {
    color: #999999;
    font-size: 14px;
    display: block;
    margin-top: 10px;
    }

#BlockQuote Style 2: Hover Effect


This was my favorite style, I found it on codepen, In this example you can see mouse hover effect which is looking really elegant.

Blockquote With Hover Effect
  

BlockQuote Style 2 For Blogger:


   <style>
   .post blockquote {
    text-align:left;
    font: 16px/24px Arial, sans-serif;
    color: #555;
    padding: 0.5em 10px;
    margin: 1.5em 10px;
    }
    .post blockquote:before {
    content: open-quote;
    font-size: 24pt;
    text-align: center;
    line-height: 42px;
    color: #fff;
    background: #ddd;
    float: left;
    position: relative;
    border-radius: 25px;
    margin-right: 0.5em;
    vertical-align: -0.4em;

    display: block;
     height: 25px;
     width: 25px;
    }
    .post blockquote:after {
    content: close-quote;
    font-size: 24pt;
    text-align: center;
    line-height: 42px;
    color: #fff;
    background: #ddd;
    float: right;
    position: relative;
    border-radius: 25px;
    margin-right: 1em;
    vertical-align: -0.5em;

    display: block; 

    height: 25px; 

    width: 25px;
    }
    .post blockquote:hover:after, blockquote:hover:before {
    background-color: #555;
    transition: all 350ms;
    -o-transition: all 350ms;
    -moz-transition: all 350ms;
    -webkit-transition: all 350ms;
    }
    </style>

BlockQuote Style 2 For WordPress:

 

blockquote {
text-align:left;
font: 16px/24px Arial, sans-serif;
color: #555;
padding: 0.5em 10px;
margin: 1.5em 10px;
}
blockquote:before {
content: open-quote;
font-size: 24pt;
text-align: center;
line-height: 42px;
color: #fff;
background: #ddd;
float: left;
position: relative;
border-radius: 25px;
margin-right: 0.5em;
vertical-align: -0.4em;
display: block;
height: 25px;
width: 25px;
}
blockquote:after {
content: close-quote;
font-size: 24pt;
text-align: center;
line-height: 42px;
color: #fff;
background: #ddd;
float: right;
position: relative;
border-radius: 25px;
margin-right: 1em;
vertical-align: -0.5em;
display: block;
height: 25px;
width: 25px;
}
blockquote:hover:after, blockquote:hover:before {
background-color: #555;
transition: all 350ms;
-o-transition: all 350ms;
-moz-transition: all 350ms;
-webkit-transition: all 350ms;


#BlockQuote Style 3: Using Dashed Border And Background Quote Image

 

In this example I have added dashed border around blockquote, Image for double quote and I have used Muli font from Google web fonts library. 

blockquote styling with dashed border

 

BlockQuote Style 3 For Blogger:


<style>
.post blockquote {
@import url(http://fonts.googleapis.com/css?family=Muli);
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVo2vmadAgsZ22Y8AXhsV5hG3-MVrBn_50S-hFSbQa_IK3EyLCI80gOvcdilqY6BGIAbcl73Sj3Y0rjbdZ0ACQUxjQacHaAIvIOL9-HdT6J0zRjyVWqewTs-BI9oatjkTZDdrpv8JUt3cl/h120/blockquote.png) no-repeat;
border: dashed 2px #ccc;
color: #333;
font-family: muli;
margin: 30px;
padding: 20px 30px 30px 40px;  

</style>

BlockQuote Style 3 For WordPress:


blockquote {
@import url(http://fonts.googleapis.com/css?family=Muli);
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVo2vmadAgsZ22Y8AXhsV5hG3-MVrBn_50S-hFSbQa_IK3EyLCI80gOvcdilqY6BGIAbcl73Sj3Y0rjbdZ0ACQUxjQacHaAIvIOL9-HdT6J0zRjyVWqewTs-BI9oatjkTZDdrpv8JUt3cl/h120/blockquote.png) no-repeat;
border: dashed 2px #ccc;
color: #333;
font-family: muli;
margin: 30px;
padding: 20px 30px 30px 40px;  

 

#BlockQuote Style 4:

 

Example 4 will have cool circle around quotation mark. 
 
blockquote

 


BlockQuote Style 4 For Blogger:

 

<style>
.post blockquote{
font-family: Georgia, Times, "Times New Roman", serif;
font-size: 16px;
border-top: solid 2px #dddddd;
border-left: solid 2px #dddddd;
border-right: solid 2px #dddddd;
border-bottom: solid 2px #dddddd;
margin: 1em 0px;
padding: 1em 1em;
font-family: Georgia, Times, "Times New Roman", serif;
font-style: italic;
font-size: 1em;
min-height: 60px;
}
.post blockquote:before {
display: block;
float: left;
content: "\201C";
font-size: 100px;
margin-right: 10px;
color: #fff;
background-color: #03C9A9;
padding: 15px 12px 5px 8px;
width: 50px;
height: 50px;
line-height: 90px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.post blockquote cite {
position: relative;
display: block;
text-align: right;
margin-top: 5px;
color: #999;
}
</style>

BlockQuote Style 4 For WordPress:


blockquote{
font-family: Georgia, Times, "Times New Roman", serif;
font-size: 16px;
border-top: solid 2px #dddddd;
border-left: solid 2px #dddddd;
border-right: solid 2px #dddddd;
border-bottom: solid 2px #dddddd;
margin: 1em 0px;
padding: 1em 1em;
font-family: Georgia, Times, "Times New Roman", serif;
font-style: italic;
font-size: 1em;
min-height: 60px;
}
blockquote:before {
display: block;
float: left;
content: "\201C";
font-size: 100px;
margin-right: 10px;
color: #fff;
background-color: #03C9A9;
padding: 15px 12px 5px 8px;
width: 50px;
height: 50px;
line-height: 90px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
blockquote cite {
position: relative;
display: block;
text-align: right;
margin-top: 5px;
color: #999;
}

#BlockQuote Style 5:


This was an awesome blockquote styleI found on codepen


awesome blockquotes


BlockQuote Style 5 For Blogger:


<style>
.post blockquote{
display:block;
background: #fff;
padding: 15px 20px 15px 45px;
margin: 0 0 20px;
position: relative;
font-family: Georgia, serif;
font-size: 16px;
line-height: 1.2;
color: #666;
text-align: justify; 
border-left: 15px solid #c76c0c;
border-right: 2px solid #c76c0c;
-moz-box-shadow: 2px 2px 15px #ccc;
-webkit-box-shadow: 2px 2px 15px #ccc;
box-shadow: 2px 2px 15px #ccc;
}
.post blockquote::before{
content: "\201C"; /*Unicode for Left Double Quotes*/
font-family: Georgia, serif;
font-size: 60px;
font-weight: bold;
color: #999; 
position: absolute;
left: 10px;
top:5px;
}
.post blockquote::after{
content: "";
}
.post blockquote a{
text-decoration: none;
background: #eee;
cursor: pointer;
padding: 0 3px;
color: #c76c0c;
}
.post blockquote a:hover{
color: #666;
}
.post blockquote em{
font-style: italic;
}
</style>  

BlockQuote Style 5 For WordPress:


blockquote{
display:block;
background: #fff;
padding: 15px 20px 15px 45px;
margin: 0 0 20px;
position: relative;
font-family: Georgia, serif;
font-size: 16px;
line-height: 1.2;
color: #666;
text-align: justify; 
border-left: 15px solid #c76c0c;
border-right: 2px solid #c76c0c;
-moz-box-shadow: 2px 2px 15px #ccc;
-webkit-box-shadow: 2px 2px 15px #ccc;
box-shadow: 2px 2px 15px #ccc;
}
blockquote::before{
content: "\201C"; /*Unicode for Left Double Quotes*/
font-family: Georgia, serif;
font-size: 60px;
font-weight: bold;
color: #999; 
position: absolute;
left: 10px;
top:5px;
}
blockquote::after{
content: "";
}
blockquote a{
text-decoration: none;
background: #eee;
cursor: pointer;
padding: 0 3px;
color: #c76c0c;
}
blockquote a:hover{
color: #666;
}
blockquote em{
font-style: italic;
}

Final Words!

So, this was the complete tutorial on how to customize blockquotes style in Blogger and WordPress. and I hope that you found it helpful and I’m sure it will benefit you a lot.

If you have any query's, or if I missed anything in this article please let me know, I would love to hear from you :)

Now tell me which is your favorite blockquote style? 

Tuesday, February 3, 2015

How To Add Professional Author Box In Blogger Below Every post

professional about the author box for blogger

Does your blog have a Professional Author Box? In addition to having the great blog design, you should have "about the author" box on your blog. it contains descriptive information about the author. even professional bloggers always prefer to add about author box at the end of the post on their blog, because they know peoples wants to know little about author who has written the post.

Must Read: How To Add Multiple Author Info Box Widget In Blogger Posts

Everyone wants to make his Blog or Website more attractive and professional. Therefore, I thought to share professional author box for blogger platform users who want to change the look of his blog.

In the following tutorial you are going to learn exactly how to add professional author box below every blog post in blogger. You can add an author box to the post footer in your Blogger blog by adding CSS + HTML code in your blogger template.

Professional Author Box Features :

 

  • Professional look
  • Fully responsive design 
  • Simple CSS Design
  • Very easy to use and customizable
  • Short code (doesn't affect on your blog loading speed)
  • Suits to your template

 

Adding Professional Author Box In Blogger :

 

 Note: To be on the safe side, I highly recommend you to back up your Blogger template before making changes.

Step 1
Go to your blogger dashboard >> Template >> Edit HTML:

Step 2
Search for the following code by pressing Ctrl+F
]]></b:skin> 

Step 3
Now just before/above this code add the following piece of CSS code.

 /*Professional Author Box CSS Code*/
.about-author {
width : 750px;
overflow : hidden;
margin:10px 0px;
border:0px;
    background: #f2f2ef;
    margin: 0 0 30px 0;
    padding: 10px;
    border: 1px solid #EAEDEF;
    overflow: hidden;
    color: #333333;
    font-size: 14px;
    font-family: Georgia, Tahoma, Verdana;
    line-height: 24px;
}
.about-author img {
display: block;
width: 90px;
height: 90px;
margin: 0 1.2em 0 0;
float: left;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
-webkit-border-radius: 999em;
-moz-border-radius: 999em;
border-radius: 999em;
border: 2px solid #ddd;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
.about-author h3{
font-family:georgia !important;
font-size:18px !important;
margin:9px 0px !important;
color:#666 !important;
border-bottom:2px solid #666 !important;
border-top:0px !important;
}
.about-author p {
margin:0px;
text-align:justify;
color:#666;
}
/*Professional Author Box CSS Code*/

Step 4
Next search for 

 <data:post.body/>

Step 5
Now just after/below this code add the following piece of HTML code.


<div class="about-author">
<h3>About Author:</h3>
<img align="left" src="Paste Your Image URL Here"/><p>Write Something About Yourself</p><br/>
<p>Let's Get Connected: <a href="http://twitter.com/shoutersclub" rel="nofollow" target="_blank"><font color="#00aced">Twitter</font></a> | <a href="http://www.facebook.com/shoutersclub" rel="nofollow" target="_blank"><font color="#3b5998">Facebook</font></a> | <a href="http://plus.google.com/109208666606854207231" rel="nofollow"><font color="#dd4b39">Google Plus</font>
</a></p>
</div>

   

Customization :

 

  • Paste Your Image URL Here : Add Your Profile Picture
  • Write Something About Yourself 
  • http://twitter.com/shoutersclub : Replace with your Twitter page URL
  • http://www.facebook.com/shoutersclub : Replace with your Facebook page URL
  • http://plus.google.com/109208666606854207231 : Replace with your Google Plus page URL

Step 6
Finally, Save your template and see the result.

Final Words! 


Friends! I will come up with a post on the same, but for now if you want to make sure not to miss it, subscribe to our Newsletter!. 

Still if you have any questions or confused about the process then feel free to ask via comments. I would like to help you out. Happy Blogging!

Thursday, January 22, 2015

Social Media Buttons With CSS3 Cubic Bezier Transition Effect

social media buttons with css3 cubic bezier transition effect

Hi friends, Today I came up with new social media widget or buttons with CSS3 cubic bezier transition effect. There are many social media widgets with transition effect you might seen before but this widget have transition effects with cubic bezier. and button is highlighted with awesome effects such as bouncing ( like using j Query easing ) well get on with it.

Also Read: How To Add Professional Author Box In Blogger Below Post

HTML Code


HTML structure of button divided it in li to facilitate the increase / decrease buttons you want , please delete the section "< li > <a href="#" class="icon cb" > < span > ....... < / span > </a> < / li >". For example, If you want to delete YouTube button then just delete < li > <a href="#" class="icon ytube" > < span > YouTube < / span > </a> < / li >.

[<div id="buttoncb">
<ul>
   <li ><a href="#" class="icon fb" ><span>Facebook</span></a></li>
   <li ><a href="#" class="icon twiter" ><span>Twitter</span></a></li>
   <li ><a href="#" class="icon google" ><span>Google+</span></a></li>
   <li ><a href="#" class="icon pint" ><span>Pinterest</span></a></li>
   <li ><a href="#" class="icon linkedin" ><span>LinkedIn</span></a></li>
   <li ><a href="#" class="icon devart" ><span>DeviantArt</span></a></li>
   <li ><a href="#" class="icon ytube" ><span>Youtube</span></a></li>
   <li ><a href="#" class="icon rss" ><span>RSS</span></a></li>
</ul>
</div>]

 

CSS And CSS3 Transition :


Below is the CSS code used to create the effect on this button . CSS3 is used to give the effect is by using a cubic - bezier transition ( 1,2,0,0 ) is on all elements . For more details see the code below.

[#buttoncb ul {margin:10px 15px;padding:0px;}
#buttoncb ul li {list-style-type: none;padding: 0;background: transparent;margin: 0;}
#buttoncb ul li a{background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqB0K3f8hp1CTGyKKXSEKRujgnSCSFTAEVP4_p0PTL1WkRqOg652_mHMohIJLoac76J22zp7HiWWRpTAq_mJ_xIPFW0UcC_F-HMu0JLH0JMJE91T44pGPWgI5MrhxguMbI7dsuVFeDcSQ/s1600/blsocial12.png') 0 0 no-repeat;   height:48px;padding-left: 48px;cursor: pointer;text-decoration: none;border-radius:0.5em;-moz-border-radius:0.5em;-webkit-border-radius:0.5em;-o-border-radius:0.5em;display:inline-block;margin:0;width: 220px;}
#buttoncb ul li:hover span {margin-left: 10px;opacity: 1;}
#buttoncb ul li span {border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
color: white;
margin-left: 100px;
opacity: 0;
position: relative;
text-align: center;
width: auto;
padding: 5px 10px;
transition: all 0.3s cubic-bezier(1,2,0,0) 0s;
-moz-transition: all 0.3s cubic-bezier(1,2,0,0) 0s;
-webkit-transition: all 0.3s cubic-bezier(1,2,0,0) 0s;
top: 14px;}
#buttoncb span{padding:5px;background:#000;color:#fff;margin:0 5px;}
#buttoncb .fb span {background-color: #0853A3;}
#buttoncb .twiter span {background-color: #00B1F7;}
#buttoncb .google span {background-color: #9E0202;}
#buttoncb .pint span {background-color: #D00;}
#buttoncb .linkedin span {background-color: #005075;}
#buttoncb .devart span {background-color: #4C7A4A;}
#buttoncb .ytube span {background-color: #A00;}
#buttoncb .rss span {background-color: #EC5601;}
#buttoncb a.fb {  background-position: 0 -384px;}
#buttoncb a.twiter {  background-position: 0 -432px;}
#buttoncb a.google {  background-position: 0 -480px;}
#buttoncb a.pint {  background-position: 0 -528px;}
#buttoncb a.linkedin {  background-position: 0 -576px;}
#buttoncb a.devart { background-position: 0 -624px;}
#buttoncb a.ytube {  background-position: 0 -672px;}
#buttoncb a.rss {  background-position: 0 -720px;}
#buttoncb a.fb:hover { background-position: 0 0px;color: #0374DD;}
#buttoncb a.twiter:hover {  background-position: 0 -48px;color: #00A1DF;}
#buttoncb a.google:hover {  background-position: 0 -96px;color: #A70000;}
#buttoncb a.pint:hover {  background-position: 0 -144px;color: #C00;}
#buttoncb a.linkedin:hover {  background-position: 0 -192px;color: #005772;}
#buttoncb a.devart:hover { background-position: 0 -240px;color: #4C7A4A;}
#buttoncb a.ytube:hover {  background-position: 0 -288px;color: #A00;}
#buttoncb a.rss:hover {  background-position: 0 -336px;color: #EC5601;]

 

How To Install This Widget In Blogger :


1. Go to Blogger Dashbord >>Layout
 
blogger layout

















2. Click Add a Gadget

add gadget

3. Choose HTML/Javascript

choose html/javascript

Copy below Code :

[<style type="text/css">
#buttoncb ul {margin:10px 15px;padding:0px;}
#buttoncb ul li {list-style-type: none;padding: 0;background: transparent;margin: 0;}
#buttoncb ul li a{background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqB0K3f8hp1CTGyKKXSEKRujgnSCSFTAEVP4_p0PTL1WkRqOg652_mHMohIJLoac76J22zp7HiWWRpTAq_mJ_xIPFW0UcC_F-HMu0JLH0JMJE91T44pGPWgI5MrhxguMbI7dsuVFeDcSQ/s1600/blsocial12.png') 0 0 no-repeat;   height:48px;padding-left: 48px;cursor: pointer;text-decoration: none;border-radius:0.5em;-moz-border-radius:0.5em;-webkit-border-radius:0.5em;-o-border-radius:0.5em;display:inline-block;margin:0;width: 220px;}
#buttoncb ul li:hover span {margin-left: 10px;opacity: 1;}
#buttoncb ul li span {border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
color: white;
margin-left: 100px;
opacity: 0;
position: relative;
text-align: center;
width: auto;
padding: 5px 10px;
transition: all 0.3s cubic-bezier(1,2,0,0) 0s;
-moz-transition: all 0.3s cubic-bezier(1,2,0,0) 0s;
-webkit-transition: all 0.3s cubic-bezier(1,2,0,0) 0s;
top: 14px;}
#buttoncb span{padding:5px;background:#000;color:#fff;margin:0 5px;}
#buttoncb .fb span {background-color: #0853A3;}
#buttoncb .twiter span {background-color: #00B1F7;}
#buttoncb .google span {background-color: #9E0202;}
#buttoncb .pint span {background-color: #D00;}
#buttoncb .linkedin span {background-color: #005075;}
#buttoncb .devart span {background-color: #4C7A4A;}
#buttoncb .ytube span {background-color: #A00;}
#buttoncb .rss span {background-color: #EC5601;}
#buttoncb a.fb {  background-position: 0 -384px;}
#buttoncb a.twiter {  background-position: 0 -432px;}
#buttoncb a.google {  background-position: 0 -480px;}
#buttoncb a.pint {  background-position: 0 -528px;}
#buttoncb a.linkedin {  background-position: 0 -576px;}
#buttoncb a.devart { background-position: 0 -624px;}
#buttoncb a.ytube {  background-position: 0 -672px;}
#buttoncb a.rss {  background-position: 0 -720px;}
#buttoncb a.fb:hover { background-position: 0 0px;color: #0374DD;}
#buttoncb a.twiter:hover {  background-position: 0 -48px;color: #00A1DF;}
#buttoncb a.google:hover {  background-position: 0 -96px;color: #A70000;}
#buttoncb a.pint:hover {  background-position: 0 -144px;color: #C00;}
#buttoncb a.linkedin:hover {  background-position: 0 -192px;color: #005772;}
#buttoncb a.devart:hover { background-position: 0 -240px;color: #4C7A4A;}
#buttoncb a.ytube:hover {  background-position: 0 -288px;color: #A00;}
#buttoncb a.rss:hover {  background-position: 0 -336px;color: #EC5601;}
</style>
<div id="buttoncb">
<ul>
   <li ><a href="Your Facebook Page URL" class="icon fb" ><span>Facebook</span></a></li>
   <li ><a href="Your Twitter Page URL" class="icon twiter" ><span>Twitter</span></a></li>
   <li ><a href="Your Google+ ID" class="icon google" ><span>Google+</span></a></li>
   <li ><a href="Your Pinterest ID" class="icon pint" ><span>Pinterest</span></a></li>
   <li ><a href="Your Linkedin Page URL" class="icon linkedin" ><span>LinkedIn</span></a></li>
   <li ><a href="Your Deviant Art URL" class="icon devart" ><span>DeviantArt</span></a></li>
   <li ><a href="Your Youtube ID" class="icon ytube" ><span>Youtube</span></a></li>
   <li ><a href="Your RSS ID" class="icon rss" ><span>RSS</span></a></li>
</ul>
</div>]

Please replace the part that highlighted in Red color with your link". So if you want to increase your followers/fan page likes grab this widget now !