Tech Junkie Blog - Real World Tutorials, Happy Coding!: Blogger Template : Display Blog Posts With Just 32 Lines of Code

In the previous blog post we created an empty Blogger template with just the bar minimums. In this post we are going to build on that and display our posts in just 32 lines of code. In your template type in the following code.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
  <head>
    <title><data:blog.pageTitle/></title>
    <b:skin><![CDATA[/*]]></b:skin>
  </head>
  <body>
          <b:section class='main' id='main' name='Main' showaddelement='no'>
            <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog' visible='true'>
              <b:includable id='post' var='post'>

    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
      <b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'>
        <a expr:href='data:post.link ? data:post.link : data:post.url'><data:post.title/></a>
      <b:else/>
        <data:post.title/>
      </b:if>
    </b:if>
 <data:post.body/>
    <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
    </b:if>
</b:includable>
            </b:widget>
          </b:section>
      <b:section id='side-bar-left'/>
</body>
</html>

The code above uses a built-in widget call "Blog1" to retrieve our blog posts. We display the title as a link data:post.link and the post body as text data.post.body. We put the widget inside the main section. All the logic must go inside the <b:include> tag, the widget cannot contain any code itself all it can contain is an include.

Here is how the code above would look like in an actual blog at http://bloggerdevsandbox.blogspot.com/

Blogger Template Development Series:

Previous: Blogger: Adding Adsense Ads To Blogger

Sunday, July 17, 2016

Blogger Template : Display Blog Posts With Just 32 Lines of Code

1 comment: