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

46 Replies to “New Blogger Template : Stylify v2”

    1. 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 🙂

    2. 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

  1. 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!

    1. 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;"…….

    1. 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&#39;);}

      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>
      <![endif]–>

  2. 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

Leave a Reply

Your email address will not be published. Required fields are marked *