9/04/2012

Creating your own Blogger template from scratch, sort of

Posted on | 66 comments

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 learn in 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:

  1. 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.
  2. Before making any changes, download a copy of the template (Template » Backup/Restore) for reference.
  3. 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 and Attribution widgets, edit the template (Template » Edit HTML) and search for Header1. On that line of code, change locked='true' to locked='false'. Do the same for the Attribution by searching Attribution1. 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!
  4. 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.
  5. 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.

Stripped the Layout.
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.

Understanding the <b:section> and <b:widget> tags

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:section> and <b:widget> tags are listed here which we will use later on.

Blogger Template Sections and Widgets
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. 


<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' 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>
  <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
  <b:if cond='data:blog.isMobile'>
    <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
  <b:else/>
    <meta content='width=1100' name='viewport'/>
  </b:if>
  <b:include data='blog' name='all-head-content'/>
  <title><data:blog.pageTitle/></title>
  <b:skin>
  </b:skin>
</head>

<body>
  
  <b:section id='header' class='header' maxwidgets='' showaddelement='yes'>
  </b:section>

</body>
</html>
Fig. 3 - Simplest template code.

I tried leaving out the <b:skin/> 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:section> 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:

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:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/> has been inserted in between the <b:section> 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:section> tag, with an id main for the Blog widget and updated the attributes of the header section. So now we get this: 


<body>
  
  <b:section id='header' class='header' maxwidgets='1' showaddelement='yes'>
  </b:section>

  <b:section id='main' class="main" maxwidgets='' showaddelements='yes'>
    <b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
  </b:section>
  
</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:section id='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:widget> tag. I would then code my template like this: 


<body>
  
  <b:section id='header' class='header' maxwidgets='1' showaddelement='yes'>
    <b:widget id='Header1' locked='true' title='Testground (Header)' type='Header'/>
  </b:section>

  <b:section id='main' class="main" maxwidgets='' showaddelements='yes'>
    <b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
    <b:widget id='HTML1' locked='false' title='Test HTML widget' type='HTML' />
  </b:section>
  
</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.

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 falseAs 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.

So after adding the sections along with some widgets, I now have this: 


<body>
  
  <b:section id='header' class='header' maxwidgets='1' showaddelement='yes'>
    <b:widget id='Header1' locked='true' title='Testground (Header)' type='Header'/>
  </b:section>
  
  <b:section id='nav' class='nav' maxwidgets='1' showaddelements='yes'>
    <b:widget id='PageList1' locked='false' title='Pages' type='PageList'/>
  </b:section>
  
  <b:section id='main' class='main' maxwidgets='' showaddelements='yes'>
    <b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
  </b:section>
  
  <b:section id='sidebar' class='sidebar' maxwidgets='' showaddelements='yes'>
    <b:widget id='CustomSearch1' locked='false' title='Search' type='CustomSearch'/>
    <b:widget id='BlogArchive1' locked='false' title='Archive' type='BlogArchive'/>
  </b:section>
  
  <b:section id='footer' class='footer' maxwidgets='' showaddelements='yes'>
    <b:widget id='Attribution1' locked='false' title='' type='Attribution'/>
  </b:section>
  
</body>
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:section id='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 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:if cond='data:blog.isMobile'> block within the <head> tag and replacing it with <meta content='width=device-width,initial-scale=1.0' name='viewport'/> 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!

| , ,

66 comments:

  1. Adderall PoweredSeptember 14, 2012 at 8:44 AM

    There's a list of valid widget types on this page

    ReplyDelete
  2. MNOctober 2, 2012 at 5:26 PM

    it's helpful information and a good starter point for who want to dive!!!
    Thank you.

    ReplyDelete
  3. DeannNovember 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 :)

    ReplyDelete
  4. UnknownDecember 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

    ReplyDelete
  5. KarthickJanuary 8, 2013 at 7:22 AM

    Thanks for the post !!! Great tutorial. will create a new template soon !!

    ReplyDelete
  6. UnknownFebruary 25, 2013 at 3:34 PM

    great tutorial thankyou

    ReplyDelete
  7. M@kMarch 5, 2013 at 9:27 AM

    Really Really Thank you so much.

    ReplyDelete
  8. UnknownMarch 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 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 will definitely help me get started on that project. Thank you.

    ReplyDelete
  9. zviMarch 17, 2013 at 7:33 PM

    Thanx, helped me

    ReplyDelete
  10. Akhyar KamiliApril 15, 2013 at 3:37 AM

    Great post!! Searched google over and over. This post is perfect to start makin a blogger template.

    ReplyDelete
  11. Mommin' it my wayMay 31, 2013 at 4:45 PM

    im not able to delete all widgets :/ the header and the attribution i do what you said and then i remove them in layout and then when i click save it says error and makes me refresh and its back.

    same with deleting the whole widget in html.

    I dont know how to get it to work

    ReplyDelete
  12. UnknownJune 2, 2013 at 2:29 PM

    nice work thanks ^^

    ReplyDelete
  13. UnknownJune 2, 2013 at 2:30 PM

    thank you friend plz visite my blog(;
    http://arabetutorial.blogspot.com/

    ReplyDelete
  14. senomicJuly 1, 2013 at 3:21 AM

    Good Tips

    ReplyDelete
  15. Online MoviesJuly 10, 2013 at 4:18 PM

    Very Nice.... Bro... I like the way you explained :)

    Thanks

    ReplyDelete
  16. KelvinJuly 12, 2013 at 4:24 PM

    Thanks your post was really hlpful :)

    ReplyDelete
  17. GBAugust 1, 2013 at 12:29 PM

    Hi,
    These instructions worked so far, but I noticed that none of my blog titles or hyperlinks work. The ONLY hyperlink that works is the one at the bottom "powered by Blogger"
    The "edit" button on the gadgets works, but the "quick edit" button on the blog post doesn't work, as do none of the other things that should be active hyperlinks.
    GB

    ReplyDelete
  18. UnknownAugust 26, 2013 at 8:21 AM

    Great Information thnks

    ReplyDelete
  19. blogger themeSeptember 7, 2013 at 9:16 PM

    really thank you.

    ReplyDelete
  20. soft centreSeptember 13, 2013 at 5:02 PM

    Good tutorial - just what I was looking for. Thanks

    ReplyDelete
  21. Glaiza BernaldezSeptember 24, 2013 at 2:21 AM

    Thank you for sharing :)

    ReplyDelete
  22. Imran MurtazaOctober 16, 2013 at 11:45 AM

    Nice post....

    ReplyDelete
  23. UnknownNovember 29, 2013 at 10:15 AM

    Thank very much! Definitely your post is good and full of information

    ReplyDelete
  24. vishnu sharmaFebruary 25, 2014 at 2:35 AM

    the article is really helped me ... i have started learning something about coding and many stuff :) thank you...
    i have learning more about template design on :- http://techgmind.blogspot.com/2014/02/how-to-create-blogger-template-from.html
    this blog also provide too tutorials on blogger template and design

    ReplyDelete
  25. UnknownSeptember 5, 2015 at 4:12 AM

    Anyone want html and css tutorials can visit.

    UcssTutorials:www.ucsstutorials.in

    ReplyDelete
  26. MPPS DUMALAOctober 3, 2015 at 7:47 AM

    too good

    ReplyDelete
  27. Hafeez GabraniOctober 6, 2015 at 12:45 AM

    Its a very hard to create blogger template of high class design I suggest to download ready Blogger Template from Internet.

    ReplyDelete
  28. romansuladyNovember 1, 2015 at 10:26 AM

    This post was really helpful. Also love the way you explain. Thank you.

    ReplyDelete
  29. Ari's Peace Cleaning/Personal Assistant ServicesDecember 6, 2015 at 11:18 AM

    Hi,

    This might be a dumb question, but can you please go over how to edit CSS on Blogger? I am not sure if that's an option since ther's only "HTML editor" available.


    Thanks

    ReplyDelete
  30. Ari's Peace Cleaning/Personal Assistant ServicesDecember 8, 2015 at 4:32 PM

    Thank you very much! I am new to coding and so is trying to design my own template. Thank you again!

    ReplyDelete
  31. get my boxFebruary 19, 2016 at 7:02 AM

    I know I can make it better, thanks for your share

    ReplyDelete
  32. mugiantoMarch 3, 2016 at 1:05 AM

    it will be great if you make this tutorial on video like this: https://www.youtube.com/watch?v=rg-plkkl9hE
    sadly it wrote on Indonesia Language Y_Y
    it will more easy to understand for begginer like me

    ReplyDelete
  33. AnangMarch 20, 2016 at 8:06 AM

    Very helpfull, tanks for your share

    ReplyDelete
  34. АдминистраторMarch 27, 2016 at 1:45 AM

    how to create Landing Page from scratch in blogger?

    ReplyDelete
  35. ThvinicMarch 29, 2016 at 3:00 PM

    Saved my lifeee!

    ReplyDelete
  36. UnknownMarch 30, 2016 at 5:02 AM

    thank you sooo much. :D :D :D

    ReplyDelete
  37. MyupdateMay 14, 2016 at 9:28 AM

    good you guyz

    ReplyDelete
  38. ThomasMay 31, 2016 at 4:51 AM

    Hello, Tk! :)

    I'd like to thank You for this article - it helped Me a lot in the beginning of learning how to construct Blogger templates from scratch. Especially helpful was that You've obtained as leanest code as possible using back engineering. This saved much effort - and only Your article has that attitude.

    Today I have much more freedom in terms of how much I am able to achieve in the design. Thank You very much!

    I've also written a similar article - but rather from the conceptual side, than code-wise. It also may be helpful for Beginners:

    http://thomasleighdiary.blogspot.com/2016/05/blogger-templates-from-scratch.html#post


    Have a nice day!
    Thomas

    ReplyDelete
  39. UnknownSeptember 17, 2016 at 11:39 AM

    soooo thinks it work

    ReplyDelete
  40. Jerry Geevarghese VijiNovember 8, 2016 at 1:18 AM

    Really Nice Work :)

    ReplyDelete
  41. Allen jeleyJanuary 2, 2017 at 1:19 PM

    well

    ReplyDelete
  42. MD KawsarFebruary 5, 2017 at 9:02 AM

    Great post.

    ReplyDelete
  43. My Airtel AppMarch 20, 2017 at 7:19 AM

    thanks bro i was looking for this stuff

    ReplyDelete
  44. JohnApril 8, 2017 at 12:41 AM

    Really excellent post. Your work is very excellent. I appreciate your work. Thanks for sharing a nicep post with us

    ReplyDelete
  45. james brownnMay 9, 2017 at 2:00 AM

    It was wondering if I could use this write-up on my other website, I will link it back to your website though. Great Thanks.
    HTML basics for SEO

    ReplyDelete
  46. FranciscoJuly 31, 2017 at 3:39 AM

    Thanks for showing me a new technique.I loved it.

    ReplyDelete
  47. শতদলSeptember 17, 2017 at 2:50 AM

    Thanks a lot.

    ReplyDelete
  48. AnonymousSeptember 25, 2017 at 4:14 AM

    Really great post

    ReplyDelete
  49. اردو مکتبOctober 27, 2017 at 1:45 AM

    Great

    ReplyDelete
  50. Gregory DavisDecember 8, 2017 at 11:38 AM

    Thanks for sharing your wonderful Blog.

    ReplyDelete
  51. UnknownJanuary 19, 2019 at 12:36 PM

    tksh for asharing, i wake template and i will show you

    ReplyDelete
  52. Variant PerceptionJanuary 26, 2019 at 8:53 PM

    great post bro

    ReplyDelete
  53. RMCL - Grow With Us.February 4, 2019 at 2:38 AM

    Dear Sir,
    i have a blogger slider which shows on pc but not shows on mobile.
    whenever we open our blog slider doesn't show but when we open our blog site on pc slider shows n works well.
    plz guide me what code should i use so that slider can show on mobile site.
    Thanx Sir.

    ReplyDelete
  54. anubhavMarch 7, 2019 at 3:55 AM

    very well explained tutorial. I learned how to add a widgets using HTML editor. Thanks.

    ReplyDelete
  55. Manisha ChauhanMarch 17, 2019 at 1:27 PM

    Thanks for help. Now I am learning to make my own template. How to split a section in two parts.

    ReplyDelete
  56. MuzammilApril 10, 2019 at 11:26 PM

    Thats amazing!

    ReplyDelete
  57. richblog.techMay 25, 2019 at 12:38 PM

    thank's you for this post.

    ReplyDelete
  58. tech-docxMay 29, 2019 at 1:36 AM

    thank you so much ! best post

    ReplyDelete
  59. Abhishek kumarOctober 23, 2019 at 1:59 AM

    This is a great post. After reading this post I can make my own template easily.
    Thanks for sharing.

    ReplyDelete
  60. lawangNovember 4, 2019 at 2:39 AM

    This tutorial is awesome. It's have been months since I wanted to make a blogger template myself.

    I keep using blogger for its free service. I used blogspot for writing short articles. Something that I didn't bother about the blog's performance.

    But someday, the visitors a reached more than 300 a day. I put some stuffs to sell on the blog and they were sold.

    So, I just want to make the blog looks much better although it is free.

    Thank you very much !

    ReplyDelete
  61. AnirudhNovember 5, 2019 at 5:57 AM

    thanks..

    ReplyDelete
  62. VK PRAJAPATINovember 23, 2019 at 6:42 AM

    Thank you so much

    ReplyDelete
  63. SSGMarch 28, 2020 at 7:45 PM

    Thanks Bro Nice Work

    ReplyDelete
  64. SSGMarch 28, 2020 at 7:45 PM

    Thanks Bro

    ReplyDelete
  65. S David PrinceDecember 25, 2023 at 4:55 PM

    And this post is still relevant in 2024. yes im from the future

    ReplyDelete
  66. AnonymousNovember 9, 2024 at 8:26 AM

    Very well explained. I really thank to you, because your basic code in designing blogspot templates is really² works. Lucky me, I found your post in 2024, and your article still works. Wonderful ,,, great salute for you sir!

    ReplyDelete