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

Wednesday, 17 September 2014

Soical Shating Buttons Widget for Blogger


Here is an excellent widget that will float vertically next to your individual blog posts.  These  engaging buttons will allow your visitors to easily share your content on Facebook, Twitter, Google+ much more...  The great thing about this widget is that it counts the number of times your posts are shared on each social network.









Add Widget to Blogger:

1. Go to Blogger > Template
2. Backup your template
3. Click Edit HTML
4. Click Proceed
5. Then Click Expand Widget Templates
6. Search for this code:

<b:includable id='post' var='post'>

and below it paste the following 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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzsx8vNQV2nTpqVZJkc3hlJtZKgFjDtyvvM25efBublrmkdQQDuzF_hx15Rs-OHB8S_KKAqlbcLz20IgXN9CD9WDu1gZwAiv75e7Rtq7LKbi7Ts9MaViVVJOAfdUklwLWyKeO35BASReg3/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzsx8vNQV2nTpqVZJkc3hlJtZKgFjDtyvvM25efBublrmkdQQDuzF_hx15Rs-OHB8S_KKAqlbcLz20IgXN9CD9WDu1gZwAiv75e7Rtq7LKbi7Ts9MaViVVJOAfdUklwLWyKeO35BASReg3/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzhyphenhyphenIeIFoGXJB3fBjjWd6R2d3gwvpeyrwMj_ugf5Nt5awPXFRNGac2Poo_WF9ynLs2juRH9urkcmB6GiYZc6ntajugSaxv5lv4fGM-V1FwXqY9CWIyTZHEv-GnEDd9q3mE5tj4h_YPXYr6/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='theblogwidgets'/>
<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: "TheBlogWidgets.com",
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.theblogwidgets.com/2013/11/floating-share-buttons-widget-with.html' style='color:#CAC8C8;'>Widgets</a></p>
</div>
</b:if></b:if>


          

                     FOR DAILY UPDATES LIKE OUR PAGE

 

                        FOR JOB SEEKERS CLICK HERE


Facebook Like Box Widget for Blogger



Facebook Like Box is very useful widget to show visitors the authority and love of the people for his blog. Facebook offers a simple Like Box plugin that you can easily integrate into your website But the default Facebook like box is not having good look at ugly all. This tutorial will show you How To Add Cute Custom Facebook Like Box using CSS To Blogger. Facebook Like Box is the best way to get more fans on Facebook. A Fan Box allows great attract your Blog more visitors or readers to like your Facebook fan page not leaving the like go here. you don't need to do any think you only need to copy and paste the code. Im Sure that this Cool Customize Facebook Like Box With CSS widget attracts your facebook fans increase the count of Likes.

How To Add a Facebook Like Box to Your Blogger/Site:

Now let's start adding it...

Step 1. Login to Your Blogger Account. Go to your Blogger Dashboard. Click on Layout tab from left pane and click on Add a Gadget link.


Step 2. After click on Add a Gadget link A pop-up box will open now with many gadget list, Choose HTML/JavaScript from the gadget options by clicking the blue plus sign for that gadget.


Step 3. Select 'HTML/Javascript' and add the one of code given below.

Step 4. Now Click On Save 'JavaScript' You are done.

Note:- Replace SEOHUNTT With your Facebook User name

<div style="background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK5-UcEsWBkSt-fWY-IGERKUVUpU5280AHBL3gv7293h4jC5tcjIXqvzU_2vayfCgfKsRkDsO26wdIArbGXnMee7gihZ7060lHbX8VXVAZPCrEAIz3_TSQSj3aC-6o2lWvxStp1kwEokrW/s1600/fan-01-pic.png');overflow:hidden;border-radius: 110px;.height:250px;width: 238px;border-radius: 0px 13px 0px 0px;overflow: hidden;"><div style="height: 250px; overflow: hidden;"><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fseohuntt&amp;width=250&amp;height=258&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:258px;" allowTransparency="true"></iframe>
</div>
</div>
And now click Save

                


                     FOR DAILY UPDATES LIKE OUR PAGE

 

                        FOR JOB SEEKERS CLICK HERE