creating your own blogger template from scratch, sort of
Post on 03-Jun-2018
230 Views
Preview:
TRANSCRIPT
8/12/2019 Creating Your Own Blogger Template From Scratch, Sort Of
http://slidepdf.com/reader/full/creating-your-own-blogger-template-from-scratch-sort-of 1/11
Post 1/8Home About Contact
Posted by Tk | 9/04/2012 | 13 comments
Related Resultswww.InternetCorkBoard.comLooking for Creating Own blogger emplate?
Top answers for Creating Own blogger template1.
Chitika | Opt out?
UPDATE [2013-03-14]: It looks like Blogger has updated a lot of things on its Template
Editor since the time of this writing so, I've added some updates on the notes that needed
updating (??). I've marked them with "UPDATE" or a strikethrough and I hope this won't
confuse you (or myself).
I've always wanted to create my own Blogger template and tried so many
times before but couldn't really get it right. I think I finally understood a
somehow large chunk of it. I think.
Anyway, here in this post, I will note about the things I have learned/will learnin creating your own template. I won't be getting into much detailed stuff on
HTML and CSS how to's. I'm assuming that you already have basic knowledge
on these subjects and that you know your way around Blogger. Still, if you have
any questions or there is something I didn't explain well, just feel free to leave
a comment, and hopefully I can answer it.
Also, since I am also just learning about this, please don't expect a fully
functional and Template-Designer-compatible template -- especially since I
don't really use the Template Designer. However, I will try to make it as flexible
as possible.
If you are to follow along the stuff I will note below, here are some suggested
steps on getting started:
Create a new blog for your test template, if you haven't got one yet and
select a Simple template. It's best if everything is in its default state. This
way, you can really see the changes you apply in your template. Also you
wouldn't want to play around with your live blogs and unintentionally
mess it up.
1.
Before making any changes, download a copy of the template (Template
» Backup/Restore) for reference.
2.
For your test blog, in the Layout page, remove all widgets ( Archive,
Profile, Lists...) except for Blog Posts. If you can't get rid of the Header
3.
Creating your own Blogger templatefrom scratch, sort of AddThis (1)
Adsense (1)
Blogger (10)
Blogger labels (2)
Blogger template (6)
Camstudio (1)conditional statements (1)
Google Analytics (1)
Google web fonts (1)
post thumbnails (1)
referring links (2)
shortened url (1)
spam (1)
SpeedFan (1)
startup (1)
test blog (1)
tips and tricks (6)
tutorials (11)
Virtualdub (2)
websense (1)
Windows 7 (3)
Youtube (1)
Topics
► 2013 (9)
▼ 2012 (9)
▼ September (4)
How to use Blogger labels as
navigation in your bl...
How to customize AddThis on
Blogger
Increase volume in Windows
7, quick & dirty
Creating your own Blogger
Archive
1/8: Creating your own Blogger template from scratch, sort of http://postoneeighth.blogspot.in/2012/09/creating-your-own-blogg
1 5/15/2013
8/12/2019 Creating Your Own Blogger Template From Scratch, Sort Of
http://slidepdf.com/reader/full/creating-your-own-blogger-template-from-scratch-sort-of 2/11
and Attribution widgets, edit the template (Template » Edit HTML) and
search for Header1. On that line of code, change l ocked=' t r ue' to
l ocked=' f al se' . Do the same for the Attribution by searching
At t ri but i on1. Once done, go back to the Layout page and try deleting
them. Hopefully that should work. UPDATE: Removing the widget in
Blogger's HTML editor will also remove the widget from your template
layout (unlike before). Yay!
Once you remove all possible widgets, create a New Post. You can use
default text templates found here at Html Ipsum . These templates
already consists of HTML tags you would normally use in a blog post.
Having a test post like this will be a big help in designing your template.
4.
Also, don't forget to set your test blog's privacy settings - Not listed on
Blogger; Not visible to search engines. If you won't be using external
apps for further testing, you can also set the permission (Blog readers) to
Blog author instead of Anyone.
5.
Fig.1 - Stripped the Layout.
Now onto the code and stuff. If you are editing your template's xml file in a
different editor (like Notepad++) other than Blogger's, be sure to set its
encoding to UTF-8 without BOM.
Must read: Intro, Section and Widget attributes . This page gives a brief explanation of the Section and Widget parts of the template. Also the attributes
of the <b: sect i on>and <b: wi dget >tags are listed here which we will use
later on.
Fig.2 - Just a quick summary minus the attributes.
So I made some tests and this is the leanest code I can upload to Blogger.
This, by the way, is based on the Simple template - well at least the first 15 or
so lines.
Understanding the <b: sect i on>and <b: wi dget >tags
template from scratch, s...
► June (1)
► March (1)
► February (3)
1/8: Creating your own Blogger template from scratch, sort of http://postoneeighth.blogspot.in/2012/09/creating-your-own-blogg
1 5/15/2013
8/12/2019 Creating Your Own Blogger Template From Scratch, Sort Of
http://slidepdf.com/reader/full/creating-your-own-blogger-template-from-scratch-sort-of 3/11
<?xml versi on="1. 0" encodi ng="UTF- 8" ?>
<! DOCTYPE ht ml >
<html b: versi on=' 2' cl ass=' v2'
expr : di r =' data: bl og. l anguageDi r ect i on' xml ns=' ht t p: / / www. w3. org
/ 1999/ xht ml ' xml ns: b=' htt p:/ / www. googl e. com/ 2005/ gml / b'
xml ns: dat a=' htt p:/ / www. googl e. com/ 2005/ gml / data'
xml ns: expr=' htt p:/ / www. googl e. com/ 2005/ gml / expr' >
<head>
<meta cont ent =' I E=Emul ateI E7' htt p- equi v=' X- UA-Compat i bl e' / >
<b: i f cond=' data: bl og. i sMobi l e' >
<meta cont ent =' wi dth=devi ce- wi dt h, i ni t i al - scal e=1. 0, mi ni mum-scal e=1. 0, maxi mum- scal e=1. 0' name=' vi ewpor t ' / >
<b: el se/ >
<met a content =' wi dt h=1100' name=' vi ewport ' / >
</ b: i f >
<b: i ncl ude dat a=' bl og' name=' al l - head- cont ent ' / >
<t i t l e><data: bl og. pageTi t l e/></ t i t l e>
<b: ski n>
</ b: ski n>
</ head>
<body>
<b: secti on i d=' header' cl ass=' header ' maxwi dgets =' '
showaddel ement=' yes' >
</ b: sect i on>
</ body>
</ html >
Fig. 3 - Simplest template code.
I tried leaving out the <b: ski n/ >tags but I get a
We were unable to save your template. Your template could not be parsed
as it is not well-formed. Please make sure all XML elements are closed
properly. XML error message: (SyntaxError) : Unexpected token <
UPDATE: The XML error message now says "There should be one and only
one skin in the template, and we found: 0"
Also, the <body>cannot be left empty. It should always at least have a
<b: sect i on>tag. Otherwise you would encounter this error:
... XML error message: Could not find a preferred section to add deleted
widgets to.
UPDATE: The XML error message now says "We did not find any section in
your template. A template must have at least one b:section tag."
So after uploading the template (Fig.3), a quick preview shows me this:
1/8: Creating your own Blogger template from scratch, sort of http://postoneeighth.blogspot.in/2012/09/creating-your-own-blogg
1 5/15/2013
8/12/2019 Creating Your Own Blogger Template From Scratch, Sort Of
http://slidepdf.com/reader/full/creating-your-own-blogger-template-from-scratch-sort-of 4/11
Fig.4 - Template preview.
As seen on the Layout page (Fig.1) and on the preview (Fig.4), the Blog widget
will always be set. So looking at the HTML code in Blogger (Template » Edit
HTML), you will see that a <b: wi dget i d=' Bl og1' l ocked=' f al se'
t i t l e=' Bl og Post s' t ype=' Bl og' / >has been inserted in between the
<b: sect i on>tag we created. Note that the id I used for this section is
header. This I will change in a bit since I don't think we should leave the Blog
widget inside this header section. UPDATE: If you uploaded the template in
Fig.3, what you would actually see is an empty page because the Blog widget
will no longer be automatically created. You have to add this yourself for you to
view any post on the page.
Fig.5 - A Blog widget is automatically created in our template. Make sure to include the
Blog widget so that you can view your blog posts. This is no longer automatically
created.
Ok so now fixing the Blog widget's location. I created a new <b: secti on>tag,
with an id main for the Blog widget and updated the attributes of the header
section. So now we get this:
<body>
<b: secti on i d=' header' cl ass=' header ' maxwi dgets =' 1'
showaddel ement=' yes' >
</ b: sect i on>
<b: sect i on i d=' mai n' cl ass="mai n" maxwi dgets =' '
showaddel ements =' yes' >
<b: wi dget i d=' Bl og1' l ocked=' f al se' t i t l e=' Bl og Post s'
t ype=' Bl og' / >
</ b: sect i on>
1/8: Creating your own Blogger template from scratch, sort of http://postoneeighth.blogspot.in/2012/09/creating-your-own-blogg
1 5/15/2013
8/12/2019 Creating Your Own Blogger Template From Scratch, Sort Of
http://slidepdf.com/reader/full/creating-your-own-blogger-template-from-scratch-sort-of 5/11
</ body>
Fig.6 - Added a new section for the Blog widget.
Fig.7 - New Layout after adding a new section.
Now that we have an Add a Gadget option for the header section in the Layout
page, let's add a Page Header widget. Then on the Edit HTML part of the
Template page, you will see the Page Header widget right below the
<b: secti on i d=' header ' . . . >tag. Note: Just leave the Expand Widgets
Templates unchecked. We won't be needing this just yet.
As a precaution to prevent deleting the Header when someday we are drowsily
updating our blog template, set the header's locked attribute to true.
By now, you can probably see the pattern of Blogger's template code. We
create sections in the template and specify its attributes. Then on the Layout
page, we can add widgets (using Add a Gadget) to the section we have
created. Note that we don't necessarily have to use Add a Gadget to add a
widget to our template. You can do this manually by coding it in your template.
So for example, I would like to add an HTML/Javascript widget below my blog
posts. So following this link mentioned earlier, we can see the syntax and
attributes of a <b: wi dget>tag. I would then code my template like this:
<body>
<b: secti on i d=' header' cl ass=' header ' maxwi dgets =' 1'
showaddel ement=' yes' >
<b: wi dget i d=' Header 1' l ocked=' t r ue' t i t l e=' Test ground
( Header ) ' t ype=' Header ' / >
</ b: sect i on>
<b: sect i on i d=' mai n' cl ass="mai n" maxwi dgets =' '
showaddel ements =' yes' >
<b: wi dget i d=' Bl og1' l ocked=' f al se' t i t l e=' Bl og Post s'
t ype=' Bl og' / >
<b: wi dget i d=' HTML1' l ocked=' f al se' t i t l e=' Test HTML wi dget'
t ype=' HTML' / >
</ b: sect i on>
</ body>
Fig.8 - Manually adding an HTML/Javascript widget.
Then, checking the Layout page, we can see that my HTML/Javascript widget is
right in its place.
1/8: Creating your own Blogger template from scratch, sort of http://postoneeighth.blogspot.in/2012/09/creating-your-own-blogg
1 5/15/2013
8/12/2019 Creating Your Own Blogger Template From Scratch, Sort Of
http://slidepdf.com/reader/full/creating-your-own-blogger-template-from-scratch-sort-of 6/11
Fig.9 - HTML/Javascript widget added using the <b:section>tag.
Deleting widgets, however, can't be removed by deleting it from the template
code. You need to remove it via the Layout page itself (Edit » Remove). If the
Remove option isn't visible on the Edit widget window, check that the widget's
locked attribute is set to false As mentioned earlier, deleting widgets can also be
done now in Blogger's HTML template editor.
Let's now move on to defining the rest of the Sections of our template.
Normally, it should have a Header, Navbar, Content, Sidebar and Footer. We
already have our Header and Content (main) so let me just add the missing
ones.
Some info..
Checking the Simple template, I noticed that there wasn't a
<b:section> tag made for the Sidebar. Instead, a <macro tag enclosed
in a <div> tag was used. Near the end of the template code, there is a
<macro:includable> tag. I'm guessing these tags automate the layout
for the sidebar's columns -- it generates a table based on the number of
columns specified (which can be modified in the Template Designer) for the
sidebar.
1/8: Creating your own Blogger template from scratch, sort of http://postoneeighth.blogspot.in/2012/09/creating-your-own-blogg
1 5/15/2013
8/12/2019 Creating Your Own Blogger Template From Scratch, Sort Of
http://slidepdf.com/reader/full/creating-your-own-blogger-template-from-scratch-sort-of 7/11
Fig.8 - Simple Template code snippets. Sidebar and Footer macro tags. Enlarge
image.
For now, I won't be going into the macro stuff since I am just starting to
experiment with the blog's layout. If I manage to study it, I may perhaps
write a separate blog post on it. To keep things simple, the layout for both
the sidebar and footer will only be a single column.
So after adding the sections along with some widgets, I now have this:
<body>
<b: secti on i d=' header' cl ass=' header ' maxwi dgets =' 1'
showaddel ement=' yes' >
<b: wi dget i d=' Header 1' l ocked=' t r ue' t i t l e=' Test ground
( Header ) ' t ype=' Header ' / >
</ b: sect i on>
<b: secti on i d=' nav' cl ass=' nav' maxwi dgets=' 1'
showaddel ements =' yes' >
<b: wi dget i d=' PageLi st 1' l ocked=' f al se' t i t l e=' Pages'
t ype=' PageLi st' / >
</ b: sect i on>
<b: secti on i d=' mai n' cl ass=' mai n' maxwi dgets=' '
showaddel ements =' yes' >
<b: wi dget i d=' Bl og1' l ocked=' f al se' t i t l e=' Bl og Post s'
t ype=' Bl og' / >
</ b: sect i on>
<b: secti on i d=' si debar' cl ass=' si debar' maxwi dgets=' '
showaddel ements =' yes' >
<b: wi dget i d=' CustomSearch1' l ocked=' f al se' t i t l e=' Search'
t ype=' Cust omSearch' / >
<b: wi dget i d=' Bl ogAr chi ve1' l ocked=' f al se' t i t l e=' Ar chi ve'
t ype=' Bl ogAr chi ve' / >
</ b: sect i on>
<b: secti on i d=' f oot er' cl ass=' f oot er' maxwi dgets=' '
showaddel ements =' yes' >
<b: wi dget i d=' At t ri but i on1' l ocked=' f al se' t i t l e=' '
type=' Att r i buti on' / >
</ b: sect i on>
</ body>
1/8: Creating your own Blogger template from scratch, sort of http://postoneeighth.blogspot.in/2012/09/creating-your-own-blogg
1 5/15/2013
8/12/2019 Creating Your Own Blogger Template From Scratch, Sort Of
http://slidepdf.com/reader/full/creating-your-own-blogger-template-from-scratch-sort-of 8/11
Fig.9 - Template code with added sections and widgets.
Fig.10 - Layout page with added sections and widgets.
Fig.11 - Template preview.
Some notes:
For the <b: secti on i d=' nav' . . . >tag, I tried using navbar
as the id earlier but it wouldn't show up in the saved template and
Layout page. It was because the id navbar is already in use. See
the navbar widget on the Layout page? I should have noticed that
1/8: Creating your own Blogger template from scratch, sort of http://postoneeighth.blogspot.in/2012/09/creating-your-own-blogg
1 5/15/2013
8/12/2019 Creating Your Own Blogger Template From Scratch, Sort Of
http://slidepdf.com/reader/full/creating-your-own-blogger-template-from-scratch-sort-of 9/11
Using if/else to customize elements in specific pages in Blogger
Using custom fonts in your Blogger template
Display post thumbnails for post summaries in Blogger
How to add, delete and edit labels in Blogger
Setting up a Test blog in Blogger
Related Resultswww.InternetCorkBoard.comLooking for Creating Own blogger emplate?
Top answers for Creating Own blogger template1.
www.MonsterMarketplace.comLooking For Creating Own blogger emplate?Find What You Need. Look For Creating Own blogger template Here Now
2.
www.Answered-Questions.comCreating Own blogger emplateTop answers for Creating Own blogger template
3.
Chitika | Opt out?
| Blogger, Blogger template, tutorials
earlier :|
Using an invalid id for the widget (e.g. Pagelist1 instead of
PageList1) will generate an error.
I can't find a complete list of widget types so that I end up using
Add a Gadget to install a widget (e.g. PageList, CutomSearch...)
then edit its attributes on the template file. If anyone knows where
to find one, I'd appreciate a holler..
There can be multiple instances of the same widget type. Just be
sure to set a different id for each widget - [widgetType][number]
(e.g. HTML1, HTML2)
I tried removing the title attribute from the PageList in the code but
it still remained in the Layout until I removed it via the Gadget's
settings.
If you are to use you a fluid layout for your blog instead of Blogger's
mobile version, I suggest removing the entire <b: i f
cond=' dat a: bl og. i sMobi l e' >block within the <head>tag and
replacing it with <meta content=' wi dth=devi ce-
wi dt h, i ni t i al - scal e=1. 0' name=' vi ewpor t ' / >instead.
I think I finally got the Section and Widget basics covered. All you would need
now is to style your template and fix the layout using CSS and I guess you
would be good to go. For customizing certain areas on your template, I'll be
writing separate blog posts for it. But if you want to jump right into customizing
your widgets, here is another must-read .
So if you have any questions, don't hesitate to leave a comment and let's see if
we can figure it out. Cheers!
Related notes
13 comments:
Christian Ehrhardt September 14, 2012 at 8: 44 AM
There's a list of valid widget types on this page
Reply
1/8: Creating your own Blogger template from scratch, sort of http://postoneeighth.blogspot.in/2012/09/creating-your-own-blogg
1 5/15/2013
8/12/2019 Creating Your Own Blogger Template From Scratch, Sort Of
http://slidepdf.com/reader/full/creating-your-own-blogger-template-from-scratch-sort-of 10/11
tk September 16, 2012 at 2: 17 AM
@Christian, thanks for the input! The list isn't complete though - it doesn't have
PageList, CustomSearch,... included.
Reply
MN Oct ober 2, 2012 at 5: 26 PM
it's helpful information and a good starter point for who want to dive!!!
Thank you.
Reply
Deann November 2, 2012 at 8: 29 AM
Thank you for this wonderful post! It helps me understand their new coding. I've been
wanting to make blogger templates, but since they've change it, I got myself a little
confused on everything. I'm only good on making Wordpress Themes, haha!
xoxo, www.itsmedeann.com :)
Reply
tk November 2, 2012 at 4: 14 PM
@MN (kinda late for me to reply) and @Deann, no problem! Glad you found this post
useful :)
Reply
Can Rau December 29, 2012 at 4: 41 AM
thank you for this great post
just switched to blogger coming from drupal and wordpress
i am not bad in coding templates but need to get some input for blogger
cheers :D
Reply
tk December 29, 2012 at 7: 25 AM
@Can Rau, you're welcome! Glad to know this post helps :)
Reply
Karthick J anuar y 8, 2013 at 7: 22 AM
Thanks for the post !!! Great tutorial. will create a new template soon !!
Reply
Mahesh kumar N Febr uar y 25, 2013 at 3:34 PM
great tutorial thankyou
Reply
Akshay Makadiya March 5, 2013 at 9: 27 AM
Really Really Thank you so much.
Reply
Rodney K Lora March 13, 2013 at 8: 18 AM
I’m new to Blogger and I’m helping a friend customize a new Blog for her team. I got
1/8: Creating your own Blogger template from scratch, sort of http://postoneeighth.blogspot.in/2012/09/creating-your-own-blogg
11 5/15/2013
8/12/2019 Creating Your Own Blogger Template From Scratch, Sort Of
http://slidepdf.com/reader/full/creating-your-own-blogger-template-from-scratch-sort-of 11/11
RSS feed
Email subscription
About
Contact
Privacy policy
© 2013 Post 1/8Powered by Blogger
« PREVIOUS
Windows 7 File Association - "Open with" problem
NEXT »
Increase volume in Windows 7, quick & dirty
Comment as:
them started but I want to dive in to creating something from scratch. I’m not an
expert web designer by any means so this post wil l definitely help me get started on
that project. Thank you.
Reply
Tzvi Perlow March 17, 2013 at 7: 33 PM
Thanx, helped me
Reply
Akhyar Kamili Apri l 15, 2013 at 3:37 AM
Great post!! Searched google over and over. This post is perfect to start makin a
blogger template.
Reply
Creating your own Blogger templatefrom scratch, sort of
Increase volume in Windows 7, quick & dirty
Windows 7 File Association - "Openwith" problem
Use next and previous post titles asnavigation in Blogger
How to use Blogger labels asnavigation in your blog
Popular posts
@fieznur, the post has been updated!(Though I sho... - Tk
Great suggestions! Thanks a lot forpointing those... - Tk
i'm not very familiar with htmlnor css, and I... - fieznur
@fieznur, sorry about that - I washaving trouble ... - Tk
Hi, this is wonderful, but I think theexplainatio... - fieznur
Latest comments Resources
1/8: Creating your own Blogger template from scratch, sort of http://postoneeighth.blogspot.in/2012/09/creating-your-own-blogg
top related