New Blogger Template : Standardized


Warning: preg_replace(): Compilation failed: nothing to repeat at offset 106 in /home/btemps5/public_html/stylifyyourblog.com/wp-content/plugins/jetpack/class.photon.php on line 332

Standardized Blogger Template ImageIts been nearly 3 months since the Stylify template. Now I am presenting my second template named Standardized. It has its roots in responsive design and has some awesome features like threaded Reply comment & eye-catching Header design. A mix of design and usability.

See Demo

Download


Initially I started making this template with the goal to make it W3C valid. Thats where the name Standardized came from, the one that follows standards. Near the end of process I hit a really nasty cross-browser issue (a.k.a. IE sucks) , and by just 1 error this template remained from obtaining that “VALID” markup title. This is just version 1 and better onces are to come. The highlight of this template is the Nested Reply comment feature inside the Blogger comment system itself! A really amazing hack…


Features
-Responsive design (No horizontal scrollbar till 580px)
-Cross browser compatibility 
-Page Navigation
-Widgets ready sidebar
-Its own Related Post widget
-Stylish commenting system with comments having gradient background style
-Attractive Post Title
-jQuery and CSS3 powered Header design
-Four column footer
-Threaded Reply feature for Blogger Comment system
-Eye-catching Sidebar Design
-Search Engine Optimized
-Near W3C Valid
-90%+ Google Page Speed score

How to configure some of the Features:

1.Menu
The code for the menu widget has been separately included in the Download Package. Rather than integrating it into the Template and making it difficult to edit ,I have included it separately. All the styles are included beforehand just the Links have to be copied in. The menu should be in the section of the Header (being just below the Header).

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

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.Enabling Reply option for the comments
The the reply option in the comment will have to enabled . Just search for the term blogid= ( using CTRL+F ) with “Expand Widget Preview” option ticked. Below it you will see “blogID=XXXXXXXXXXXX” replace this XXXXXXXXXXX number with your Blog’s ID. [To find your Blog’s ID just Open Design Tab and in the Address bar of your browser there will be a very long number , just paste that here]

4.Social Media Buttons and Search Box
The Download package also contains code for these two widgets. Either you can put them in separate widgets or put them together. In case you put them together then make sure the search box is above the icons and also include it in the section just below the Header (In Page Elements/Layouts). The widget containing the Social Media Icon should always be in this section.

This template came in the wake of many users complaining about different problems in the previous template.

Liked My Work ?

88 Replies to “New Blogger Template : Standardized”

  1. @DARBefore anything firstly to remove the undefined undefined thing in the post, go to Settings > Formatting > Timestamp format , change it to this type Tuesday,January 10,2012

    Do this and then try the page navigation widget, let me know if it works or not

  2. @DAR

    Okay try this, Go to Edit HTML of your blog, in the beginning you will see the following code:

    <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
    <script type='text/javascript'>(function() { var a=window;function c(b){this.t={};this.tick=function(b,i,d){d=void 0!=d?d:(new Date).getTime();this.t[b]=[d,i]};this.tick("start",null,b)}var f=new c;a.jstiming={Timer:c,load:f};try{var g=null;a.chrome&&a.chrome.csi&&(g=Math.floor(a.chrome.csi().pageT));null==g&&a.gtbExternal&&(g=a.gtbExternal.pageT());null==g&&a.external&&(g=a.external.pageT);g&&(a.jstiming.pt=g)}catch(h){};a.tickAboveFold=function(b){var e=0;if(b.offsetParent){do e =b.offsetTop;while(b=b.offsetParent)}b=e;750>=b&&a.jstiming.load.tick("aft")};var j=!1;function k(){j||(j=!0,a.jstiming.load.tick("firstScrollTime"))}a.addEventListener?a.addEventListener("scroll",k,!1):a.attachEvent("onscroll",k);
    })();</script>
    <meta content='blogger' name='generator'/>
    <link href='http://tsigaroprosfores.blogspot.com/favicon.ico&#39; rel='icon' type='image/x-icon'/>
    <link href='http://tsigaroprosfores.blogspot.com/&#39; rel='canonical'/>
    <link href='http://tsigaroprosfores.blogspot.com/feeds/posts/default&#39; rel='alternate' title='Atom' type='application/atom xml'/>
    <link href='http://tsigaroprosfores.blogspot.com/feeds/posts/default?alt=rss&#39; rel='alternate' title='RSS' type='application/rss xml'/>
    <link href='http://www.blogger.com/openid-server.g&#39; rel='openid.server'/>
    <!–[if IE]><script type="text/javascript" src="http://www.blogger.com/static/v1/jsbin/754431588-ieretrofit.js"></script&gt; <![endif]–>
    <!–[if IE]> <script> (function() { var html5 = ("abbr,article,aside,audio,canvas,datalist,details," "figure,footer,header,hgroup,mark,menu,meter,nav,output," "progress,section,time,video").split(','); for (var i = 0; i < html5.length; i ) { document.createElement(html5[i]); } try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {} })(); </script> <![endif]–>

    Now remove this code and in place of it insert this code

    <b:include data='blog' name='all-head-content'/>

    Try it and tell whether it works or not

  3. @DARI have posted the problem in the Blogger Forum ,you can check the thread Here

    While checking your blog I found the way to access the 2nd page

    When the 2nd page button is click it redirects to this URL

    http://tsigaroprosfores.blogspot.com/search?updated-max=2012-01-09T22%3A28%3A00%2B02%3A00&max-results=4#PageNo=2

    But in reality the 2nd page exists at this URL

    http://tsigaroprosfores.blogspot.com/search?updated-max=2012-01-10T22%3A28%3A00%2B02%3A00&max-results=4#PageNo=2

    This is really unique problem ,I suppose it is something to do lot of post being posted together. This problem is most probably at Blogger side and will be fixed automatically

  4. @sagarJust add the following code below the <head> tag

    <meta content='YOUR BLOG DESCRIPTION' name='description'/>
    <meta content='AUTHOR NAME' name='author'/>

    Similarly you can add the keyword tag but it is now obsolete and not used by any major search engine

    1. Yeah sry, was reading not enough on your awesome site.

      Thx for your great work, I'll test your template and rework it for my needs. I show you a link when its ready. 😉

    1. thanks a lot, it worked!
      now please help me to change the blogger title font size and font itself? actually i want to reduce the font size and change its color.
      thanks in advance

    2. To change the Color and Size ,search for .letter-container h1 span

      and in this you will see the following

      …..
      font-size: 35px;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
      filter: alpha(opacity=90);
      color: green;
      ……

      change the font-size and color attribute according to your needs

      For changing the Font search for .letter-container h1

      you will see the following code:

      ….
      font-family: 'Trade Winds', Arial, sans-serif;
      font-weight: 700;
      ……

      Change Trade Winds with some other font, the blog has the following fonts

      Architects Daughter
      Coming Soon
      Nova Mono

    1. http://premium4coder.blogspot.com/

      When i publish some post 3 post display and other post can not be shown
      ————————————————————————-
      i follow instruction
      var postperpage=12;
      var numshowpage=7;
      ————————————————————————
      and chahe this at post on main page 12
      please help me

  5. Hi, before I upload you temp my blogger did not have navbar, after uploading now it has and could not be remove, there is no the code of that navbar to remove i have two trick oh how removing it but it could not work, please help

  6. How to apply Blogger Threaded Comments in here tothis template, because I still have a problem with that. The threaded comment isn't working properly on my blog. Any suggestion to fix this problem?

    sorry for my bad English

  7. i have installed this template in my blog, its awesome.
    But i have a question, may be it is not relevant but i am sure you will not get angry at me 🙂
    I am installing a widget, which says paste a code before div id='main-wrapper' code, but i couldn't find that code in this template, is there any alternate code available? i have also asked this to that gadget owner, but he has not replied yet, that's why i decided to post here as well.
    Thanks
    http://premium-area.blogspot.com

  8. it seems that u have implemented css button code in the template because whenever i try to put html button code it shows a button u have implemented, but i want to use custom button, so please guide me how can i remove that button code so that i can use my own. thanks

    1. Another button code can also be inserted in place of the old one

      The class button is attached to the CSS of the button

      If you want to add another button then assign it another class ,like button1 and then in the HTML give it class="button1"

    2. Thanks for reply,
      i can't rename class name i want to add because its a css file and iam not author of this file, so it would be easy for me if i can rename your button class.

Leave a Reply

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