Tags: Collections / Templates

20 Best Blogger Templates of 2014

- 90 Comments

Today, we're going to share a collection of 20 Best Blogger Templates of 2014.

Blogger is an easy to use platform with millions of active users. Blogger is good for both beginners and professionals. In case of beginners, it just hardly takes 5 minutes to start your blog on blogger. It has a strong and unique dashboard with rich customization options. When it comes to our blog design, we choose custom templates as they give our blog a unique and professional look because our blog template is the first thing that our visitors notice. Thousands of blogger templates are available on the internet. But choosing the best one has always been a headache for bloggers. So, in order to help you, today we're going to share a collection of 20 Best Blogger Templates of 2014. We hope you find this collection useful.

1- Awesome Mag

Awesome Mag Blogger Template is fully responsive theme that comes with features that are never seen before in a BlogSpot blogger template. It has a unique fluid design concept with robust elements, which make it a complete package of theme that could be converted into any niche site or blog. It is a 3 column template that can be customized into a portfolio, magazine, personal blog, products, list based sites and etc.

Demo

Download

2- Real Mag

RealMag is a modern, user-friendly and professional blogger template. It is clean and modern design for blogger users. It comes with several handy features that are both good to run a successful magazine blog, news blog or etc.

Demo

Download

3- Torrentism

Torrentism is a responsive Blogger template for Torrent, file hosting and software download niche blogs. It is a multipurpose template and can be used in different ways, according to the desire needs.

Demo

Download

4- Beta Commerce

Demo

Download

5- Simplest

Simplest is a minimal style responsive blogger template fully loaded with lots of awesome features and clean design.

Demo

Download

6- Colored

Colored is a minimal flat style template. Its has a clean design and has build-in tabber widget and lots more. A colorful navigation menu and clean design gives it a professional and eye catching look.

Demo

Download

8- Krystal

Krystal is a responsive magazine style blogger template specially made for news, technology, blogging, multimedia and niche type blogs. Krystal is fast loading blogger template coded with latest HTML5 and CSS3 techniques. 

Demo

Download

9- Simple Tech

Simple Tech is an awesome tech blogging templates which is ready right out of the box to display your content like the biggest, baddest magazines-turned-websites do it. Simple Tech is fast loading and responsive, we have added lots of seo settings to this theme which will help you to rank higher in SERP.

Demo

Download

10- Grid Mag

Grid Mag is a Blogger Template having 3 Columns, the header is divided in two portions, the left one is your header while on the right side we've implemented a banner ad section.  A beautiful sticky navigation menu on the top and one on bottom. The footer is divided in three portions, which means you can add 3 widget in its footer.

Demo

Download

11- Flat Mag

Flat Mag Responsive Blogger Template is a multi-purpose straight Blogger template precisely designed for multimedia, news bulletin, Entertainment and Technology blogs. With elegant green color scheme, Flat Mag gives you visitors the experience of their life as they go though the responsive and flexible design.

Demo

Download

12- Shoot Pics

Shoot-pics is a ideal blogger template for photographers. It's loaded with best features which makes your blog a perfect showcase for your photography skills. You will also get a complete guided documentation with this template which will make you the best curator of this template.

Demo

Download

13- Greenchilli

GreenChilli is a SEO Friendly, Clean and Responsive, 2 Columns Blogger Template with Elegant Look. GreenChilli Blogger Template has a Top Dropdown Menu, Related Posts, 3 Columns Footer, Google Fonts, Social Profile Buttons and Post Share Buttons and More Features.

Demo

Download

14- Videoism

Videoism is a professional video hosting blogger template designed for video site and video blog portal. This template would help everyone in setting up a professional video site rather quickly. It is somewhat inspired from popular video hosting websites like YouTube, Vimeo, Dailymotion and etc.

Demo

Download

15- Your Mag

Your Mag is a complete Responsive Blogger Template for a news or magazine site with the focus of attracting and keeping visitors on their site. This theme perfect for Search Engine Optimization. Its High User Friendly Blogger Template. Its perfect for News, Magazine or portofolio websites.

Demo

Download

16- Iconic One

Iconic one is a minimal responsive template with a number of great features. The Best part of IconicOne template is that it has every minor function added with minimal spacing.

Demo

Download

17- Go Green

GoGreen is a multipurpose Blogger template with lots of new and indifferent functionalities. It is elegantly clean with a touch of FLAT UI but it is not totally flat. The dynamics of this theme are extremely pure and it gives a sparkling shine to your blogger site.

Demo

Download

18- PickPress

PickPress is one of the editor's choice template with retina display. It has unique style logo and featured post area with mouse hover rotating option. PickPress blogger template is for those bloggers who want to give their blog elegant plus professional look.

Demo

Download

19- Delivery

Delivery is a modern WP theme which was published by theme-junkie, fresh and creative template best suited for Magazines, News or Tech Blogs, with tons of features to make your blog elegant. Best thing of 'Delivery blogger template' is, it's well suited for both beginners with no coding knowledge and experience.

Demo

Download

20- Retina

Retina Blogger template is a versatile magazine style theme designed for those blogs which are multi-niched, or covers a lot of stories of different categorize at just one place. It is still ideal for all kind of blogs like Technology, Entertainment, News, Magazine, Gadgets. It has the tendency to accommodate almost anything. It is jam-packed with lots of customized widgets.

Demo

Download

From Editors Desk

Do share your thoughts about these templates in the comments section below? Which one is your Favorite? Share this post with your friends and don't forget to subscribe us!

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: Blogger Tricks / Tutorials

How to Add Disqus Comment System to Blogger

- 125 Comments

The blogger commenting system only allows you to comment using your Google Account, but what would happen if it is must for your commenters to connect to your website through Facebook or Twitter account to make a comment. It would be great! Right. But how? Don't worry, the commenting system we're going to share with you today will help you to do this.

Today we're going to discuss about the DISQUS commenting system. Disqus is a flexible commenting system which allows your visitors to comment using their social profiles like Facebook and Twitter. Disqus comment system is full of advantages and helps you to easily build a community. It has lots of features, some features are:

• Unique Design: Disqus has a unique and professional design that fits in all websites.

• Social Login: Your visitors can easily comment using their social profiles.

• Stars and Thumbs Up: You visitors can rate the discussion using starts and can thumbs up others comments.

• Threaded System: It has Real time threaded system which makes your discussions more easy.

• Comment Moderation: You can also enable comment moderation in order to approve your comments.

and lots more...

Integrating Disqus comment system is too easy and no coding is required. Just a few clicks and done. Today in this tutorial we'll show you that How to Add Disqus Comment System to Blogger.

How to Add Disqus Comment System to Blogger

First and foremost, go to Disqus.com and click Sign Up button. Now you've to create your account, enter your Log in information i.e. username, email and password. or you can also sign up with Facebook, Twitter and your Google account.
Once your account is created, it'll redirect you to the homepage. Now click the Gear button from the top and then click Add Discuss to Site button.

On the next page, it'll ask you to enter your website information. Enter your site name, your unique disqus URL (blogname.disqus.com), select a category and click Finish Registration button.

Almost done, it'll ask you to choose your Platform, so choose Blogger and click Add to my Blogger Site. A new tab will open, just click Add Widget button and you're done.

Import your Existing Blogger Comments into Disqus

To import your existing Blogger Comments into Disqus, click Tools > Import button as shown in the above image and click Import Comments from Blogger button from the next page.
That's it!

We hope this article may have helped you in learning How to Add Disqus Comment System to Blogger. Share it with your friends and don't forget to subscribe us!

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: Social Media / Traffic Tips

8 Effective Ways to Generate Massive Traffic from Facebook

- 8 Comments

Facebook is the #1 social media network with 1.19 billion monthly active users and 728 million daily users. Facebook helps you connect with people and your friends and family for free. For bloggers Facebook is one of the major sources of traffic for their websites. Bloggers are generating thousands to millions of visitors from Facebook. Would you like to drive more website traffic from your Facebook page? Facebook provides incredible opportunities for driving traffic to your blog/website. With its billions of active users, you can generate massive traffic to your website from Facebook. Combining your website with Facebook can generate millions of visitors for your website. With a Facebook page you can reach thousands to millions of users for your website. Today in this article, we're going to share 8 effective and creative ways to boost your website traffic using Facebook.

Create a Facebook Fan Page and Group

The first thing you should do after starting your website is to Create a Facebook Fan Page for your Website. After creating a page for it., promote your page by sharing it on your Facebook Profile, inviting your friends to like it and request them to share on their profiles. You can drive massive traffic from your Facebook page, if you're doing it the right way.

Recommended:: 101 Ways to Increase Your Website Traffic

A Group can also be very helpful for generating traffic to your blog. For example, you created a Facebook Group for your website and it has +10 thousand members. If just 2000 members are active, so imagine how much traffic your blog will generate from that group. So, create a group add your friends to it and request your friends to add their friends to it.

Recommended: 18 Reasons Why Newbie Bloggers Quit Blogging

By using your Facebook Page and Group in the right way, you can generate massive traffic from Facebook. Don't forget to Join our Page and Group on Facebook.

Promote your Page and Join Groups

No doubt, a Fan Page is nothing without the fans. After creating your fan page, don't forget to promote it. Invite all of your friends to like it and request them to promote your page. Share your page with other bloggers and make your page go viral.

Recommended: Create a jQuery Sliding Menu with Expand/Collapse Function in Blogger

After creating your page and group, don't forget to join other groups related to your niche. Join the groups related to your niche and having thousands of members. After publishing articles on your blog, page and group, share it on all the groups you've joined. It really helps in generating traffic.

Add your Blog URL to your "About" Box

Another easy way to drive more traffic to your blog is by adding your blog URL to the about section of your Page and Group. People will visit your blog as soon as they read the description.

But remember in order to display your Blog URL in your about box, write a description of just one or two line and then leave your Blog Link. If your Description is too long, then people will have to click about section. So write a short description and then leave your link.

You can also do so by leaving your link in your Group description box. In the Group description box start your description with your blog URL, because if you add your URL at the end, people will have to click See More link. So, leave your blog link in the start of the group description. Here's an example:
This group is created by WEBSITE URL.

Remove the Link

There is no need to keep the post link in the text of your posts. When you add a link to your posts, Facebook generates its click-able preview with your post link and on click it redirects to your link. So, there is no need to keep the URL in your post text.

Removing the link gives your posts a unique look. The best way is to add the Post Title or a Short Description about that article to your post text.

Share a Link Regularly

Share a link to your blog on your page regularly. It keeps your followers updated to your latest posts. It's not important to share a single link every day, you can share multiple links, but remember share your links after some time interval. Like sharing a link after 4 or 6 hours, by doing this people will receive your posts on their Newsfeed more than once a day and by sharing after interval they would have some time for reading your recent post.

Recommended:: Add a Tabbed Table of Contents to your Blogger Blog

Also, if you don't publish content on your website, keep sharing the previous interesting posts in order to keep your fans busy. It's a great way for generating massive traffic.

Make your Updates Short

No doubt that blog posts are too long and contains thousands of words. While sharing your posts on Facebook, keep in mind that don't copy-paste your complete article or 7-8 lines of your article. Just keep it simple and short. Share your Posts with a 2-3 lines of text.

About what your article is? Just take some 2-3 interesting lines, a quote about your post or its title and share it. It gives your post a clean and unique look. People will get interested by reading those lines/quote.

Weekly Wrap-Up

Create a List of the Most Visited or Commented articles and share it on your page. It generates more clicks to your Website from Facebook because your followers get a complete list of your last week updates. A weekly wrap-up post gives your fans a chance to see your last week's articles at a glance. You can also publish a post on your blog every month with the most visited posts of the month.

Recommended: Boost your Blog Traffic and Authority with ViralContentBuzz 

Use Facebook Ads to Promote your Posts

Advertise your blog and posts on Facebook and give a boost to your reach. You can advertise on Facebook as low as $5. Facebook advertising is a great way to boost your website traffic if you've money. You can use Facebook ads for advertising your website, page, posts and for increasing conversations on your website.

From Editors Desk

You can generate thousands of visitors to your website/blog from Facebook, if you use it in a right way. We hope all the above tips would help you in generating free massive traffic to your website.

What do you do for generating traffic to your website from Facebook? Share your tips in the comments section below and subscribe us via email to receive more interesting articles directly to your inbox.

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