Top 5 Paid Premium Templates for Blogger

Blogging Tips

Top 5 Paid Premium Templates for Blogger

Shadow LK 8:41:00 AM Comment

As time is passing Blogger is getting better and better. With more number of users, the developers have increased too. Unlike WordPress more than 98% of blogger templates available are free of cost. But now we are seeing a slow but effective growth in the blogger paid templates.

Paid Templates are lot better than free ones in almost all aspects.(Obviously as one is paid for it). Paid Templates have features such as -

• Good Support
• Better Quality
• No or Less Bugs
• Premium Look
• Uniqueness
• Easier to use
• Documentation for beginners and etc.

Below I present Top 5 Paid Premium Templates for Blogger which you can buy and use in your blog.

5. GridSpot

Grid Spot designed by Tien of BloggerItems.com can be said to be the first template after which paid templates came one after the other.
Grid Spot comes with features like Auto Logo, Responsive Design etc.

View Live Demo

Purchase

4. Bpress

 

Bpress is another example of Modern Blogger Template with features like Popup Contact form, Easy customization, ticker etc. Developed by Lasindu Nadisan Bpress is an awesome magazine style blogger template.

View Live Demo

Purchase

3. Sevida

 

Sevida designed by MKR is another great blogger template. It has a responsive layout, magazine style premium look, Ajax search, Custom commenting system and many other features. This template looks and its layout is dynamic.

View Live Demo

Purchase

2. Cody

 

Cody is a nicely furnished blogger template. It looks are no less than of a WordPress template. Other than that is SEO Optimized and has a flexible layout. Cody is fully responsive and its rich look makes it more attractive.

View Live Demo

Purchase

1. Flat News

 

Flat News which is again designed by Tien is literally one of the best blogger template we have ever seen. It looks are killing and on the other side it is equally convenient to edit this template. The template has many features such as Responsive design and easy customization. If you are ready to spend some bucks on your blog, this template will be worth your money.

View Live Demo

Purchase

We come to the end of this list. Lastly I want to conclude that Premium templates may need you to pay but they have no alternates which can completely counterfeit them. Try these templates today and make your blog best from the rest.

Animated Page Loading Effect for Blogger

Design Hack JavaScript

Animated Page Loading Effect for Blogger

Shadow LK 6:30:00 AM Comment

Every blogger wants his blog to look best among his competitors blogs. This widget will add a bit more chunks of awesomeness in your blog.

The concept of this widget is simple. This is more or less like Exit Effect we add in Microsoft Powerpoint's Custom Animation. Just like that whenever the visitors will click any link to leave the current page, inspite of the old boring loading it will have animation.

A live demo can be seen on my blog itself. Just click any link here and you could see the change.

To add this effect to your blog do the following things.

Adding the HTML and Script

Add the below given code just above </body>.

<style>
#abt-page-loader {
        position: fixed!important;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 9999;
        background:#000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiS59QXQCkpwBNTILjf4zxXZMu_3JvMGlacctJ44bGMZsI847WSqSFinI3Y7njP4nrQ5IlwQPgKki4BXaIlnk9_8Csx_nmh1tyQ-77_A_mjNknFPstXF0Opv9JibgWA_mjOjgu5xdcyTI/s200/load6.gif') no-repeat 50% 30%;
        color: #FFF;
        display: none;
        font: 0/0 a;
        text-shadow: none;
        padding: 1em 1.2em;
}
</style>
<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="abt-page-loader">Loading...</div>');
$(window).on("beforeunload", function() {
    // ... Show the Animation `.fadeIn()`
    $('#abt-page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>

After adding this code, save the template.

You are done now. Now you and your visitors can see this awesome and cool Animated Page Loading Effect in you blogger blog.

Numbered Popular Posts Widget for Blogger

CSS Widgets

Numbered Popular Posts Widget for Blogger

Shadow LK 5:21:00 AM Comment

So I am back with yet another Popular Posts customization for blogger blogs. This one is quite special as it looks extremely elegant and has cool transition effects when hovered.

We can rarely see blogs which do not use Popular Posts widget. This widget decreases bounce rate and increase the pageviews of your blog. Making them attractive and eye-catching will make more people click on it hence making your blog more awesome and better.

I have already posted Popular Posts customization tutorials many a times. You can check them out below.

• Popular Posts Widget with Hover Effect for Blogger
• Popular Posts v2 Widget customization
• Fully Different Style Popular Posts Widget
• Square Popular Posts widget with Rotating Effect 

You can see a live working demo of this popular posts widget by clicking the button below.

Live Demo

After seeing the demo in order to add this widget to your blog follow the steps below.

Adding the widget in Layout

Firstly go to  Blog Title ? Layout ? Add Widget ? Popular Posts. Add the widget in the desired location and save the template.

Adding the CSS in Edit HTML

 Now go to Blog Title ? Template ? Edit HTML. Press Ctrl + F and search for ]]></b:skin> in search box. After getting the code add the below given code just above ]]></b:skin>

.popular-posts ul li a {
    background: none repeat scroll 0 0 #222222;
    color: #FFFFFF;
    display: block;
    margin: 10px 0;
    padding: 25px 15px 30px;
    position: relative;
    text-decoration: none;
    transition: all 0.3s ease-out 0s;
 width: 85%;
}
.popular-posts ul li a:before {
    background: none repeat scroll 0 0 #2DB3E9;
    color: #FFFFFF;
    font-weight: 700;
    height: 2em;
    line-height: 2em;
    margin-left: 88%;
    padding: 4px;
    position: absolute;
    text-align: center;
    width: 2em;
    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;
    left: -1px;
     -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
}
.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;
} 

After adding the code save the template. Now you and your visitors can see this awesome numbered popular posts widget in your blogger blog.