Tags: Blog Design / Widgets

How to Customize Popular Posts Widget in Blogger - Numbered

- 11 Comments

Popular posts is a widget provided by blogger. It displays popular posts/most viewed posts of your blog. By default, the design of blogger default popular posts is ugly and not attention grabbing, that's why we need to customize it. You can try four different combinations for displaying this widget i.e.

1- Only the title of the post
2- Post title with summary
3- Post title with image thumbnail
4- Post title with image thumbnail and summary

Recommended for you:
3 Different Popular Posts Styles for Blogger
Add 2 Stylish Custom Popular Posts Widget to Blogger
Multi-Colored Popular Posts widget for Blogger
How to Customize Popular Posts Widget in Blogger 

Having a popular posts widget has lots of advantages. It encourages your visitors to surf more and check the most viewed articles of your blog. It decreases your bounce rate as people surf and spend more time on your blog. So, if you want to turn your simple popular posts style to a stylish one and you want to attract your visitors. In this article, we'll show you that How to Customize Popular Posts Widget in Blogger.

How to Customize Popular Posts Widget in Blogger

First and foremost, add the default popular posts widget by going to Layout >> Add a Gadget >> Select Popular Posts Gadget from the list and click Save button.

Now, 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 copy the below code and paste it just above/before it (]]></b:skin> Tag)

.popular-posts ul li a {
    background: none repeat scroll 0 0 #4E5563;
    color: #FFFFFF;
    display: block;
    margin: 10px 0;
    padding: 25px 15px 30px;
    position: relative;
    text-decoration: none;
    transition: all 0.3s ease-out 0s;
 width: 87%;
}
.popular-posts ul li a:before {
    background: none repeat scroll 0 0 #373C45;
    color: #FFFFFF;
    font-weight: 700;
    height: 2em;
    line-height: 2em;
    margin-left: 88%;
    padding: 2px;
    position: absolute;
    text-align: center;
    width: 2em;
    border:1px solid white;
    transition: all 0.2s ease-in-out 0s;
   -moz-transition: all 0.3s ease-in-out 0s;
}
.popular-posts ul li a:hover {
    opacity: 0.8;
}
.popular-posts ul li a:hover:before {
    border-left-color: #CCCCCC;
}
.popular-posts ul li:first-child + li + li + li + li + li + li + li + li + li a:before {
    content: "10";
}
.popular-posts ul li:first-child + li + li + li + li + li + li + li + li a:before {
    content: "9";
}
.popular-posts ul li:first-child + li + li + li + li + li + li + li a:before {
    content: "8";
}
.popular-posts ul li:first-child + li + li + li + li + li + li a:before {
    content: "7";
}
.popular-posts ul li:first-child + li + li + li + li + li a:before {
    content: "6";
}
.popular-posts ul li:first-child + li + li + li + li a:before {
    content: "5";
}
.popular-posts ul li:first-child + li + li + li a:before {
    content: "4";
}
.popular-posts ul li:first-child + li + li a:before {
    content: "3";
}
.popular-posts ul li:first-child + li a:before {
    content: "2";
}
.popular-posts ul li:first-child a:before {
    content: "1";
}
.item-snippet {
    display: none;
}
.PopularPosts .item-thumbnail {
    display: none;
} 

Hit the Save Template button and you're done.
Congratulations: You've successfully customized your popular posts widget.

From Editors Desk

We hope this article may have helped you in customizing popular posts 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/730927093629291

Tags: Widgets

How to Add Numbered Page Navigation to Blogger - 7 Designs

- 19 Comments

This Page was Update on 22/01/2015.
Do you want to make your blog Navigation more easy and user-friendly? Are you fed up with the default blogger "Older Posts" and "Newer Posts" navigation? By default, Blogger provides us an option to set the number of posts on our homepage, when the limit of the posts exceeds it shows Older Posts or Newer Posts button for navigating posts. But if you want to make your blog more user-friendly Numbered Page Navigation is better than the Newer and Older Posts. Page numbers instead of older and newer could help our visitors to navigate quicker and easily. If you're looking to add a Numbered Page Navigation to your website then you're at the place. In this tutorial we're going to show you that How to Add Numbered Page Navigation to Blogger. We have also designed 7 clean and stylish styles for this navigation, choose the one you like and don't forget to leave your feedback about our designs in the comments section below.

Recommended For you:
8 Effective Ways to Generate Massive Traffic from Facebook
Boost your Blog Traffic and Authority with ViralContentBuzz
30 Handpicked Blogger Widgets and Plugins

How to Add Numbered Page Navigation to Blogger

Step 1. Log in to your Blogger Account
Step 2. Select your Blog and go to Template >> Edit HTML and Search (Ctrl + F) for the following tag

]]></b:skin>

Step 3. Now choose one of the following numbered page navigation styles, copy its code and paste it just above/before ]]></b:skin> tag

Style #1

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 5px 10px;margin-right:5px; color: #F4F4F4; background-color:#404042;border:2px solid #ccc;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#666666;text-decoration:none;color: #fff;}
#blog-pager .showpage, #blog-pager, .pagecurrent{font-weight:bold;color: #000;}
 .showpageOf{display:none!important}
#blog-pager .pages{border:none;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}

Style #2

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 5px 10px;margin-right:5px; color: #000; background-color:#fff;border:2px solid #ccc;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#222;text-decoration:none;color: #fff;}
#blog-pager .showpage, #blog-pager, .pagecurrent{font-weight:bold;color: #ccc;}
 .showpageOf{display:none!important}
#blog-pager .pages{border:none;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}

Style #3

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 5px 10px;margin-right:5px; color: #F4F4F4; background-color:#2aa4cf;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#1D7290;text-decoration:none;color: #fff;}
#blog-pager .showpage, #blog-pager, .pagecurrent{font-weight:bold;color: #000;}
 .showpageOf{display:none!important}
#blog-pager .pages{border:none;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}

Style #4

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 5px 10px;margin-right:5px; color: #F4F4F4; background-color:#00CC00;border:2px solid #008E00;border-radius:2px;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#008E00;text-decoration:none;color: #fff;}
#blog-pager .showpage, #blog-pager, .pagecurrent{font-weight:bold;color: #000;}
 .showpageOf{display:none!important}
#blog-pager .pages{border:none;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}

Style #5

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 5px 10px;margin-right:5px; color: #F4F4F4; background-color:#FF8000;border:2px solid #B25900;border-top-right-radius:7px;border-bottom-left-radius:7px;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#B25900;text-decoration:none;color: #fff;}
#blog-pager .showpage, #blog-pager, .pagecurrent{font-weight:bold;color: #000;}
 .showpageOf{display:none!important}
#blog-pager .pages{border:none;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}

Style #6

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 5px 10px;margin-right:5px; color: #F4F4F4; background-color:#009999;border:2px solid #006B6B;border-radius:999px 999px 999px 0px;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#006B6B;text-decoration:none;color: #fff;}
#blog-pager .showpage, #blog-pager, .pagecurrent{font-weight:bold;color: #000;}
 .showpageOf{display:none!important}
#blog-pager .pages{border:none;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}

Style #7

#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 5px 10px;margin-right:5px; color: #F4F4F4; background-color:#FFCC00;border:2px solid #B28F00;border-radius:999px 999px 999px 999px;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#B28F00;text-decoration:none;color: #fff;}
#blog-pager .showpage, #blog-pager, .pagecurrent{font-weight:bold;color: #000;}
 .showpageOf{display:none!important}
#blog-pager .pages{border:none;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}

Step 4. Again find (Ctrl + F) this tag

</body>

Step 5. And add the following script just above/before it

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
  /*<![CDATA[*/
    var perPage=6;
    var numPages=6;
    var prevText ='◄';
    var nextText ='►';
    var urlactivepage=location.href;
    var home_page="/";
  /*]]>*/
</script>
   <script type="text/javascript" src="http://yourjavascript.com/1285534128/pagenavigationupdated.js"></script>
</b:if>
</b:if>

Customization:

• var perPage=6; No. of posts to show perPage
• var numPages=6; No. of pages to show in Navigation
• var prevText ='◄'; Text to show for Previous Page button
• var nextText ='►'; Text to show for Next Page button

Step 6. Press the Save Template button
And you're done

From Editors Desk

We hope this article may have helped you in learning How to Add Numbered Page Navigation to Blogger. Share this article with your friends and don't forget to subscribe us via email.

Tags: Blog Design / Blogger Tricks / Widgets

How to Create a Three Column Footer Widget in Blogger

- 19 Comments

Have you ever thought about having an extra space in your blog footer section for adding more widgets to your blog? You might have seen three column footer widgets section on many websites. Most of the templates come with built-in footer sections, but if unluckily your template doesn't contains a footer and you want to add it! Don't worry, we'll help you in creating a three column footer in blogger.

Recommended for You:
Create a jQuery Sliding Menu with Expand/Collapse Function in Blogger
Add a Tabbed Table of Contents to your Blogger Blog
How to Create an Advanced Admin Control Panel in Blogger

If your sidebar is loaded with various widgets and you want to add more widgets without removing them. Then footer section is the best solution. By creating a footer section in your blog, you can add more widgets to your blog in the footer section. So, today in this tutorial we're going to share How to Create a Three Column Footer Widget in Blogger.

How to Create a Column Footer in Blogger

First of all, log in to your Blogger Account >> Select a Blog >> Template >> Click Edit HTML and search for the ]]></b:skin> tag. Now copy the below CSS code and paste it just above/before it (]]></b:skin> tag)

/* -----   Footer Start   ----- */
#footer {
       margin:auto;
       padding: 0px 0px 10px 0px;
       width: 100%;
       background:#333434;
}
#footer-wrapper {
       margin:auto;
       padding: 20px 0px 20px 0px;
       width: 960px;
}

#footercol-wrapper {
       background:#333434;
       float: left;
       margin: 0px 5px auto;
       padding-bottom: 20px;
       width: 32%;
       text-align: justify;
       font-size:100%;
       line-height: 1.5em;
       word-wrap: break-word;
       overflow: hidden;
       color:#fff;
}

.footercol {margin: 0; padding: 0;}
.footercol .widget {margin: 0; padding: 10px 20px 0px 20px;}

.footercol h2 {
      margin: 0px 0px 10px 0px;
      padding: 3px 0px 3px 0px;
      text-align: center;
      color:#fff;      text-transform:uppercase;
      font-family:'Skolar Bold',Palatino,"Cambria","Droid Serif","Georgia","Times New Roman","Times",serif;
      font-size:21px;
      border-bottom:2px solid #fff;
}

.footercol ul {
      margin: 0px 0px 0px 0px;
      padding: 0px 0px 0px 0px;
      list-style-type: none;
}

.footercol li {
      margin: 0px 0px 2px 0px;
      padding: 0px 0px 1px 0px;
      border-bottom: 1px solid #ccc;
}
/* -----   Footer End   ----- */

Again search for </body> tag and just above/before it add the following code

<div id='footer'>
<div id='footer-wrapper'>
<div id='footercol-wrapper'>
<b:section class='footercol' id='footercol1' preferred='yes'>
</b:section>
</div>
<div id='footercol-wrapper'>
<b:section class='footercol' id='footercol2' preferred='yes'>
</b:section>
</div>
<div id='footercol-wrapper'>
<b:section class='footercol' id='footercol3' preferred='yes'>
</b:section>
</div>
<div style='clear: both;'/>
</div> </div>

Finally click Save Template button and you're done!
Now go to Layout and start adding widgets to your footer section.

For your Information:

• background:#333434; The background color of the footer section, you can change it according to your website colors

• background:#333434; The background color of the widget columns. In my case the backgrounds of both footer section and widget columns is same

• color:#fff; The color of Widget Title

We hope this article may have helped you in creating a a Three Column Footer Widget in 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: Widgets

New Year Countdown Widget v2 for Blogger

- 9 Comments

Yesterday we shared an article on How to Add a New Year Countdown Widget to your Blog. The countdown widget design we shared yesterday was a simple and clean design. After some customizations, we turned that simple design to a colorful design. If your blog is about Images, Wallpapers, or Music then this design will definitely fit into your blog. 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. So, today we're going to share New Year Countdown Widget v2 for Blogger.

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=Metamorphous" rel="stylesheet" type="text/css" />
<style type="text/css">
a.bgt-clock-link { text-decoration: none; display: block; outline: none; }
#TimerDiv { background: transparent;color: #000;text-shadow: 0 0 6px #00cc00;font-family: 'Metamorphous', cursive;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}
}
#bgt-clock-days{color:#00cc00;font-weight:900;}#bgt-clock-hr,#bgt-clock-mins,#bgt-clock-secs{font-family:courier new}#bgt-clock-hr{background:#00cc00;font-weight:700}#bgt-clock-secs{background:#ccc;color:#2aa4cf;}#bgt-clock-mins{background:#2aa4cf;}
</style>
<a target="_blank" class="bgt-clock-link" href='http://www.blogolect.com/2014/12/new-year-countdown-widget-v2-for-blogger.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: 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