Showing posts with label blogger. Show all posts
Showing posts with label blogger. Show all posts

Monday, July 6, 2015

Understand Blogspot Basics

Blogger template has mainly three types of variables
one which controls the flow of the code
one which pulls data from the databases behind
third are expressions.

b:namespace
=========================
=========================
The variables in this namespace mainly control the layout and control flow of the template.

The template is mainly divided in sections
=>sections will include widgets
==>Widgets will have includables
====>includables are useless unless you use it by using the include tag.

Section
====================
<b:section [attribs] >
</b:section>

1. id (Required) A name identifying the section must be unique.
2. class (Optional) Common class names are 'navbar,' 'header,' 'main,' 'sidebar,' and 'footer.'
3. maxwidgets (Optional) The maximum number of widgets.
4. growth (Optional) Can be 'horizontal' or 'vertical,'.

Widgets
============================
<!--Simple form.-->
<b:widget [attribs] />

<!-- Expanded form. -->
<b:widget [attribs] >
</b:widget>
A widget may have the following attributes:
1. id (Required) May contain letters and numbers only, and each widget ID in your template should be unique.
2. type: (Required) Indicates what kind of a widget it is.
3. locked: (Optional) Can be 'yes' or 'no,' with 'no' as the default.
4. title: (Optional) A display title for the widget.
5. pageType: (Optional) Can be 'all,' 'archive,' 'main,' or 'item,' with 'all' as the default.

The includables Tag
===========================
<b:includable id='[some-unique-id]' [attribs] >
</b:includable>

The includable tag has the following attributes:
1. id: (Required) A unique identifier made up of letters and numbers.
2. var: (Optional) An identifier made up of letters and numbers, for referencing data within this section.

The include Tag
=============================
<b:include name='[the-includable-name]' data='[the-expression-for-var]'/>

The attributes name and data:
name: (Required) This name will be pointing to the includable which is to be included.
data: (Optional) Like a parameter is passed to function this data is passed to includable.

The if / else Tag
===============================
<!-- both if and else-->
<b:if cond='[some cond check]'>
 <!--  [Then do this]  -->
<b:else/>
 <!--  [else do this]  -->
</b:if>

Examples:
<!-- to check a boolean variable. -->
<b:if cond='data:useImage'>
 <!--  [execute if the header for your blog is image instead of text]  -->
</b:if>

<!-- to compare equivalence of two values-->
<b:if cond='data:blog.pageType == "item"'>
 <!--  [True if the current page is an item page (post page).]  -->
</b:if>

<!-- to compare non-equivalence -->
<b:if cond='data:displayname != "Fred"'>
 <!--  [True if this is not Fred's display name.]  -->
</b:if>

<!-- comparing greater than, less than-->
<b:if cond='data:post.numComments > 1'>
 <!--  [True if the current post has more than one comment.]  -->
</b:if>

The Loop Tag
=================================
<b:loop var='some-identifying-var' values='set-of-something'>
 <!--  [For every var in the values i.e., for every data in the set of data do something here]  -->
</b:loop>

data:namespace
=========================
=========================
<!--[The blog's title.]-->
<data:blog.title/>

<!--[
The type of the current page. One of 'item', 'archive', or 'index'.
This var is quite useful for selectively showing content on
different type of pages. Put an if and check if its index page or
item page and then display selective content
]-->
<data:blog.pageType/>

<!--  [The URL of the current page.]  -->
<data:blog.url/>

<!--  [The homepage of the blog.]  -->
<data:blog.homepageUrl/>

<!--[
The title of the current page. This is often the blog title,
but may contain additional information on archive or post pages.
]-->
<data:blog.pageTitle/>

<!--  [The encoding to use for the blog, e.g. UTF-8.]  -->
<data:blog.encoding/>

<!--[
Either "ltr" or "rtl" for left-to-right
and right-to-left languages, respectively.
]-->
<data:blog.languageDirection/>

<!--  [The autodiscovery feed links for the page header.]  -->
<data:blog.feedLinks/>


Widget Types
===========
Page Header
Blog Archives
Profile
Text / HTML / JavaScript
Feed
Picture
Labels
List
Link List
Logo
Blog Posts

Page Header
===============
<!--[The blog's title. ]-->
<data:title/>

<!-- [ The blog's description. ]-->
<data:description/>

Blog Archives in Blogger template
==================================
title: The title of the widget.
style: One of 'MENU', 'FLAT', or 'HIERARCHY'.
data: A list of each archive unit, each of which contains:
->-> name: The name of this archive interval or period.
->-> url: The link to the page containing posts from this interval.
->-> post-count: How many posts there are in this interval.

<!--[ Simple usage of title ]-->
<b:if cond='data:title'>
 <h2><data:title/></h2>
</b:if>

<!--[ For a includable flat type ]-->
<b:includable id='flat' var='data'>
 <ul>
  <b:loop values='data:data' var='i'>
   <li class='archivedate'>
    <a expr:href='data:i.url'>
     <data:i.name/>
    </a>
    (<data:i.post-count/>)
   </li>
  </b:loop>
 </ul>
</b:includable>


Profile Widget in Blogger template
=====================================
This is the profile of the author. There can be one author of a blog or maybe the blog has a team of authors.

For a blog with a single author, the profile widget contains the following information.
-> title The title of the widget.
-> userUrl The author's profile URL.
-> location The location from the author's profile.
-> aboutme The "About Me" information from the profile.
-> displayname The author's display name.
-> photo The user's profile photo, made up of the following:
-> -> url: The photo URL.
-> -> width: The photo's width, in pixels.
-> -> height: The photo's height, in pixels.
-> -> alt: The "alt" text for the photo.

Team blog widgets contain less information compare to single blog widgets. The tags are:
-> title: The title of the widget.
-> authors: The list of all authors, each of which contains the following:
-> -> displayname: The author's display name.
-> -> userURL: The author's profile URL.

If you want to design your template to handle both single- and multiple-author blogs, you can use the data:team variable to distinguish between the two cases as shown below.

<b:if cond='data:team=="true"'>
 <!--[display multiple authors] -->
</b:if>

Text / HTML / JavaScript Widget in Blogger template
=======================================
HTML / Javascript and Text widgets are very simple widgets and contain only two data elements.
-> title: The widget's title.
-> content: The content of the widget.

Source:
https://support.google.com/blogger/answer/47270



Thursday, December 11, 2014

Blogging Code

Hyperlink for posts feed
e.g.
http://resultsnicin.blogspot.in/feeds/posts/default
<a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>Posts</a>

Hyperlink for comment feed
e.g.
http://resultsnicin.blogspot.in/feeds/comments/default
<a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;'>Comments</a>

Home Page Hyperlinking
<a expr:href='data:blog.homepageUrl'>Home</a>

Post Hyperlinking
<a expr:name='data:post.id'/>

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

Blogger First Look

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html 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'/>

<title>
      <b:if cond='data:blog.pageType == &quot;index&quot;'>
        <data:blog.pageTitle/>
        <b:else/>
        <b:if cond='data:blog.pageType != &quot;error_page&quot;'>
          <data:blog.pageName/> | <data:blog.title/>
          <b:else/>
          Page Not Found | <data:blog.title/>
        </b:if>
      </b:if>
    </title>

    <b:skin><![CDATA[

body {
background:white;
color:black;
}
.header{width:100%; border:1px solid #ccc;}
#header {border:1px dashed #000; }
#header h1 { font-size:18px; color:#ff0000; }
#header h1 a { color:#ff8989; }
#header .description { color:#000; }
.tabs { width:10%; color:#888; }
#corsscol {  }
#PageList1 {  }
#PageList1 ul { font-size:16px; }
#PageList1 ul li { font-size:12px; }
#PageList1 ul li a { font-color:#ff8989; }
#Navbar1 {dispaly:none!important;}
]]></b:skin>

</head>
<body>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
        <b:widget id='Header1' locked='true' title='' type='Header'></b:widget>
</b:section>

 <b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>
        <b:widget id='PageList1' locked='false' title='Pages' type='PageList'>
       </b:widget>
</b:section>

  <b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/>
</b:section>

<b:section class='main' id='main' preferred='yes' showaddelement='no'>
 <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
 </b:widget>
</b:section>

</body>
</html>

Source:-
http://www.bloggeryard.com/2013/11/create-blogger-template-from-scratch.html