The difference between Themes and Templates in Blogger

<b>This article explains the difference between themes and templates in Blogger, Google's blogging tool.</b> <br /><b><br /></b> <b><br /></b> <br /><div style="clear: both;"></div><a name="more"></a><h2>What is (was) a Blogger template</h2><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuo3I0TNDiHzAKBntHVgS3Sm_BNBUHDS7NpUUPMvlTLHPdzQhh1F8K3YlBpZXTIeyW5kFBGmOP3RDwpBxWHSb_Lj-x-Tj51uSucwCLsSwN1cv-MGbDRq8nuKgqGrRFaRbD6kAy3VD4xjg/s1600/theme-vs-template-what-is-the-difference-between-them.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="243" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuo3I0TNDiHzAKBntHVgS3Sm_BNBUHDS7NpUUPMvlTLHPdzQhh1F8K3YlBpZXTIeyW5kFBGmOP3RDwpBxWHSb_Lj-x-Tj51uSucwCLsSwN1cv-MGbDRq8nuKgqGrRFaRbD6kAy3VD4xjg/s320/theme-vs-template-what-is-the-difference-between-them.png" width="320" /></a></div>How a blog that is made with Blogger is shown to a visitor is controlled by four sets of information:<br /><ul><li>The <b>posts </b>which the <a href="http://blogger-hints-and-tips.blogspot.com/2010/04/blogs-blogger-bloggers-posts-pages-and.html">blogger</a> writes (ie the content)</li><li>A user-editable <b>"configuration file"</b> which records the overall formatting options which the file designer and then the blogger have chosen</li><li>Another configuration file, called the <b>post-template</b>, which records choices that the blogger has made under <b>Layout > Blog posts (edit), </b>but cannot be edited elsewhere.   </li><li>Blogger's own software, which puts the other things together with some internal rules to make "web pages".   Bloggers cannot control the rules in this at all.</li></ul><br />Originally, <b>the first "configuration file" was called a template</b>.   In fact, officially it was called <b>a design-template</b>, to distinguish it from the post-template.   However because most people aren't aware of the post template, usually just the word "template" is used to mean design-template.<br /><br /><br /><h2>What is a theme</h2>Other blogging tools (eg Wordpress, Tumblr) called their equivalent file a theme.    Most (or even all) of those tools provide less access to change things in the Theme file, for example if you use a Wordpress free-hosted blog, then you cannot change any of the code in your theme, you can only make formatting changes which are allowed for in the Wordpress front-end.<br /><br />Many of the Wordpress themes have had a lot of  graphic design work done on them - using them gives a <a href="http://blogger-hints-and-tips.blogspot.com/2012/11/use-blogger-to-make-a-website.html">blog-site</a> which looks very attractive (or otherwise suited for their purpose) on a wide range of screens.    Many large websites have been made using Wordpress, and so very many professional designers have created Wordpress themes.    Because of this, many people believe that it's easier to get an excellent-looking website from a theme than from a Blogger template.<br /><br /><h2>Blogger templates have now become themes</h2>Recently - I noticed it in March 2017 - Blogger started calling their templates "themes".   <br /><ul><li>They've changed the menu option on their dashboard from "Template" to "Theme".</li><li>They've changed the action button names in the template/theme editor to say things like "Save theme".</li><li>They've written various help articles which refer to themes.</li></ul><div><br /></div><div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGqzlT97XxnAfHLajW_sva0DeRbj7yzoCT2KG90iDAyHXNvJ8wVbX9XSWjuJXAMW2V2fQc9M9kq_IOcVJjoJ7kb2ka4Bc8c96SjXHmd38uYWebUSTLYhRR-DdYmWp0MH-0KH2PFBJdFlU/s1600/theme-link-in-blogger-dashboard.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="322" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGqzlT97XxnAfHLajW_sva0DeRbj7yzoCT2KG90iDAyHXNvJ8wVbX9XSWjuJXAMW2V2fQc9M9kq_IOcVJjoJ7kb2ka4Bc8c96SjXHmd38uYWebUSTLYhRR-DdYmWp0MH-0KH2PFBJdFlU/s400/theme-link-in-blogger-dashboard.PNG" width="400" /></a></div><br /><br /></div><h3>What hasn't changed</h3><ul><li>We can still edit our <strike>templates</strike> themes extensively.</li><li>The Blogger tools that make the changes in our themes haven't changed:  All the items under the Themes tab on the dashboard are the same as the ones on the Templates tab.</li><li>The contents of our existing themes are still much the same  (I cannot guarantees they haven't made any changes, but I haven't seen any)</li><li>The themes that we can choose from when making a new blog, or changing the format of an existing one, are the same.</li><li>There are hundreds of help and how-to articles written by blogger-helpers like myself, which all refer to templates.   <i>(I've started changing mine - but it's going to take a while!)</i></li></ul><br /><h3>What else is going to change?   </h3><div>This is the big question:   Is the rename a precursor to some other changes, eg restricting how much control we have over our themes? - or is it just a cosmetic change to make Blogger seem more modern?</div><div><br /></div><div>Will there be some new themes released - ones that look better across a range of devices, maybe even some that are optimized for mobile instead of desktop use?</div><div><br /></div><div>Will there be new theme-editing features introduced into Blogger's interface, to let us control things we cannot control now?</div><div><br /></div><h2>Conclusion / TL-DR</h2><div>Only Google's Blogger product managers know exactly what the future plans for Blogger are - and they're not known for talking about the future direction  until they're just about to introduce new features.   </div><div><br /></div><div>But until they do, my conclusion is that <b>there is no difference between templates and themes in Blogger</b>.  They are simply two different words for exactly the same thing.</div><div><br /></div><div><br /></div><div><br /></div><div>NB:   Blogger product a announcements are usually made in the <a href="https://blogger.googleblog.com/" target="_blank">Blogger Buzz</a> blog - and I see that template were still called templates in their most recent post in November 2016:<br /><br /></div><div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbxyQEYyz4VdP5U5Bw-APWR6ADD14ODM1LK3qt1aKr3QBTq-mxKbs-YQnzlPvgQR9eNe5-m2ZLWLKsu2qzJF2G4eq-1GKe15byltznS9veQNTCjEfIPW5htWbZOh5Mljw2K-eseqzEqPw/s1600/templates-themes-rename-not-done-november-2016.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="412" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbxyQEYyz4VdP5U5Bw-APWR6ADD14ODM1LK3qt1aKr3QBTq-mxKbs-YQnzlPvgQR9eNe5-m2ZLWLKsu2qzJF2G4eq-1GKe15byltznS9veQNTCjEfIPW5htWbZOh5Mljw2K-eseqzEqPw/s640/templates-themes-rename-not-done-november-2016.PNG" width="640" /></a></div><br /></div><br /><br /><br /><hr /><h2>Related Articles</h2><a href="http://blogger-hints-and-tips.blogspot.com/2017/03/how-to-edit-blogger-theme-aka-template.html">How to edit your Theme in Blogger</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2010/03/types-of-blogger-template.html" target="_blank">What types of theme / templates does Blogger have</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2010/06/editing-your-blogs-template-advantanges.html" target="_blank">Editing your blog's template:  advantages and disadvantages</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2012/05/mobile-templates-for-blogger-and-why.html" target="_blank">How to turn on a mobile theme for your blog</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2010/04/blogs-blogger-bloggers-posts-pages-and.html">Blogs, Blogger, bloggers, posts pages and screens - understanding Blogger-basics</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2012/11/use-blogger-to-make-a-website.html">How to make a real website, using Blogger</a>

The difference between Themes and Templates in Blogger

This article explains the difference between themes and templates in Blogger, Google's blogging tool. What is (was) a Blogger templ...

Read more »

How to turn on a mobile theme / template for blogs in Blogger

<b>This article explains why mobile mattes for some blogs (but not all), what tools Blogger has provided to help with this, and how to set up a mobile theme (aka template) for your blog.  It also links to Google's mobile testing tool, which shows you how your blog looks on a mobile device.</b><br /><b><br /></b><b><br /></b><br /><div style="clear: both;"></div><a name="more"></a><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2YxUiRZPZshioS4xEHDUgu8XXeLJTJB1ar2lWlqFciST76d7WPwNwo94wk0Sr4ASJH2zTUATD7Z3_FuWBVBtxSvR0OQY-8GXheZwADqklb7tBZaoCSb2Ft2KLsFKz7iruPo4CxIqgRrVH/s512/how-does-my-blog-look-on-smartphone-tablet-mobile-device.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img alt="" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2YxUiRZPZshioS4xEHDUgu8XXeLJTJB1ar2lWlqFciST76d7WPwNwo94wk0Sr4ASJH2zTUATD7Z3_FuWBVBtxSvR0OQY-8GXheZwADqklb7tBZaoCSb2Ft2KLsFKz7iruPo4CxIqgRrVH/s512/how-does-my-blog-look-on-smartphone-tablet-mobile-device.png" title="How to enable a mobile template in Blogger" width="245px" /></a></div>By default, when someone uses a smartphone, tablet or other mobile device to look at your blog, they see the "full site" just like they would if they were using a PC.   The pages aren't set up to work well on their small screen, but they have access to all the features and gadgets you've installed.<br /><br />In some cases, this is fine.  For example, when I first wrote this article, I looked at the <a href="http://blogger-hints-and-tips.blogspot.com/2012/01/its-annual-performance-review-time-how.html">statistics for this site</a> and hardly any of the visitors were mobile.   However now, a couple of years later things have changed and I've implemented a mobile theme for this blog.<br /><br />But for other blogs, especially ones that have <a href="http://blogger-hints-and-tips.blogspot.com/2010/09/showing-google-custom-map-on-your-blog.html">maps</a> and other location-information or which people read on the go, having a mobile-friendly theme is very important:   for example, on my public-transport blog, over 25% of visitors are using mobile, and that figure is growing.  Making my site work well for these visitors is definitely important for its long-term future (and my short term <a href="http://blogger-hints-and-tips.blogspot.com/2010/02/advertising-programmes.html">advertising revenue</a>!)<br /><br /><br /><h2>What's available</h2>Blogger have made a set of mobile themes, to match the standard <a href="http://blogger-hints-and-tips.blogspot.com/2010/03/types-of-blogger-template.html">Designer Themes</a>, and so far only one to match the Dynamic theme(s).<br /><br />We cannot control the layout of gadgets on these - when the screen is only 300-ish pixels wide, there's not much room to move. <br /><br />But we can <a href="http://blogger-hints-and-tips.blogspot.com/2012/05/add-gadget-to-mobile-template-for-your.html">add and remove gadgets</a>, and also by choosing a custom template get colour settings that match our main blog.<br /><br /><br /><h2>How to enable a mobile theme / template for your blog</h2><b>Log in</b> to Blogger using an account with <a href="http://blogger-hints-and-tips.blogspot.com/2011/12/setting-up-new-administrator-for-your.html">administrator rights</a> to the blog.<br /><br />Go to the <b>Themes</b> tab.<br /><br />If your blog has a Designer or Dynamic theme, then there will be a <b>Mobile option</b> to the right of the "Live on Blog" area.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzXevSB2j1MdiqWJBNDxT2yEDGRTYPna9dXZZIn5DXFGCTIuU3LJor2NrVPE91ar5U8zXfidsqUbWfFER7zksBzImThfYoh295HXoYnrdmWVXlkL93se2Q93enlt0-UuUU_jmxyP7S-aWp/s597/select-template-blogger-dynamic-designer-mobile.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzXevSB2j1MdiqWJBNDxT2yEDGRTYPna9dXZZIn5DXFGCTIuU3LJor2NrVPE91ar5U8zXfidsqUbWfFER7zksBzImThfYoh295HXoYnrdmWVXlkL93se2Q93enlt0-UuUU_jmxyP7S-aWp/s400/select-template-blogger-dynamic-designer-mobile.png" width="80%" /></a></div><br /><br />If the blog is not set up to use a mobile theme ,then the word <b>Disabled</b> will be in the middle of the picture area - although it may be hard to read if your base template (chosen in the Live on Blog area) has a picture behind it.<br /><br />Click on the <b>gear-wheel</b> underneath the picture to see the mobile options.<br /><br />Select "<b>Yes.  Show mobile template on mobile devices.</b>"<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir9ELR1__HrJhC6MXvg31bwU7ZH8k5CADKDglqL6KvU-DeI8qGpKRRWyBSPXgkp6MrDcGTz3D5lkW8KJkYRcXSotKJBwfzCxy90FdXYtCOM7l36of6qf-wauNFTpEDz-j90BYk7fydA3P1/s392/blogger-choose-mobile-template-not-desktop.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir9ELR1__HrJhC6MXvg31bwU7ZH8k5CADKDglqL6KvU-DeI8qGpKRRWyBSPXgkp6MrDcGTz3D5lkW8KJkYRcXSotKJBwfzCxy90FdXYtCOM7l36of6qf-wauNFTpEDz-j90BYk7fydA3P1/s400/blogger-choose-mobile-template-not-desktop.png" width="80%" /></a></div><br /><br />Either leave the mobile template on <b>Default</b>, or <b>select one of the other options</b>.<br /><ul><li>If you choose Default, your mobile template will use the standard template matching your desktop template.</li><li>If you choose Custom, your mobile template will use the colour-scheme and various features from your desktop template, and you will be able to makes changes to these settings.</li></ul><br />Use the <b>Preview</b> button if you want to see what your blog will look like with the selected template on a mobile device.<br /><br />When you are happy with your selection, press <b>Save</b>.<br /><br /><br /><h2>What your readers see</h2>Visitors to your blog who are using a desktop PC (or laptop or netbook or any other machine with a full-size screen) won't see anything different.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC_FDBJLBjXB7OvbT-5h1_BM7OK4d96ZzBmwrD0o21zHtkYNnjk4moSb8MPgeI1HOsfLef8oN_B8PflKxbV86WRvIgJmz2fLjKoy0LjM1uz8SeYfMrdZja-Idy7JZSWjlnR1V9a7hhUGuS/s285/preview-mobile-template-blogger-designer.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC_FDBJLBjXB7OvbT-5h1_BM7OK4d96ZzBmwrD0o21zHtkYNnjk4moSb8MPgeI1HOsfLef8oN_B8PflKxbV86WRvIgJmz2fLjKoy0LjM1uz8SeYfMrdZja-Idy7JZSWjlnR1V9a7hhUGuS/s285/preview-mobile-template-blogger-designer.png" /></a></div>Readers who are using an internet-enabled cellphone (ie smartphone), tablet, iPad, etc will see a different view:<br /><ul><li>They won't have a <b>sidebar</b></li><li>The <b>gadgets will be limited</b> (unless you add some extra ones) and in the header and footer only</li><li>On the <b>home-page</b> there will just be the title, thumbnail and snippet for each post, and a button for read-more (this is irrespective of where you've put the jump-break) - notice that <a href="http://blogger-hints-and-tips.blogspot.com/2012/11/blogger-home-page-vs-mobile-template-setup.html">the usual methods of giving your blog a home-page don't always work</a>.</li><li><b>Custom styles</b> that you have added to the template may not be applied (this has happened on one blog where I use styles, I'm still investigating whether it's a feature of all mobile templates, or just due to the way I added these particular styles).</li><li>There will be buttons at the <b>bottom</b> of the page for <b>Home, <   and > </b>.    I think that the latter two refer to older and newer posts (though possible they are the opposite way around from what I expect).</li><li>There will be a link to "<b>view web version</b>", which lets your visitor switch to to see the blog using the desktop template.</li></ul><br />I have a  feeling that there may be some other differences too - very keen to hear about <b>any others</b> you've spotted.<br /><br /><br /><h2>Seeing what your mobile readers see</h2>The absolute best way that I've found to accurately experience my blogs as mobile visitors see them is to use a mobile device myself:<br /><ul><li>Just like preview mode in the Post-editor, the <b>mobile preview mode</b> shows a "look and feel" view, which is not entirely accurate.   For example in the picture above, it shows part of the most-recent article insteaod of just the post title and mini-snippet that I see when I look at the site on my phone.</li><li>The <b>screen-size testers</b> that I've tried out (ie software tools that mimic showing your website in various different screen sizes) don't actually use the mobile template - I suspect that this is due to the way that Blogger detects mobile devices.</li></ul><br />However you can see any blog as it would be on a mobile device by appending <b>/?m=1 to the end of the URL</b>.    For example, to see this blog in mobile, I would look at <a href="http://blogger-hints-and-tips.blogspot.com/?m=1">http://blogger-hints-and-tips.blogspot.com/?m=1</a>      If you're going to use this approach, it's best to re-size your browser window so that it's about 300px wide - from my netbook, that's about 1/3 of the screen size, but it would be less from machiens with bigger screens.<br /><br /><br />Another approach is to use <b><a href="https://www.google.com/webmasters/tools/mobile-friendly/" target="_blank">Google's Mobile Friendly Testing tool</a>, </b>which will<br /><blockquote class="tr_bq"><i>... analyze a URL and report if the page has a mobile-friendly design.</i></blockquote>As well as showing you how your blog looks, it also reports on any issues that have been found.<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNQ4VhJkiII1XFJytEa3X7dE7my4v1KQ0Zdwcb2MLczvAZ8QyBjo3U69VY1Y2fEkJzTG32mn5RpfBJnpMDvWrR0OMuskCh6TJe6mFEdD3rI_ZVCrvEb5g3tizMEzyeAXVQ-MAHR12gsLH7/s799/test-how-your-blogger-blog-looks-on-mobile-screen-google-testing-tool.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNQ4VhJkiII1XFJytEa3X7dE7my4v1KQ0Zdwcb2MLczvAZ8QyBjo3U69VY1Y2fEkJzTG32mn5RpfBJnpMDvWrR0OMuskCh6TJe6mFEdD3rI_ZVCrvEb5g3tizMEzyeAXVQ-MAHR12gsLH7/s799/test-how-your-blogger-blog-looks-on-mobile-screen-google-testing-tool.png" width="80%" /></a></div><br /><br /><br /><hr /><h2>Related Articles</h2><a href="http://blogger-hints-and-tips.blogspot.com/2012/05/add-gadget-to-mobile-template-for-your.html">Adding gadgets to your mobile template.</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2012/04/remove-attribution-from-mobile-template.html">Removing the attribution from moblile blogs</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2010/09/showing-google-custom-map-on-your-blog.html">Showing a Google custom map on your blog</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2010/02/advertising-programmes.html">Advertising programmes for websites</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2010/03/types-of-blogger-template.html">Types of Blogger template</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2011/12/setting-up-new-administrator-for-your.html">Administrator rights to your blog</a>

How to turn on a mobile theme / template for blogs in Blogger

This article explains why mobile mattes for some blogs (but not all), what tools Blogger has provided to help with this, and how to set up a...

Read more »

CustomizeMe Blogger Template (Helplogger Style)

CustomizeMe is a highly customizable Blogger template and SEO optimized to index your blog faster. It has been designed in a way that it can be easily customized according to your needs without having to touch the code of your template. All you need to do is to hit the "Customize" button and you are ready to start customizing your blog. Just try the template settings and be creative with the theme fonts, colors and backgrounds.<br /><div class="ssmainhide" style="clear: both; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrfOfgfASFFD-UE4a-elcWPfj0hYnHHFZHKl09pI0Ge29s4f-4dxOsJE4rK5X9dsdpmqQCE2E0ATuDFjmSyYKxYe-xXqLuir8Fd8y86AbptIIrWDye0s_1OEm3riqwT6mA9v3JR-mSBMlT/s1600/customizeme-blogger-template.png" /></div><br /><h3>Some of the Template Features include:</h3><ul><li>Both Flat and Grid Design</li><li>Sticky/Fixed Left Navigation Menu Bar</li><li>Customized Popular Post</li><li>Recent Posts</li><li>Recent Comments</li><li>Page Numbering</li><li>Expandable Search Bar</li><li>Floating Social Bar Widget</li><li>Author Bio with Image</li><li>Related Posts with Thumbnails</li><li>404 Error Page</li><li>Seo friendly</li></ul><div style="text-align: center;"><a class="demo-link" href="http://customizeme-template.blogspot.com/" rel="nofollow" target="_blank">DEMO HERE </a><br /><a class="demo-link" href="https://app.box.com/s/c8bv03v55bgrhxe29yn2" rel="nofollow" target="_blank">Download CustomizeMe Template</a><br /><a class="demo-link" href="https://app.box.com/s/94kte6rrlh2we2zod98m" rel="nofollow" target="_blank">Template with Grid Style Only</a></div><br /><h3>How to install the CustomizeMe Template </h3>1) Sign in to your Blogger blog and head to "Template"<br />2) Backup the current template by clicking the "Backup / Restore" button > "Download full template"<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="blogger template backup" border="0" height="260" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio640SyWj7Ry4G3xQSaxJHVyML4QRyXgufyjlkVxeEUl6boM5if3UDaTI1VzcIvRi-ekalEYNiR4gg_WYOTNA99Z9HZwlma_-diOhMQt-paVL0abwjBN49aWMheycKAfNb2UeWFsmOIasT/s1600/backup-restore-blogger-template.png" title="CustomizeMe Blogger Template 1" width="600" /></div><br />3) Download and open the CustomizeMe.xml file with a Notepad<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="open xml with notepad" border="0" height="183" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLTIsA0u8HkrERZD_1ohTcJtzVkR4Qylpa0TU3tSRLsW4COl-6Kj7FJxddKGBj_3BggkzWaOnJE5U5Cm_Z0o-AYwZum3fEmd2tAYN1wQsgR3_17-Q1libe2puPmKLJr2KYq_PVArRtE2IS/s1600/xml-file-open-with-notepad.png" title="CustomizeMe Blogger Template" width="320" /></div><br />4) Select all the code and to copy it to clipboard<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="select all code in notepad" border="0" height="293" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4_r7ROgj5WtfFUbTuggKgTq_RuZKAaxqaxjZdVHBnGTha-m_W4YayIE85YEcfpLzSe_0Qej7GnljETlKvC3Mb1-TnNLwLOeJ99MHTpGlVls41s_Hiydv2thB0YDx2zOzjMB61jm_HfpgJ/s1600/copy-xml-template-code.png" title="CustomizeMe Blogger Template" width="320" /></div><br />5) Go again to Template and click the "Edit HTML" button<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="blogger template, edit html" border="0" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJUOkMHz3vLO0LGj2-EMUDmrqHKYrgqJ9RloAwpiNRj7piFUZ20T73GpIruWthjD-TxF75_8D2Nyqdt3Cl3JhCNEW_tSk4aEk_ASWRQ7IMm21LnSTTnux2VBpsk84FnZQlNGHCWdVrwpog/s1600/blogger_blogspot_template_edit_html_tutorial.png" title="CustomizeMe Blogger Template" width="320" /></div><br />6) Select all the code of your current template and delete it, then paste the code that you just copied earlier<br />7) Preview your blog and if everything is ok, hit the 'Save Template' button.<br /><br />Please note that this method might delete some of your widgets, so if you want to keep any of them, just Browse for the CustomizeMe.xml file (step 2) and click on the "Upload" button (ignore the rest of the steps).<br /><br />And that's it! Now you are ready to use the <b>CustomizeMe Blogger template</b>.<br /><br /><h3>Adding menu items</h3>Go to Template > Edit HTML, click anywhere inside the code area and press the CTRL + F keys. Inside the search box, type "item 1" and hit Enter to find it - see the screenshot below<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="change blogger template html" border="0" height="285" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqh16c1WcJX1l81zhELNu6rOYVus0QspkZ7tVANmCC7wy8nBpFZN2M20iw5WwdrSDOo4VdNTjASBrOXxldAYdwzH1pknathG6QASEXnFjpklKXL1bp-Y-FbvSeaWOsXIer0YZrm9Zpy0xq/s1600/fixed-sticky-menu-customize-blogger.png" title="CustomizeMe Blogger Template" width="600" /></div><br />Change Item 1, 2, 3... with your page titles and replace "add-url-here" text with your url. Finally, click the "Save template" button to save the changes.<br /><br /><h3>Recent Posts & Comments Widgets</h3>Search (CTRL + F) for the following address and replace it with your own (you will find it twice and you must change it in both places):<br /><blockquote class="tr_bq">http://helplogger.blogspot.com</blockquote><br /><div class="separator" style="clear: both; text-align: center;"><img alt="blogger template html" border="0" height="280" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3wPZEJZesti4-sNS-GHLYd1eO_KnmbQKmGsKogeCkZ9JIavdoiJqfKpYPbkmDWiDkx_w7V5JdL-4Ylsn5UtrgdGNTnqhMceBghDvvemmA2iHUur_dgANMXwlkRPsJ-uHTKe_cZ2Jz3G2q/s1600/blogger-template-edit-widgets.png" title="CustomizeMe Blogger Template" width="600" /></div><br />Please pay attention to not have two forward slashes at the end of your address, otherwise the scripts will not be able to read the blog's feeds. Save your template after you have made these changes.<br /><br /><h3>Enabling "About the author" profile</h3>Go to "Layout" and click the "Edit" link of the "Blog posts" element. In the pop-up window that appears, check the "Show Author Profile Below Post" option and hit Save.<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="blogger author profile" border="0" height="307" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1O9YLs3z1oZDe79NH36i1__7nO0OOv4rJ517Ci5-tvPZhwrvPF7JpUZKvwBA4JVKaqngdLst0hBoHeG8skicQ2Iljpuy-ChL7i9io7YmVVHvGsrjHaAWi2LdMKups7cf8tXUGfRl9as14/s1600/show-author-below-posts.png" title="CustomizeMe Blogger Template" width="320" /></div><br /><h3>Changing colors and fonts in the CustomizeMe Template</h3>Go to Template > click the "Customize" button. Here you can do lots of cool stuff, like change all the default fonts, text and background colors - basically, anything you want.<br /><br />Some of the customizations that you can make:<br />Add a Background image: <b>Background</b> > Upload Image > Browse and hit Done<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="blogger template designer, backgrounds" border="0" height="292" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSeuT-FzFueB5rOlBIpRt4r15lhOu97KqsrzLQuNRWXzUOnBmfGACfSLyhVWywoGFqTmVEC8yw43zq3kzcvJcibljwF4W3m04pVYMbLdZ-kMSc1qs0poxZQPxSxGcYNt8bmxYst3_1TIyO/s1600/blogger-template-designer-upload-background.jpg" title="CustomizeMe Blogger Template" width="600" /></div><br />Change Fonts, Texts and Background Colors: go to <b>Advanced</b> > select the Element that you want to customize > select your favorite colors and fonts. <br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="blogger advanced designer" border="0" height="283" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyC_-swR9uYqZUME3NtrhAhbWv9ejePGO5NodfwiTG8ANZzQyzvFFo0vom_PS3abRlzy3N8RywPPVuHmW89llqWf2Nc5QD7ghKYgSn1OmQntJKqc24gMZEc6tOs3AHyV5prMLpViiO-DnQ/s1600/blogger-template-designer-advanced.png" title="CustomizeMe Blogger Template" width="600" /></div><br />To remove a color, just type "transparent" inside the text box as you can see in the above screenshot (4).<br /><br />Once you're satisfied with the result, hit the "Apply to blog" button and view your blog. That's it!<br />Have fun customizing it ;)

CustomizeMe Blogger Template (Helplogger Style)

CustomizeMe is a highly customizable Blogger template and SEO optimized to index your blog faster. It has been designed in a way that it can...

Read more »