Monday, July 29, 2013

Basic blogger template : just posts, absolutely minimum

Here's a basic form of blogger template that you can use to build other advanced template. I always wanted to bake my own custom themes and templates for blogger but there's no official documentation - actually there are but not that developer friendly ! Further, inspecting existing template source code it is very hard to derive what follows. I mean, there are definitely rules and syntaxes to follow in blogger template but looking at any downloaded template can be intimidating to beginners.

So, this is very minimal template i'm presenting here. Make template a xml doc, inspect header and meta tags. All CSS style rules inside - under CDATA (it's xml). And minimum requirement for a blogger template is there should be at least one b:section This basic template has one section which includes a blog posts widget. To learn more about how sections / widgets work together please refer to links at footer.

Notes for further work:  

1) JS can be troublesome. If nothing worked encode it or put the whole content inside script into CDATA.
2) Images needs to be hosted. 

3) All CSS needs to be in one page or host it somewhere separately.
4) All JS needs to be in one page or host it somewhere separately.
5) Imagine different kind of "page" types and different kind of layout / templates you'd like to render depending upon different URLs, and imagine all of this to be done in single page XML file. Holy Shit ! There sure gonna be loads of if and else blocks if this has to be achieved in one page.

Enjoy. And if this work helped you get started in developing/designing blogger templates, don't forget to link my gist or this post in your website somewhere :) i'd be glad.




Grab code from gits: https://gist.github.com/bhu1st/6105200
Template Code Below:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>

<b:include data='blog' name='all-head-content'/>
<link expr:href='data:blog.url' rel='canonical'/>

<b:if cond='data:blog.pageType == &quot;index&quot;'>
  <title><data:blog.pageTitle/></title>
<b:else/>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
 <title><data:blog.pageName/> - <data:blog.title/></title>
<b:else/>
 <title>404 - <data:blog.title/></title>
</b:if>
</b:if>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="Semicolon developers, semicolon languages, semicolon technologies, semicolon software, developers network, network professionals, web development nepal, software development nepal, offshore development nepal, outsourcing nepal, web development kathmandu, software development kathmandu, offshore development kathmandu, outsourcing kathmandu, computer courses in kathmandu, PHP course , JavaScript course, android course, " />
<meta name="description" content="Semicolon developers network pvt. ltd. is an Android and web application development company in Kathmandu, Nepal. We can be your next IT development partner." />
 
<!-- You May Not Share any of these codes unless giving credits to Technolies blog -->
    <b:if cond='data:blog.pageType == &quot;archive&quot;'>
     <meta content='noindex,noarchive' name='robots'/>
    </b:if>  

<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template: Semicolon Developers
Template By:      Bhupal Sapkota
URL:              http://semicolondev.com
Date:             29 July 2013
----------------------------------------------- */
html, body{
background:#FFF;
margin:0;
padding:0;
}

]]></b:skin>

</head>

<body>


<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' title='Blog Posts' type='Blog' locked='false'>

<b:includable id='main' var='main'>

  <!-- blogposts -->

  <div>
    <b:loop values='data:posts' var='post'>
      <b:include data='post' name='post'/>
    </b:loop>      
  </div>

   <!-- navigation -->
  <b:include name='nextprev'/>

</b:includable>


<b:includable id='post' var='post'>
  <div class='post'>
    <a expr:name='data:post.id'/>

    <b:if cond='data:post.title'>
      <h2>
     <b:if cond='data:post.link'>
        <a expr:href='data:post.link'><data:post.title/></a>
     <b:else/>
        <b:if cond='data:post.url'>
          <a expr:href='data:post.url'><data:post.title/></a>
        <b:else/>
          <data:post.title/>
        </b:if>
     </b:if>
      </h2>
    </b:if>

<div class='post-meta'>
Posted by  <data:post.author/>, <data:post.dateHeader/>
</div>

<div>
<data:post.body/>
</div>

  </div>
</b:includable>

<b:includable id='nextprev'>
  <div>
    <b:if cond='data:newerPageUrl'>
      <a expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>&#171; <data:newerPageTitle/></a>    
    </b:if>

    <b:if cond='data:olderPageUrl'>    
      <a expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/>  &#187;</a>    
    </b:if>

    <b:if cond='data:blog.homepageUrl != data:blog.url'>
      <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
      <b:else/>
      <b:if cond='data:newerPageUrl'>
        <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
      </b:if>
    </b:if>

  </div>

</b:includable>


</b:widget>                  
</b:section>


</body>
</html>



References:

Official Reference from Blogger:
Layouts: https://support.google.com/blogger/topic/12449?hl=en&ref_topic=1697868
Advance Use: https://support.google.com/blogger/topic/1711140?hl=en&ref_topic=1697868
Next Level tips: https://support.google.com/blogger/answer/3059863?hl=en&ref_topic=1697868

Follow these in order:
http://www.thesimplexdesign.com/2011/07/how-to-make-blogger-template-blogger.html
http://www.thesimplexdesign.com/2011/07/how-to-make-blogger-template-body-and.html
http://www.thesimplexdesign.com/2011/07/how-to-make-blogger-template-header.html
http://www.thesimplexdesign.com/2011/07/how-to-make-blogger-template-inside.html
http://www.thesimplexdesign.com/2011/08/how-to-make-blogger-template-how.html
http://www.thesimplexdesign.com/2011/07/how-to-make-blogger-template-body-and.html
http://www.thesimplexdesign.com/2011/07/how-to-make-blogger-template-data-tags.html
http://www.thesimplexdesign.com/2011/07/how-to-make-blogger-template-data-tags_27.html


 

© 2013 Echo "Semicolon Developers"; Kathmandu. All rights resevered @ Semicolon Developers Network Pvt. Ltd.. Designed by Templateism

Back To Top