Showing posts with label Post Editor. Show all posts
Showing posts with label Post Editor. Show all posts

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 vs Blog Address

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
Sorry, this blog address is not available.
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 Are-You-Blogger, and the web-address is www.areyoublogger.blogspot.com.  And they may be even more closely related if you have a custom domain, eg
Title / Name: Rustling.org
Web-address: www.Rustling.org

In this case, I've made the blog-name slightly geeky (with a .org on the end) to make it more memorable.

Changing title vs changing address

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 transfer the ownership:  having the previous owner delete a blog is not enough to release the blogspot address for someone else to use.

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)


What happens if change your blog's web-address

If you change your blog's web-address, then Blogger changes the links in your Pages gadget that point to your pages.

But Blogger will not change any other internal links in your blog. This includes:
  • Links in your Pages gadget that were added as External web-addresses - even if those web-addresses are posts or pages in your blog.
  • Links in one post that point to another one (called cross-links)
  • Links in your other gadgets - including LinksList gadgets and HTML/Javascript ones.

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:
Blog has been removed
Sorry, the blog at yourOldAddress.blogspot.com has been removed. This address is not available for new blogs.

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.


Relative addressing and the Blogger Post Editor

Some people have asked if it is possible to internal links (ie links from one post to another) as
/12/2013/how_to_do.html
instead of
www.my_blog_name.blogspot.com/12/2013/how_to_do.html

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
/12/2013/how_to_do.html

 then when you you publish the post it is changed to
http://0.0.0.12/2013/how_to_do.html     (if you add the link in compose mode), or
http://yourWebAddress/12/2013/how_to_do.html     (if you add the link in HTML mode).

(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.)


How to change internal links in your posts when you change blog-address

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:
  • Edit each post
  • Look at it in HTML mode and 
  • Find-and-replace any links. 

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:
  • Exporting all your posts using the Export Blog tool on the Settings > Other > Export Blog option
  • Opening the exported file in a text editor, and changing all the links with the Find-and-Replace tool.
  • Deleting all the posts from your blog
  • Importing from your export file, after it's been edited.

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:
http://myTestBlog.blogspot.com/2014/07/sweet-retroo.html
became
http://myTestBlog.blogspot.com/2014/07/sweet-retroo_19.html

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.




Related Articles:

How to edit a post you have already published

Adding a Pages gadget to your blog

Setting up a custom domain for Blogger

Giving another Blogger account access to an address that you own

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.



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 other blogger-helper blogs 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.


How to use marker-text to fix a problem in your post


Start to prepare or edit your post 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 copy function 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:
  • ctrl / f in Chrome
  • ctrl / f in Internet Explorer

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.


Good Practise

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.)




Leaving your Marker Text in Place

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:
<!-- 

and these characters after it
 -->

So it might look like this

<!-- START OF PROBLEM1 HERE -->

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.





Related Articles:

How to edit a post you have already published

Using cut, copy and paste in the Blogger post editor

The Blogger-helpers search tool

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.

What are tooltips?

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.



But tool-tips can be used on other things too, including pictures and text: put your mouse over This Text 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.


How to add a tool-tip in Blogger


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:
  • Use the find feature in your brower - it may be helpful to temporarily put some marker text just before and after the item.
  • 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.
  • The HTML for the item will have this sort of structure:
    <a href="Your Link" > Your item text ... </a>
    or it may be like this if your item is a picture:
    <img border="0" src="URL FOR YOUR PICTURE" style="margin-left: auto; margin-right: auto;" />
    or even like this if it's a picture that's linked:
    <a href="Your Link" img border="0" src="URL FOR YOUR PICTURE" style="margin-left: auto; margin-right: auto;" </a>


Add  title="YOUR HOVER TEXT" to the HTML, so it becomes something like:
<a href="Your Link" title="YOUR HOVER TEXT" > Your item text ... </a>
or, if the item is a picture:
<a href="Your Link" img border="0" src="URL FOR YOUR PICTURE" title="YOUR HOVER TEXT" style="margin-left: auto; margin-right: auto;" </a>


If you don't want the item to be linked, remove the href="Your Link"
part of the statement, so the HTML becomes similar to:
<a title="YOUR HOVER TEXT" > Your item text ... </a>
or, if the item is a picture:
< img border="0" src="URL FOR YOUR PICTURE" title="YOUR HOVER TEXT" style="margin-left: auto; margin-right: auto;" />


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.



Formatting unlinked text that has tooltips.

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
When you visit Ireland, you will undoubtedly experience rain, ceol and great craic.

To do this:


1   Add this CSS rule to your blog's template  (See Adding a new CSS rule to your template if you need help with this):
.toolTippedText {
   border-bottom: 1px dotted red;
}

2   While editing your Post (etc) to add the hover-text, also add this class statement
class="toolTippedText" 
to every URL which has title="YOUR HOVER TEXT" added to it.  So the full statements become
<a href="Your Link" title="YOUR HOVER TEXT" class="toolTippedText"> Your item text ... </a>
or, if you don't want the text to actually be linked to anything:
<a title="YOUR HOVER TEXT" class="toolTippedText"> Your item text ... </a>

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:
.toolTippedText {
 text-decoration:underline;
}

There is more information about some of the options for formatting a line in this article.




Related Articles:

Adding a new CSS rule to your template.

Adding a horizontal line between blog-posts - including CSS line formatting options

Using marker-text to find places in your HTML