All Latest Earning Stuff: Theme-editing

<b>This article is about how to edit your theme in Blogger.<br /><br />It supports many other articles on this site, which suggest specific theme changes needed to solve particular problems.    Note that until early 2017, themes were called templates.   In practise, "edit your template" and "edit your theme" mean the same thing.</b><br /><b><br /></b><b><br /></b> <br /><div style="clear: both;"></div><a name="more"></a><br /><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNQG6FR4sWnBOGdgmlTWWpNNdrmYKa3SglEU3eTLIq9U5hVY9ucg4vxfl6-0QHxlEdD4QlWvqk9FdGRhmbA-k53aM5hdsvxRS0b57wu94GyGcmhvQELtzCllbzXYWv7ArG5WUZtoTw59s/s1600/how-to-edit-your-template-theme-blogger.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="212" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNQG6FR4sWnBOGdgmlTWWpNNdrmYKa3SglEU3eTLIq9U5hVY9ucg4vxfl6-0QHxlEdD4QlWvqk9FdGRhmbA-k53aM5hdsvxRS0b57wu94GyGcmhvQELtzCllbzXYWv7ArG5WUZtoTw59s/s320/how-to-edit-your-template-theme-blogger.png" width="320" /></a></div>In Blogger, a theme is a file which controls how your blog are displayed on the screen when someone reads it using a browser or a mobile device.   Themes used to be called templates, but were renamed "themes" in early 2017.<br /><br />Previously, I've looked at <a href="http://blogger-hints-and-tips.blogspot.com/2010/06/editing-your-blogs-template-advantanges.html">whether it's a good idea to edit your Blogger theme / template</a> or not.   Because themes are the same thing as templates, the same principles apply to editing your theme.<br /><br />For many people, editing the theme is simply something which they need to do, because it's the only way to do what they want (<a href="http://blogger-hints-and-tips.blogspot.com/2010/04/removing-attribution-gadget-from.html">remove the attribution</a>, <a href="http://blogger-hints-and-tips.blogspot.com/2010/03/displaying-gadget-only-on-home-page.html">show a gadget on the homeppage only</a>, <a href="http://blogger-hints-and-tips.blogspot.com/2010/03/putting-facebook-share-this-badge-on.html">add a Facebook like button to posts</a>, etc).   And Blogger is often preferred because it allows users to edit aspects of their theme which other blogging tools done allow changes to.<br /><br /><br /><h2>Overview - how to edit your blog-theme</h2>In general, the process to edit your theme is:<br /><ul><li>Make a back-up copy of the theme, as it is now</li><li>Open the theme-editor</li><li>Make the change</li><li>Check that it works, and if not, go back to the previous theme.</li></ul>The following sections have more details about each of these steps.<br /><br /><br /><h2>How to make a backup copy of your current theme</h2><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTM00H0x3EmhLF16P_ergQeD61hpiS91Dz9RmZ0p7W7ri2B9JUUO9VyIqL1KqYfxHrnsgZD6r6o8GVuZTTHp5AumNBXgy0XJfbuGou13CCAf1fPHIVEO7CP6tpG6CFYfrvMbedAkH3H2uW/s126/backup-icon.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/AVvXsEjTM00H0x3EmhLF16P_ergQeD61hpiS91Dz9RmZ0p7W7ri2B9JUUO9VyIqL1KqYfxHrnsgZD6r6o8GVuZTTHp5AumNBXgy0XJfbuGou13CCAf1fPHIVEO7CP6tpG6CFYfrvMbedAkH3H2uW/s126/backup-icon.png" /></a></div>I know:   It's tempting to skip this if you're only making a small change.   I even skip it myself sometimes.   And it's not needed if this is the first time you've ever customised your theme - because you can recover from problems by just reinstalling the standard theme.<br /><br />But <b>if you would be upset to lose any theme changes you made earlier</b>, or if the change you are making now is <b>not</b> minor, then I strongly recommend making a copy before you start, just in case.  To do this<br /><ul><li>From the Blogger dashboard, go to the <b>Themes</b> tab</li><li>Click the <b>Backup / Restore </b>button near the top right of the dashboard</li><li>Click the <b>Download Theme</b> button, and <b>then wait</b> while the file downloads.</li><li>After the download has finished, find the place <b>where your computer puts downloaded</b> files.</li><li><b>Find</b> the file that was just created,</li><li><b>Rename</b> it to something sensible<br /> (eg <i><u>MyBlog theme backup before change 31 Jan 2012.xml</u></i>)</li><li>Move the file to <b>somewhere safe</b>: usually somewhere on your computer is fine - or you make like to upload it to somewhere like Google Docs, to be absolutely certain that it won't get lost.</li></ul><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixdbP3HOQKb7L1L2G6B4T-ICFjeyJWba3Y95ekcOMuzhFJSFpHq6Aiwace1-rC5GESiWLfTADkYniFYonXMY_S8Mr1_WoprZIG3RbxngLq_dS2CQBXKMpyLdbZhkDek5yxP4ikcYrf5wM/s1600/theme-backup-restore-screen-example.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="386" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixdbP3HOQKb7L1L2G6B4T-ICFjeyJWba3Y95ekcOMuzhFJSFpHq6Aiwace1-rC5GESiWLfTADkYniFYonXMY_S8Mr1_WoprZIG3RbxngLq_dS2CQBXKMpyLdbZhkDek5yxP4ikcYrf5wM/s640/theme-backup-restore-screen-example.PNG" width="640" /></a></div><br /><h2>How to open Blogger's theme editor</h2><ul><li>From the Blogger Dashboard, to to the <b>Themes</b> tab</li><li>Click <b>Edit HTML</b></li></ul><br />Now you have your theme open in the theme editor, the next challenge is making changes successfully - or backing them out if your changes were not successful.<br /><br /><br /><h2>How to make the change to your theme</h2><ul><li><b>Find the code</b> you need to change:<br />See <a href="http://blogger-hints-and-tips.blogspot.com/2017/03/searching-for-widgets-or-text-in-blogger-theme-editor-template-editor.html" target="">Searching for text in Blogger's theme editor</a> if you need help with this.<br /><br />Note:   some of the older "how to" articles say to make sure that the Expand Widgets checkbox<b> off or on.   </b><a href="http://blogger-hints-and-tips.blogspot.ie/2013/04/how-to-tick-expand-widgets-checkbox-in.html">This checkbox has now been removed</a> from Blogger's theme editor.    If the instructions you are following says to leave it "off", then you should just be able to follow them as is.    However if you are told to turn Expand Widgets off,  then you need to find the correct part of the code by searching for the widget-id or section name, and then "unfold" that to see the complete code.   </li></ul><ul><li><b>Make the change </b>(This article doesn't go into the principles of theme design, there are plenty of other articles and websites about that: I'm assuming that you know what you need to do).</li></ul><ul><li>Click the <b>Preview theme</b> button<br />If Blogger can make sense of the change you made, then view of your blog is shown in the theme-editing area, with what looks like your blog's homepage.   It's not a real copy of your blog (the links won't work, the spacing might not be quite the same), but it shows you how the home-page will look with your theme edits.<br /></li><li>Do a quick check that the screen looks right - for some changes you even be able to tell if the change has been successful just from this preview screen.<br /><br /><b>However:  </b>If the new window/tab shows an error message like</li></ul><blockquote class="tr_bq"><i><span style="background-color: white;">Your theme could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly. <br/> XML error message: The element type "div" must be terminated by the matching end-tag "</div>".</span><span style="background-color: white;">Error 500</span></i> </blockquote><blockquote class="tr_bq">or</blockquote><blockquote class="tr_bq"><i>Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly. <br/> XML error message: Element type "b:widget" must be followed by either attribute specifications, ">" or "/>".</i></blockquote><blockquote class="tr_bq"> then <b>Blogger has not been able to understand the change you made</b>.    Sometimes the error message gives a clue about what's wrong, although it can be misleading.   Check that you made the change correctly - fix any errors and click Preview again.  If it still doesn't work, ask for help from the place that suggested the change you are making </blockquote><blockquote class="tr_bq">.</blockquote><ul><li> Once you are happy that the preview screen looks OK, click the <b>Save theme </b>button.</li></ul><br /><br /><h2>How to test your theme change</h2><div class="separator" style="clear: both; text-align: center;"><a href="http://upload.wikimedia.org/wikipedia/commons/8/85/Ppbc_icon_checklist.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="http://upload.wikimedia.org/wikipedia/commons/8/85/Ppbc_icon_checklist.png" /></a></div>Some changes can be checked very easily, sometimes from the preview screen.<br /><br />But if your change isn't visible on the front screen, you must check it after you have applied it.    What to verify depends on your them type, what the change was, and what other features (eg <a href="http://blogger-hints-and-tips.blogspot.com/2012/01/page-gadget-menu-bar-for-your-blog-with.html">the page-gadget as a menu</a>, the archive widget, ) your blog uses.   You need to <b>decide what to test</b>, based on all of these.<br /><br />At least, I always click on and check on these things when I've made a major theme change:<br /><ol><li>the home page</li><li>the items in the menu bar</li><li>a label value</li><li>an archive widget entry</li><li>custom-search-engine results</li><li>comments</li></ol><br />And if I'm being particularly reader-focussed, I'll also check these things in <b>more than one browser</b>:   usually in the current version of Internet Explorer, Firefox and Chrome.<br /><br /><br /><h2>What to do if your theme change wasn't successful</h2>If you find that the theme change has caused problems, then ou have have a choice to make:<br /><blockquote class="tr_bq"><b>Can you and your readers  live with the problems on your blog for "a while"</b>, while you look for other solutions? </blockquote><blockquote class="tr_bq">Or </blockquote><blockquote class="tr_bq"><b>Do you need to remove the change right now</b>, so visitors can use your blog as it was while you solve the issues.</blockquote><br />There is no right answer to this question:   It's a personal decision, based on the blog, and your readers.   But if you do need to remove the theme change, here's how to do it:<br /><ul><li>Open the <b>Themes</b> tab</li><li>Click the <b>Backup / Restore button </b>near the top right of the dashboard</li><li>Click <b>Choose File</b> and find the file that you downloaded earlier</li><li>Click <b>Upload</b>.</li></ul><br />It is best to restore your theme <b>before you have changed any gadgets</b>.  If you get a message about widgets being missing, then it means that the gadgets associated with your blog are not the ones referred to in the theme.   If this happens, you need to decide whether to deep or delete any "orphaned" ones, and may need to check their settings again.<br /><br /><br /><h2>Making complicated changes</h2>If your theme may need a lot of "surgery" while you figure out how to make a change, then it may be a good idea to<a href="http://blogger-hints-and-tips.blogspot.com/2010/08/planning-changes-to-your-blog-in.html"> build a private test-blog to do the work in</a>, and only copy the contents into your "real" blog theme when you are certain that you've got it correct (or correct-enough).<br /><br /><br /><br /><hr /><h2>Related Articles</h2><a href="http://blogger-hints-and-tips.blogspot.com/2010/06/editing-your-blogs-template-advantanges.html">Advantages and disadvantes of editing your Blogger theme</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2017/03/searching-for-widgets-or-text-in-blogger-theme-editor-template-editor.html">Finding things while editing in your blogger theme</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2010/09/adding-new-css-formatting-rule-to-your.html">Adding CSS formatting rules to your blog, without editng the theme</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2010/04/removing-attribution-gadget-from.html">How to remove the "powered by Blogger" attribution from designer-theme blogs</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2010/03/displaying-gadget-only-on-home-page.html">Putting a gadget on the homeppage only</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2010/08/planning-changes-to-your-blog-in.html">Planning changes to your blog - without readers seeing what you are doing</a>

How to edit your Theme in Blogger

This article is about how to edit your theme in Blogger. It supports many other articles on this site, which suggest specific theme changes ...

<b>This article explains how to find things (gadgets or text) in the Theme editor in Blogger.</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/AVvXsEgVpN7edZTOUCba2dD7pRgtH6eML81f_17BoGqi83Hyd1F882yKc_h__TObAgS3KdIeFySd21bBJexDofjhnD5AhPtdD9rL0SASemdLHrMw5D5P5gIOJreaVCbQiVzraMAGZc8lqkJJjjc/s1600/edit-blogger-template-theme-control-instructions.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="228" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVpN7edZTOUCba2dD7pRgtH6eML81f_17BoGqi83Hyd1F882yKc_h__TObAgS3KdIeFySd21bBJexDofjhnD5AhPtdD9rL0SASemdLHrMw5D5P5gIOJreaVCbQiVzraMAGZc8lqkJJjjc/s320/edit-blogger-template-theme-control-instructions.png" width="320" /></a></div>Very often when you are editing your Theme in Blogger, you need to find particular text. <br /><br />For example, you might need to find all places where  "</head" appears, so you can add something to the very next line.   Or you might want to find the code for a particular gadget (aka widget), so that you can put a conditional-formatting statement around it.<br /><br />There are now two tools you can use to find items in the Theme editor: <br /><br /><ul><li>The Jump to Widget tool if you are looking for a Widget</li><li>The Find bar if you are looking for a text string.</li></ul><br />More information about using each of these is given below.<br /><br /><br /><h2>How to use the Jump to Widget tool</h2>First, you need to find out the exact name for the widget / gadget that you need to find the code for.    (See <a href="http://blogger-hints-and-tips.blogspot.com/2012/04/finding-gadget-id-value-for-widget-in.html">Finding a gadget's name</a> for a tip on how to do this).<br /><br />Then, inside the Theme editor (see Editing your Blogger Theme for how to get there), just choose the name you are looking for from the drop down list .   (Click the arrow beside Jump to Widget to see the items in the list):<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie0hnFJi-lwYny3q-RmRNBM_1iYNs_-yVMRwWDVhHL438IAkcV29LVeer8leJBwPen_TKdXuKxN8B0L2bp1LBHDxn2lGdBDjiu87QfuOeDzkHtqdVJEj28w1ZIT0SVq2YZrYaPX-c4m0c/s1600/find-gadget-code-in-theme-template-editor-using-jump-to-widget.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="310" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie0hnFJi-lwYny3q-RmRNBM_1iYNs_-yVMRwWDVhHL438IAkcV29LVeer8leJBwPen_TKdXuKxN8B0L2bp1LBHDxn2lGdBDjiu87QfuOeDzkHtqdVJEj28w1ZIT0SVq2YZrYaPX-c4m0c/s640/find-gadget-code-in-theme-template-editor-using-jump-to-widget.png" width="640" /></a></div><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: left;">Once you have chosen an item from the list, the template editing window moves to the place where this gadget is listed in the theme code.   It usually places it in the 2nd line of the editing window.  For example, in the picture below, I chose to jump to the Followers1 gadget.</div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHWgi3iAfZPKMeYGrCOXYnGfB6XgnR4GNdAsdKHEMtkeXH1Rqq00Onf6mgJu5aqEt_0YQ6u3_yVpXH_kwcQr5X1oouBuOEf39R0gLqHVimsvzLsyORNqOc4Y5VVfw6w8JOKRyg9002joI/s1600/after-jump-to-gadget-choise-it-is-in-second-line-of-template-editing-window.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="172" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHWgi3iAfZPKMeYGrCOXYnGfB6XgnR4GNdAsdKHEMtkeXH1Rqq00Onf6mgJu5aqEt_0YQ6u3_yVpXH_kwcQr5X1oouBuOEf39R0gLqHVimsvzLsyORNqOc4Y5VVfw6w8JOKRyg9002joI/s640/after-jump-to-gadget-choise-it-is-in-second-line-of-template-editing-window.png" width="640" /></a></div><br /><br /><br /><h2>How to find any text in the Theme editor</h2><h4><span style="font-weight: normal;">Click anywhere </span>inside<span style="font-weight: normal;"> the Theme-editor window:   this is the rectangle which shows the code in your Theme.    (It's important to click inside here first, or the next command will work differently)</span></h4><h4><span style="font-weight: normal;">On your keyboard, </span>press Ctrl/f<span style="font-weight: normal;">:   to do this, hold down the control (ctrl) key, and press the  </span>f <span style="font-weight: normal;">   key.</span></h4><h4><span style="font-weight: normal;">A </span><span style="font-weight: normal;">search bar<span style="font-weight: normal;"> will now show in the top right corner of the theme editing window - like this:</span></span></h4><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZCSiE_fhuzRKClD3q9MOmcmIXc2nzM5_X-CbWT2iXOFpqw_3kV5LRixCUQtVaHIT8p_d9ZcGXBzXerQrJWMU0QbBb0WegbwNKh3K5mLJu7pNqFVnjgW6beX-lHo0hvNLKMY7wQ3lqvIc/s1600/use-text-search-bar-to-find-words-in-template-editor.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="182" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZCSiE_fhuzRKClD3q9MOmcmIXc2nzM5_X-CbWT2iXOFpqw_3kV5LRixCUQtVaHIT8p_d9ZcGXBzXerQrJWMU0QbBb0WegbwNKh3K5mLJu7pNqFVnjgW6beX-lHo0hvNLKMY7wQ3lqvIc/s640/use-text-search-bar-to-find-words-in-template-editor.png" width="640" /></a></div><h4><span style="font-weight: normal;">Type the text </span><span style="font-weight: normal;">you want to find into the Search bar and </span><span style="font-weight: normal;">press Enter</span><span style="font-weight: normal;">.   </span></h4><h4><span style="font-weight: normal;">The cursor will move to the first time that the text appears.   </span></h4><h4><span style="font-weight: normal;">To find the next place where the text appears, click into the Search-bar and press Enter again </span></h4><h4><span style="font-weight: normal;">Repeat as often as you need to find the correct place.  </span></h4><div>When you are finished with searching, click the X button at the right hand side of the Search-bar to close it.</div><h4><br /></h4><h2>How to see the details inside a gadget or other piece of code</h2><div>You can now find any text that you need to find in Blogger's theme editor (previously called the Template editor).   </div><div><br /></div><div>But if you look carefully at the Theme-editing window you will see that there is sometimes a horizontal arrow in the left-hand side of the code, and that the line numbers jump - like this:</div><div><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0O2dKa73gV1xz2ttu9L-PzUlJRjuvFBmYkqS6i5KORiw95mSXhyL-uAWgOBuLE-N_TU1APf03qXp6uVvS06rzy07sDiTzDcuhcMw-NJPi1EAVYRzhMVeLcsLaR3LO24J-ZdQ-Kxa5ilo/s1600/expand-arrow-in-theme-editor-replaces-expand-widgets-checkbox.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="184" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0O2dKa73gV1xz2ttu9L-PzUlJRjuvFBmYkqS6i5KORiw95mSXhyL-uAWgOBuLE-N_TU1APf03qXp6uVvS06rzy07sDiTzDcuhcMw-NJPi1EAVYRzhMVeLcsLaR3LO24J-ZdQ-Kxa5ilo/s640/expand-arrow-in-theme-editor-replaces-expand-widgets-checkbox.png" width="640" /></a></div><div><br /></div><div><br /></div><div>This happens because some of the detail is hidden, to make the theme-code easier to work with.</div><div><br /></div><div>But you can use the arrow (called an expand-arrow) to see it all:  Click on it and you will see that it changed to a down arrow, and that the code window now shows some extra lines which were previously hidden.</div><div><br /></div><div>You won't always need to do this:   some template edits just say to find the code for a gadget and to put extra instructions before and after it.   But others need you to open up the gadget code and make changes inside.</div><div><br /></div><div><br /></div><div><br /></div><div><br /></div><div><b>Job done!  </b>You can now find gadget and text items inside your Blogger Theme - so you can continue editing it.</div><br /><br /><hr /><br /><h2>Related Articles</h2><a href="http://blogger-hints-and-tips.blogspot.com/2012/02/how-to-edit-your-blogger-template.html">How to edit your Theme in Blogger</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2010/03/displaying-gadget-only-on-home-page.html">Applying conditional formatting to widgets</a><br /><br /><a href="http://blogger-hints-and-tips.blogspot.com/2012/04/finding-gadget-id-value-for-widget-in.html">Finding the widget-id for a gadget in Blogger</a><br /><br />

How to find things in Blogger's Theme editor

This article explains how to find things (gadgets or text) in the Theme editor in Blogger. Very often when you are editing your Theme i...