Monday, July 3, 2017

How to create a Blogger template (text version)

This is a step-by-step guide to converting an HTML file to a Blogger XML file, allowing you to tweak and test your HTML file before adding Blogger functionality. If you just want the XML file, here it is: bloggertemplate.xml

Instructions

Tweak the HTML file, bloggertemplate.html, for previewing in a web browser. Note that the copyright symbol (ű instead of ©) may not display correctly now, but will in Blogger. Once you are happy with it, save as a new .xml file: bloggertemplate.html

There are six .txt files, each embedded here, each containing a component to be inserted into your .xml file. Files 1-3 are necessary, and files 4-6 add optional side widgets (search and archive in this example). Each component is labeled <!-- FILE X: INSTRUCTIONS --> in bloggertemplate.html and may have an ending comment <!-- /.FILE X --> if there's a replacement involved, rather than only insertion.

File 1

Copy and paste the File 1 code into the top of your .xml file, above the <head> tag, from <!-- FILE 1: REPLACE --> to <!-- /.FILE 1 -->.

File 2

Replace <style type='text/css'>...</style> with <b:skin><![CDATA[...]]></b:skin>.


File 3

Locate the comment, <!-- FILE 3: INSERT BLOG WIDGET -->, and replace with the contents of File 3 (linked because it's long): File 3

After inserting the contents of Files 1-3, go to blogger.com > Theme > Edit HTML (beside Customize button, under Live on Blog preview). Back up your existing Blogger template if applicable. Copy the entire content of your .xml file and replace the entire content of your Blogger theme. Save theme and view blog if no errors.

Undo changes and save before testing out each widget you add in similar fashion. This way, if you make some terrible mistake, you're only one copy/paste away from the original blog.

File 4

Replace the File 4 comment pair with the beginning and ending tag of File 4. Test for functionality.


File 5

Replace the File 5 comment with the contents of File 5. Test for functionality.


File 6

Replace the File 6 comment with the contents of File 6. Test for functionality.


No comments:

Post a Comment