How To Add Social Sharing Floating Bar With Counter

   Now I Share how to add floating social bar with counter in blogger any post. This floating social bar has the following options with Facebook share button, Twitter, Google+ , Stumble Upon and Pinterest button.

How To Add Social Sharing Floating Bar With Counter In Blogger

Add social media buttons to blogger sidebar:

  • Login to your Blogger dashboard click here 

  • Select your blog and click on right side bar

  • Select Template on drop down menu

Add social media buttons to blogger sidebar


Now Add Floating Social Media Sharing Buttons To Blogger Template:


Now make a backup of your blogger template because if you have any wrong this template after edited, you can restore this. So click on Backup /Restore and download Full Template. Tutorial details.

> Click on Edit HTML button at the middle side

Add Floating Social Media Sharing Buttons To Blogger Template

> Click anywhere inside the code area and press the CTRL + F keys on your keyboard to open the HTML search box.
> Write in Search box     <b:includable id='post' var='post'>
          > Hit enter your keyboard
> Copy the bellow floating social media shearing button code and paste it after  <b:includable id='post' var='post'>  tag.

Floating social media sharing code:

<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<style>
.mbt_social_floating{
    position:fixed; bottom:10%; margin-left:-60px; float:left;     width:60px;
    background-color:#f7f7f7;     padding: 5px 0 0px 0px;
     border-top:1px solid #ddd;
border-left:1px solid #ddd;
border-bottom:1px solid #ddd;
z-index:9999px !important;
border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;
}
.mbt_social_floating .mbt_side_social_button{
    margin-bottom:5px;
    float:none;
    height:auto;
    width:60px;
}
.mbt_social_floating .st_twitter_vcount, .mbt_social_floating.st_plusone_vcount, .st_email{
    margin-left:5px;
}
.mbt_social_floating .st_fblike_vcount{
    margin-left:5px;
}
.mbt_social_floating .stButton_gradient{
    background:none !important;
    height:21px !important;
    padding-left:0 !important;
}
.mbt_social_floating .chicklets, .mbt_social_floating .stMainServices {
    background:url('http://1.bp.blogspot.com/-r3RYZkB4Pis/T7alrxNFYyI/AAAAAAAAGc4/TCBwHNxEwR4/s400/gc_social_sprite.gif') no-repeat !important;
    height:19px !important;
    width:45px !important;
    padding:0 !important;
}
.st_email .chicklets{
    background-position:0 -77px !important;
    background-image:url('http://1.bp.blogspot.com/-r3RYZkB4Pis/T7alrxNFYyI/AAAAAAAAGc4/TCBwHNxEwR4/s400/gc_social_sprite.gif') !important;
}
.mbt_social_floating .st_twitter_vcount .st-twitter-counter{
    background-position:0 -58px !important;
}
.mbt_social_floating  .stButton_gradient{
    border:none !important;
}
.mbt_social_floating .stBubble_count{
    width:44px !important;
    font-size: 15px !important;
    font-weight: normal !important;
    padding-top:7px !important;
    height:23px !important;
    background:none !important;
}
.mbt_social_floating .st_twitter_vcount .stBubble_count{
    color:#00a6df;
    background-color:#f8fbfc !important;
}

.st_fblike_vcount{
    margin-bottom: 0px;
    display: block;
}
.st_twitter_vcount{
    margin-bottom: 3px;
    display: block;
}

.st_email{
    margin-bottom: 5px; margin-top: 3px;
    display: block;
}
.mbt_social_floating .stBubble{
    background-position: 21px 31px !important;
    height:35px !important;
}.mbt_social_floating .st_pinterest_vcount{
    margin-left:5px;
}
.mbt_social_floating .st_pinterest_vcount .st-pinterest-counter{
    background-position:0 -19px !important;
}
.mbt_social_floating .st_pinterest_vcount .stBubble_count{
    color:#FF0505;
    background-color:#fbf8f8 !important;
}

.mbt_social_floating .st_pinterest_vcount .stBubble{
    background-image:url('http://1.bp.blogspot.com/-meqDjtBStCA/ULFkqTG88qI/AAAAAAAAIGs/hjCRAqGL270/s400/bubble_arrow_pinterest.png') !important;
}


.st_pinterest_vcount{
    margin-bottom: 0px;
    display: block;
}

</style>

<div class='mbt_social_floating'>
    <script type='text/javascript'>var switchTo5x=true;</script>
    <script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
    <script type='text/javascript'>stLight.options({onhover:false, , doNotHash: true, doNotCopy: true, hashAddressBar: false});</script>
    <!-- No more works properly so removing it from mbt list<span class='st_fblike_vcount' displaytext=''/>-->
<div style='margin:0px 0 0px 10px;'>
<div id='fb-root'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='' href='' layout='box_count' send='false' show_faces='false'/></div>
<span class='st_twitter_vcount' displaytext='' st_via='help2blogging'/>
<span class='st_pinterest_vcount' displaytext=''/>
<div style='margin:0px 0 0 5px;'>
    <span class='st_plusone_vcount' displaytext=''/>
</div>
<div class='addthis_toolbox addthis_default_style ' style='margin:5px 0px 5px 8px;'>
<a class='addthis_counter'/>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
<script type='text/javascript'>
var addthis_config = {
     ui_cobrand: "help2blogging",
ui_header_color: "#ffffff",
     ui_header_background: "#0080FF"
}
</script>
<span class='st_email' displaytext=''/>
<p style=' line-height:0px; font-size:10px; font-weight:bold; text-align:center;'><a href='http://www. help2blogging .blogspot.com' style='color:#CAC8C8;'>Widgets</a></p>
</div>

</b:if></b:if>

Note:
Replace help2blogging and write your twitter user name
> Click “Save Template” button.

Tips:  In case Facebook like button did not work then copy the bellow code and just past after <body> tag
<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>

That’s all.

-------------------------------------------------

If you have any question and suggestions related blogger
Please don't hesitates just sent email or leave comment
Thanks to follow this tutorial
Best regards
help2blogging team

Add Floating Social Media Share Buttons Widget For Blogger- help2blogging logoAdd Floating Share bar with Count widget in Blogger- smile logo

Remove, Hide Or Delete Featured Article/ Post Slider For Blogger


Some users not choice Featured Article Slider in his blog. No problem please follows below tutorial and edits your template step by step. These tutorials make their themes stylish & more users friendly.

Remove, Hide Or Delete Featured Article Slider For Blogger

Get Started To Remove Featured Post Slider from Blogger Template:

Step 1:

  • Login to your Blogger Dashboard click here 
  • Select your blog and click on right side bar 
  • Select Template on drop down menu
How to Remove Featured Post Slider from Blogger Template

Step 2:

Firstly Backup and Restore your Blogger template:

> Click Template button on left side
> Now make a backup of your blogger template because if you have any wrong this template after edited, you can restore this. So click on Backup /Restore and download Full Template. Tutorial details.

Step 3:

> Click on Edit HTML button

Remove Featured Article Slider from Blogger Blogspot Blog

Step 4:

Find Featured Post Slider Code in Blogger Template:

> Click anywhere inside the code area and press the CTRL + F keys on your keyboard to open the Blogger' search box.  
> Write Search box     <!-- Featured Content Slider Started -->
> Hit enter your keyboard

Step 5:

Remove Featured Image/Slider Code From Blogger Template:

> Select the whole HTML code of Slider will look like this below image

Select
           <!-- Featured Content Slider Started -->
To
           <!-- Featured Content Slider end -->
and delete them


Remove Featured Image/Slider Code From Blogger Template


Now click on  Save template  button.

Now you removed Featured Article Slider from your blog.
That's all.

-----------------------------------------

If you have any question and suggestions related blogger
Please don't hesitates just sent email or leave comment
Thanks to follow this tutorial
Best regards
help2blogging team

 http://help2blogging.blogspot.com/2014/05/add-beautiful-search-boxes-for-blogger.html  http://help2blogging.blogspot.com/2014/05/add-beautiful-search-boxes-for-blogger.html

Add 8 Beautiful Search Boxes Widget For Blogger

    All blog’s need search box to find visitors article. Here I adjust code Fresh and Beautiful Search boxes to your blogger blogs. Here i give eight beautiful and fresh search boxes to you.

Add beautiful Search boxes widget for Blogger

8 Stylish Beautiful Search Box For Blogger/Blogspot Blog:

  • Firstly Login to your Blogger Dashboard click here
  • Select your blog and click on right side bar
  • Select Layout on drop down menu
 8 Stylish Beautiful Search Box For Blogger/Blogspot Blog:

Step 1:

Create an search box in Blogger HTML/JavaScript Gadget

                   A. Click on Add Gadget in your template sidebar
                   B.  Choose  HTML/JavaScript Gadget
Create an search box in Blogger HTML/JavaScript Gadget

Step 2:

Add HTML Code to Search Box For Blogger/ Blogspot:

        A. Write widget name in title box
        B. Any one style bellow code paste in Content box

Add HTML Code to Search Box For Blogger/ Blogspot


Style 1- Beautiful Search Boxes Widget For Blogger/ Blogspot Blog


Style 1- Beautiful Search Boxes Widget For Blogger/ Blogspot Blog

<style type="text/css">
#h2b-searchbox{background:url(http://1.bp.blogspot.com/-IpqUqfF6g_0/U5WhOMBdgRI/AAAAAAAABVE/hBHwmkx_Edw/s1600/searchbox1.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#h2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#h2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#h2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style> 
<div id="h2b-searchbox">
<form id="h2b-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "    Search...";}'/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>

</div>


Style 2- Beautiful Search Boxes Widget For Blogger/ Blogspot Blog


Style 2- Beautiful Search Boxes Widget For Blogger/ Blogspot Blog

You can add 2 style just replace red color code in above 1 style and past the bellow  code
http://2.bp.blogspot.com/-VVnt2UbE1_Q/U5WhOYmHifI/AAAAAAAABVQ/mg6XJI-C1TE/s1600/searchbox2.png


Style 3- Beautiful Search Boxes Widget For Blogger/ Blogspot Blog:


Style 3- Beautiful Search Boxes Widget For Blogger/ Blogspot Blog:

You can add 3 style just replace red color code in above 1 style and past the bellow  code
http://1.bp.blogspot.com/-NNmQGPEYwk8/U5WhOtRXbYI/AAAAAAAABVM/iZ9r-bXaXqU/s1600/searchbox3.png

Style 4- Beautiful Search Boxes Widget For Blogger/ Blogspot Blog:


Style 4- Beautiful Search Boxes Widget For Blogger/ Blogspot Blog

You can add 4 style just replace red color code in above 1 style and past the bellow  code
http://3.bp.blogspot.com/-_shCHCENu9A/U5WhQYQDNuI/AAAAAAAABVc/po47W6WZFnM/s320/searchbox4.png


Style 5- Beautiful Search Boxes Widget For Blogger/ Blogspot Blog:


Style 5- Beautiful Search Boxes Widget For Blogger/ Blogspot Blog

You can add 5 style just replace red color code in above 1 style and past the bellow  code
http://3.bp.blogspot.com/-pRJOA-uH5AY/U5WhQfBOzMI/AAAAAAAABVg/C05DxS1TxFs/s1600/searchbox5.png



Style 6- Beautiful Search Boxes Widget For Blogger/ Blogspot Blog:


Style 6- Beautiful Search Boxes Widget For Blogger/ Blogspot Blog

You can add 6 style just replace red color code in above 1 style and past the bellow  code
http://4.bp.blogspot.com/-lXbsS5nfSzw/U5Wlkk7v_bI/AAAAAAAABVw/aZ3joi2z9Bk/s320/Search+box+6.png


Style 7- Beautiful Search Boxes Widget For Blogger/ Blogspot Blog:



Style 7- Beautiful Search Boxes Widget For Blogger/ Blogspot Blog

You can add 7 style just replace red color code in above 1 style and past the bellow  code
http://2.bp.blogspot.com/-ro04HZj-j6A/U5WllIRJEhI/AAAAAAAABV4/Qfbl1Y3AroI/s1600/Search+box+8.png


Style 8- Beautiful Search Boxes Widget For Blogger/ Blogspot Blog:


Style 8- Beautiful Search Boxes Widget For Blogger/ Blogspot Blog

You can add 8 style just replace red color code in above 1 style and past the bellow  code
http://2.bp.blogspot.com/-ro04HZj-j6A/U5WllIRJEhI/AAAAAAAABV4/Qfbl1Y3AroI/s1600/Search+box+8.png

> Click on Save button and enjoy.

˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜------------------------------------------------------

If you have any question and suggestions related blogger
Please don't hesitates just sent email or leave comment
Thanks to follow this tutorial
Best regards
help2blogging team

 http://help2blogging.blogspot.com/2014/05/add-beautiful-search-boxes-for-blogger.html  http://help2blogging.blogspot.com/2014/05/add-beautiful-search-boxes-for-blogger.html