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.

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

Cute Kawaii Blog Widget For Blogger

What is blog widget? It's like an application placed on your blog. You can put it on sidebar, lowerbar, or anywhere. What's the function of? Imagine this widget like an application on your desktop or mobile phone, its function vary. There are calendar widget, clock widget, welcome widget, weather widget, baby names search widget, birthday widget, etc.

Most girly bloggers love to decorate their blog with free cute blog widget. For personal diary blog, it's common to place a cute widget on sidebar. Remember, this widget sometimes make your blog load slower, so ensure to put useful widget only.

How to use blog widget on blog? Usually, blog widget creator, provide HTML code that you should copy paste. Then go to your Page Element, choose HTML gadget, paste blog widget HTML code.

Where we can get this blog widget for blogspot? Here the list of free blog widget source.

Cute Calendar Blog Widget from Cuteki
Cuteki offers you the cutest kawai calendar ever for your web page or blog.

Cuteki kawaii

Cute Clock Blog Widget from Cuteki

Cuteki

Cute Pin Blog Widget from Cuteki

Cuteki

Sport Blog Widget from Cuteki

Cuteki

Pink Analog Clock Blog Widget from clockwidgets.net

Clock Widgets

Cute Digital Clock Blog Widget from clockwidgets.net

Clock Widgets