Youtube Android,Blogging SEO & Whatsapp Tricks

youtube SEO, tricks for blogger, wordpress tricks for earning money online youtube earning, whatsapp,windows, android & all about new technology.

Showing posts with label Widgets. Show all posts

How to Show Total Number of Post, Comment in Blogger / Blogspot Blog?


Do you want show (Display) Total number of published post and comments in blogger / BlogSpot blog? Some people love to show total number of post and comments in Blog. 

If you want to show total number of post, comment in your blog you just need add a JavaScript in your blog by adding Gadget.

It very easy to add this widget in your blogger blog just add below given JavaScript in your blog.


Follow Below given step to add total number of post, comment Display in your blog.

Sign in – in your blogger account

Select your Blog in which blog you want to Display total number of post and comments

Go to Layout Option.

 In Layout option there is an Add Gadget Option Select this (see below demo image)


Blogger add a gadget option


After select Add Gadget a popup window will be open (Add Gadget window)

 Now select “HTML/JavaScript” Gadget. (See below demo image)

Blogger html/Java Script adding gadget


Now add below given JavaScript in Content Box. (See below demo image)      



Please Copy Below JavaScript and paste  in HTML/JavaScript Content box
<script style="text/javascript">function mbhTotalCount(json) {document.write(parseInt(json.feed.openSearch$totalResults.$t,10));}</script><p style="font:20px Tahoma;">Total Posts: <script src="http://www.example.com/feeds/posts/default?alt=json-in-script&callback=mbhTotalCount"></script></p><p style="font:20px Tahoma;">Total Comments: <script src="http://www.example.com/feeds/comments/default?alt=json-in-script&callback=mbhTotalCount"></script></p>

Note: - Please replace http://www.example.com with your blog URL

Now press Save Button after save press Save Arrangement Button on layout page.

Now check your blog.

Thanks i hope you like this post





Add Floating Facebook Like Box in Blogger

facebook floating line box

Increase your Facebook page Likes add floating widget in your blog when someone bring mouse cursor in Facebook image a facebook like box will be appear it’s a cool widget for blogger you can see live demo on this page right side of this page. So add this sliding floating facebook like box widget in your blogger blog and increase your blog reader fans.

How to Add Facebook Floating Like Box Widget in Blogger

Follow Below steps for Add Facebook Floating Widget

  1. Go to Blogger
  2. Take Backup of your Blog Template
  3. Search For <head>
  4. Just Below of <head> past the following JQuery Code only if you are Not yet using Jquery Script on your blog

  5. Add Below JQuery inside the head tag only if yet you are not using Jquery script in your blog

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>

  6. Now Add Below Given Code in your blog by add a widget option
  7. Below demo indicator
    Copy and Past Below Code in Your Blog

    <!--Floating Facebook Widget START-->
    <script type="text/javascript"> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(".vktechzone").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);}); /*]]>*/ </script> <style type="text/css"> .vktechzone{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVRUQBFGdPbZE4cB5FOKHL8rPHnbuvvlul-IOsyL4ZolGbGyzus6MbSp9ZvCAQBvMBANJnxG8IorLAfQ-yNi14T-lJdF_fGWKSv8g26L87un9K6EBdpAhiVX4jeHGS7QF2PELRJdD1LTuB/s1600/ABT_facebook_widget.png") no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;} .vktechzone div{ padding: 0; margin-right:-8px; border:4px solid #3b5998; background:#fafafa;} .vktechzone span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .vktechzone span a{color: gray;text-decoration:none;} .vktechzone span a:hover{text-decoration:underline;} } </style><div class="vktechzone" style="">
    <div>
    <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fvktechzone&width=245&colorscheme=light&show_
    faces=true&border_color=white&connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;color:000;"></iframe><span><center>
    <a style="color:#a8a8a8;font-size:8px;" href="http://www.vktechzone.com/2014/05/add-floating-facebook-like-box-in.html">Get This Widget</a></center>
    </span></div>
    </div>
    <!--Floating Facebook Widget END-->

    Note:- Replace vktechzone with your Facebook page ID.

    How to Add Html/Java widget? Follow below steps to add Widget

    1. Go to Blogger
    2. Go to your blog Layout option.
    3. Now Select Add a Gadget option.
    4. Now select Html/Java Script option
    5. Now past the above code in Content area field and press save button.





How to add whatsapp text share button in blogger or websites

Add whatsapp text and content sharing button on your website or your blog this is very nice and easy way to provide a feature to audience to share important or useful Information content to friends whatsapp user is increasing day by day so Add whatsapp text sharing button in your website we make this button smart and advance this button will appear only in tab or mobile device this share button will not show in non whatsapp supporting device like Desktop laptop.
  • whatsapp share button Available in 3 Size Small, Medium and Large.
  • For Live Demo Open this page in mobile or Tab



    How to add this Button on your site or blog? Follow below Steps for add this button.
    Add Below Given Script in Head Section between <head> </head> tag.
    Add Below Script inside the head tag

    <script src='https://a7e50d3a86e6aca56fcd2aeeeb52875a2b2e08af.googledrive.com/host/0B6vyeno3zhEbfnlPVUxHTDBZdDlPWm53bUhaSDVLMkFqSkY4cDAyYWhZdnBDTURVa0dZTjQ/dist/whatsapp-button.js' type='text/javascript'></script>
    Now use below given any button Code in your page and add your content in this code as below given.
    Copy and use below code for add button in your website

    Use below code for small button

    <a class="wa_btn wa_btn_s" data-href="." data-text="Add Content here which you want to share" href="whatsapp://send" style="display: none;">Share</a>

    Use below code for Medium Size button

    <a class="wa_btn wa_btn_m" data-href="." data-text="Add Content here which you want to share" href="whatsapp://send" style="display: none;">Share</a>

    Use below code for Large Size button

    <a class="wa_btn wa_btn_l" data-href="." data-text="Add Content here which you want to share" href="whatsapp://send" style="display: none;">Share</a>

    Note :-
    Replace Add Content here which you want to share Text with your Text Which you want to share by clicking this button.
    I hope now you understand how to add whatsapp button in website if you want my help you can add your quetion in Comment Area click Comment Link which is show Below of this page Heading

    Social Media Connecting Rotating Button for Blogger


    Connecting social media cool rotate button for blogger add social media following button in your blog or website for connect facebook, twitter, Google+, Pinterest, Page or Rss feed.

    How to add this rotate social button in your blog

    Add Below Given Code in your blog to show Rotate social button on your blog.

    Below demo indicator
    Copy and Past Below Code in Your Blog

    <style>p#vktechzone_socialicons img {
    -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#vktechzone_socialicons img:hover {
    -moz-transform: rotate(160deg);
    -webkit-transform: rotate(120deg);
    -o-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    transform: rotate(120deg);
    }
    </style>
    <center><p id="vktechzone_socialicons">
    <a href="http://www.facebook.com/ vktechzone"target="blank">
    <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg6bxcbFGiw_EUsDdWY8vDpsUkSwJVk2qcZHx6Pjti-89fJ2dH0O31C0rKJ16gdpoEAZxCWtH44WMEBIjzupGdjETMsWQMrbqDIymKDIbcScfS6GhLNTI3wV_M_kgZy4s22WFs5Sxl0Hs/s64-no/Facebook+jagged+edge.png"></a>
    <a href="http://www.twitter.com/vktechzone"target="blank">
    <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxykL1I9farsBK18U5SHCWYlvqLHr4Zffq8k89VfZkmPUcaLwd6cA_df5L4I33vYDGU2rutApUhp3fXWK7mKWidjHGNH-TJnUzb3ccQ7x9BD73xtjQzMi7Eh9nnPHyMxG2mcStV39mKYw/s64-no/jagged+twitter.png"></a>
    <a href="https://plus.google.com/111153762318745795031/posts"target="blank">
    <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS_FrcCJEO_70fA-SJ3QRpAuDDIr8pi7aKfMgnfp76OkuLgIJ6K6ji2gwiuez6vR-PhAlB12bvJ2W-w4H3mkSAAtAB7M4H6FncZTek4qHTsUrVotPzwTwDLE3cV_ocPtu6FZTLAhHVAfQ/s64-no/google+plus+jagged+edge.png"></a>
    <a href="http://pinterest.com/vktechzone/"target="blank">
    <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVdUkptxzAQDaIYohQWPdJmKx47zCYwnmyqbN3yNUbaDTby6TZ5Reko88yZgw87GjzCqvAcVfuC0gOH5-lmYw8_48SWRezF5LTC59-ZlM_PgTO5Q7CuOPighBoiIt7brSq2iEWWHsGW-g/s64-no/pinterest+jagged+edge.png"></a>
    <a href="http://www.vktechzone.com/feeds/posts/default"target="blank">
    <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzyssWNGvS4PF55EFgdM4yZcmpTbfJGnMQmy6tA7xWZ8RcFkYw2awk8fDWY2pLd-rsFmPkg7QHXYgLz0qxYmqcRBxpvmazLFyGym0yRXBcjReZIYBRxHTZpFWozeyZD595O1nNePdvtDg/s64-no/RSS+jagged+edge.png"></a>
    </p></center>
    <small><div style="font-size:50%; text-align:right;"><a href="http://www.vktechzone.com" target="_blank" title="Get This Widgets">Widget by vktechzone</a></div></small>

    Note:-Replace vktechzone with your facebook page ID Replace 111153762318745795031 with your Google+ page ID Replace vktechzone with your Twitter ID Replace vktechzone with your Pinterest ID Replace http://www.vktechzone.com/feeds/posts/default with your Blog RSS URL
    How to Add Html/Java widget? Follow below steps to add Widget

    1. Go to Blogger
    2. Go to your blog Layout option.
    3. Now Select Add a Gadget option.
    4. Now select Html/Java Script option
    5. Now past the above code in Content area field and press save button.


    6. You May Also Like-Floating Facebook Like Box
    You May Also Like-Magical Effect Social button

    You can drag and adjust widget place in blogger layout

    Add Back To Top Button in Blogger With Smooth Scrolling

    Go Back to top smoot  Scrolling button
    Forget old way pressing scrolling button for go to the top and it’s take time to reach to top add new smooth back to top button it’s very cool widget for blogger or webpage suppose your webpage is very long and user wants to go in the top of the page it’s a best way to adding a smooth scrolling button for again go to the top.

    How to add back to top smooth button

    Follow Below steps for Add Back to top buttong for blogger

    1. Go to Blogger
    2. Take Backup of your Blog Template
    3. Search For <head>
    4. Just Below of <head> past the following JQuery Code only if you are Not yet using Jquery Script on your blog

    5. Add Below JQuery inside the head tag only if yet you are not using Jquery script in your blog

      <script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>

    6. Now Add Below Given Code in your blog by add a widget option
    7. Below demo indicator
      Copy and Past Below Code in Your Blog

      <!--Smooth Back to Top Button Start-->
      <script>
      jQuery(document).ready(function() {
      var offset = 220;
      var duration = 500;
      jQuery(window).scroll(function() {
      if (jQuery(this).scrollTop() > offset) {
      jQuery('.back-to-top').fadeIn(duration);
      } else {
      jQuery('.back-to-top').fadeOut(duration);
      }
      });
      jQuery('.back-to-top').click(function(event) {
      event.preventDefault();
      jQuery('html, body').animate({scrollTop: 0}, duration);
      return false;
      })
      });
      </script>
      <style>
      div#page {
      max-width: 900px;
      margin-left: auto;
      margin-right: auto;
      padding: 20px;
      }
      .back-to-top {
      position: fixed;
      bottom: 2em;
      right: 0px;
      text-decoration: none;
      color: #000000;
      background-color: rgba(235, 235, 235, 0.80);
      font-size: 12px;
      padding: 1em;
      display: none;
      }
      .back-to-top:hover {
      text-decoration: none;
      }
      </style>
      <a href="#" class="back-to-top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7dzI2r6m1BYVz5Weu5N3tvNdzf3Gvlwzht9MKPHomD2lEuX6gdrGAcNInR6MPmfZmeq2Cto0ANatQ9oxIWtv9saD-HvIqJRcDoOCGkGem7LyY_urw1eei8kSLJC0G8M8DnLNHVJdI_80c/s1600/back+to+top+.png" alt="Back to Top" / ></a>
      <!--Smooth Back to Top Button End-->

      Note:- you can use your favorite image for up arrow Only replace https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7dzI2r6m1BYVz5Weu5N3tvNdzf3Gvlwzht9MKPHomD2lEuX6gdrGAcNInR6MPmfZmeq2Cto0ANatQ9oxIWtv9saD-HvIqJRcDoOCGkGem7LyY_urw1eei8kSLJC0G8M8DnLNHVJdI_80c/s1600/back+to+top+.png with your image URL.

      How to Add Html/Java widget? Follow below steps to add Widget

      1. Go to Blogger
      2. Go to your blog Layout option.
      3. Now Select Add a Gadget option.
      4. Now select Html/Java Script option
      5. Now past the above code in Content area field and press save button.





    Back to Top
    Click Above Image for Live Demo


    Beautiful Black with Red Border Subscribe via Email Widget for Blogger


    Keep update your blog reader send them new update post via email provide subscribe via Email option in your blog. Add this beautiful e-mail subscribe widget in your blog.
    Below demo indicator


    Subscribe To Get FREE Updates!


    How to Add Subscribe via Email Widget in blogger?

    Copy below given code and past this code in your blog via add Html/JavaScript Gadget option
    Note:-Replace AllBloggingNewTechnologyZone with your Feedburner ID

    Copy and Past Below Code in Your Blog
    <style>
    #Subscribe-box{background: -webkit-gradient(linear, left top, left bottom, from(#333), to(#1a2638));;border:2px
    solid #FF0000;border-radius:10px; margin-bottom:10px;padding:10px;text-align:center;background: -moz-linear-gradient(top, #333, #1a2638)}
    #Subscribe-box h1{margin-top:5px; color:#FFF;font-family:georgia;font-size:25px;margin-bottom:5px;padding:0;text-shadow:0 2px 3px #000;line-height:35px}
    #Subscribe-box input{background: -moz-linear-gradient(center top , #FFFFFF, #EFEFEF) repeat scroll 0 0 transparent;border:medium none;border-radius:10px 10px 10px 10px;font-size:14px;padding:10px;text-shadow:1px 1px 0 #FFF;width:280px; color:#666; font-family:georgia; margin-bottom:5px;}
    #Subscribe-box .submit{background: -webkit-gradient(linear, left top, left bottom, from(#369a18), to(#205f0d));background: -moz-linear-gradient(center top , #369A18, #205F0D) repeat scroll 0 0 transparent;color:#FFF;cursor:pointer;font-weight:bold;margin-left:20px;text-shadow:0 1px 2px #000;width:120px; font-family:georgia; margin-left:5px;}
    #Subscribe-box .submit:hover{background: -moz-linear-gradient(center top , #46B725, #205F0D) repeat scroll 0 0 transparent}
    #Subscribe-box .submit:active{background: -moz-linear-gradient(center top , #46B725, #205F0D) repeat scroll 0 0 transparent}
    </style>
    <div id='Subscribe-box'><h1>Subscribe To Get FREE Updates!</h1><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=AllBloggingNewTechnologyZone&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><center> <input name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter Your Email Address...&quot;;}' onfocus='if (this.value == &quot;Enter Your Email Address...&quot;) {this.value = &quot;&quot;}' size='30' type='text' value='Enter Your Email Address...'/> <input name='uri' type='hidden' value='AllBloggingNewTechnologyZone'/> <input name='loc' type='hidden' value='en_US'/> <input class='submit' type='submit' value='Subscribe'/></center></form></div>



    Facebook popup like box widget

    Add popup Facebook Like box gadget in Blogger

    Facebook like box for website or blog add beautiful facebook page like recommended widget increase your page liker how it work when your webpage open a popup window will appear for recommending like your facebook page. Grow facebook page likes increase blogger blog or website readers.

    Specialty of this widget.

    1. this widget appear after 20 second of page load. you can customize time according to you change delay(20000) in below code for change delay time.
    2. most important feature of this widget this widget appear only one time this widget will not disturb to visitors  by showing popup box again n again (if viewer delete the cookies and open this page again then popup box again will show for 1st time).

    you can see live demo on this page.

    Follow Below steps for Add this widget

    1. Go to Blogger
    2. Take Backup of your Blog Template
    3. Search For <head>
    4. Just Below of <head> past the following JQuery Code only if you are Not yet using Jquery Script on your blog

    5. Add Below JQuery inside the head tag only if yet you are not using Jquery script in your blog

      <script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>

    6. Now Add Below Given Code in your blog by add a widget option
    7. Below demo indicator
      Copy and Past Below Code in Your Blog

      <!-- Facebook Popup Widget START -->
      <style>
      #vktechzone-back {
      display:none;
      background:rgba(0,0,0,0.8);
      width:100%;
      height:100%;
      position:fixed;
      top:0;
      left:0;
      z-index:99999;
      }
      #vktechzone-exit {
      width:100%;
      height:100%;
      }
      #vktechzone1 {
      background:white;
      width:420px;
      height:270px;
      position:absolute;
      top:58%;
      left:63%;
      margin:-220px 0 0 -375px;
      -webkit-box-shadow: inset 0 0 50px 0 #939393;
      -moz-box-shadow: inset 0 0 50px 0 #939393;
      box-shadow: inset 0 0 50px 0 #939393;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
      margin: -220px 0 0 -375px;
      }
      #vktechzone-fb-popup {
      float:right;
      cursor:pointer;
      height:15px;
      padding:20px;
      position:relative;
      padding-right:40px;
      margin-top:-20px;
      margin-right:-22px;
      }
      .vktechzone-fb-like {
      height:1px;
      width:366px;
      margin:0 auto;
      background:#F3F3F3;
      margin-top:16px;
      position:relative;
      margin-left:20px;
      }
      #linkit,#linkit a.visited,#linkit a,#linkit a:hover {
      color:#80808B;
      font-size:10px;
      margin: 0 auto 5px auto;
      float:center;
      }
      </style>

      <script type='text/javascript'>
      //<![CDATA[
      jQuery.cookie = function (key, value, options) {
      // key and at least value given, set cookie...
      if (arguments.length > 1 && String(value) !== "[object Object]") {
      options = jQuery.extend({}, options);
      if (value === null || value === undefined) {
      options.expires = -1;
      }
      if (typeof options.expires === 'number') {
      var days = options.expires, t = options.expires = new Date();
      t.setDate(t.getDate() + days);
      }
      value = String(value);
      return (document.cookie = [
      encodeURIComponent(key), '=',
      options.raw ? value : encodeURIComponent(value),
      options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
      options.path ? '; path=' + options.path : '',
      options.domain ? '; domain=' + options.domain : '',
      options.secure ? '; secure' : ''
      ].join(''));
      }
      // key and possibly options given, get cookie...
      options = value || {};
      var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
      return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
      };
      //]]>
      </script>
      <script type='text/javascript'>
      jQuery(document).ready(function($){
      if($.cookie('popup_user_login') != 'yes'){
      $('#vktechzone-back').delay(20000).fadeIn('medium');
      $('#vktechzone-fb-popup, #vktechzone-exit').click(function(){
      $('#vktechzone-back').stop().fadeOut('medium');
      });
      }
      $.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });
      });
      </script>
      <div id='vktechzone-back'>
      <div id='vktechzone-exit'>
      </div>
      <div id='vktechzone1'>
      <div id='vktechzone-fb-popup'>Close
      </div>
      <div class='vktechzone-fb-like'>
      </div>
      <iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
      href=http://www.facebook.com/vktechzone&width=402&height=255&colorscheme=light&
      show_faces=true&show_border=false&stream=false&header=false'
      style='border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;'></iframe><center>
      <span id="linkit"><a href="http://www.vktechzone.com">Get This Widget</a></span></center>
      </div>
      </div>
      <!-- Facebook Popup Widget END-->

      Note:- Replace vktechzone with your Facebook page ID.

      How to Add Html/Java widget? Follow below steps to add Widget

      1. Go to Blogger
      2. Go to your blog Layout option.
      3. Now Select Add a Gadget option.
      4. Now select Html/Java Script option
      5. Now past the above code in Content area field and press save button.


      6. You may also like to try Facebook Floating Like box


    Social Media Follow us Magical Effect Widget for Blogger

    Social Media Follow  widget

    Social follow us gadgets for blogger add this beautiful widget for go to your Facebook, Twitter, Google+, Pinterest pages and RSS feed it’s look so cool when you bring your mouse cursor it will be large and Dark you can see below demo.
    Below demo indicator



    Add Below Given Code in your blog by add a widget option for social media button in your blog.

    Below demo indicator
    Copy and Past Below Code in Your Blog

    <style>
    #abt{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;}
    #abt a{text-decoration:none; font-family:trebuchet ms,sans-serif;}
    #abt li{position:relative; height:38px; cursor:pointer; padding: 0 !important;}
    #abt .facebook, .googleplus, .pinterest, .rss, .twitter{position:relative; z-index:5; display:block; float:none; margin:10px 0 0; width:210px; height:38px; border-radius:5px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8JNEQVZDmZJZk8fUQXySLypsS5-UYGQts5GGwY99tAdPgmX1KKpJRT69haRgJD6V3YoifqZkf4j2LEWe9NdyyOEkah-ZDfrW_nzx-P1IDIXlhluLIP0V5Rqqu2GBrIpcPIgoXo2ZGISM/w35-h158-no/facebook+and+google%252B+.png) no-repeat; background-color:rgba(217,30,118,.42); -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px; box-shadow:rgba(0,0,0,.28) 0 2px 3px; color:#141414; text-align:left; text-indent:50px; text-shadow:#333 0 1px 0; white-space:nowrap; line-height:32px; -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-transition:width .25s ease-in-out,background-color .25s ease-in-out; transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;}
    #abt li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt); line-height:32px;}
    #abt .icon{overflow:hidden; color:#fafafa;}
    #abt .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;}
    #abt .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;}
    #abt .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;}
    #abt .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;}
    #abt .rss{ width:32px; height:32px; background-color:rgba(255,102,0,0.42); background-position:-3px -126px;}
    #abt li:hover .icon,
    .touch #abt li .icon{width:210px;}
    .touch #abt li .facebook, #abt li:hover .facebook{background-color:rgba(59,89,152,1);}
    .touch #abt li .twitter, #abt li:hover .twitter{background-color:rgba(64,153,255,1);}
    .touch #abt li .googleplus, #abt li:hover .googleplus{background-color:rgba(228,69,36,1);}
    .touch #abt li .pinterest, #abt li:hover .pinterest{background-color:rgba(174,45,39,1);}
    .touch #abt li .rss, #abt li:hover .rss{background-color:rgba(255,102,0,1);}
    </style>
    <ul id="abt">
    <li data-alt="Follow us on Facebook"><a class="icon facebook" href="http://www.facebook.com/vktechzone"target="blank">Follow us on Facebook</a></li>
    <li data-alt="Follow us on Google+"><a class="icon googleplus" href="https://plus.google.com/111153762318745795031/posts"target="blank">Follow us on Google+</a></li>
    <li data-alt="Follow us on twitter"><a class="icon twitter" href="https://www.twitter.com/vktechzone"target="blank">Follow us on Twitter</a></li>
    <li data-alt="Follow us on Pinterest"><a class="icon pinterest" href="http://pinterest.com/vktechzone/"target="blank">Follow us on Pinterest</a></li>
    <li data-alt="Subscribe via RSS"><a class="icon rss" href="http://www.vktechzone.com/feeds/posts/default"target="blank">Subscribe via RSS</a></li>
    </ul>
    <small><div style="font-size:50%; text-align:right;"><a href="http://www.vktechzone.com/2014/05/social-media-follow-us-magical-effect.html" target="_blank" title="Get This Widgets">Get This Widget</a></div></small>

    Note:-Replace vktechzone with your facebook page ID Replace 111153762318745795031 with your Google+ page ID Replace vktechzone with your Twitter ID Replace vktechzone with your Pinterest ID Replace http://www.vktechzone.com/feeds/posts/default with your Blog RSS URL
    How to Add Html/Java widget? Follow below steps to add Widget

    1. Go to Blogger
    2. Go to your blog Layout option.
    3. Now Select Add a Gadget option.
    4. Now select Html/Java Script option
    5. Now past the above code in Content area field and press save button.


    6. You May Also Like-Floating Facebook Like Box 

    You can drag and adjust widget place in blogger layout