eARNING TRICK: Post Editor

Showing posts with label Post Editor. Show all posts

Saving a post if Blogger's Publish button doesn't work

<div class="separator" style="clear: both; text-align: center;"></div>This article is about how you can save a  post even if Blogger's Publish button won't let you save your work. <div style="clear: both;"></div><a name="more"></a> <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/AVvXsEgSJrn6oYxi6lxojWq_DMPGOHku5m_koUq2BiNxXllmqsDsehpMVHkAhoEzfa1MvO8ry3VMP91j77r4AmCugI_rV71-ircSa1Rw3JwsPf_soOaHNMFmcq_TTGcuNmS5Zz3lgwDoExUPZ_RC/s1600/post-editor-cannot-save-recovering-work.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" data-original-height="1256" data-original-width="1600" height="251" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSJrn6oYxi6lxojWq_DMPGOHku5m_koUq2BiNxXllmqsDsehpMVHkAhoEzfa1MvO8ry3VMP91j77r4AmCugI_rV71-ircSa1Rw3JwsPf_soOaHNMFmcq_TTGcuNmS5Zz3lgwDoExUPZ_RC/s320/post-editor-cannot-save-recovering-work.png" width="320" /></a></div>Imagine you've been working on a Blogger post for several hours.    It's finally ready: you've got the wording exactly right, everything is formatted with bold, italics and bullet-points, your pictures and links are all correct, etc.    But then your internet connection stops working.   Or you click the Publish button - and get a message like  "Post cannot be saved due to HTML errors".   You can't work out how fix the problem, and you need to stop working on it now! This may seem like a disaster - hours of work wasted. But luckily there's a very easy way to save your work, and tools to help you diagnose problems. <div style="clear: both;"></div><h2>Saving your work and recovering it later</h2><h3>How to save the post that you have written</h3><ul><li>Switch to HTML mode (this is a tab at the top left corner of the editing window.  </li></ul><div class="separator" style="clear: both; text-align: center;"></div><ul><li>Select all the text in the window (Ctrl / A does this in most browsers)</li></ul><ul><li>Copy it.</li></ul><ul><li>Go to somewhere outside of Blogger that you can save text: Perhaps a text-editor like Notepad, or a plain-text formatted email message.   Even a word processor like MS Word can work, provided you remember to save your file as text.  Or you may want to use a source code editor - see the section below about fixing code errors.</li></ul><ul><li>Paste in the contents that you copied earlier.</li></ul><ul><li>Save the file.</li></ul><ul><li>Switch to Compost mode (this is optional - I usually recommend it so that you don't get confused the next time you come back to Blogger and see the "funny codes")</li></ul><ul><li>Exit the Blogger post-editor by closing the window - say "ok" if the system asks if you really want to leave the page without saving. </li></ul><div> </div><h3>Recovering your work later on</h3>This is the reverse of what you did to save the work:   open the text file, copy the contents, go to Edit HTML mode in Blogger and paste them in. You should then be able to go in to Compose mode, and see the post as it was when you stopped working on it. At this point, if the HTML is ok and you have fixed the issues with your internet connection, you can Publish your post. <h2>Fixing problems with your HTML</h2>If there are problems with the HTML, then you need to find them, and fix them.    Usually, fixing them is easy, once you've found them - but the finding can be  hard if you have a large and complicated post. Sometimes Blogger will tell you what the problem with your HTML is, and show where it's happening by putting the "wrong" code into reverse text when you try to Publish it:  this makes it easy to see if you scan through the HTML for the post. However sometimes Blogger doesn't show you where the problem is - I've noticed this more often recently when using IE 9.0 on complex posts.   Instead you get an error message like <blockquote>Your HTML cannot be accepted: Closing tag has no matching opening tag: SPAN </blockquote>or whatever the specific problem is, but none of your code is highlighted. This can make it hard to track down and fix the problem. A low-tech way to find the problem is to paste the code from the saved file into Blogger's Edit HTML window in smaller sections, and Publish to work out if the problem is in the code that you just pasted:  if everything in the first section of code can be published, but there is an error message for the next part, then you know what section the error is in. A major disadvantage of this approach is that you need to publish the post many times, and the first time it will definitely not be "finished".   this is OK if you <a href="http://blogger-hints-and-tips.blogspot.com/2010/12/get-your-posts-right-before-you-publish.html">use a pre-publication blog to prepare your posts</a>, but if you don't do that, it can cause your <a href="http://blogger-hints-and-tips.blogspot.com/2010/08/why-rss-subscribe-to-posts-is-important.html">RSS subscribers</a> to form a bad impression of the quality of your posts. A better option is to use a source-code editor like <a href="http://notepad-plus-plus.org/">Notepad++</a> (free, Windows only) or <a href="http://www.altova.com/xml-editor/">XMLSpy</a> (30 day free trial, far more complex code editor), which has tools to help you find and fix problems with your code. <hr /><h2>Related Articles</h2><a href="http://blogger-hints-and-tips.blogspot.com/2010/12/get-your-posts-right-before-you-publish.html">Get your posts right before you publish them for all to see</a> <a href="http://blogger-hints-and-tips.blogspot.com/2010/08/why-rss-subscribe-to-posts-is-important.html">What is RSS and why it matters for your blog</a> <a href="http://blogger-hints-and-tips.blogspot.com/2010/05/getting-html-code-to-put-picture-into.html">Getting the HTML to put a picture into your blog</a> <a href="http://blogger-hints-and-tips.blogspot.com/2011/01/putting-text-and-pictures-side-by-side.html">Putting text and pictures alongside each other</a>

Saving a post if Blogger's Publish button doesn't work

This article is about how you can save a post even if Blogger's Publish button won't let you save your work. Imagine you've be...

December 31, 2016

Getting the HTML code to put a picture into your blog's sidebar, header or footer

This article explains how to use Blogger's Post Editor to get the HTML code that you need to put a picture into your sidebar (or header or footer, or anywhere else a gadget can go). <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/AVvXsEiXtx2Gs3Kq5ZsTHa83pUwDRr5z6f0fViGqcpHghcuVnVrcyrR_L2t36muaUCTGPquKttftICICuUIM_lG9mcKRgYDlBbMeDFh075SncRYldAac7ajV7tncT5-5W3Re9wyb_BOn6OZ1tE10/s557/get-html-code-for-an-image-file.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="211" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXtx2Gs3Kq5ZsTHa83pUwDRr5z6f0fViGqcpHghcuVnVrcyrR_L2t36muaUCTGPquKttftICICuUIM_lG9mcKRgYDlBbMeDFh075SncRYldAac7ajV7tncT5-5W3Re9wyb_BOn6OZ1tE10/s320/get-html-code-for-an-image-file.png" width="320" /></a></div>The Picture gadget is the normal tool for <a href="http://blogger-hints-and-tips.blogspot.com/2010/01/insertng-picture-as-gadget.html">adding a picture to your blog's sidebar</a>. But sometimes you want more control over the picture size or behaviour.  Eg, you may want to have two pictures very close to each other and guarantee that they're the same size. To do this, you need to get the HTML code for the picture, and then put it into your blog as an HTML-gadget.  Fortunately, Blogger's Post-editor make it very easy to do this without writing the code yourself. <div style="clear: both;"></div> <h2>Using the Post Editor to generate the HTML for a picture</h2>1  Start a new Post  (you're not ever going to publish this:  it's just a work-area) 2  Don't enter any text:   just use the Picture icon on the toolbar to add a picture.   Blogger will prompt you to upload the picture, or to choose it from a Google-album-archive or to enter its URL:  add the picture the way that you usually would. 3  Switch to the HTML tab   (top left of the editing window). This show you the HTML code for displaying the picture, as it is set to display in the Post (depending on the picture-settings you've chosen, it may be centered or right/left aligned, and the size may vary). 4  Copy the HTML. 5  Switch back to Compose, so that you don't get confused the next time you edit a post. 6  Return to the list of posts:  you may be asked if you want to leave the page without saving - the answer is Yes.  Or you may have a new draft-status post, which you can delete. Job Done!   You now have some HTML code which you can paste into an HTML/Javascript gadget, or anywhere else that you may need it - even into another post that you are editing in a separate window, or into a totally different tool. <hr /><h2>Related Articles</h2><a href="http://blogger-hints-and-tips.blogspot.com/2010/11/stopping-pictures-on-your-blog-from.html">Stopping pictures on your blog from being "clickable"</a> <a href="http://blogger-hints-and-tips.blogspot.com/2010/01/inserting-picture-into-blog-post.html">Inserting a Picture into a blog Post</a>. <a href="http://blogger-hints-and-tips.blogspot.com/2010/10/putting-html-code-from-third-party-into.html">Putting 3rd party HTML into your blog</a> <a href="http://blogger-hints-and-tips.blogspot.com/2011/03/centering-gadgets-on-on-your-blog.html">Center-align the gadgets on your blog</a> <a href="http://blogger-hints-and-tips.blogspot.com/2010/10/hosting-pictures-outside-of.html">Hosting pictures outside of Google / Picasa</a> <a href="http://blogger-hints-and-tips.blogspot.com/2010/01/insertng-picture-as-gadget.html">Inserting a picture into your blog as a gadget</a>

Getting the HTML code to put a picture into your blog's sidebar, header or footer

This article explains how to use Blogger's Post Editor to get the HTML code that you need to put a picture into your sidebar (or header ...

October 06, 2016

Showing your oldest blog-post first - and the rest in reverse order.

Blogger doesn't have an option to display your posts in reverse order - so that the oldest post is first, and the most recent post is last.   But this article describes displaying your posts in this way by manipulating their post dates.  And it links to an article about some other possible options. <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/AVvXsEgQDa-n-h8VIOcn2uWfYcRfvWn5j1wh1lFhhfnkeJDG2nY_mp7ryALJrJqb7ZylVa9nH5kuRDNPJmoQO40__T4MO9nDWWa7F5ZI-UlOggXhgMmefv-5mXJseAAaJlbZO4xSgh_qgbbqR2A/s1600/reverse-order-of-posts-in-blogger-home-page-control-dates.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="171" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQDa-n-h8VIOcn2uWfYcRfvWn5j1wh1lFhhfnkeJDG2nY_mp7ryALJrJqb7ZylVa9nH5kuRDNPJmoQO40__T4MO9nDWWa7F5ZI-UlOggXhgMmefv-5mXJseAAaJlbZO4xSgh_qgbbqR2A/s200/reverse-order-of-posts-in-blogger-home-page-control-dates.png" width="200" /></a></div>Previously I've discussed the options for <a href="http://blogger-hints-and-tips.blogspot.com/2010/01/setting-what-goes-on-home-page.html">giving your blog a home page.</a>  One option is to organise the post-date for each of your posts, so that you control the order posts are displayed in. This is easy enough to do, although there are a couple of risks that you need to be aware of as discussed below. <div style="clear: both;"></div><h2>Blogger Posts and the Post-date</h2>Each Post in your blog has a date-time value, which is called its "post-date".   Normally , this is set to the date/time when you publish the post for the first time.  But you can <a href="http://blogger-hints-and-tips.blogspot.com/2009/12/changing-date-for-post.html">change the post date for any post</a>, and you can do this either when you publish it first, or later on. The post-date is important because it controls the order that posts are shown in: <ul><li>The post that appears first when a reader visits your blog is the one with the most-recent Post-date.</li></ul><ul><li>If you have more than one post-per-screen, then the next-most-recent post is on the screen underneath the first one.  And then the second-next-most-recent, etc.</li></ul> When a reader is looking at any post, and they click Newer-Posts or Older-Posts, the post-date is used to decide what posts to show on the next screen. This means that you can make your posts appear in the order than you wrote them (ie first post first, second post second, etc) by changing the Post-date so that: <ul> <li>your first post has the most-recent post-date, </li><li>your second post has the next-most-recent-date, </li><li>your third post has the third-most-recent poste date</li><li>etc </li></ul> An alternative approach is to just <a href="http://blogger-hints-and-tips.blogspot.com/2010/03/making-one-post-always-come-up-first.html">make one post always appear first,</a> and let the other posts appear in the order that you posted them. <div> </div> <h2>How to make your posts appear in reverse order, using dates</h2>1  Give your first Post a post-date (eg today), AND remember that date. 2  Give all other posts (even ones that you write next week, or next year) a post-date that is earlier than the post-date you picked in Step 1. <ul><li>If you want your posts is strictly reverse order, you need to give each one a date that is earlier than any existing post.  This is quite easy:  just look at the list of posts in Posting > Edit Posts and scroll to the bottom of the list to see the oldest date used so far. </li></ul> 3  Turn off the post-date display on your posts (since the post-date won't make sense, because you're manipulating the dates). <ul> <li>To do this, go to the Layout tab.  </li><li style="font-weight: normal;">Choose Blog-posts (edit).    </li><li style="font-weight: normal;">Un-tick the date under "Post Page Options". </li></ul> 4  Remember to make the same date change for every post you write from now on. Also, if it might be relevant for your readers to know when you wrote a post, make sure that you always manually put the date into each post. <h2>Risks of this approach</h2>If you follow this approach, you will give a far-in-the-past date to pages that you never want to appear first.  There is a risk that Google might convert the data behind older posts at some time.   If your post-dates get too far into the past, then it's possible that they might not cope well this.   This could be for reasons that seem logical, or because of things that are totally to do with the internal workings of Blogger's database, and make no sense to you at all. Also, be aware that Google might choose to force the post-date to appear on posts at some time in the future.  At the moment, they don't:  it's your choice.   But you cannot guarantee that they won't change their minds about this, one day.   (Personally I think they probably won't, and I've built a couple of "real" websites that make use of the technique described here.   Just remember it's not guaranteed.) <h2>An Alternative Approach</h2>Adam of <a href="http://too-clever-by-half.blogspot.ie/2012/03/reverse-chronological-blog-post-order.html" target="_blank">Too-Clever-by-Half</a>  has suggested a totally different way to <a href="http://too-clever-by-half.blogspot.com/2010/05/first-blog-post-order.html">display your posts in reverse order</a>.   I haven't used it, but think that it has a lot of potential in some situations, provided you are comfortable using Yahoo pipes and RSS feeds to display things on your blog. He has also recently shared <a href="http://too-clever-by-half.blogspot.com/2012/02/easier-mostly-better-mostly-way-to.html" target="_blank">another approach he found</a>, which uses a script to manipulate elements within Blogger, and so is more robust than his first approach. <hr /><h2>Related Articles</h2><a href="http://blogger-hints-and-tips.blogspot.com/2009/12/changing-date-for-post.html">Changing the post date for any post</a> <a href="http://blogger-hints-and-tips.blogspot.com/2010/01/setting-what-goes-on-home-page.html">Giving your blog a home page</a> <a href="http://blogger-hints-and-tips.blogspot.com/2010/03/displaying-gadget-only-on-home-page.html">Using a gadget instead of a post as your home page</a>   <a href="http://blogger-hints-and-tips.blogspot.com/2010/01/controlling-what-goes-on-home-page.html">Stopping certain pages from ever appearing on the home page</a> <a href="http://blogger-hints-and-tips.blogspot.com/2010/04/blogs-blogger-bloggers-posts-pages-and.html">Blogs, Blogger and blogger, Posts, Pages and Screens - understanding how blogger works</a>.

Showing your oldest blog-post first - and the rest in reverse order.

Blogger doesn't have an option to display your posts in reverse order - so that the oldest post is first, and the most recent post is la...

October 01, 2016

How to remove the numbers in blogger post URL's

This article looks at the numbers that are in web-page addresses created by Blogger, what they mean and how you can influence them. <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/AVvXsEh71lN0FakmA09EAobOr35n6WS6AaqFEucOV3KFULRhT4ZtwJ0DDKYSRnaEOGWu3G9wjBS92bZ36KwxjH6DHw5debv7wPPjG5E2Y-hwdHs2Tdz47QikzY59FZiMdCfe_9WeoBoDYhTxHUid/s313/remove-numbers-blogger-post-url.png.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img alt="no symbol over digits section of blog-post website address" border="0" height="154" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh71lN0FakmA09EAobOr35n6WS6AaqFEucOV3KFULRhT4ZtwJ0DDKYSRnaEOGWu3G9wjBS92bZ36KwxjH6DHw5debv7wPPjG5E2Y-hwdHs2Tdz47QikzY59FZiMdCfe_9WeoBoDYhTxHUid/s200/remove-numbers-blogger-post-url.png.png" title="Removing the numbers from your post URLs" width="200" /></a></div>When you first publish a post, Blogger assigns a permanent web-address (aka an URL or a permalink) to the post.  I've previously explained how you can <a href="http://blogger-hints-and-tips.blogspot.com/2012/07/Control-words-used-for-post-urls-in-blogger.html">control the words used in this hyperlink</a>. A common question from people who are researching SEO for their blog is "how do I get rid of the numbers in the post-URL?". Unfortunately the answer is not as straighforward as most people hope for. <h2>Numbers near the start of Blogger URLS</h2>As described in <a href="http://blogger-hints-and-tips.blogspot.com/2012/07/Control-words-used-for-post-urls-in-blogger.html">setting the content of your post's permalink</a>, the URL given to posts published in Blogger shows the year and month of the original publication date for the post. I think this is because Blogger was originally set up as an on-line diary, with a lot of the features organised around the post-date. <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7pxRPUJCcpuKFCSndLSiYvD1DibDbmLocZ1Q-hshd9pcPueBh1-5S-SjRjjT52oQHziHXNbK57XjdTCtJAJqHPMYXREf7-9WLXI13kcp9FQYJJHYEmxyr3Q2-FxK0keXgERpP6zwAuCb6/s638/digits-in-url-example-internet-explorer-private-mode.png.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="numbers in the website address of a blog post, as show in Internet Explorer" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7pxRPUJCcpuKFCSndLSiYvD1DibDbmLocZ1Q-hshd9pcPueBh1-5S-SjRjjT52oQHziHXNbK57XjdTCtJAJqHPMYXREf7-9WLXI13kcp9FQYJJHYEmxyr3Q2-FxK0keXgERpP6zwAuCb6/s400/digits-in-url-example-internet-explorer-private-mode.png.png" title="Digits in a Blogger post-url" width="90%" /></a></div> Today, there are ways of <a href="http://blogger-hints-and-tips.blogspot.com/2010/01/setting-what-goes-on-home-page.html">giving your blog a home page</a>, <a href="http://blogger-hints-and-tips.blogspot.com/2010/12/how-to-put-put-posts-into-your-pages-in.html">showing your posts in pages</a>, and c<a href="http://blogger-hints-and-tips.blogspot.com/2010/03/showing-your-oldest-post-first-in.html">hanging the order of the posts</a>, which let your blog be a lot more than a date-ordered web-log. Some blogging software (eg Wordpress) lets you choose the structure of the URLs which are used, eg leaving the date out totally, or puting it after the words. However Blogger does not currently have any way to remove the date-part of the post URLs. And I could be wrong, but my best guess is that this will not change anytime soon. <h3>So what options are available to remove the year and month numbers?</h3>If you just don't want people to know the correct month and year of the post, then you can <a href="http://blogger-hints-and-tips.blogspot.com/2009/12/changing-date-for-post.html">change the date</a> before you publish the post for the the first time. Maybe make it something non-sensical (eg 1/1/1990). (However do remember that your RSS feed will show the actual date of publication, not the assigned date). If you have some content where any month-and-year are particularly irrelevant, <a href="http://blogger-hints-and-tips.blogspot.com/2010/02/difference-between-pages-and-posts.html">put it into a Page instead of a Post</a> - because Page URLs don't contain a date.  But remember that you need to give users a way to get to these Pages, and that remember that they are not sent out in <a href="http://blogger-hints-and-tips.blogspot.com/2010/08/why-rss-subscribe-to-posts-is-important.html">your RSS feed</a>, so subscribers won't see the content. The third - and least attractive - option: is to accept that this is how Blogger works and that you need to live with it or switch to another blogging tool. <h2>Numbers near the end of Blogger URLS</h2>Blogger puts digits at the end of post-URLs in order to make sure that each post ever published has a unique address. Notice that I said "ever published": if you publish a post, then delete it, and then publish a second post with the same year, month and either title or <a href="http://blogger-hints-and-tips.blogspot.com/2012/07/Control-words-used-for-post-urls-in-blogger.html">customized-URL-words</a>, then the second post's URL will have some digits put on the end, to stop it being the same as the first one. Once a post is published, you cannot remove the digits and keep the same words and month/year.  The only way to avoid them is to make sure that your post-URLs are unique. So if you publish a post and notice that it has digits on the end of the URL, one option is to <a href="http://blogger-hints-and-tips.blogspot.com/2010/11/deleting-blogs-and-blog-posts.html">delete that post</a>, and replace it with one which has <a href="http://blogger-hints-and-tips.blogspot.com/2009/12/changing-date-for-post.html">a different publication date</a> or <a href="http://blogger-hints-and-tips.blogspot.com/2012/07/Control-words-used-for-post-urls-in-blogger.html">customized-URL-words</a>(don't forget to <a href="http://blogger-hints-and-tips.blogspot.com/2010/03/moving-post-from-one-blog-to-another.html">copy the post contents</a> before you delete it!)   Or you could just set it back to draft status, and then publish it again with different and this time unique customized-URL-words. For example, if you publish and find that you get <blockquote class="tr_bq">www.all-about-cats.com/2012-07/vegetarian-cat-food-recipes01.html</blockquote>you may want to delete the post, and republish the content in a post with a different date like <blockquote class="tr_bq">www.all-about-cats.com/2012-06/vegetarian-cat-food-recipes.html</blockquote> <h2>Does it really matter?</h2><a href="http://commons.wikimedia.org/wiki/File%3ACrystal_128_karm.png" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;" title="By Everaldo Coelho (YellowIcon) [LGPL (http://www.gnu.org/licenses/lgpl.html)], via Wikimedia Commons"><img alt="Crystal 128 karm" height="200" src="//upload.wikimedia.org/wikipedia/commons/b/bc/Crystal_128_karm.png" width="200" /></a>Personally I'm not convinced that having numbers in Blogger URL's is a problem. If the content is so weak, and poorly linked to by other sites and <a href="http://blogger-hints-and-tips.blogspot.com/2010/04/linking-your-blog-to-social-networks.html">social media</a> that the presence of numbers in the URL is affecting visitor numbers, then it seems to me that there are more important things for you to be worrying about. On the other hand, if your blog is already popular and well-optimized, and you're looking to get the last possible bit of SEO benefit - you'd be better off using your time to write even more good quanlity, unique, content so that your exisiting subscribers visit more often, instead of fussing over something that you cannot control. Or am I mistaken? <hr /><h2>Related Articles</h2><a href="http://blogger-hints-and-tips.blogspot.com/2012/07/Control-words-used-for-post-urls-in-blogger.html">Setting the custom-URL for a blog post</a> <a href="http://blogger-hints-and-tips.blogspot.com/2010/01/setting-what-goes-on-home-page.html">Giving your blog a home page</a> <a href="http://blogger-hints-and-tips.blogspot.com/2010/12/how-to-put-put-posts-into-your-pages-in.html">Putting Blogger posts into pages</a> <a href="http://blogger-hints-and-tips.blogspot.com/2009/12/changing-date-for-post.html">How to set the date for a post</a> <a href="http://blogger-hints-and-tips.blogspot.com/2010/02/difference-between-pages-and-posts.html">The difference between Posts and Pages</a> <a href="http://blogger-hints-and-tips.blogspot.com/2010/08/why-rss-subscribe-to-posts-is-important.html">What is RSS and why it matters for bloggers</a> <a href="http://blogger-hints-and-tips.blogspot.com/2010/11/deleting-blogs-and-blog-posts.html">Removing a post from your blog</a> <a href="http://blogger-hints-and-tips.blogspot.com/2010/03/moving-post-from-one-blog-to-another.html">Copy the contents between blog posts - and keep all the formatting.</a>

How to remove the numbers in blogger post URL's

This article looks at the numbers that are in web-page addresses created by Blogger, what they mean and how you can influence them. When yo...

November 24, 2015

How to set the URL for Blogger posts

This article shows how to use the Permalink options to control the URL (ie website address) used for a post in your blog. <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/AVvXsEjbvn1juQ7y8aQ-5S_03GztFLDtvdbvMKkz8IcgCwN_I3dYmfTVJ6eqoUX-xiJqcHdNRJ7jRSBeZKCY9qeNWFYor4au2MRP_Spjy7e8uwEPLXbA7IvQs5rv4knE4W-ato2wWNYYO2F_A8y9/s343/custom-post-URL-blogger-posts.png.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="157" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbvn1juQ7y8aQ-5S_03GztFLDtvdbvMKkz8IcgCwN_I3dYmfTVJ6eqoUX-xiJqcHdNRJ7jRSBeZKCY9qeNWFYor4au2MRP_Spjy7e8uwEPLXbA7IvQs5rv4knE4W-ato2wWNYYO2F_A8y9/s200/custom-post-URL-blogger-posts.png.png" width="200" /></a></div>When you first publish a post in blogger, an URL (called a permalink in blogger) is automatically generated for that post. It looks like: <blockquote class="tr_bq">www.yourDomain/yyyy/mm/WORDS-ABOUT-MY-POST</blockquote> In this URL: <ul><li>yourDomain is either your custom domain / third-party URL   (eg fred-fish.com) or your blogspot domain if you aren't using a custom domain at the time (eg www.blogger-hints-and-tips.blogspot.com)</li><li>yyyy/mm is the year and month of the post's original publication date.</li></ul> Initially, Blogger choses the WORDS-ABOUT-YOUR-MY based on the title, or the first words in the post if the title was blank. They use some rules eg leaving out "the" and other common words, and putting numbers on the end so that every post has a unique URL (called a "permalink" in Blogger). However Blogger also has a tool that lets you choose the WORDS-ABOUT-YOUR-POST separately from the post-title. <h2> How to change the customizable part of the URL for a post</h2><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAt6Rxwy9UZpv6vJ4fOH1iMu50xi1sMoQY0C7mnx-Drnw_cfAR3PU0MUPbTHTfOkQwXoMkMp8MeZHcu0YgAOXP5ExoWghxoCl6b2IrbDgrJZDeKFbV5ystdt6UAA3ai1qdgqU6ACa2C2nF/s318/blogger-set-permalink-words-url-post-address.png.PNG" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAt6Rxwy9UZpv6vJ4fOH1iMu50xi1sMoQY0C7mnx-Drnw_cfAR3PU0MUPbTHTfOkQwXoMkMp8MeZHcu0YgAOXP5ExoWghxoCl6b2IrbDgrJZDeKFbV5ystdt6UAA3ai1qdgqU6ACa2C2nF/s320/blogger-set-permalink-words-url-post-address.png.PNG" width="305" /></a> 1  Edit the post in the usual way. 2  In the Post Settings area (currently at the right hand side of the editor), there is a section called Permalink. 3   Click on Links to show the options in it. 4   Click the custom URL radio button 5   Type the words that you want to use in WORDS-ABOUT-YOUR-POST into the Custom URL box 6   Click Done. 7   Finish the post, and Publish it. <div class="separator" style="clear: both; text-align: center;"></div><h3>Restrictions</h3>The only characters you can use are: <ul><li>lowercase letters (ie a, b, c ... z)</li><li>uppercase letters (ie A, B, C ... Z)</li><li>digits (ie 0, 1, 2 ... 9)</li><li>underscore (ie _)</li><li>dash (ie - )</li><li>full-stop, also known as a period (ie .)</li></ul>It looks like there is no restriction on the number of characters you can put into the URL.  For example, I was just able to make a post in my test blog, with this URL:   http://bhat-draftarticlestore.blogspot.ie/2012/07/123456789-123456789-123456789-123456789-123456789-123456789-123456789-123456789-123456789-123456789-123456789-123456789-123456789-123456789-123456789-123456789-123456789-123456789-123456789-123456789-123456789-123456789-123456789-123456789-123456789-123456789-123456789-123456789-123456789-123456789-.html (you cannot see the post, because that particular blog isn't open for public reading.) If the combinaton of yyyy-mm from post-date (which you can change - see <a href="http://blogger-hints-and-tips.blogspot.com/2009/12/changing-date-for-post.html">Setting the Post Date</a>) and WORDS-ABOUT-YOUR-BLOG is not unique, Blogger will leave out the last character(s), and put in numbers to make it unique. It only applies to Posts, not Pages:  the only way to influence the URL / permalink for a Page on your blog is to choose the initial words in the page-title very carefully.   (Ref:  t<a href="http://blogger-hints-and-tips.blogspot.com/2010/02/difference-between-pages-and-posts.html">he difference between Posts and Pages</a>) <h2>Why should you bother? What words should you use?</h2>Firstly, it's only worth changing the custom words in your post-URL  if SEO matters for your blog. If you think the change is worth it, then you need to think about what specific words 1) accurately reflect the content of your blog, and 2) are likely to be the words that people search for. Unless you're a spammer, there is no point in making your post url www.myBlog/2012-07/hot-and-sexy-topic if your post doesn't have any content about hot-and-sexy-topic. (And if you are a spammer, you may as well leave Blogger now, before you get kicked off anyway.) Leave out smaller filler words like "the" "a" "and" - unless they are relevant to the post-contents. For example include "the Who" if your post is about the band called The Who, but leave it out if your post is about the cats who can fly. Lastly, many SEO experts (self-proclaimed and otherwise) say that dashes are better than dots or underscores. Only Google and Bing know if they'are correct or not. But it's probably a good idea to use xxx-yy-aaaa instead of xxx_yy_aaaa or xxx.yy.aaaa, just in case they are. <h2>Changing the post-title after publication</h2>Google's <a href="http://support.google.com/blogger/bin/answer.py?hl=en&answer=2523525" style="background-color: white;" target="_blank">help-article about the custom-permalink feature</a> says: <blockquote>"because Blogger automatically creates the URL from information from your post title, your URL would change should you decide to edit the title. This would result in broken links, and fewer visitors to your blog"</blockquote> This isn't the way Blogger worked before: until now, I often published a post with one title using the words I wanted in the URL, and then very quickly edit it and change the title to the words I wanted in the title. For example, for a recent post <ul><li>the URL is  http://blogger-hints-and-tips.blogspot.com/2012/07/html-code-for-popular-gadgets-in.html</li><li>the post-title is now:  Where to get the HTML code for popular gadgets in Blogger</li></ul> I just tried this again in my test-blog, and found that it's still true: even if you change the title, the post URL doesn't change. <h2>Changing the custom-URL words after publication</h2>Originally, after you hit the Publish button for the first time, there was no way change the permalink:  if you click on the Permalink option in Post Settings, you are shown the custom value that you chose, but you cannot change it. <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaI6cjEvd-VudNUIneIot8kwN5Ob6fwUehvdGSIhxCHu3I8zapXWK3yVF8epazrZtQqETXu-qURwhtnqgyq6qabUXVUwlJwFoP7oA55rVvOWwGEGvfuwsIEiSz0-tE1bAN_7-zVtjzSFK6/s379/change-custom-url-after-post-is-published.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaI6cjEvd-VudNUIneIot8kwN5Ob6fwUehvdGSIhxCHu3I8zapXWK3yVF8epazrZtQqETXu-qURwhtnqgyq6qabUXVUwlJwFoP7oA55rVvOWwGEGvfuwsIEiSz0-tE1bAN_7-zVtjzSFK6/s320/change-custom-url-after-post-is-published.png" width="302" /></a></div> However you can now: <div><ul><li>Edit the post.</li><li>Click the Revert to draft button.</li><li>Edit the post URL in the same way</li></ul></div><div> </div><div>and the URL of your post will be changed.  Note that if you do this, the post characteristics (view count, comments) are kept.   This means that Blogger must be associating them with the unchanged internal post-identifier, not the URL.</div><div> <ul></ul> <hr /> <h2>Related Articles</h2><a href="http://blogger-hints-and-tips.blogspot.com/2009/12/changing-date-for-post.html">How to change the date for a post</a> <a href="http://blogger-hints-and-tips.blogspot.com/2010/08/why-rss-subscribe-to-posts-is-important.html">What is RSS and why it matters for bloggers</a> <a href="http://blogger-hints-and-tips.blogspot.com/2010/12/get-your-posts-right-before-you-publish.html">Use a private blog to get your posts right before publish them</a> <a href="http://blogger-hints-and-tips.blogspot.com/2010/04/linking-your-blog-to-social-networks.html">Linking your blog and the social networks</a> <a href="http://blogger-hints-and-tips.blogspot.com/2010/03/moving-post-from-one-blog-to-another.html">Moving material from one blog post to another</a></div>

How to set the URL for Blogger posts

This article shows how to use the Permalink options to control the URL (ie website address) used for a post in your blog. When you first pub...

October 18, 2015

How to change the author for a published blog-post

This article explains how to change the author of a post that has already been published in Blogger. <div style="clear: both;"></div> <h2><a name="more"></a>Blogger posts and changing post-authors</h2><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiArpLSoGx7DhfzPX7Q5LswdrBhKT1nNxIKzflUiVwTlKv6Byzz34fdkn2b2iQTL6Uq8QvhnCir1Ijm64Pe3KV9x7SEx9YzeTJSrrQbUs60IG3TM6dyV3xPmad7pPoKpMmBXJoXXNwk2ehB/s333/editing-author-of-existing-blogger-posts.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/AVvXsEiArpLSoGx7DhfzPX7Q5LswdrBhKT1nNxIKzflUiVwTlKv6Byzz34fdkn2b2iQTL6Uq8QvhnCir1Ijm64Pe3KV9x7SEx9YzeTJSrrQbUs60IG3TM6dyV3xPmad7pPoKpMmBXJoXXNwk2ehB/s200/editing-author-of-existing-blogger-posts.png" width="250" /></a></div>When you Publish a post in Blogger, a number of features are set up for the post, as well as the contents.  These include: <ul><li>The URL / web-addresss where the post can be found</li><li>The post date/time when it was published</li><li>The post-author (which is <a href="http://blogger-hints-and-tips.blogspot.com/2012/09/post-author-is-now-first-person-to-save.html">now set the first time that the post is Saved</a>, ie even before it is published.)</li><li>The labels that apply to it.</li></ul> Some of these can be changed by <a href="http://blogger-hints-and-tips.blogspot.com/2012/01/editing-published-posts-in-blogger.html">editing the published post</a>. But there are some features that cannot be altered after they are set. In particular, Author is not changed even if a different <a href="http://blogger-hints-and-tips.blogspot.com/2010/10/understanding-google-accounts.html">Google account</a> is used to edit the post - or if the original author has their <a href="http://blogger-hints-and-tips.blogspot.com/2011/12/making-someone-author-on-your-blog.html">permission to write to the blog</a> removed. This can lead to interesting situations on multi-author blogs, especially when one writer leaves the team and perhaps even deletes their Google account.   Because of this, some blog owners choose to not show the "Posted-by"field (set on the Layout > Blog Posts edit > "Posted by" option). But even if post-author is not displayed on the blog, it is useful for administrator to know who exactly posted each post. That said, when someone asks how to change the posted-by (ie author) value, the simple, and correct, answer is "You can't." But there is a way to make it look like the author has been changed, so that only the most eagle-eyed readers will be able to tell the difference. <h2>How to change the author of an existing blog-post</h2>In short, you need to make a new post with the same contents, and then use a custom-redirect so that anyone who tries to look at the old post (eg by following a link to it) is automatically taken to the new post. <h3>Follow these steps:</h3>You need to take note of several values during this procedure, which are used later on. It may good to open a text-editor (eg Notepad) before you start. 1   Look at the URL of the existing post, and note the part that is from the single-slash after your blog's name,  For example in <blockquote class="tr_bq">http://www.Example.blogspot.com/2012/06/my-post-title   </blockquote>the part you are looking for is the bold part, ie "/2012/06/my-post-title" - including the single slash a the start. 2    Edit the existing post, go to the HTML tab and <ul><li>Copy the contents (like you would if you were <a href="http://blogger-hints-and-tips.blogspot.com/2010/03/moving-post-from-one-blog-to-another.html">copying a post from one blog to another</a>). </li><li>Note the value under Options > Line Break, which is either use tag or Pressenter for a new line.</li></ul> 3    Log in to Blogger with the account that you want to use as the new post author-name. 4    Create a new post, and make sure you have the same setting under Options > Line breaks, to be sure that you get the spacing right. 5   Edit the post to be just like the old one: <ul><li>Put the HTML that you copied into in the HTML view of the new post.</li><li>Apply any Labels or Location values that applied to the old post.</li><li>Make the title the same as it was in the old post.</li><li><a href="http://blogger-hints-and-tips.blogspot.com/2009/12/changing-date-for-post.html">Change the date</a> to the same as the old post.</li></ul> 6   Make the URL of the new post similar but not quite the same: <ul><li>Put the value you found in 1 step into the <a href="http://blogger-hints-and-tips.blogspot.com/2012/07/Control-words-used-for-post-urls-in-blogger.html">custom-permalink field</a>. </li><li>Add some text to it so that it is not the same as the original value, eg make "my-post-title" into "my-post-title1"</li></ul> 7   Publish the post and  note the part of  the post-URL from the single-slash after your blog's name 8   Set up a re-direct from the old post to the new post: <ul><li>Go to Settings > Search Preferences</li><li>Edit the Custom Redirects</li><li>Add a new redirection (only needed if you already have some)</li><li>Enter the value from step 1 into From</li><li>Enter the value from step 7 into To</li><li>Tick Permanent</li><li>Click the save link for this particular re-direction, and then the Save Changes button.</li></ul> <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCqchZkQUklj1GFabYnh6C45qkKyJc8WgvzbFNdt50NB7bxeJXh1GJuZmPkI1Bk62TgGPBZLkE80i-QYCkUkZEpjwmepQXvSY27iXDgd_h1vzJfmeo5fXNEwHp_nozZXUvOMvQNjxtbmTz/s633/set-custom-post-url-redirection-blogger-changed-post-address-repointer.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="picture of the Settings > Search Preferences > add re-direction settings screen in Google's Blogger tool" border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCqchZkQUklj1GFabYnh6C45qkKyJc8WgvzbFNdt50NB7bxeJXh1GJuZmPkI1Bk62TgGPBZLkE80i-QYCkUkZEpjwmepQXvSY27iXDgd_h1vzJfmeo5fXNEwHp_nozZXUvOMvQNjxtbmTz/s640/set-custom-post-url-redirection-blogger-changed-post-address-repointer.png" title="Setting up a customized redirection from one blog-post to another" width="640" /></a></div> 9   Check your blog, to make sure that the re-direction is working correctly. 10  Once you are happy that the re-direction is working correctly, delete the old post. You will need either the existing author account, or a Google account with administrator rights, to do this.   If <a href="http://blogger-hints-and-tips.blogspot.com/2012/08/seo-is-irrelevant-for-some-blogs-because.html">SEO matters for your blog</a>, then it is good to do it as soon as you can, so you are not penalized for having duplicate content. <h2>What your readers will see</h2><div class="separator" style="clear: both; text-align: center;"><a href="http://upload.wikimedia.org/wikipedia/commons/f/f6/Akregator-Oxygen.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img alt="eyeglasses underneath orange RSS chiclet icon" border="0" src="http://upload.wikimedia.org/wikipedia/commons/f/f6/Akregator-Oxygen.png" title="By KDE Team (self made screenshot) [LGPL (http://www.gnu.org/licenses/lgpl.html)], via Wikimedia Commons" /></a></div>Everyone who is subscribed to <a href="http://blogger-hints-and-tips.blogspot.com/2010/08/why-rss-subscribe-to-posts-is-important.html">your blog's RSS-feed</a> or <a href="http://blogger-hints-and-tips.blogspot.com/2011/03/follow-by-email-gadget-easy-way-to-add.html">follow-by-email gadget</a> will see a new post. (I you don't want this, <a href="http://blogger-hints-and-tips.blogspot.com/2011/12/turning-rss-feed-off-or-on-again.html">turn your feed off</a> before you start - but don't forget to turn on again when you are finished!) Visitors who browse your blog posts will see the "old" post, with the new author, in the original place. Visitors who try to go directly to the old post via an existing link or from search-engine results will automatically be re-directed to the "new" version of the post. Very observant ones may notice that the URL is slightly different from the original. Most won't. <h2>A quicker way:  get control of the original Author account</h2>The method described above is fiddly and tedious - especially if you want to change the author of many posts. An alternative is to ask the original author if they still want the <a href="http://blogger-hints-and-tips.blogspot.com/2010/10/understanding-google-accounts.html">Google account</a>  that they used to make the posts. If you are lucky they <ul><li>Don't want it, and </li><li>Are willing to hand the password over to you. </li></ul> In this case, you could <ol><li>Quickly change the password (before they change their mind!), and</li><li>Edit their profile to the new author name that you would like to have displayed. You may also want to change some other details - and if they are using a Google+ profile and you already have one, then you should probably delete this.</li></ol> This isn't a total solution, of course: no matter how you edit their profile, it will still be different to your own profile. But it may be better than nothing. <hr /><h2>Related Articles</h2><a href="http://blogger-hints-and-tips.blogspot.com/2012/01/editing-published-posts-in-blogger.html">How to edit a post that has already been published</a> <a href="http://blogger-hints-and-tips.blogspot.com/2010/10/understanding-google-accounts.html">Understanding Google accounts</a> <a href="http://blogger-hints-and-tips.blogspot.com/2010/03/moving-post-from-one-blog-to-another.html">Copying a post from one blog to another</a> <a href="http://blogger-hints-and-tips.blogspot.com/2011/12/making-someone-author-on-your-blog.html">Giving someone permission to author posts</a> <a href="http://blogger-hints-and-tips.blogspot.com/2009/12/changing-date-for-post.html">Changing the publication date for a blogger post</a> <a href="http://blogger-hints-and-tips.blogspot.com/2012/07/Control-words-used-for-post-urls-in-blogger.html">Setting the URL for Blogger posts</a> <a href="http://blogger-hints-and-tips.blogspot.com/2012/08/seo-is-irrelevant-for-some-blogs-because.html">Why SEO doesn't matter for some blogs</a>

How to change the author for a published blog-post

This article explains how to change the author of a post that has already been published in Blogger. Blogger posts and changing post-authors...

May 28, 2015

How to change internal links when you chance your blog's web-address

This article is about how to change internal cross-reference links in your blog, if you change your blog's URL or web-address. <div style="clear: both;"></div><a name="more"></a><h2>Blog Name vs Blog Address</h2><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ0sbWfmbyHop5hbprBKM13EDhuTie98r9Z1jK6z5KHk8DxyKeMJWxP1HtVtLNOZXZHIxuZPIdUPkAm1A3hrH5z5k3Lb_F3dKS8ht6XFls5fkuFJSd_GAGuL7sHb611u9BUT2oCwpq6dVU/s576/Changing-blog-address.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/AVvXsEjJ0sbWfmbyHop5hbprBKM13EDhuTie98r9Z1jK6z5KHk8DxyKeMJWxP1HtVtLNOZXZHIxuZPIdUPkAm1A3hrH5z5k3Lb_F3dKS8ht6XFls5fkuFJSd_GAGuL7sHb611u9BUT2oCwpq6dVU/s576/Changing-blog-address.png" width="280" /></a></div>Your blog has two "names". The blog title is what you type into the Title field when you create a new blog.   It is displayed in your header (unless you've replaced it with a picture), and in the title-bar of the browser window when someone reads your blog.  It does not need to be unique:  you can make a blog with the same name that anyone else has already used. The web-address, also called the URL or just address is quite different. You select in the Address field when you create a new blog - but it's not just a matter of typing in what you want.   Web-addresses must be unique, so as you type in a possible URL Blogger says "checking availability" - and if someone else already has what you have entered, it says <blockquote class="tr_bq">Sorry, this blog address is not available.</blockquote>and you have to keep trying until you find a blogspot URL which is not already taken. Usually the blog-title and blog web-address are very closely related.   For example, the name of this blog is Blogger-hints-and-tips, and the web-address is <a href="http://www.blogger-hints-and-tips.blogspot.com/">www.Blogger-hints-and-tips.blogspot.com</a>.  And they may be even more closely related if you have a custom domain, eg <blockquote class="tr_bq">Title / Name: Rustling.org Web-address: <a href="http://www.rustling.org/" target="_blank"> www.Rustling.org</a></blockquote> In this case, I've made the blog-name slightly geeky (with a .org on the end) to make it more memorable. <h3>Changing title vs changing address</h3>You can change the blog-name at any time, using the Settings > Basic > Title tab.   Doing this has no effect on any links in you posts or widgets.  (Although it may confuse people who find your blog by searching for the name rather than for the web-address - which is a good reason to encourage them to become subscribers, instead.) You can change the blog-address using the Settings > Basic > Publishing tab.   Just like the original URL, whatever you change it to has to be unique, ie not one that anyone else has used. Sidenote:  If you want to use an address that a different Google account, eg a friend, used to have, then you need to <a href="http://blogger-hints-and-tips.blogspot.com/2010/01/transferring-blog-ownership.html">transfer the ownership</a>:  having the previous owner delete a blog is not enough to release the blogspot address for someone else to use. <div> </div>But if you change the blog-address, then any existing links to your blog become dead, ie they stop working and anyone who tried to follow them gets a 404 error. This applies to both external links (eg on other people's blogrolls or Google's search index) and to internal links (when you have a link to one post inside another post or gadget) <h2>What happens if change your blog's web-address</h2>If you change your blog's web-address, then Blogger changes the links in your <a href="http://blogger-hints-and-tips.blogspot.com/2012/01/page-gadget-menu-bar-for-your-blog-with.html">Pages gadget</a> that point to your pages. But Blogger will not change any other internal links in your blog. This includes: <ul><li>Links in your Pages gadget that were added as External web-addresses - even if those web-addresses are posts or pages in your blog.</li><li>Links in one post that point to another one (called cross-links)</li><li>Links in your other gadgets - including LinksList gadgets and HTML/Javascript ones.</li></ul> Therefore all these links will break if you change your blog's web-address.    If someone tries to follow one of these links they get a message like this: <blockquote class="tr_bq">Blog has been removed</blockquote><blockquote class="tr_bq">Sorry, the blog at yourOldAddress.blogspot.com has been removed. This address is not available for new blogs.</blockquote> However gadgets which calculate links (eg Blogger's Popular Posts, or the third-party widgets like LinkWithin) do keep working, because the they get the current link of your posts when they need them rather than keeping a stored copy.   (That said, ones that rely on your RSS feed to for information may stop working correctly.) And of course Blogger will not change links to your blog that are in other people's blog-posts or gadgets. This is why it's A Very Good Idea to get your blog name - including a custom domain if you want one - right before you start writing posts with cross-links. <h2>Relative addressing and the Blogger Post Editor</h2>Some people have asked if it is possible to internal links (ie links from one post to another) as <blockquote class="tr_bq">/12/2013/how_to_do.html</blockquote>instead of <blockquote class="tr_bq">www.my_blog_name.blogspot.com/12/2013/how_to_do.html</blockquote> So that if they change the blog-address, the links will still work. However Blogger's Post Edit does not support relative addressing, so this isn't possible: If you enter a link as <blockquote class="tr_bq">/12/2013/how_to_do.html</blockquote><div> </div> then when you you publish the post it is changed to <blockquote class="tr_bq">http://0.0.0.12/2013/how_to_do.html     (if you add the link in compose mode), or</blockquote><blockquote class="tr_bq">http://yourWebAddress/12/2013/how_to_do.html     (if you add the link in HTML mode).</blockquote> (I think this is a change from Blogger's previous behaviour from when I last investigated this issue:  previously it changed the links to something like http:/blogger.com/12/2013/how_to_do.html - and of course this doesn't work either.) <h2>How to change internal links in your posts when you change blog-address</h2>Unfortunately Blogger doesn't provide any tool to automatically update all internal links in your posts when you change blog-address. Instead, you have to manually: <ul><li><a href="http://blogger-hints-and-tips.blogspot.com/2012/01/editing-published-posts-in-blogger.html">Edit each post</a>, </li><li>Look at it in HTML mode and </li><li>Find-and-replace any links. </li></ul> The only slight automation is that you can do the find-and-replace by copying the entire post-contents to a text-editor like Notepad, using the Replace tool there, and then copying the entire post contents back to the post editor. Some people have asked if it's possible to do this by: <ul><li>Exporting all your posts using the Export Blog tool on the Settings > Other > Export Blog option</li><li>Opening the exported file in a text editor, and changing all the links with the Find-and-Replace tool.</li><li>Deleting all the posts from your blog</li><li>Importing from your export file, after it's been edited.</li></ul> However this won't work because Blogger remembers the address of each individual post, even after they're deleted.   It won't give the same URL to another post, ever.  Instead, it puts some numbers on the end, to make the URL unique. For example, when I tested this: <blockquote class="tr_bq">http://myTestBlog.blogspot.com/2014/07/sweet-retroo.html</blockquote>became <blockquote class="tr_bq">http://myTestBlog.blogspot.com/2014/07/sweet-retroo_19.html</blockquote><div> </div>You could use the custom-re-directs feature to repoint each old post-url to the new one, it would probably be quicker overall to simply edit each post. <hr /><h2>Related Articles:</h2><a href="http://blogger-hints-and-tips.blogspot.com/2012/01/editing-published-posts-in-blogger.html">How to edit a post you have already published</a> <a href="http://blogger-hints-and-tips.blogspot.com/2012/01/page-gadget-menu-bar-for-your-blog-with.html">Adding a Pages gadget to your blog</a> <a href="http://blogger-hints-and-tips.blogspot.com/2010/02/setting-up-your-custom-domain.html">Setting up a custom domain for Blogger</a> <a href="http://blogger-hints-and-tips.blogspot.com/2010/01/transferring-blog-ownership.html">Giving another Blogger account access to an address that you own</a>

How to change internal links when you chance your blog's web-address

This article is about how to change internal cross-reference links in your blog, if you change your blog's URL or web-address. Blog Name...

July 29, 2014

Find things in your blog-posts' HTML by using temporary "marker text"

This article shows how to use "marker text" to help find things when you need to edit the HTML code behind one of your blog posts. <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/AVvXsEgerV0RGMFr0liES6urk0G4D_7uuDlaKsRso9tWkczDK3LkxICUmluSyfT91on1J2KhVnZR9aHLn265UT6OQI8O1J_imB_vx3v_BmczwyMoH2o983eANd6xa6Uh0G-M01cKG29ivMZiGkBt/s521/using-text-to-mark-place-where-html-code-has-to-be-fixed-in-blogger.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/AVvXsEgerV0RGMFr0liES6urk0G4D_7uuDlaKsRso9tWkczDK3LkxICUmluSyfT91on1J2KhVnZR9aHLn265UT6OQI8O1J_imB_vx3v_BmczwyMoH2o983eANd6xa6Uh0G-M01cKG29ivMZiGkBt/s521/using-text-to-mark-place-where-html-code-has-to-be-fixed-in-blogger.png" width="280" /></a></div>When you edit a post in Blogger, to start with you generally use the Compose mode, which shows you the formatted view of how your work will look. But behind that formatted view, every post is actually written in HTML, ie Hyper-text Markup Language - a type of computer language that uses tags like <h2> or <a href="www.foo.com">  to say how to display the contents. A number of articles, here and in <a href="http://blogger-hints-and-tips.blogspot.com/p/blogger-helpers-search-tool.html">other blogger-helper blogs</a> tell you how to do thing by changing the HTML for the post. But if you are not used to working with HTML, it can be confusing tryign to fix the part that you need to change. Marker-text is a technique that you can use to "mark" problem areas while you are still in Compose mode, so that you can easily find them again when you are in Edit HTML mode. <h2>How to use marker-text to fix a problem in your post</h2> Start to prepare or <a href="http://blogger-hints-and-tips.blogspot.com/2012/01/editing-published-posts-in-blogger.html">edit your post</a> in the usual way. Go to the place just before the problem you want to fix or change you want to make. Add some extra blank lines. In the middle of the extra blank lines, put a few characters or a word that do not occurr anywhere else in your post. I quite often use XXX - but you can use any letters, characters or numbers, for example PROBLEM JUST AFTER HERE or 12345. Use the <a href="http://blogger-hints-and-tips.blogspot.com/2011/09/how-to-cut-copy-and-paste-in-bloggers.html">copy function</a> to put the text you added (without the blank lines)into your computer's memory. Optional: Go to the place just after the problem you want to fix or change you want to make, and add some more text eg PUT IT BEFORE HERE Switch to Edit HTML mode, using the button at the top-left of the post editing window. Start the "find" feature in your web browser: <ul><li>ctrl / f in Chrome</li><li>ctrl / f in Internet Explorer</li></ul> In the search box that opens, use Paste (ctrl / v) to put the exact marker text that you entered into the Find box, and press enter. The post-edit window will scroll to the place where your marker text is, and it will most likely be highlighted. You have now found the place where you need to work, so you can now make the HTML changes required. Once you have fixed all the issues, switch back to Compose mode using the tab in the top left hand corner, and remove all the marker text and extra blank lines that you added. <h2>Good Practise</h2>You will be removing the marker text before you publish your post. But just in case you accidentally click Publish before you mean to, only use text that would not be embarrassing if some of your readers accidentally see it. Some RSS readers will see the contents of your post as they are when you first hit Publish, even if you edit them less than two minutes later.) <h2>Leaving your Marker Text in Place</h2>If you might need to find the same place in your post's HTML again, then instead of removing your marker-text, you may just want to comment it out. To do this, put these characters before it: <blockquote class="tr_bq"></blockquote> So it might look like this  <blockquote class="tr_bq"></blockquote> Make sure you get the spaces - highlighed in yellow   as well as both of the "-- characters. If you do this, then you will not be able to see or find your Marker Text when you are in Compose Mode, but you will be able to see and find it when you are in Edit HTML mode. <hr /><h2>Related Articles:</h2><a href="http://blogger-hints-and-tips.blogspot.com/2012/01/editing-published-posts-in-blogger.html">How to edit a post you have already published</a> <a href="http://blogger-hints-and-tips.blogspot.com/2011/09/how-to-cut-copy-and-paste-in-bloggers.html">Using cut, copy and paste in the Blogger post editor</a> <a href="http://blogger-hints-and-tips.blogspot.com/p/blogger-helpers-search-tool.html">The Blogger-helpers search tool</a>

Find things in your blog-posts' HTML by using temporary "marker text"

This article shows how to use "marker text" to help find things when you need to edit the HTML code behind one of your blog posts....

July 21, 2014

Adding tooltips or hover text to Blogger posts and gadgets

This article is about putting a "tooltip" (text that is shown when you hover over) into something (eg text, a web-address or even a picture) in a Blogger post or gadget. <div style="clear: both;"></div><a name="more"></a><h2>What are tooltips?</h2><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj600NDKxQaxi2Pz0DJG1jKJ4iUnFUI2Tj9PbVgyJsKeG47XhQ1PSGIC1xZIjL0WT-p6jgslULgfSZIr75XW_JY4u52jrfDWi5iI3o0sZOJg0f4_U_CbrXMxKk5VtmnWJSRIqOT5ywEeyqK/s437/tooltips-text-that-floats-over-text-pictures-urls-definitions-in-blogger-posts.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="273" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj600NDKxQaxi2Pz0DJG1jKJ4iUnFUI2Tj9PbVgyJsKeG47XhQ1PSGIC1xZIjL0WT-p6jgslULgfSZIr75XW_JY4u52jrfDWi5iI3o0sZOJg0f4_U_CbrXMxKk5VtmnWJSRIqOT5ywEeyqK/s320/tooltips-text-that-floats-over-text-pictures-urls-definitions-in-blogger-posts.png" width="320" /></a></div>Tooltips are a feature found in many websites and modern computer based software:  when a viewer hovers their mouse over an item, a small piece of text is shown, generally formatted in a box which is highlighted in some way. They can be used for all sorts of things, to provide definitions of technical or foreign-language words, additional information about particularly interesting concepts - or as an incentive or invitation to take an action  eg you could tool-tip "click here to enter" with a description of the prize or benefits of entering.) You can see them in Blogger's Post Editor when you put your mouse over an item in the toolbar. <div class="separator" style="clear: both; text-align: center;"><img border="0" height="288" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKQroOsDuMo31gMoP22kCrhEutj9LRQDoqcbhHvXG1T5VGuWr_NNID2x4ITbqtf3OMp4r5JxM6Sd0MJ8-EYS51peBjgY7KCEjhc7eug5_fIcFR_KWPVs1Nt3bvqrFtuju0R94tWbZ2Lx-Y/" width="400" /></div> <div style="text-align: left;">But tool-tips can be used on other things too, including pictures and text: put your mouse over <a class="toolTippedText" href="http://www.blogger.com/post-edit.g?blogID=8226995528209216388&postID=639147409705240717" title="Your hover text">This Text</a> to see one. They can be particularly useful if you want to provide a translation for a few words from another language, or a definition for technical terms, but don't have enough to make a glossary worthwhile. </div> <h2>How to add a tool-tip in Blogger</h2> Open the Post (etc) that you are working on. Create the item that you want the tool-tip to be on (it may be text or a picture). Select the item, and use the Link button on the toolbar to set up a link for it.  (Do this even if you don't want it to end up linked to anything - you can remove the link part alter on.) Go into HTML mode (top right side of the editor toolbar), and find the HTML for the item.   Hints: <ul><li>Use the find feature in your brower - it may be helpful to temporarily put some <a href="http://blogger-hints-and-tips.blogspot.com/2014/07/use-marker-text-to-go-to-a-place-in-html-code.html">marker text</a> just before and after the item.</li></ul><ul><li>If you want to put a tooltip into a text gadget - just put the text into an HTML gadget instead, and that way you will be able to work in HTML mode.</li></ul><ul><li>The HTML for the item will have this sort of structure: <blockquote><code class="xml plain"><</code><code class="xml keyword">a</code> <code class="xml color1">href</code><code class="xml plain">=</code><code class="xml string">"Your Link"</code> <code class="xml color1"></code><code class="xml plain"></code><code class="xml string"></code><code class="xml color1"></code><code class="xml plain"></code><code class="xml string"></code><code class="xml plain">> Your item text ...<code class="xml keyword"> </a></code><code class="xml plain"></code></code></blockquote>or it may be like this if your item is a picture: <blockquote><img border="0" src="URL FOR YOUR PICTURE" style="margin-left: auto; margin-right: auto;" /></blockquote>or even like this if it's a picture that's linked: <blockquote style="font-family: "Courier New", Courier, monospace;"><code class="xml plain"><</code><code class="xml keyword">a</code> <code class="xml color1">href</code><code class="xml plain">=</code><code class="xml string">"Your Link"</code> <code class="xml color1"></code><code class="xml plain"></code><code class="xml string"></code><code class="xml color1"></code><code class="xml plain"></code><code class="xml string"></code><code class="xml plain"></code>img border="0" src="URL FOR YOUR PICTURE" style="margin-left: auto; margin-right: auto;" </a></blockquote></li></ul> Add  title="YOUR HOVER TEXT" to the HTML, so it becomes something like: <blockquote><code class="xml plain"><</code><code class="xml keyword">a</code> <code class="xml color1">href</code><code class="xml plain">=</code><code class="xml string">"Your Link" title="YOUR HOVER TEXT"</code> <code class="xml color1"></code><code class="xml plain"></code><code class="xml string"></code><code class="xml color1"></code><code class="xml plain"></code><code class="xml string"></code><code class="xml plain">> Your item text ...<code class="xml keyword"> </a></code><code class="xml plain"></code></code></blockquote>or, if the item is a picture: <blockquote><<code class="xml plain"></code><code class="xml keyword">a</code> <code class="xml color1">href</code><code class="xml plain">=</code><code class="xml string">"Your Link" </code>img border="0" src="URL FOR YOUR PICTURE" <code class="xml string">title="YOUR HOVER TEXT" </code>style="margin-left: auto; margin-right: auto;" </a></blockquote> If you don't want the item to be linked, remove the <code class="xml color1">href</code><code class="xml plain">=</code><code class="xml string">"Your Link"</code> part of the statement, so the HTML becomes similar to:<code class="xml plain"> </code> <blockquote><code class="xml plain"><</code><code class="xml keyword">a</code> <code class="xml color1"></code><code class="xml plain"></code><code class="xml string">title="YOUR HOVER TEXT"</code> <code class="xml color1"></code><code class="xml plain"></code><code class="xml string"></code><code class="xml color1"></code><code class="xml plain"></code><code class="xml string"></code><code class="xml plain">> Your item text ...<code class="xml keyword"> </a></code><code class="xml plain"></code></code></blockquote>or, if the item is a picture: <blockquote style="font-family: "Courier New", Courier, monospace;"><<code class="xml plain"></code><code class="xml keyword"></code> <code class="xml color1"></code><code class="xml plain"></code><code class="xml string"></code>img border="0" src="URL FOR YOUR PICTURE" <code class="xml string">title="YOUR HOVER TEXT" </code>style="margin-left: auto; margin-right: auto;" /></blockquote> If you're working in the post-editor, return to Compose mode (top right of the Post Editor window), so that you aren't faced with HTML the next time you edit a post. <h2>Formatting unlinked text that has tooltips.</h2>If you put hover-text on words that aren't linked to anything, it's good to give them a different format so that readers know to mouse-over them to see the hover-text.    For example <blockquote>When you visit Ireland, you will undoubtedly experience rain, <a class="toolTippedText" href="http://www.blogger.com/post-edit.g?blogID=8226995528209216388&postID=639147409705240717" title="music">ceol</a> and great <a class="toolTippedText" href="http://www.blogger.com/post-edit.g?blogID=8226995528209216388&postID=639147409705240717" title="fun">craic</a>.</blockquote> To do this: 1   Add this CSS rule to your blog's template  (See <a href="http://blogger-hints-and-tips.blogspot.com/2010/09/adding-new-css-formatting-rule-to-your.html">Adding a new CSS rule to your template</a> if you need help with this): <blockquote style="font-family: "Courier New", Courier, monospace;">.toolTippedText {    border-bottom: 1px dotted red; }</blockquote> 2   While editing your Post (etc) to add the hover-text, also add this class statement <blockquote></blockquote><blockquote>class="toolTippedText" </blockquote>to every URL which has title="YOUR HOVER TEXT" added to it.  So the full statements become <blockquote><code class="xml plain"><</code><code class="xml keyword">a</code> <code class="xml color1">href</code><code class="xml plain">=</code><code class="xml string">"Your Link" title="YOUR HOVER TEXT"</code> class="toolTippedText"<code class="xml color1"></code><code class="xml plain"></code><code class="xml string"></code><code class="xml color1"></code><code class="xml plain"></code><code class="xml string"></code><code class="xml plain">> Your item text ...<code class="xml keyword"> </a></code><code class="xml plain"></code></code></blockquote>or, if you don't want the text to actually be linked to anything: <blockquote><code class="xml plain"><</code><code class="xml keyword">a</code> <code class="xml color1"></code><code class="xml plain"></code><code class="xml string">title="YOUR HOVER TEXT"</code> class="toolTippedText"<code class="xml color1"></code><code class="xml plain"></code><code class="xml string"></code><code class="xml color1"></code><code class="xml plain"></code><code class="xml string"></code><code class="xml plain">> Your item text ...<code class="xml keyword"> </a></code></code></blockquote> It probably doesn't make sense to add a font-decoration like this to tool-tipped images - though it can be done in exactly the same way. If you don't like using red dots as the way to highlight text that has hover-text, there are other rules you can add to your template.  For example to get a solid underline in the same colour as the text font, use: <blockquote style="font-family: "Courier New", Courier, monospace;">.toolTippedText { <div> text-decoration:underline;</div>} </blockquote> There is more information about some of the options for formatting a line <a href="http://blogger-hints-and-tips.blogspot.com/2010/04/adding-separator-line-between-your.html">in this article</a>. <hr /><h2>Related Articles: </h2><a href="http://blogger-hints-and-tips.blogspot.com/2010/09/adding-new-css-formatting-rule-to-your.html">Adding a new CSS rule to your template</a>. <a href="http://blogger-hints-and-tips.blogspot.com/2010/04/adding-separator-line-between-your.html">Adding a horizontal line between blog-posts - including CSS line formatting options</a> <a href="http://blogger-hints-and-tips.blogspot.com/2014/07/use-marker-text-to-go-to-a-place-in-html-code.html">Using marker-text to find places in your HTML</a>

Adding tooltips or hover text to Blogger posts and gadgets

This article is about putting a "tooltip" (text that is shown when you hover over) into something (eg text, a web-address or even ...

October 23, 2013