Blogger Widgets-3 Cool Widgets for Blogger Blogs in 2013

blogger-widgets

3 Cool Widgets for Your Blogger Blog in 2013

As you know that there are less widgets available for Blogger blogs as compared to WordPress blogs. Due to the lack of interest of developers in Blogger, you have access to limited widgets. I have collected 3 very cool widgets which you must use on your Blogger blog to boost its functionality. These widgets are listed below:

1. Code Box for Blogger Blogs

code-box-blogger
If you are running a Blogger blog on widgets or templates you surely need this widget for your blog. Code Box Widget for Blogger allows you to put HTML and other codes in a fixed box on your blog which gives your blog a cool look. It doesn't matter how long your code is, the box will hold and show the code beautifully. It is my most favorite Blogger plugin which I use on my own blog here also. You can see the code boxes on this post and many other posts. To add this beautiful code box to your Blogger blog, follow the below instructions:
1. Login to your Blogger dashboard, select your blog and download a backup of its template to make it sure that your blog design is safe even after you make mistakes in editing. Get help on editing your Blogger template here if you are a newbie
2. After downloading the backup, edit HTML of your Blogger template and find ]]></b:skin> by pressing Ctrl+F and paste the below code just above ]]></b:skin>
/* Code Box
----------------------------------------------- */

.code {
background:#f5f8fa;
background-repeat:no-repeat;
border: solid #5C7B90;
border-width: 1px 1px 1px 20px;
color: #000000;
font: 13px 'Courier New', Courier, monospace;
line-height: 16px;
margin: 10px 0 10px 10px;
max-height: 200px;
min-height: 16px;
overflow: auto;
padding: 10px 10px 10px; width: 90%;
}

.code:hover {
background: #FAFAFA;
background-repeat:no-repeat;
}
3. Save your template after adding the above code. Now whenever you need to put code in a box on your post, put code in normal Compose format while writing your post and then switch to HTML and wrap your code as below:

<div class="code">Your Code Here</div>

After wrapping your code, switch back to Compose mode, complete your post and publish it. This will put the code in a box like you see it on this post and in above screenshot.

2. Facebook Like Popup Box With Timer

facebook-like-popup-box-blogger
This box was introduced by Kaki Network. This Blogger widget will increase fans for your Facebook page and as a result, your social network will expand. Although this box may annoy some of your visitors, but you can use it to increase the Facebook Likes dramatically. To add this box to your Blogger blog, follow below simple steps:
1. Edit your template's HTML and find </body> and paste below code just above </body>
<style>#fblikepop {
    background-color: #fff;
    display: none;
    position: fixed;
    top: 200px;
    _position: absolute;
 /* hack for IE 6*/
    width: 450px;
    border: 10px solid #6F6F6F;
    z-index: 200;
    -moz-border-radius: 9px;
    -webkit-border-radius: 9px;
    margin: 0pt;
    padding: 0pt;
    color: #333333;
    text-align: left;
    font-family: arial,sans-serif;
    font-size: 13px;
}

#fblikepop body {
    background: #fff none repeat scroll 0%;
    line-height: 1;
    margin: 0pt;
    height: 100%;
}

.fbflush {
    cursor: pointer;
    font-size: 11px !important;
    color: #FFF !important;
    text-decoration: none !important;
    border: 0 !important;
}

#fblikebg {
    display: none;
    position: fixed;
    _position: absolute;
 /* hack for IE 6*/
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: #000000;
    z-index: 100;
}

#fblikepop #closeable {
    float: right;
    margin: 7px 15px 0 0;
}

#fblikepop h1 {
    background: #6D84B4 none repeat scroll 0 0;
    border-top: 1px solid #3B5998;
    border-left: 1px solid #3B5998;
    border-right: 1px solid #3B5998;
    color: #FFFFFF !important;
    font-size: 14px !important;
    font-weight: normal !important;
    padding: 5px !important;
    margin: 0 !important;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif !important;
}

#fblikepop #actionHolder {
    height: 30px;
    overflow: hidden;
}

#fblikepop #buttonArea {
    background: #F2F2F2;
    border-top: 1px solid #CCCCCC;
    padding: 10px;
    min-height: 50px;
}

#fblikepop #buttonArea a {
    color: #999999 !important;
    text-decoration: none !important;
    border: 0 !important;
    font-size: 10px !important;
}

#fblikepop #buttonArea a:hover {
    color: #333 !important;
    text-decoration: none !important;
    border: 0 !important;
}

#fblikepop #popupMessage {
    font-size: 12px !important;
    font-weight: normal !important;
    line-height: 22px;
    padding: 8px;
    background: #fff !important;
}

#fblikepop #counter-display {
    float: right;
    font-size: 11px !important;
    font-weight: normal !important;
    margin: 5px 0 0 0;
    text-align: right;
    line-height: 16px;
}</style>
<script src="http://www.google.com/jsapi"></script><script>google.load("jquery", "1");</script>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<script type="text/javascript">
//<![CDATA[
 kakinetworkdotcom01username="itcongress",
 kakinetworkdotcom01title="Join us at Facebook!",
 kakinetworkdotcom01skin="02",
 kakinetworkdotcom01time="25",
 kakinetworkdotcom01wait="5",
 kakinetworkdotcom01lang="en"
//]]>
</script>
<script type="text/javascript" src="http://supportivehandsjs.googlecode.com/files/likebox-with-timer.js"></script>
<script type="text/javascript">
//<![CDATA[
 $(document).ready(function(){$().kakinetworkdotcom({ closeable: true });});
//]]>
</script>
2. Modify the highlighted values (replace itcongress with your Facebook page username, Join us at Facebook with your desired text to display, 25 with number of seconds after which the box will be closed automatically and 5 with the number of seconds after your visitors' arrival when the box will be displayed) and then save your template. You are all done!!

3. ShareThis Floating Social Sharing Bar for Blogger

floating-social-sharing-bar-blogger
Sharethis Floating Social Sharing Bar is a great social widget for Blogger blogs which will allow your visitors to share your content on all social networks easily. The bar maximizes the social sharing of your content which boosts your SEO and traffic. Apart from this, your visitors can bookmark your page with one-click also. If you don't have this bar installed on your blog till now, then you must add this widget to your Blogger blog now. To get this floating bar on your blog, follow the below instructions:
1. Edit your blog template's HTML, find </head> and paste below code just before it
<script type="text/javascript">
var addthis_config = {
    bar_show_below : 150
}
</script>
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js"></script>
2. Now find </body> and add below code just before it and save your template. You have got the floating social sharing bar on your Blogger blog now!!
<div class="addthis_bar addthis_bar_medium">
  <label>Share This Page:</label>
  <div class="addthis_toolbox addthis_default_style addthis_32x32_style">
    <span><a class="addthis_button_preferred_1"></a></span>
    <span><a class="addthis_button_preferred_2"></a></span>
    <span><a class="addthis_button_preferred_3"></a></span>
    <span><a class="addthis_button_preferred_4"></a></span>
    <span><a class="addthis_button_compact"></a></span>
    <span><a class="addthis_counter addthis_bubble_style"></a></span>
  </div>
</div>

These were our three recommended Blogger widgets for your blog which will help you in creating a well developed, beautiful and engaging blog. We hope that you will like them.

You May Also Want to Read: How to Optimize Your Blogger Blog for Search Engines Engines in Absence of Any SEO Plugin for Blogger

Labels: , ,