Академический Документы
Профессиональный Документы
Культура Документы
http://postoneeighth.blogspot.in/2012/09/creating-your-own-blogger-temp...
Post 1/8
Home About Contact
Topics
AddThis (1) Adsense (1) Blogger (10) Blogger labels (2) Blogger template (6) Camstudio (1) conditional statements (1) Google Analytics (1) Google web fonts (1)
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).
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)
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
Archive
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
1 of 11
5/15/2013 1:15 PM
Post 1/8: Creating your own Blogger template from scratch, sort of
http://postoneeighth.blogspot.in/2012/09/creating-your-own-blogger-temp...
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.
template from scratch, s... June (1) March (1) February (3)
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 .
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.
2 of 11
5/15/2013 1:15 PM
Post 1/8: Creating your own Blogger template from scratch, sort of
http://postoneeighth.blogspot.in/2012/09/creating-your-own-blogger-temp...
<?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,minimumscale=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>
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:
3 of 11
5/15/2013 1:15 PM
Post 1/8: Creating your own Blogger template from scratch, sort of
http://postoneeighth.blogspot.in/2012/09/creating-your-own-blogger-temp...
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>
4 of 11
5/15/2013 1:15 PM
Post 1/8: Creating your own Blogger template from scratch, sort of
http://postoneeighth.blogspot.in/2012/09/creating-your-own-blogger-temp...
</body>
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>
Then, checking the Layout page, we can see that my HTML/Javascript widget is right in its place.
5 of 11
5/15/2013 1:15 PM
Post 1/8: Creating your own Blogger template from scratch, sort of
http://postoneeighth.blogspot.in/2012/09/creating-your-own-blogger-temp...
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. 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.
6 of 11
5/15/2013 1:15 PM
Post 1/8: Creating your own Blogger template from scratch, sort of
http://postoneeighth.blogspot.in/2012/09/creating-your-own-blogger-temp...
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: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>
7 of 11
5/15/2013 1:15 PM
Post 1/8: Creating your own Blogger template from scratch, sort of
http://postoneeighth.blogspot.in/2012/09/creating-your-own-blogger-temp...
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
8 of 11
5/15/2013 1:15 PM
Post 1/8: Creating your own Blogger template from scratch, sort of
http://postoneeighth.blogspot.in/2012/09/creating-your-own-blogger-temp...
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=devicewidth,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!
| Blogger, Blogger template, tutorials
Related notes
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
www.InternetCorkBoard.com
www.MonsterMarketplace.com Find What You Need. Look For Creating Own blogger template Here Now www.Answered-Questions.com
13 comments:
Christian Ehrhardt
September 14, 2012 at 8:44 AM
9 of 11
5/15/2013 1:15 PM
Post 1/8: Creating your own Blogger template from scratch, sort of
http://postoneeighth.blogspot.in/2012/09/creating-your-own-blogger-temp...
tk
@Christian, thanks for the input! The list isn't complete though - it doesn't have PageList, CustomSearch,... included. Reply
MN
it's helpful information and a good starter point for who want to dive!!! Thank you. Reply
Deann
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
@MN (kinda late for me to reply) and @Deann, no problem! Glad you found this post useful :) Reply
Can Rau
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
@Can Rau, you're welcome! Glad to know this post helps :) Reply
Karthick
Thanks for the post !!! Great tutorial. will create a new template soon !! Reply
Mahesh kumar N
Akshay Makadiya
Rodney K Lora
Im new to Blogger and Im helping a friend customize a new Blog for her team. I got
10 of 11
5/15/2013 1:15 PM
Post 1/8: Creating your own Blogger template from scratch, sort of
http://postoneeighth.blogspot.in/2012/09/creating-your-own-blogger-temp...
them started but I want to dive in to creating something from scratch. Im not an expert web designer by any means so this post will definitely help me get started on that project. Thank you. Reply
Tzvi Perlow
Akhyar Kamili
Great post!! Searched google over and over. This post is perfect to start makin a blogger template. Reply
Comment as:
PREVIOUS Windows 7 File Association - "Open with" problem NEXT Increase volume in Windows 7, quick & dirty
Popular posts
Creating your own Blogger template from scratch, sort of Increase volume in Windows 7, quick & dirty Windows 7 File Association - "Open with" problem Use next and previous post titles as navigation in Blogger How to use Blogger labels as navigation in your blog
Latest comments
@fieznur, the post has been updated! (Though I sho... - Tk Great suggestions! Thanks a lot for pointing those... - Tk i'm not very familiar with html nor css, and I... - fieznur @fieznur, sorry about that - I was having trouble ... - Tk Hi, this is wonderful, but I think the explainatio... - fieznur
Resources
RSS feed Email subscription About Contact Privacy policy
2013 Post 1/8 Powered by Blogger
11 of 11
5/15/2013 1:15 PM