Tags: Widgets

Add a New Year Countdown Widget to your Blog

- 8 Comments

Keeping your website in line with current events is a great way to let your visitors know that you really care about them and there’s a real person behind this blog. 2015 is near and I'm sure that everyone is waiting for it eagerly. As it's new year time, so I don't think that there's any other better way to show that you're keeping your website up-to-date than adding a new year countdown widget to your blog. Recently we shared some Christmas widgets and now its time for the new year 2015. So, today we're going to share a New Year Countdown Widget for your Blogger Blog. This clock displays days, hours, minutes and ticking seconds in a simple and attractive way. The moment when the new year starts, this widget will display a message saying "It's New Years Eve! "Happy New Year 2015"". So, lets begin:

Add a New Year Countdown Widget to your Blogger Blog

First and foremost, log in to your Blogger Account >> Select a Blog >> Layout >> Click Add a Gadget, scroll down and select HTML/JavaScript gadget from the list. Now copy the below code and paste it in the empty widget box

<link href="http://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet" type="text/css" />
<style type="text/css">
a.bgt-clock-link { text-decoration: none; display: block; outline: none; }
#TimerDiv { background: #4E5563;color: #FFFFFF;text-shadow: 0 0 6px #2aa4cf;font-family: 'Playfair Display', serif;font-size: 28px;text-align: center;line-height: normal; }
.bgt-clock-sep { -moz-animation: sep-blinks 1.1s linear 0s infinite; -webkit-animation: sep-blinks 1.1s linear 0s infinite; animation: sep-blinks 1.1s linear 0s infinite;}
@-moz-keyframes sep-blinks
{
0% {opacity:1}
50% {opacity:0}
100% {opacity:1}
}
@-webkit-keyframes sep-blinks
{
0% {opacity:1}
50% {opacity:0}
100% {opacity:1}
}
@keyframes sep-blinks
{
0% {opacity:1}
50% {opacity:0}
100% {opacity:1}
}
</style>
<a target="_blank" class="bgt-clock-link" href='http://www.blogolect.com/2014/12/add-new-year-countdown-widget-to-your-blog.html'>
<div id="TimerDiv">
Countdown Till 2015<br /><span id="bgt-clock-days"></span> Days<br /><span id="bgt-clock-hr"></span><span class="bgt-clock-sep"> : </span><span id="bgt-clock-mins"></span><span class="bgt-clock-sep"> : </span><span id="bgt-clock-secs"></span></div>
</a>
<script type="text/JavaScript">
function startTimer() {

    var newyr=new Date("January 1, 2015 00:00:00");
    var newyeartime=newyr.getTime();
    var todaytm=new Date();
    var todaytime=todaytm.getTime();
    var timeleft=newyeartime-todaytime;
    var leftdays = timeleft/86400000;
    var lefthr=23-todaytm.getHours();
    var leftmin=59-todaytm.getMinutes();
    var leftsec=59-todaytm.getSeconds();
    if (Math.floor(leftdays) <= -1) {
        document.getElementById('TimerDiv').innerHTML="It's New Years Eve!<br/>Happy New Year 2015";
    }
    else {
        document.getElementById('bgt-clock-days').innerHTML= Math.floor(leftdays);
        document.getElementById('bgt-clock-hr').innerHTML= lefthr;
        document.getElementById('bgt-clock-mins').innerHTML= leftmin;
        document.getElementById('bgt-clock-secs').innerHTML= leftsec;
    }
    t=setTimeout('startTimer()',999);
}
startTimer();
</script>

Click Save button and you're done!

We hope this article may have helped you in adding a New Year Countdown Widget to your Blogger Blog. Share this article with your friends, don't forget to subscribe us and Join our Bloggers Forum on Facebook @ https://www.facebook.com/groups/blogolectforum

Tags: Blog Design / Collections / Widgets

30 Handpicked Blogger Widgets and Plugins

- 7 Comments

Blogger is one of the best blogging platforms. No doubt! that blogger is now emerging as a powerful opponent of other platforms like wordpress etc. Its flexible and easy to use. You don't have to pay a penny for creating a blog on blogger and no skills are required for starting your blog. The main purpose of creating Blogolect was to help newbies in improving their skills. BGT has always shared high quality and professional articles on blogging. Hundreds of tutorials on blogging are available at blogolect. A part of all these tutorials, BGT has always created and promoted blogger widgets. There are 90+ blogger widgets & plugins available in our widgets inventory. After sharing hundreds of tutorials and widgets, today we're presenting a collection of 30 Handpicked Best Blogger Widgets and Plugins. So lets begin:

Recommended For You::
Why You Should Choose Blogger ? 
How to Create a Blogger Blog - Beginner's Series
101 Ways to Increase Your Website Traffic

1- Flat UI Email Subscription Widget

Email Subscription Boxes are one of the best ways that bloggers use for increasing their email subscribers. These boxes also help you increasing your Blog Traffic. Here's a Flat style Email Subscription Box for your Blogger Blog.  
Install Now

2- Stylish Numbered Page Navigation for Blogger

Numbered page navigation makes your blog user-friendly by allowing them to easily navigate your blog posts. Here a Stylish numbered page navigation for your Blogger Blog. 
Install Now

3- AddThis Floating Share Buttons for Blogger

Social sharing button make it easy for your visitors to share your blog posts. Using these buttons your visitors will be able to share your posts on their social media profiles with a single click. Add AddThis Floating share button to your Blogger Blog. 
Install Now

4- Advanced Admin Control Panel for Blogger

Admin Control Panel is a facility for blog administrators to manage their blogs with ease and speed. This Admin Control Panel is only visible to blog administrator (Not to readers/visitors). Only blog administrator will be able to see this navbar/panel when he is logged in to his account.  
Install Now

5- Elegant Email Subscription Box

Another simple and clean email subscription box for your blogger blog. Add it to your blog and increase your email subscribers plus visitors too.  
Install Now

6- jQuery Sliding Menu with Expand/Collapse Function for Blogger

A beautiful jQuery Sliding Menu with hide/show function. This panel contains an About Us section, categories, email subscription form and social media buttons.
Install Now

7- Tabbed Table of Contents for Blogger

Add a Tabbed Table of contents to your blog and let your visitors to access all your blog posts from one page. Be Smart!
Install Now

8- Flat UI Labels Cloud Widget

Labels cloud is widget that allows you to categorize your blog posts under specific categories and make your blog user-friendly by allowing them to easily navigate to your content by selecting labels. Here's a Flat style customization for Labels Widget.
Install Now

9- Multi-Colored Popular Posts Widget

Popular posts is a widget that displays the most visited posts of your blog. As the default popular posts widget is simple and not attention grabbing, so here's a Multi-Colored popular posts widget customization for your blog.
Install Now

10- 2 Advanced Search Boxes for Blogger

Search boxes are one of the most essentials elements of a blog allowing your visitors to easily search for the content they're looking for by typing the keywords. Here are two advanced search boxes for your blogger blog.
Install Now

11- Related Posts Widget with Thumbnails and Summary

Add Related posts widget under your blog posts and let your visitors to check other posts related to that they're reading at that moment. Here's a Related Posts widget with thumbnails and summary for your blog.
Install Now

12- Add a Live Chat Support Widget to Blogger

Increase your sales and users experience by providing them a Live Chat Support widget to contact you easily. If you don't know about adding a Live Chat Support to blog then here's a tutorial about adding Live Chat to your Blog. It hardly take 3-4 minutes to add it.
Install Now

Also Read: Top 4 Live Chat Support Widgets for your Blogger Blog

13- Author Bio Box Widget for Blogger

Let your visitors know who is the man/author behind this blog by adding aa Author Bio Box to your Blogger blog. Here's an author bio box for your Blogger Blog.
Install Now

14- Add Pinterest Pin it Image Hover Button to Blogger

Add a pinterest pin it button to your blog images and increase the chances to get your images pinned by your visitors. Here's a tutorial on how to add Pinterest Pin it button to your blogger blog.
Install Now

15- Facebook Popup Like Box Widget

Increase your Facebook fan page likes by adding a popup Facebook Popup Like box. Here's a beautiful Pop up like box for your Blogger Blog.
Install Now

16- Magazine Style with Post Summaries and Thumbnails for Blogger

Looking to change your simple posts layout to a magazine style. Here's a tutorial for you to Change your Posts to a Magazine Style with thumbnails and summary.
Install Now

17- Create a Sitemap/Table of Contents in Blogger

Another simple Table of contents for your blog. Add this sitemap to your blog and let your visitors to easily access all your blog posts from one page.
Install Now

18- Floating Social Media Sharing button for Blogger

Increase the chances of your content to be shared by your visitors by adding Floating Social Sharing button to your Blog.
Install Now

19- Facebook Popup Like Box Widget for Blogger

Another pop up Like box for increasing your Facebook fan page likes. Add this widget to your blog and increase your likes.
Install Now

20- Social Subscription Widget for Blogger

A simple subscription box with an email subscription form and social media buttons for your blog. Add it to your Blog and increase your social appearance.
Install Now

21- Create a Page Peel Effect in Blogger

A page peel effect for your blogger blog to amaze your visitors. Add it to your Blog now!
Install Now

22- Flat Social Subscription Widget for Blogger

A metro style social subscription widget for your blog. With its stylish and clean design it fits in all templates.
Install Now

23- Customized Labels Cloud Widget

Another stylish customization for Labels cloud widget. Apply this customization to your blog now!
Install Now

24- Back to Top button

Install v1 (Flat Button) - Install v2 - Install v3 (Up and Down Both buttons)

25- Customize the Scroll Bar with JScrollPane

Customize the scroll bar only for your blog using JScrollPane. Here's a tutorial on How to Customize the Scroll Bar with JScrollPane.

Install Now

26- 3 Styles for Popular Posts Widget

3 different customization for your popular posts widget. Choose the one you like and apply it to your Blogger Blog.
Install Now

27- Marquee Notification Bar for Blogger

A top notification bar with a beautiful marquee effect. Display your trending articles on it and notify your visitors about important notifications.
Install Now

28- 9 Beautiful Search Boxes for Blogger

9 beautiful search boxes for your blog. Choose the one you like and implement it to your blog.
Install Now

29- Recent Posts Gadget with Excerpt

Recent posts widget displays the latest posts of your blog. Here's a cool recent posts widget with excerpt and other amazing effects.
Install Now

30- Let Your Visitors Change Your Blog's Background Color

Allow you visitors to change your blog's background only for their computer. Add this widget to your blog now!
Install Now

We hope you find this listing useful. If we missed any widget, please mention it in the comments section below. Do share this article with your friends and give us your feedback about this post in the comments section.  

Join our Bloggers Forum on Facebook @ https://www.facebook.com/groups/blogolectforum and don't forget to subscribe us by email.

Tags: Blog Design / CSS Tricks / Widgets

How to Customize Labels Cloud Widget in Blogger v3

- 21 Comments

Are you fed up with the ugly design of default blogger Labels Cloud Widget? Do you want to make it more prominent and attention grabbing? Labels Cloud is a Widget provided by Blogger that allows you to categorize your content under specific labels. Labels widget makes your blog user-friendly by allowing your visitors to easily navigate to the content they are looking for by choosing the categories/labels.

The default blogger Labels Cloud widget is simple and leaves a bad impression on your visitors that's why we've to customize it. Labels cloud widget can be easily customized using CSS. If you don't know that how to customize it? Don't worry, in this tutorial we'll show you that How to Turn that Ugly label design into a stylish and clean design. We've designed these labels by using CSS and Animated Gradient effect. Let's begin:

Recommended For You:
How to Customize Labels Cloud Widget in Blogger v1
How to Customize Labels Cloud Widget in Blogger v2
Customized Flat UI Labels Cloud widget for Blogger v1
Customized Flat UI Labels cloud widget for Blogger v2

How to Customize Labels Cloud Widget in Blogger

First and foremost, Log in to your Blogger Account >> Select a Blog >> Template and click Edit HTML. Click inside the template code area and by using Ctrl+F search for the ]]></b:skin> tag. Now choose a style from the below three styles, copy its code and paste it just above/before it (]]></b:skin> Tag)

Note: There is no difference in the coding of the below three styles. The only difference is their colors, we did this to show you that there is nothing technical if you want to match its color with your blog theme. You can change the color by changing the bolded text in the CSS code and use our Color Code Generator 1 and Color Code Generator 2 for HTML color codes.

Style# 1

.label-size {
  position:relative;
  text-transform: uppercase;
  text-decoration:none;
  font-size:13px;
  font-family:Open Sans;
  color:#fff!important;
}

.label-size a {
  color:#fff!important;
  font-weight:bold;
  padding:8px 10px;
  margin:0 6px 6px 0;
  float:left;
  display:block;
  -moz-transition: all 0.4s ;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s ;
  -ms-transition: all 0.4s ;
  transition: all 0.4s ;
  background-image: linear-gradient(#EE4343, #E07C7C);
  background-size: auto 200%;
  background-position: 0 100%;
  transition: background-position 0.5s;border-bottom:3px solid #000000;
}

.label-size a:hover {
  background-position: 0 0;
}

Style# 2

.label-size {
  position:relative;
  text-transform: uppercase;
  text-decoration:none;
  font-size:13px;
  font-family:Open Sans;
  color:#fff!important;
}

.label-size a {
  color:#fff!important;
  font-weight:bold;
  padding:8px 10px;
  margin:0 6px 6px 0;
  float:left;
  display:block;
  -moz-transition: all 0.4s ;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s ;
  -ms-transition: all 0.4s ;
  transition: all 0.4s ;
  background-image: linear-gradient(#00FF3B, #778C7C);
  background-size: auto 200%;
  background-position: 0 100%;
  transition: background-position 0.5s;border-bottom:3px solid #000000;
}

.label-size a:hover {
  background-position: 0 0;
}

Style# 3

.label-size {
  position:relative;
  text-transform: uppercase;
  text-decoration:none;
  font-size:13px;
  font-family:Open Sans;
  color:#fff!important;
}

.label-size a {
  color:#fff!important;
  font-weight:bold;
  padding:8px 10px;
  margin:0 6px 6px 0;
  float:left;
  display:block;
  -moz-transition: all 0.4s ;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s ;
  -ms-transition: all 0.4s ;
  transition: all 0.4s ;
  background-image: linear-gradient(#8A8C8B, #1A1D1B);
  background-size: auto 200%;
  background-position: 0 100%;
  transition: background-position 0.5s;border-bottom:3px solid #000000;
}

.label-size a:hover {
  background-position: 0 0;
}

Finally click Save Template button and you're done.

We hope this article may have helped you in learning How to Customize Labels Cloud Widget in Blogger. Share this article with your friends and don't forget to subscribe us!

Tags: Widgets

How to Add Facebook Popup Like Box Widget to Blogger

- 67 Comments

Facebook is the leading social media service with its billions of active users. Millions of people Login to their accounts at least once a day. For Bloggers Facebook is one of the best traffic increasing strategies. Thousands of bloggers are getting most of their blog traffic from Facebook by creating their Fan Pages. But increasing Facebook Fan page likes is also a hard job.

Here comes the concept of Facebook Popup Like Box. If you're thinking that How it works then here's the answer. Whenever a visitor visits blog/site this popup widget automatically pops up on screen and shows Facebook Like Box with a Like Button. If the user doesn't want to like your page then by just clicking the cross button the popup will disappear.

Facebook Popup Like Box is a great way for increasing your social media activity and your blog traffic. Thousands of bloggers are using this technique for increasing their traffic and now its time for you to boost your Fan Page likes and Blog Traffic by using this Popup box. In this tutorial we'll show you that How to Add a Facebook Popup Like Box Widget to Blogger.

How to Facebook Popup Like Box Widget to your Blog

First and foremost, log in to your Blogger Account >> Select a Blog >> Layout >> Click Add a Gadget, scroll down and select HTML/JavaScript gadget from the list. Now copy the below code and paste it in the empty widget box

<!-- Widget by www.blogolect.com -->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /><script src="http://code.jquery.com/jquery-1.9.1.js"></script><script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script><link rel="stylesheet" href="/resources/demos/style.css" /><script>$(function() { $( "#dialog" ).dialog(); }); </script>  <div id="dialog" title="Get Updates via Facebook">
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fblogolect.official&width=292&height=258&show_faces=true&colorscheme=light&stream=false&show_border=false&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:285px; height:258px;" allowtransparency="true"></iframe></center>
<center style="float:center; margin-right:0px;"><a target='_blank' style="font-size:xx-small; color:#3B78CD; text-decoration:none;" href="http://www.blogolect.com/2014/12/facebook-popup-like-box-widget-for-blogger.html">Get this Popup Widget</a></center>
</div>
<!-- Widget by www.blogolect.com -->

• Replace blogolect.official with your Facebook Fan Page Username

Click Save button and you're done!

We hope this article may have helped you in adding Facebook Popup Like Box Widget. Share this article with your friends, don't forget to subscribe us and Join our Bloggers Forum on Facebook @ https://www.facebook.com/groups/blogolectforum

Tags: Widgets

Add Flashing Christmas Lights to your Blogger Blog

- 28 Comments

Recently we shared an article How to Add a Christmas Snow Fall Effect to Blogger and today again we're going to share another Christmas surprise widget. As you know Christmas is just a few days away, everyone is busy in decorating their homes, shops etc. If you're blogger and you're looking to surprise your visitors by decorating your blog then you're at the right place. After adding the snowfall effect its time to lighten up your blog with flashing colorful lights. In this tutorial, we'll show you that How to Add Flashing Christmas Lights to your Blogger Blog. This widget is designed by synthasite.

Add Flashing Christmas Lights to your Blogger Blog

First and foremost, log in to your Blogger Account >> Select a Blog >> Layout >> Click Add a Gadget, scroll down and select HTML/JavaScript gadget from the list. Now copy the below code and paste it in the empty widget box

<SCRIPT language=javascript type=text/javascript>
//<![CDATA[
var Ovr2='';
if(typeof document.compatMode!='undefined'&&document.compatMode!='BackCompat')
  {cot_t1_DOCtp="_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft  + document.documentElement.clientWidth - offsetWidth);}";}
else
  {cot_t1_DOCtp="_top:expression(document.body.scrollTop+document.body.clientHeight-this.clientHeight);_left:expression(document.body.scrollLeft  + document.body.clientWidth - offsetWidth);}";}

if(typeof document.compatMode!='undefined'&&document.compatMode!='BackCompat')
  {cot_t1_DOCtp2="_top:expression(document.documentElement.scrollTop-20+document.documentElement.clientHeight-this.clientHeight);}";}
else
  {cot_t1_DOCtp2="_top:expression(document.body.scrollTop-20+document.body.clientHeight-this.clientHeight);}";}
var cot_tl_bodyCSS='* html {background: fixed;background-repeat: repeat;background-position: left top;}';
var cot_tl_fixedCSS='#cot_tl_fixed{position:fixed;';
var cot_tl_fixedCSS=cot_tl_fixedCSS+'_position:absolute;';
var cot_tl_fixedCSS=cot_tl_fixedCSS+'top:0px;';
var cot_tl_fixedCSS=cot_tl_fixedCSS+'left:0px;';
var cot_tl_fixedCSS=cot_tl_fixedCSS+'clip:rect(0 100 85 0);';
var cot_tl_fixedCSS=cot_tl_fixedCSS+cot_t1_DOCtp;
var cot_tl_popCSS='#cot_tl_pop {background-color: transparent;';
var cot_tl_popCSS=cot_tl_popCSS+'position:fixed;';
var cot_tl_popCSS=cot_tl_popCSS+'_position:absolute;';
var cot_tl_popCSS=cot_tl_popCSS+'height:98px;';
var cot_tl_popCSS=cot_tl_popCSS+'width: 1920px;';
var cot_tl_popCSS=cot_tl_popCSS+'right: 120px;';
var cot_tl_popCSS=cot_tl_popCSS+'top: 20px;';
var cot_tl_popCSS=cot_tl_popCSS+'overflow: hidden;';
var cot_tl_popCSS=cot_tl_popCSS+'visibility: hidden;';
var cot_tl_popCSS=cot_tl_popCSS+'z-index: 99999;';
var cot_tl_popCSS=cot_tl_popCSS+cot_t1_DOCtp2;
document.write('<style type="text/css">'+cot_tl_bodyCSS+cot_tl_fixedCSS+cot_tl_popCSS+'</style>');


function COT(cot_tl_theLogo,cot_tl_LogoType,LogoPosition,theAffiliate)
{document.write('<div id="cot_tl_fixed">');
document.write('<><img src='+cot_tl_theLogo+' alt="" border="0"></a>');
document.write('</div>');}

//if(window.location.protocol == "http:")
COT("http://www.honeybearplayhomes.com/resources/flashing%20christmas%20lights.gif", "SC2", "none");
//]]>
</SCRIPT>

Click Save button and you're done!

We hope this article may have helped you in adding Add Flashing Christmas Lights to your Blogger Blog. Share this article with your friends, don't forget to subscribe us and Join our Bloggers Forum on Facebook @ https://www.facebook.com/groups/blogolectforum

Tags: Blogger Tricks / Widgets

Add a Christmas Snow Fall Effect to your Blogger Blog

- 10 Comments

Christmas is just a few days away, everyone is warming up and soon it will knock the doors of bloggers and the entire world. If you want to impress your visitors and you want to give them a Christmas surprise then this is the right time to show your skills. There are hundreds of Christmas surprises that you can give to your visitors. Today we're going to share one of them that is called Snow Fall Effect. This effect will display a Snow Fall on your blog and that it will definitely surprise your visitors.

If you're thinking to decorate your blog this Christmas and you want to give them a mind blowing surprise then you're at the right place. Its time to show your skills and amaze your visitors by adding Snow Fall effect to your blog. In this tutorial we'll show you that How to Add a Christmas Snow Fall Effect to your Blogger Blog.

Add Snow Fall Effect to your Blogger Blog

Step 1. Go to your Blogger Dashboard >> Select a Blog >> Template and click Edit HTML button
Step 2. Click inside the template code area, use Ctrl+F and search for the </head> tag
Step 3. Now Copy (Ctrl+C) the below code and Paste (Ctrl+V) it just above/before the </head> tag

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'/>
<script src='http://yourjavascript.com/146111102320/snowfall.js'/>

<script>
$(document).ready( function(){
$.fn.snow({ minSize: 10, maxSize: 50, newOn: 400, flakeColor: '#ffffff' });
});
</script>

Note: Remove the code in purple color if you already have jQuery in your template.
Customization:

• Increase or Decrease the minimum size of snow by changing the value in minSize: 10,
• Increase or Decrease the maximum size of snow by changing the value in maxSize: 50,
• Increase or Decrease the value in the newOn: 400, option for changing the snow fall speed
• To change the snow color replace #ffffff with your own color code

Step 4. Click Save Template button
And you're done!

From Editors Desk

We hope this article may have helped you in adding a snow fall effect to your blogger blog. Share this article with your friends and don't forget to Join our Bloggers Forum on Facebook @ https://www.facebook.com/groups/730927093629291

Tags: Widgets

Elegant and Clean Email Subscription Box for Blogger

- 4 Comments

Email Subscription Boxes are one of the most essential widgets that we use in our blogs. Everyone knows the importance of Email Subscription Box and subscribers too. Email subscription boxes are the best way to collect your visitors/readers and provide them your latest updates directly to their inbox.

People are using different techniques for increasing their email subscribers list and one of the best ways for increasing subscribers list is adding an Email Subscription Box to your blog sidebar. We've also shared some of them. Just recently we've designed another Email Subscription box and on the basis of its design we named it Clean Email Subscription box as its design is clean and stylish. We've used light colors in its design, it has two forms, one for the name and the other for email address.

Recommended For You:

Flat UI Email Subscription Box For Blogger
Simple Flat UI Email Subscription Widget for Blogger
For more, visit our Widgets Inventory.

This email subscription box has a clean and simple design and we hope that it will attract your visitors and will help you in increasing your email subscribers list. Take a look at the image below to see how it looks.

How to Add an Email Subscription Widget to Blogger

First and foremost, log in to your Blogger Account >> Select a Blog >> Layout >> Click Add a Gadget, scroll down and select HTML/JavaScript gadget from the list. Now copy the below code and paste it in the empty widget box

<style>
#bgt-subscribe-box .header{
background: none ;
color: #a3a3a3;
font-size: 28px;
line-height: 36px;
padding: 15px 25px;
font-weight: 700;
font-family: open sans;
text-align: center;
}
#bgt-subscribe-box {
width:auto;
height:auto;
background:#e7e7e7;
}
#bgt-subscribe-box p {
font-family:'Open Sans';
font-size:13px;
color:#888;
line-height:20px;
padding:10px 20px 0 20px;
margin:0;
}
#bgt-subscribe-box .bgt-emailfield {
padding:0px 20px 10px;
}
#bgt-subscribe-box .bgt-emailfield input {
background:#fff;
color:#bbb;
padding:10px;
margin-top:10px;
font-size:13px;
font-family:'Open Sans';
width:91%;
border:0;
border:1px solid #ccc;
transition:all 0.4s ease-in-out;
}
#bgt-subscribe-box .bgt-emailfield input:focus {
outline:none;
border:1px solid #d9d9d9;
color:#888;
}
#bgt-subscribe-box .bgt-emailfield .bgt-submitbutton {
background:#4E5563;
color:#fff!important;
text-transform:uppercase;
font-weight:bold;
border:none;
outline:none;
width:100%;
cursor:pointer;
transition:all 0.4s ease-in-out;
}
#bgt-subscribe-box .bgt-emailfield .bgt-submitbutton:active {
outline:none;
border:none;
background:#444;
color:#fff;
}
#bgt-subscribe-box .bgt-emailfield .bgt-submitbutton:hover{
background:#718397;
color:#fff;
}
</style>
<div id='bgt-subscribe-box'>
            <div class='header'>
            Subscribe Now!
            </div>   
             <div class='bgt-emailfield'>
              <form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=blogolect&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
               <input type='text' name='name' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter Your Name&quot;;}' onfocus='if (this.value == &quot;Enter Your Name&quot;) {this.value = &quot;&quot;;}' value='Enter Your Name'/>
               <input type='text' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter Your Email Address&quot;;}' onfocus='if (this.value == &quot;Enter Your Email Address&quot;) {this.value = &quot;&quot;;}' value='Enter Your Email Address'/>
<input name='uri' type='hidden' value='blogolect'/>
<input name='loc' type='hidden' value='en_US'/>
                <input class='bgt-submitbutton' type='submit' value='Subscribe Now!'/>

              </form>
             </div>
</div>

Replace both blogolect with your RSS Feed Name

Finally click Save button and you're done!

We hope this article may have helped you in adding An Email Subscription Widget to Blogger. Share this article with your friends, don't forget to subscribe us and Join our Bloggers Forum on Facebook @ https://www.facebook.com/groups/blogolectforum

Tags: Beginner's Guide / Tutorials / Widgets

How to Add a Live Chat Support to Blogger

- 8 Comments

If you're running an Online Store, a Community or an Online Service. A quality Customer Support System really helps you in increasing your sales and interaction with your visitors. While choosing an online service, people look for its features and Live Chat Support is the most crucial.

Having a Live Chat Support system helps you to easily interact with your visitors, so that you can understand their needs, which will help you in improving your services and their experience too. In case of an online store, a Live Chat Support system will help you in increasing your sales. Recently, we received an email from one of our visitors that he wants to add a Live Chat Support system to his blog. In this tutorial we are going to share step by step guide on How to Add a Live Chat Support to Blogger Blog.

It hardly takes 3 minutes to add a Live Chat Support system to your Blog.

Before you add it to your blog, take a look at the image below to see how it looks. On clicking the + button a chat box will open for customer support where your visitors can ask you questions or feedback.

How to Add a Live Chat Support to Blogger Blog 

First and foremost, go to http://www.purechat.com and click Sign Up Free button. A popup will appear, enter your login information and click Submit button.

You'll redirected to the next page, a popup will automatically appear with your chat widget code. If you want to add it without any customizations then Copy that code, go to your Blogger Dashboard >> Select a Blog >> Layout >> Add a Gadget >> Select HTML/JavaScript gadget from the list and paste the copied code in the empty widget box.

Otherwise if you want to customize it close that HTML popup, click Chat Widgets button and then click Edit button.

You'll see a plenty of different tabs for customizing each and every section of your widget like Collapsed, Start Chat, No Operators, In Chat etc. You can also customize its Mobile version by clicking the Mobile tab. Customize your chat widget according to your taste and click Save button.

Now click HTML button under the Installation heading, a code will appear, copy that code.

Now go to your Blogger Dashboard >> Select a Blog >> Layout >> Add a Gadget >> Select HTML/JavaScript gadget from the list and paste the copied code in the empty widget box. Finally click Save button and you're done.

We hope this article may have helped you in adding a Live Chat Support Widget to your Blogger Blog. Share this article with your friends, don't forget to subscribe us and Join our Bloggers Forum on Facebook @ https://www.facebook.com/groups/blogolectforum

Do share your thoughts in the comments section below.

Tags: Plugins / Widgets

Top 4 Live Chat Support Widgets for your Blogger Blog

- 10 Comments

If you want to grow a community and increase user engagement, then the Live Chat Support widget is one of the most effective solutions. In this Modern age, no one has time to wait for several hours or days for receiving your solution feedback. Everyone likes to get solutions to their answers within no time.

While choosing an online service, people look for its features and Live Chat Support is the most crucial. Whether you are running an online store, a community, service or a blog, live chat support is important. By adding a live chat support widget you will get real-time feedback from your visitors regarding your product or content and surely it'll also increase your sales. In this article, we are going to share Top 4 Live Chat Support Widgets for your Blog.

Zopim

Zopim allows you to directly chat with your visitors. Its available in both free and premium packages. If you're running a small business blog then the free package is enough for you. With free package you can chat to only one visitor at a time.

MyLiveChat

MyLiveChat is another great free live chat software for your blog. You can easily integrate it to your Blogger site. It allows you to easily interact with your readers. It also allows Real time traffic monitoring, visitors path, referrers, current page.

Another great feature of MyLiveChat is that you customize it the way you like. You can customize chat button, chat window, pre-chat window, offline message window. You can also change its logo for branding.

Pure Chat

PureChat is also a free live chat support software for your Blogger Blog. It has countless features. You can personalize colors, widget image, labels and forms.

You can easily manage chats, widgets, view chat history, profile and users. It also provides a statistics tab. You can also manage user roles and multiple support agents.

Olark

Olark is a free Live Chat Software. Both free and premium packages are available. Set-up is extremely easy. You can easily customize it by choosing different themes and by using custom CSS.
Its Cobrowsing feature lets you see what’s on the customer’s screen and even control their browser. With its targeted chat option you can easily chat with the right person.

We hope this article would help you in choosing the best Live Chat support Widget for your website. Do share your thoughts  in the comments section below.

Share this article with your friends, don't forget to subscribe us and Join our Bloggers Forum on Facebook @ https://www.facebook.com/groups/blogolectforum