How to Add Floating Facebook Share,Tweet, +1 Button in Blogger?

How to Add Floating Facebook Share,Tweet, +1 Button in Blogger?

I have ever posted about how to put social bookmark sharer button, that's sharing is sexy button. I also have posted about how to put our social media icon to help your reader close and know more about you. A hour ago, I was looking for simple sharer button, I only need Facebook sharer, Tweet button, and the new one +1 button from Google. Fortunately, I find a easy tutorial about how to add floating social bookmark button next to post in Blogger from MyBloggerTricks. Really thanks to you, the author.

You can see this sticky widget to left of my blog, both on homepage and postpage. The installation process is so easy. Here I share how to add floating Facebook Share,Tweet, +1 Button in Blogger.

1. Go To Blogger > Design
2. Choose a HTML/JavaScript widget
3. Paste the following code inside it

<style>
/*-------MBT Floating Sharing Widget------------*/
#floatdiv {
  position:fixed;
bottom:15%;
margin-left:-70px;
z-index:10;
float:left;
padding-bottom:2px;
}
#mbtsidebar {
        background:#fff;
        border-top:1px solid #ddd;
        border-left:1px solid #ddd;
        border-bottom:1px solid #ddd;
        border-radius:5px;
       -moz-border-radius:5px;
       -webkit-border-radius:5px;
        padding-left:5px;
        width:60px;
        margin:0 0 0 5px;
}
.fb_share_count_top {width:52px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:52px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>


<div id="floatdiv">
<div id="mbtsidebar">
    <table cellpadding="1px" cellspacing="0">

    <tr>
    <td style="padding:5px 0px 0px 0;">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="mybloggertricks">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
    </td>
    </tr>
    <tr>
    <td style="padding:5px 0 2px 0;">
    <a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
    </td>
    </tr>
    <tr>
    <td style=" padding:5px 0px 0px 0px;">
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script>
<g:plusone size="Tall" expr:href="data:post.url">
    </g:plusone></td>
    </tr>
    <tr>
    <td>
<p style=" line-height:0px; font-size:10px; font-weight:bold; text-align:center;"><a style="color:#D3D3D3;" href="http://www.mybloggertricks.com">Widgets</a></p>
    </td>
    </tr>
    </table>
</div>
</div>


4. Save your widget and drag it just below the post body as shown below

5. Finally click the save button at the top right corner and done

Any question or complete customization, you can go to author website.

Read More

How to Add Lilypie, Pregnancy and Baby Parenting Widget?

Looking for pregnancy, baby parenting, and birthday widget for your blog? There are so many ways to express mother's love to children. Most of them, by creating kids and parenting blog to share about baby photo, kids story, and all about children's activity.

You can create a baby and kids blog, and use suitable baby and kids template. You also can put cute baby and parenting widget on sidebar blog.

Lilypie Baby Days are free custom ticker graphics or you can mean it as blog widget that update each day to display your child's age, or how far along your pregnancy is. There are Pregnancy, Birthday, Adoption, Premature Baby, Trying to Conceive, Memorial and Breastfeeding tickers widget. Not only put it on blog, you can add the ticker widget to your forum posts, email signature, mobile phone or desktop.

How to create Lilypie tickers widget?

1. Go to Lilypie site the click Create menu.
2. Choose the widget type, for example Kids Birthday counter widget
3. Choose a scene. You can choose from many various cute graphic.
4. Choose a slider.
5. Add details. You can add your kids photos, personal text message,edit the background widget
6. To get the code, click in the code box  to select the code snippet, then right click and choose Copy to copy the code snippet to your clipboard.
7. Start using it on your blog. Go to your blog dashboard, click on Design>Page Element. Add HTML widget on sidebar, or wherever you want to place it, then paste the Lilypie copied code on it.
   

Here's the Lilypie widget tickers result

Read More