Home : Forums : Authoring and Programming : Create Your Own Blogger Template

Create Your Own Blogger Template

You are currently not logged in. You can view the forums, but cannot post messages.

30-Nov-09 00:00

Delete

Edit

Elated

Gold

Posts: 292

From: Brighton, UK

This is a forum topic for discussing the article "Create Your Own Blogger Template":

http://www.elated.com/articles/create-your-own-blogger-template/

A step-by-step guide to creating your own beautiful Blogger template. Learn about Blogger tags, how to use images, and how to tweak your template CSS.

05-Apr-10 23:26

Delete

Edit

vanhook

No stars yet

Posts: 1

From: Medan, North Sumatera, Indonesia

Thanks for the tutorial. It's very usefull for newbie blogger like me that want to create blogger template. Keep going, I'll be waiting for your next tutorial.

Once again, thank you.

--
Ivan Jaya

http://ivanjaya.blogspot.com

05-Apr-10 23:56

Delete

Edit

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

You're welcome Ivan - glad it helped.

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

26-Apr-10 16:28

Delete

Edit

josephromero

No stars yet

Posts: 1

From: Orlando, Fl. USA

Wonderful advice and Instruction. Wow, I usally edit existing templates but not so much going into the code. Great to learn from you more about taking blogs to the next level. Thanks.

--
Joseph Romero

The Social Media Evangelist
http://doitnowromero.com

31-Aug-10 11:24

Delete

Edit

blackhawk

No stars yet

Posts: 1

From: Carmel

This is so funny - everyone is like "hurray!!! This is a great idea!!! Lets have a parade!!!" But no one has put this tutorial to the test. People, if you upload your finalized (yet basic) tope.xml file to blogger now (year 2010 - month - August), with all the steps mentioned in this tutorial, you will get errors and blogger will not except it.

Can someone please post a link to a tutorial that allows us to build blogger pages from scratch - that actually work this year, this month, the moment????

13-Mar-11 13:51

Delete

Edit

Max Smith

No stars yet

Posts: 1

This is an excellent tutorial, there is however one minor error in the footer code which causes an error when uploading the template.

Between the html links for Elated and Pagekits, in the footer code, there is an ampersand this should be coded as


&amp;

the template will then upload correctly.

Thanks for the tutorial Matt.

14-Mar-11 00:35

Delete

Edit

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

Thanks Max! I've updated the code in the tutorial.

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

17-Jul-11 11:41

Delete

Edit

Karlyn324

No stars yet

Posts: 1

From: Orange

This is the most detailed and helpful tutorial, especially if you're someone who's not as experienced with code, etc. I think what many people forget is that there are a lot of people out there who don't know all the code "lingo" and are beginners. Thanks for putting your time and work into this. As far as the one who's unappreciative (blackhawk), maybe you could write your own tutorial if you feel you can do better.

18-Jul-11 23:55

Delete

Edit

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

@Karlyn324: Thanks very much for your comment - I'm glad you found the tutorial helpful.

Matt

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

15-Sep-11 05:36

Delete

Edit

arionarian

No stars yet

Posts: 1

From: Bandung, Jawa barat, Indonesia

finally i found this amazing tutorial, creating Blogger template. thank you very much !!

--
Ariona, Rian
http://ariona.net

05-Jan-12 06:16

Delete

Edit

yoetama

No stars yet

Posts: 2

From: Jakarta Indonesia

look so super simple, that was fast. If you have time later I'll try to apply in my blog template

13-Jan-12 16:23

Delete

Edit

cleverfox

No stars yet

Posts: 6

Hello, I am new here. I registered specifically to thank you and to let people now that as for January 2012 this tutorial works, there is no errors and everything looks great. I just added a blog to my existing site and didn't want my visitors to feel like they landed on an alien planet when they click on BLOG. So I uploaded my own code using this tutorial. It looks just like my website pages. Here it is http://goo.gl/sLHlO

Thank you very much!

17-Jan-12 15:21

Delete

Edit

Gep

No stars yet

Posts: 4

From: Slovenia

Hey, nice tutorial but I have some questions.

1. Can I make my template so that style.css stays separate and them upoad it in tope.xml file

2. If I don't choose a template I don't get the layout link option. I only get it when I choose some template. Then a new problem occurs. I can't upload the file because I can't find anything to upload my folder from.

18-Jan-12 12:53

Delete

Edit

Gep

No stars yet

Posts: 4

From: Slovenia

Ok, don't mind the second point. I found a way to upload files but not exactly like you said. Maybe they changed it or something.

I'm still interested in 1. question.

The second question now looks like this: how to create a xml file? I mean I looked up "how to" on google but it seems a bit complicated and demands coding.

18-Jan-12 13:15

Delete

Edit

cleverfox

No stars yet

Posts: 6

@Gep

Regarding Q1 that's exactly what I did. I created xml file in Dreamweaver and then coded normal HTML as you would do with a normal website. I also created a separate style.css Then you either can copy and paste that style.css right in the head of your xml document or go to Template Designer, Advanced and paste your style.css contents right there.

To be honest I found it much easier to use old Blogger interface for this task. So I pasted style.css in the head of my xml file then went to Edit HTML and everything worked fine. In fact it is as simple as designing a normal CSS website, the difference is that you have to paste some specific Blogger codes in right places. I was absolutely thrilled by how simple it was.

18-Jan-12 15:05

Delete

Edit

Gep

No stars yet

Posts: 4

From: Slovenia

Thanks for the answer!

By the way, did you get any errors when uploading your template? I get an error called "bX-z9vkvi" and it seems like I am not the only one.

18-Jan-12 15:33

Delete

Edit

cleverfox

No stars yet

Posts: 6

No, there was no errors except when I made a mistake in HTML, I think I forgot to close one </div>, but I don't remember what it said. Maybe you also have something like this? Did you validate your HTML before inserting Blogger tags?

19-Jan-12 13:00

Delete

Edit

Gep

No stars yet

Posts: 4

From: Slovenia

Well I tried to validate both HTML and XML file but there is only 1 option in DW for this: File/Validate/As XML - someone said that you can validate HTML with XML option because they are somehow similar.

I really don't know because I am new to all this stuff and don't know these things to well.

19-Jan-12 14:35

Delete

Edit

cleverfox

No stars yet

Posts: 6

Okay no problem. It's not that I am an expert myself, but i did it and I also make some simple CSS templates, which also helps.

So in the beginning, you should have a simple index.html and style.css, which is just a normal template. Validate your HTML at http://validator.w3.org/ (choose direct input). Do this before you open .xml file. Make sure it passes the test, if it doesn't Blogger will be giving you error and you won't know where it is.

Then go back to your HTML editor and create a new .xml file. In my editor it opens by default with <?xml version="1.0" encoding="utf-8"?> Paste your HTML from index.html right under that line. Then follow instructions in this post very carefully. You will have to delete some parts and replace some parts as you already know.

I hope this helps. Good luck to you!

31-Jan-12 09:05

Delete

Edit

Ninj

No stars yet

Posts: 1

From: Malta

This is a really straight forward and helpful tutorial so THANK YOU! But, I find myself confused as to where to start from here... I understand the steps I took, but I still don't know how to manipulate the layout to make it my own...

02-Feb-12 22:51

Delete

Edit

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

@Ninj: You can take 2 approaches. If your design is fairly similar to an existing Blogger template, or the Tope example in the tutorial, then you can just tweak the HTML and CSS, testing as you go, until it matches your design. Alternatively, if your design is quite unique, then I would create a static HTML page from the design first. Once you're happy the that the HTML page looks good, insert the Blogger tags into the HTML to turn the page into a Blogger template.

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

03-Feb-12 14:35

Delete

Edit

cleverfox

No stars yet

Posts: 6

WOW, I made this once again. This time for right-to-left language and everything works smoothly. Thanks!

07-Feb-12 23:09

Delete

Edit

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

@cleverfox: Great stuff

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

12-Apr-12 14:59

Delete

Edit

fermonk

No stars yet

Posts: 1

Hi Matt,
After modifying the template a little bit to make it minimalistic I'm unable to get the post body beside the sidebar widgets. The post body always below the sidebar widgets end making a huge blank gap beside the sidebar. Perhaps if there is anyway for you if could have a look at it, I'd be very grateful. I've been wracking my head since 4 days now.
Thanks very much.

05-May-12 15:55

Delete

Edit

AdilAli

No stars yet

Posts: 1

From: Pakistan

hello my name is Adil and i am new to webmaster's community, i followed the step by step procedure twice but i am unable to test this theme in 8th step. itried to upload theme but blogger is gonna let it save .instead its giving following error
"We were unable to save your template.
Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly. XML error message:
Could not find a preferred section to add deleted widgets to."
and when i tried to paste source code manually in "edit html". its still generating error.
i want to remind that in 1st try i gave the path of a photo being hosted by picasa and in 2nd try, i gave the path mentioned in above tutorial just to test , still not working either way

12-Jul-12 21:05

Delete

Edit

thany

No stars yet

Posts: 1

From: cambodia

sorry anyone can tell me where can i find tope.xml?

--
cheachanthany

13-Jul-12 03:01

Delete

Edit

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

@thany: You create tope.xml in Step 3.

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/