New Blogger Template : Stylify v2

stylify template screenshot small

A new Blogger template named Stylify v2 . It is quite similar to the current design of the blog. The aim was to minimize the use of JavaScript and instead use CSS to meet the needs. It has a simple design and is ultra optimized for Fast Loading (Given that you don't add 1000 extra widget ! ). The default Blogger Style-sheet has been removed to fasten it up even more. The SEO part is also taken care for with automatic Meta Description facility. Its a uncomplicated template with emphasis on Speed and Style.


See Demo


Download

Full Screenshot


stylify v2 template screenshot large









Features

  • Cross browser compatibility 
  • Responsive Design
  • Page Navigation
  • Lazy Loading Share Buttons
  • Its own Related Post widget
  • Stylish commenting system 
  • Attractive Post Title
  • Four column footer
  • Eye-catching Sidebar Design
  • Search Engine Optimized
  • 97% Google Page Speed Score
  • In-built Author Bio Box
  • CSS3 powered Buttons 
  • Breadcrumbs 
  • A fancy Label Widget 
  • Built-in simple Menu
  • Automatic Meta Description for each post 
  • Use of fonts like Salsa and Electrolize




Configurable Features:

This template has a lot of customization possibility. Now I will be explaining how to configure some basic features of this template according to your requirements


1. Menu


configure page list



The menu used is the default Blogger menu. When you will Install the template on your blog , you will see a stray text "Pages" written near the Menu. To remove it , Go to Layouts and Click the Edit button of the Pages Widget . Now in the title field remove everything and Save the Widget.


Extra Note: When you will install the template you will also see a Date above the post title and also the default Blogger sharing buttons . To remove them go to Layouts and edit the Blog Post widget. Untick the Date and Sharing button option and save.


2. Pagination


To change the number of posts to be shown on using pagination find the term postperpage ( Using CTRL+F ) ,There will be a script something like this 

<script type='text/javascript'>
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=3;
var numshowpage=6;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>

You can change the number values as you like in the above code.
var postperpage=9; → Changes the no of posts that will show up on clicking any page number.
var numshowpage=3;→ Changes the number of linking to show in the widget





configure blog post blogger layout





Note: Make sure that you also set the value of Number of Posts on Main Page (Go to Design > Page Elements , Click on Edit option of Blog Post and then Number of posts on main page: ) to same as that of the postperpage value.



3. Border of Image


with without border


There is a additional feature present to add borders around your image  , To add it just add a class="thumb" in the img tag , as shown below 


<img class="thumb" src="image.png" />


4. Using the CSS3 Button



css3 button


To make a link into a button , just add the class="buttons button" to it , as shown 




<a href="URL" class="buttons button" >A Link<a/>




5. The Author Bio Box



author box code



Under each post a author box is present with your name and some demo text . To change that text go to Edit HTML and tick the Expand Widget Preview box . After that search for Author Bio Box and change the text as per your wish. You can also replace the placeholder image with your own



6. Label Style





configure label blogger layouts



To enable the Label style as see in the demo , go to the Layout and Click the Edit button of the Categories widget. In it much sure to tick Display as Cloud 




See Demo


Download


Whats your opinion about the template ? In case you face any problem or like to suggest any improvement feel free to do so via comments

Written by Prayag Verma

Find me on Twitter

Email Newsletter

Like what you read here in this post ?
Get new posts delivered straight to your inbox

Post a Comment
Vinod said...

Hey Prayag buddy.. thanks for that.. looks good.. :)
But, your current theme you are using has some problem??
The comment box is out of the main content area..

Vinod said...

One more observation is: your current theme moves to the left when using Ctrl and minus. It is not central aligned.. Things move away from each other??
This is the case with your new theme..
Just some suggestions buddy.. from a Blogger addict :)

Awesome like always and checked many features such as comments and i am impressed :) will surely use this amazing template on my blogger blog. :)

Thanks for reporting the issue about this template , I will fix it ASAP

The moving away from each other because of the transition I have put. Rest assured I have taken the suggestion into consideration and will soon do something about them

Nice stylish template, awesome master

Anonymous said...

wao! its awesome. many thanks for this update.
but i wanna show my blogger name as yours which is like animated. so how can i put this effetc in my blog name?
http://premium-area.blogspot.com

Awesome Work Prayag. Keep going.

Thanks for the compliments Shubham , feel free to ask if you face any problems while applying it on your blog

Thanks Arham Sukardi

Maricel said...

This is just amazing. I had a problem with that stray page widget on my Blogger blog. And you, sir, just sent answers my way. Thank you so much! Bookmarked!

Loads of problems! And I am html-illiterate! I need help now and big time!
Please get in touch with me on fb!

http://priyankazneverland.blogspot.in/

Awesome!

Thanks for sharing.

Trever

The page speed is optimized. 97 + 85 looks is 75% better than way 2 blogging green template. Really I am going to use it.

Any suggestion for auto readmore?

Glad to help you out , fixed a lot of them . Feel free to ask if you face anymore

I am really glad that you are choosing to use this template

To add the Auto- read More functionality
follow this tutorial http://www.bloggersentral.com/2009/11/blogger-auto-read-more-with-thumbnail.html

This will add a normal read more button , to use the previous read more button , in the 35th line of code in step 6 of the above tutorial , add the following just after the <span tag . like..

....<span class="button blue morph" style="float:left; padding:0px 10px 5px 0px;".......

Nice information bro..

Your blog really looks beautiful and i like the content you share with us. I have a question: Can you tell me best free themes for my wordpress site as i am not on blogger?

Thanks

Unknown said...

Thanks
very nice Template looks gr8 on my blog..

Hey Nice template Buddy...Cool one..

nice template, ijin download ya gan :D

Marieta said...

Good aftenoon, nice template. Can you say how can i change the background? and another question, is the template optimiced for IE? thanks

To change the Background , in the Edit HTML search for

body{overflow-x:hidden !important;font:normal normal 14px Verdana, Geneva, sans-serif;color:#333333;background:url('http://3.bp.blogspot.com/-AMT5SL9Ytnc/UAEM2zEwOvI/AAAAAAAAGQY/-V-QGJV4K_k/s1600/light_alu.png');}

Here change the Image URL with the one of your choice

There are two major issue with the IE version
Firstly the bar containing the author , label and the share buttons. To fix it search for


<div style='font-size:12px !important;background:url(&#39;http://2.bp.blogspot.com/-QWfcjpDDT6U/T9JHe-j4UEI/AAAAAAAAFTo/YHOE2Rojgmo/s1600/pattern.png&#39;);padding: 5px 0px 5px 5px; margin: -8px;overflow: hidden !important;'>

Here change the value of margin from -8px to 1px

Second issue is the lot of space present in the content and header , to fix add the following style just before the </head> tag


<!--[if IE]>
<style type="text/css" >
.content {top : 0px !important;}
</style&g…

Anonymous said...

Hi Prayag,
Can You Say How To Add Sidebar Label Widget's Background?

Just Add the following CSS to your blog

.Label {background: #F9f9f9 !important;}

Unknown said...

Hey Prayag,
I want to know that how to remove the delete option which comes in this template in comments....
pls help, I only want reply button not the delete button

Unknown said...

and I also want to add a search bar like you which is present on top
how to do it
I have tried but its nt looking gud
help!!

nice template
congrat's :)

Thanks Beben Koben

To remove the Delete option , just add the following CSS

.item-control {display:none !important;}

Also one thing to note is that , this option is only visible to the Blog Admin and not the readers

Visit this post for the Search box design

Another Awesome Creation ;) !! Hope you don't mind if i customize that !! :P

Anonymous said...

ok thanks for help......
I M akshat's world....

Unknown said...

it is not working

akshat said...

Hi Prayag,
I just want to know that u have seen the direct links of pages in your blog which doesnt use "/p/" tag ex. http://www.stylifyyourblog.com/faq (in your blog on mouse over on links)
pls tell me how to remove /p/ tag...

Anonymous said...

How to add background behind page menu and social buttons like u have done

Anonymous said...

css is not working in the template
help

Geo Tv said...

Totally agree with your suggestion... Very nice post and good information here... Thanks for posting that....

Anonymous said...

Hello sir muze Stylify v2 template ka Automatic Meta Description ka code chahiye plz send me soft4free.in@gmail.com

Anonymous said...

hey Prayag, Using your template and suddenly this happens to my blog kindly help me out again.

Anonymous said...

blog link http://psuofindia.blogspot.in/

Unknown said...

Nice template, I would love to find it, but I'm having a little problem needs help.

1 Please guide Auto readmore (image left) for this sample. http://4.bp.blogspot.com/-kdqOU04ZgKM/UIjqFNOZXsI/AAAAAAAAC9w/rrxKh05N0Ts/s1600/demo.PNG.

2 layout error detection between chrome and IE browser as shown in Figure 2 below. http://2.bp.blogspot.com/-of_sl0wlssA/UIjsBdCgGmI/AAAAAAAAC94/65uXHSVa1wY/s1600/chrome.PNG,

http://3.bp.blogspot.com/-K_jwFBmRgQE/UIjsC0Jmm7I/AAAAAAAAC-A/8uqEFWxe8yA/s320/IE.PNG

3 Please guide layout editing software such as stylifyyourblog used, two detached Cool, About Me, out of the article content. Figure will clear
http://2.bp.blogspot.com/-KoZ2vNhMHQY/UIjsR6rYrgI/AAAAAAAAC-I/th7TxiXXVHs/s320/stylifyyourblog.PNG.

 thank you very much

Anonymous said...

Hey,
The Authorbox Isn't Showin Up . . Why? :l

Unknown said...

very nice post ,good post for me Read

daivd said...

nice post

IT Very Nice

جميل اوي القالب دا شكرا

Anonymous said...

how do i make a semi-transparent post background?

Anonymous said...

Im really hope that there is a way,