This is the last post in series 'how to make a blogspot template' .In this post ,I just want to tell you what I did when making Simplex's templates . I do not focus on HTML/CSS /Javascript because you can find documents on these easily in internet . I also do not go further on Blogger template structures/sections /widgets/data tags/API ,because they are mentioned in previous posts . Only work orders ,tools ,and some tips .
Unlike other platforms such as wordpress stand alone or joomla which a template comes with many files ,blogger template is in one file xml only .
As we know ,blogger template contain sections . Here is the order of these sections :
All we need to do when making a template are :
For example ,in Simplex Blognews template ,I add more sections for page list ( in the top of page ) ,sections for advertising banner ...remove default sections and widgets in sidebar .
I also use conditional statement <b:if> to hide sections/widget in some specific cases . For example ,we all know blogpost widget show the post list /single post (see the post on blogpost widget here) ,but in the homepage ,I don't want it to show up ,so I use a conditional statement to cover all blogpost widget
In the code above ,if the current page is homepage ,it will show homepage content , if the current page is a category page or single post ,it will call blogpost widget for processing content .
Or if we want to hide all the blog content when go to a specific page ,we can use a conditional statement like that :
Firebugs is the best tool for this work ,you can find the post on how to use this tool here . It will reduce your time on working with CSS and HTML .You can use this tool to inspect elements on websites which has design you want and find out which HTML/CSS their designer used . CSS tags information and cheatsheet can be found in this post .
To get some inspirations ,you can go to template galleries ,collections ,or go to famous blogs on design . Sometimes ,combining the elements which you love in various templates can give you an unique design .
Because blogger doesn't allow server side programing , Javascript/Jquery will give us a solution for mashing up a homepage . By using Javascript to get feeds from categories in blog,split the feed into post titles,post summaries ...and then display them ,we have a good homepage ,as you see in Simplex' templates .
Javascript/Jquery is also used to make special effects,for example ,sliders,hover buttons ,menu ...
You can find out more post on using Jquery/Javascript in SimplexDesign blog .
That's all steps I applied when making a template and it work for me ^^ I can't tell you how to make a specific template ,because it's very long and take times . I hope with series 'how to make a blogspot template ' you can :
-Understand the basic of a blogspot template ,structure,what it contain
-Functions of sections /widgets,how they work .Meaning of data tags /Api and statements.
-General steps to make a template,what we have to do ,what we have to search in google for making an elements ....
By reading all posts from start to the end ,I hope every time you see the code of Simplex templates ,you can understand what I did,and then make your own customization ,you can also apply them in making your own template .
It take time to search,read and then apply to make a template . It's not easy . But if you want ,you can do it .Thanks for supporting me all the time .
Unlike other platforms such as wordpress stand alone or joomla which a template comes with many files ,blogger template is in one file xml only .
As we know ,blogger template contain sections . Here is the order of these sections :
- First ,header
- Second ,blogpost
- Third ,sidebar
- Last ,footer
All we need to do when making a template are :
- Place sections and widgets in right order . Add/remove sections /widgets
- Add HTML arround these sections ,and use CSS to decorating them .
- Add javascript /jquery for special effects ,get the feeds and mashup homepage .
1,Place sections and widgets in right order .
Blogspot is made up with sections ,widgets... so you have to place them in right order ,add more sections /widget for the function you want and remove unnecessary sections /widgets .For example ,in Simplex Blognews template ,I add more sections for page list ( in the top of page ) ,sections for advertising banner ...remove default sections and widgets in sidebar .
I also use conditional statement <b:if> to hide sections/widget in some specific cases . For example ,we all know blogpost widget show the post list /single post (see the post on blogpost widget here) ,but in the homepage ,I don't want it to show up ,so I use a conditional statement to cover all blogpost widget
<b:if cond='data:blog.url == data:blog.homepageUrl'>
homepage content
<b:else/>
blogpost widget .....
</b:if>
homepage content
<b:else/>
blogpost widget .....
</b:if>
In the code above ,if the current page is homepage ,it will show homepage content , if the current page is a category page or single post ,it will call blogpost widget for processing content .
Or if we want to hide all the blog content when go to a specific page ,we can use a conditional statement like that :
<b:if cond='data:blog.url == "page url"'>
.....
<b:else/>
other content here
</b:if>
By add/remove widgets and place them in right order,we have the frame of a template .2,Add HTML and CSS around sections/widgets
We have a template's frame with sections and widgets,now we need to add more HTML tags around and decorate these HTML tags with CSS to make it display as we want : some images ,some text in bold , fonts ....you can do all of them in this step .Firebugs is the best tool for this work ,you can find the post on how to use this tool here . It will reduce your time on working with CSS and HTML .You can use this tool to inspect elements on websites which has design you want and find out which HTML/CSS their designer used . CSS tags information and cheatsheet can be found in this post .
To get some inspirations ,you can go to template galleries ,collections ,or go to famous blogs on design . Sometimes ,combining the elements which you love in various templates can give you an unique design .
3,Add Javascripts/jquery
Because blogger doesn't allow server side programing , Javascript/Jquery will give us a solution for mashing up a homepage . By using Javascript to get feeds from categories in blog,split the feed into post titles,post summaries ...and then display them ,we have a good homepage ,as you see in Simplex' templates .
Javascript/Jquery is also used to make special effects,for example ,sliders,hover buttons ,menu ...
You can find out more post on using Jquery/Javascript in SimplexDesign blog .
That's all steps I applied when making a template and it work for me ^^ I can't tell you how to make a specific template ,because it's very long and take times . I hope with series 'how to make a blogspot template ' you can :
-Understand the basic of a blogspot template ,structure,what it contain
-Functions of sections /widgets,how they work .Meaning of data tags /Api and statements.
-General steps to make a template,what we have to do ,what we have to search in google for making an elements ....
By reading all posts from start to the end ,I hope every time you see the code of Simplex templates ,you can understand what I did,and then make your own customization ,you can also apply them in making your own template .
It take time to search,read and then apply to make a template . It's not easy . But if you want ,you can do it .Thanks for supporting me all the time .
In previous posts ,you known the meaning of Blogger data tags ,now in this post ,we will see how blogspot widget ,the most important widget in blogger work .
Blogpost widget is the widget that show the process and show the blog post .
It contain many 'includable' inside ,this structure you can get from the post on widget.
Now let't see how it work
In a template , Blogpost widget start with this line
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
The id can be vary in different template ,but the type="Blog" is required
In this widget ,there are some 'includable' :
1,When Blogpost widget start working
2,It start a loop statement to looping through all post
3,If the post counting number i smaller than the number of post ,it will call the post includable for showing post data (post title ,post body ,author ,labels...)
4a,4b,4c In the post includable ,if the current page is a single post ,it also call other includables such as post edit icon ,comment ,comment form ... ,but if current page is homepage or an archive page ,these includable will not be called .
5,Go to the next post and back to the check point at step 3
6,In case of finish looping through all posts ,back to the main includable
7,Call next prev includable (or feedlinks,backlinks...if necessary) ,add the link to next and previous post to the end of page .
8,Finish
In these includable ,beside data tags ,we can add HTML ,javascript to make it display as we want .
Combine this post with previous post on data tags,widget structure ,looping and conditional statement ,you will get a big picture on how a template work when reading the code .
Hope this post helpful to you
Blogpost widget is the widget that show the process and show the blog post .
It contain many 'includable' inside ,this structure you can get from the post on widget.
Now let't see how it work
In a template , Blogpost widget start with this line
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
The id can be vary in different template ,but the type="Blog" is required
In this widget ,there are some 'includable' :
- <b:includable id='main' var='top'> : main includable ,this includable will take the main task for processing data and show the result to user computer
- <b:includable id='nextprev'>: this includable will add the link 'next page' ,'prev pag' at the bottom of homepage ,archive page ,and add the link 'next post','previous post' at the bottom of single post .
- <b:includable id='mobile-nextprev'> this includable do the same task to nextprev includable above ,but this includable will work if you browse the blog in mobile .
- <b:includable id='post' var='post'> this includable will process the data of each post ,it will show post title,post body ,date .... if you are reading a single post ,and show post summary if you are in homepage or archive page
- <b:includable id='mobile-index-post' var='post'> like 'post' includable above ,but it work on mobile
- <b:includable id='postQuickEdit' var='post'> this includable will add an small pencil at the end of post ,that allow blog owner can edit the post easily ,click on this pencil ,blog owner will be redirected to post editing window ,don't need to back to dashboard ,and search for post which he want to edit from post list.
- <b:includable id='shareButtons' var='post'> this includable will show a list of share buttons at the end of post
- <b:includable id='comments' var='post'> show all comments of each post .
- <b:includable id='commentDeleteIcon' var='comment'> add a recycle bin symbol next to the comment ,allow blog owner delete unwanted comment .
- <b:includable id='comment-form' var='post'> show the comment form bellow the post ,allow reader to write their comment .
- <b:includable id='backlinks' var='post'> show the backlinks to a post .
- <b:includable id='backlinkDeleteIcon' var='backlink'> show the recycle bin icon next t'o the backlink
- <b:includable id='feedLinks'> and <b:includable id='feedLinksBody' var='links'> :show the feed links to blog and to each post .
- <b:includable id='status-message'> show the status message ,like this ' show all post under label xyz '
Blogpost work as diagram bellow
1,When Blogpost widget start working
2,It start a loop statement to looping through all post
3,If the post counting number i smaller than the number of post ,it will call the post includable for showing post data (post title ,post body ,author ,labels...)
4a,4b,4c In the post includable ,if the current page is a single post ,it also call other includables such as post edit icon ,comment ,comment form ... ,but if current page is homepage or an archive page ,these includable will not be called .
5,Go to the next post and back to the check point at step 3
6,In case of finish looping through all posts ,back to the main includable
7,Call next prev includable (or feedlinks,backlinks...if necessary) ,add the link to next and previous post to the end of page .
8,Finish
In these includable ,beside data tags ,we can add HTML ,javascript to make it display as we want .
Combine this post with previous post on data tags,widget structure ,looping and conditional statement ,you will get a big picture on how a template work when reading the code .
Hope this post helpful to you
