Creating Your Own Blogger Template From Scratch, Sort Of

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



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 5/15/2013



<?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 5/15/2013



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'


</ 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 5/15/2013



</ 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: 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 =' '



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 5/15/2013



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 5/15/2013



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: 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'


<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=' '



t ype=' Bl og' / >

</ b: sect i on>

<b: secti on i d=' si debar' cl ass=' si debar' maxwi dgets=' '


<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=' '


<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 5/15/2013



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 5/15/2013



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 5/15/2013



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


11 5/15/2013



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


Documents

Creating Your Own Blogger Template From Scratch, Sort Of