How to Remove the Link from a Single Image in Blogger

By default Blogger creates a link to the image whenever an image is uploaded to a Blogger post. Sometimes, however, you might want to remove the link to prevent the image from being clickable. A common reason would be to safeguard your image. If you are worried about your image being copied you can prevent it from appearing full size by disabling the link.

If you just want to disable the hyperlink from a single image in Blogger try this method. I have found that it removes the link but it will not reinstate it once removed (using the toggle button) so be sure you want to remove the link before you start otherwise you will need to reinstate the link manually. I suggest you backup before you start.

This image has had the link removed

1. Go to the Blogger Post Editor.
2. Ensure you are in Compose mode (toggle between Compose and HTML on the top left corner under your Blog name
3. Upload an image in Blogger or use an existing image.
4. Highlight the image. You will see it gives you the choice of sizes, to add a caption, remove the image etc.
5. While the image is highlighted click on Link from the menu once. This will disable the hyperlink and your image will no longer be clickable.
6. Save your changes.
7. Go to your live blog and try clicking on your image. Your image will no longer be clickable and you will no longer be able to see a larger view of the image.

Related Articles
List of Blog Know How Tutorials for Blogger Blogs
How to Remove the Image Border in Blogger Template Simple
How to Change or Delete Image Borders in Blogger Posts

How to Add a Table to Blogger Blogspot Post

This Blogger tutorial (Blogspot tutorial) explains how to put a table into a Blogger post. You will learn how to create tables in Blogger ranging from a simple table to a more complex table with alternating colors.

We will start with a basic table and gradually add CSS styling to the table to improve the look and functionality until we have built the table pictured directly below. No knowledge of CSS and HTML is assumed so this Blogger tutorial is suitable for absolute blogging beginners.

A Blogger Table Caption

Table Header	Table Header	Table Header
Table Cell	Table Cell	Table Cell
Table Cell	Table Cell	Table Cell
Table Cell	Table Cell	Table Cell
Table Cell	Table Cell	Table Cell

Tables are a useful way to display information particularly tabulated information. Tables are good whenever you want to align information so that it is easy to read and understand. You can add text, hyperlinks and even images to a table which makes them very useful for presenting information.

There is no easy way to add tables in Blogger yet. Even if you are using the new editor you will note that no table button is provided. Fortunately it is easy enough to use a bit of CSS styling to spruce up a table and enter this manually into a Blogger post.

How to Add a Table to Blogger Posts
First you will learn how to add a simple table to Blogger. We are going to start with a table with 3 columns and 4 rows including a header row. Then I will show you step by step how to add different features to the table including how to add extra rows, a background color to the header, a border, a caption, change the size of the table, center align the table and more.

Table Header	Table Header	Table Header
Table Cell	Table Cell	Table Cell
Table Cell	Table Cell	Table Cell
Table Cell	Table Cell	Table Cell

1. In Blogger open either a new post or an existing post that you wish to add a table to
   
   
2. Click on the Edit HTML tab on your Blogger editor
   
   
3. Copy the following code into your Blogger post which will produce the basic table as shown above:
   
   

   <table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3">
   <tr>
   <th>Table Header</th>
   <th>Table Header</th>
   <th>Table Header</th>
   </tr>
   <tr>
   <td>Table Cell</td>
   <td>Table Cell</td>
   <td>Table Cell</td>
   </tr>
   <tr>
   <td>Table Cell</td>
   <td>Table Cell</td>
   <td>Table Cell</td>
   </tr>
   <tr">
   <td>Table Cell</td>
   <td>Table Cell</td>
   <td>Table Cell</td>
   </tr>
   </table>
   

   
   
   
4. Make changes to the table to suit your own Blogger template if necessary by changing the following:
   
   

   <table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3">

   
   
   • Border width (blue)
     
   • Border color (black)
     
   • Background color (red)
     
   • Table width (orange) Can be a percentage or actual width eg 500px
     
   
   
5. Now we are going to fix an annoying problem in Blogger which renders too much white space above the table. We do this by adding the following styling denoted in red directly above the table tag and adding a closing </div> at the end of the table code
   
   

   <style type="text/css">.nobrtable br { display: none }</style>
   <div class="nobrtable">
   <table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3">
   <tr>
   <th>Table Header</th>
   <th>Table Header</th>
   <th>Table Header</th>
   </tr>
   <tr>
   <td>Table Cell</td>
   <td>Table Cell</td>
   <td>Table Cell</td>
   </tr>
   <tr>
   <td>Table Cell</td>
   <td>Table Cell</td>
   <td>Table Cell</td>
   </tr>
   <tr">
   <td>Table Cell</td>
   <td>Table Cell</td>
   <td>Table Cell</td>
   </tr>
   </table></div>
   

   
   
6. Let's add some further styling to our table header to improve the look of our table as denoted in red. Change the background color and color attributes to suit your own color scheme if you wish
   
   
   
   
   

   Table Header	Table Header	Table Header
   Table Cell	Table Cell	Table Cell
   Table Cell	Table Cell	Table Cell
   Table Cell	Table Cell	Table Cell

   
   
   

   <style type="text/css">.nobrtable br { display: none }</style>
   <div class="nobrtable">
   <table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3">
   <tr style="background-color:#0033FF; color:#ffffff; padding-top:5px; padding-bottom:4px;">
   <th>Table Header</th>
   <th>Table Header</th>
   <th>Table Header</th>
   </tr>
   <tr>
   <td>Table Cell</td>
   <td>Table Cell</td>
   <td>Table Cell</td>
   </tr>
   <tr>
   <td>Table Cell</td>
   <td>Table Cell</td>
   <td>Table Cell</td>
   </tr>
   <tr>
   <td>Table Cell</td>
   <td>Table Cell</td>
   <td>Table Cell</td>
   </tr>
   </table>
   

   
   
   
7. Now let's add another row to our table for Blogger so you can see how this is done
   
   
   
   
   

   Table Header	Table Header	Table Header
   Table Cell	Table Cell	Table Cell
   Table Cell	Table Cell	Table Cell
   Table Cell	Table Cell	Table Cell
   Table Cell	Table Cell	Table Cell

   
   
   

   <style type="text/css">.nobrtable br { display: none }</style>
   <div class="nobrtable">
   <table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3">
   <tr style="background-color:#0033FF; color:#ffffff; padding-top:5px; padding-bottom:4px;">
   <th>Table Header</th>
   <th>Table Header</th>
   <th>Table Header</th>
   </tr>
   <tr>
   <td>Table Cell</td>
   <td>Table Cell</td>
   <td>Table Cell</td>
   </tr>
   <tr>
   <td>Table Cell</td>
   <td>Table Cell</td>
   <td>Table Cell</td>
   </tr>
   <tr>
   <td>Table Cell</td>
   <td>Table Cell</td>
   <td>Table Cell</td>
   </tr>
   </table>
   

   
   
   
8. In this step we are going to center the contents of our Blogger table. This can be done in several ways but we are going to take a short cut here by assigning a style to every table row
   
   
   
   
   

   Table Header	Table Header	Table Header
   Table Cell	Table Cell	Table Cell
   Table Cell	Table Cell	Table Cell
   Table Cell	Table Cell	Table Cell
   Table Cell	Table Cell	Table Cell

   
   
   

   <style type="text/css">.nobrtable br { display: none } tr {text-align: center;} </style>
   <div class="nobrtable">
   <table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3">
   <tr style="background-color:#0033FF; color:#ffffff; padding-top:5px; padding-bottom:4px;">

   
   
9. Now we are going to jazz up our Blogger table by adding alternating colored rows to improve readibility and appearance. By far the easiest way to do this is to assign a class.
   
   
   
   
   

   Table Header	Table Header	Table Header
   Table Cell	Table Cell	Table Cell
   Table Cell	Table Cell	Table Cell
   Table Cell	Table Cell	Table Cell
   Table Cell	Table Cell	Table Cell

   
   
   

   <style type="text/css">.nobrtable br { display: none } tr {text-align: center;} tr.alt td {background-color: #eeeecc; color: black;}</style>
   <div class="nobrtable">
   <table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3">
   <tr style="background-color:#0033FF; color:#ffffff; padding-top:5px; padding-bottom:4px;">
   <th>Table Header</th>
   <th>Table Header</th>
   <th>Table Header</th>
   </tr>
   <tr class="alt">
   <td>Table Cell</td>
   <td>Table Cell</td>
   <td>Table Cell</td>
   </tr>
   <tr>
   <td>Table Cell</td>
   <td>Table Cell</td>
   <td>Table Cell</td>
   </tr>
   <tr class="alt">
   <td>Table Cell</td>
   <td>Table Cell</td>
   <td>Table Cell</td>
   </tr>
   </table>
   

   
   
   
10. It is also easy to add a caption to your Blogger table. For a caption above the table simply add the caption line as shown in red. For a caption below the table add the caption line in red and a style as shown in blue
    
    
    
    
    

    A Blogger Table Caption

    Table Header	Table Header	Table Header
    Table Cell	Table Cell	Table Cell
    Table Cell	Table Cell	Table Cell
    Table Cell	Table Cell	Table Cell
    Table Cell	Table Cell	Table Cell

    
    
    

    <style type="text/css">.nobrtable br { display: none } tr {text-align: center;} tr.alt td {background-color: #eeeecc; color: black;} tr {text-align: center;} caption {caption-side:bottom;} </style>
    <div class="nobrtable">
    <table border="2" bordercolor="#0033FF" style="background-color:#99FFFF" width="100%" cellpadding="3" cellspacing="3">
    <caption>A Blogger Table Caption</caption>
    <tr style="background-color:#0033FF; color:#ffffff; padding-top:5px; padding-bottom:4px;">
    <th>Table Header</th>
    <th>Table Header</th>
    <th>Table Header</th>
    </tr>
    <tr class="alt">
    <td>Table Cell</td>
    <td>Table Cell</td>
    <td>Table Cell</td>
    </tr>
    <tr>
    <td>Table Cell</td>
    <td>Table Cell</td>
    <td>Table Cell</td>
    </tr>
    <tr class="alt">
    <td>Table Cell</td>
    <td>Table Cell</td>
    <td>Table Cell</td>
    </tr>
    </table>
    

    
    
    
11. One more important property needs to be addressed in our new Blogger table to improve the look. We can reduce the double border into a single one. The easiest way to do this is to change the cellspacing to zero as denoted in red. Or, alternatively we can apply the border collapse property to our table as shown in blue. Note: Border collapse may not be supported by all browsers particularly if the cellspacing attribute is defined also)
    
    
    
    
    
    
    

    A Blogger Table Caption

    Table Header	Table Header	Table Header
    Table Cell	Table Cell	Table Cell
    Table Cell	Table Cell	Table Cell
    Table Cell	Table Cell	Table Cell
    Table Cell	Table Cell	Table Cell

    
    
    

    <style type="text/css">.nobrtable br { display: none } tr {text-align: center;} tr.alt td {background-color: #eeeecc; color: black;} tr {text-align: center;} caption {caption-side:bottom;}</style>
    <div class="nobrtable">
    <table border="2" bordercolor="#0033FF" style="background-color:#99FFFF; border-collapse:collapse;" width="100%" cellpadding="10" cellspacing="0">
    <caption>A Blogger Table Caption</caption>
    <tr style="background-color:#0033FF; color:#ffffff; padding-top:5px; padding-bottom:4px;">
    <th>Table Header</th>
    <th>Table Header</th>
    <th>Table Header</th>
    </tr>
    <tr class="alt">
    <td>Table Cell</td>
    <td>Table Cell</td>
    <td>Table Cell</td>
    </tr>
    <tr>
    <td>Table Cell</td>
    <td>Table Cell</td>
    <td>Table Cell</td>
    </tr>
    <tr class="alt">
    <td>Table Cell</td>
    <td>Table Cell</td>
    <td>Table Cell</td>
    </tr>
    </table>
    

    
    
    
12. Now go ahead and add your data to your new Blogger table. Filling in each instance of "Table Header" and "Table Cell" with your own data. The information you add to the Blogger table can be text, hyperlinks or even an image
    
    
13. Save your changes to the Blogger table by saving and publishing your post
    

Please feel free to use this Blogger table as a template whenever you need to add a table to your Blogspot post. If you want to regularly add a table to your Blogger posts that consistently looks the same you could consider adding the table CSS styling to your Blogger template.

In this Blogger tutorial (Blogspot tutorial) I have demonstrated how to build a complex table in HTML and CSS to insert into a Blogger post. You have learned how to manipulate a variety of table properties and attributes to create a table for Blogger that matches the color scheme of your blog and is functional and appealing.

Related Articles
List of Blog Know How Tutorials for Blogger Blogs
How to Change the Bullet Point Style in Blogger (Blogspot)
How to Remove Image Border in Blogger Template Simple
How to Change or Delete Image Borders in Blogger Posts
How to Add CSS Styling to Blockquotes in Blogger
How to Add, Delete or Remove Blogger Image Borders
How to Align and Justify Posts in Blogger
How to Add a Divider Between Blogger Posts
How to Add or Change a Background Image in a Blogger Template

How to Add Internal Links Within Blogger Posts

In the Blogger tutorial I discuss how to add internal links within your Blogger posts (Blogspot posts) to point to either another section within the same post or to another post.

There are lots of times when you may want to direct a reader to a different part of your Blogger post depending on what their needs and interests are. Or you might want to alert the visitor to something significant in a related post. In this article I will show how to make use of internal links both within posts and in Blogger generally.

Why bother with internal linking you may be wondering? Well the answer is to improve SEO. Blogs with a good internal linking structure will fare better than blogs that don't link posts. Plus you will be creating an aid to navigation for your reader. On longer posts jumps links to different sections within your post or to other posts mean readers can quickly find the information they are looking for.

How to Create Internal Links To Sections Within the Same Blogger Posts

How to Create Internal Links To Sections Within Different Blogger Posts

How to Create Internal Links To Sections Within the Same Blogger Post
Consider the above links. Click on them. Each jump the reader to a different part of this article. This type of internal linking is common practice in website building and can be equally applied to blogs to assist with navigation.

How did I create these links? The answer is that I used simple html that anyone can learn in a few minutes. Here are the steps I used to create these links.

1. Log in to Blogger
   
   
2. Go to Posting > New Post or Edit Post and either create a new article or edit an existing one.
   
   
3. Within the article find a place where you want to add some jump links. This will be early on in the article as it will help the reader figure out what information is significant to them and how to get there quickly
   
   
4. Switch to the Edit HTML mode rather than compose mode so you can see the code you are inserting into your post
   
   
5. Create a couple of headings that will be your links to material further down in your Blogger article. Note you can also just jump to a word but for the purposes of this demonstration and clarity I am going to use headings. When creating this post I used the following headings:
   
   

   How to Create Internal Links To Sections Within the Same Blogger Post
   How to Create Internal Links To Sections Within Different Blogger Posts

   
   
6. Add links to your headings like so:
   
   

   <a href="#withinposts">How to Create Internal Links To Sections Within the Same Blogger Post</a>
   
   <a href="#withinblogger">How to Create Internal Links To Sections Within Different Blogger Posts</a>

   
   
   • The href attribute and closing </a> element is the same structure you use for other links in your blog
     
     
   • Each identifier is preceded by a hash mark (#). The # tells the visitor's browser to look for a section within your post
     
     
   • Each link identifier needs its own unique identifier and needs to be enclosed in inverted commas. Use a name that reflects the link you are creating if possible as it will make it easier to identify on a page with a lot of internal jump links.
     
   
   
7. Now go to the first point in your post where you want to jump the reader to. This will be the start of some new idea, section or logical split in the information.
   
   
8. At this point create your anchor text by first adding your heading and then enclosing your heading with this anchor structure.
   
   

   <a name="identifier">a heading</a>
   

   
   
   • Note the use of the name attribute at the beginning and the </a> element at the end
     
     
   • Each link identifier needs to be enclosed in inverted commas. Make sure to match up the correct identifier with the one created in step 6
   
   
   Using this anchoring structure our first anchor becomes:
   
   

   <a name="withinposts">How to Create Internal Links To Sections Within the Same Blogger Post</a>
   

   
   Substitute your own link identifier and headings
   
   
9. Now move on to the next point you want to link to and create the second anchor. In this example we use the same structure but change the identifier
   
   

   <a name="withinblogger">How to Create Internal Links To Sections Within Different Blogger Posts</a>

   
   Again substitute your own link identifier and headings to suit your article
   
   
10. Save and Publish as normal and you will see your links are live and will jump the reader to different parts of the post

How to Create Internal Links To Sections Within Different Blogger Posts
Now you know how to create links to sections within Blogger posts let's look at how to create internal links within different Blogger posts.

Most of you will be able to create a link to another post in Blogger using the posts editor. You just highlight the text you want and click on the figure eight icon and Blogger creates the link for you. Which is great most of the time.

However what if we want to direct the visitor to a particular section of a different post? When you create an internal link it will take the viewer to the top of the page but what if you want them to see something near the end of the article? Well using an internal link similar to what we did to create internal links within the post we can.

Say I want to take my reader to a particular post in this case Blogger SEO Tips and Tricks. How would I go about it?

1. I create the link as usual by copying the article URL address from the browser address bar and using the post editor to add the link. The Blogger post editor uses this structure:
   
   

   <a href="URLaddress">linkname</a>

   
   So the Blogger editor would create the following link:
   
   

   <a href="http://blogknowhow.blogspot.com/2009/05/blogger-blogspot-seo-tips-and-tricks.html">Blogger SEO Tips and Tricks</a>

   
   The link would appear like this in a browser:
   
   Blogger SEO Tips and Tricks
   
   
2. Now I want to direct my visitors to the section about creating breadcrumb navigation so I add a section name using the following structure:
   
   

   <a href="URLaddress#identifier">linkname</a>

   
   Thus my link would look like this in the Edit HTML section of my post editor
   
   

   <a href="http://blogknowhow.blogspot.com/2009/05/blogger-blogspot-seo-tips-and-tricks.html#breadcrumb">Blogger SEO Tips and Tricks</a>

   
   Note the link seen in a browser remains the same
   
   
3. If you want your link to open in a new browser window add the following to your link:
   
   

   <a href="http://blogknowhow.blogspot.com/2009/05/blogger-blogspot-seo-tips-and-tricks.html#breadcrumb" target="_blank">Blogger SEO Tips and Tricks</a>

   
   
4. Now I need to go to the post I am linking to and add the anchor. So in the post SEO Tips and Tricks I would use the following structure to link to the section about how to add breadcrumbs:
   
   

   <a name="identifier">a heading</a>
   

   
   So the section about breadcrumbs in the Blogger SEO Tips and Tricks article is now enclosed by the following:
   
   

   <a name="breadcrumb">Add Breadcrumb Navigation to your Blogger Blog</a>

   
   
   If you now click on the link below you will see that your browser open a new window and take you directly to the section about adding a breadcrumb to your blog.
   
   Blogger SEO Tips and Tricks
   
   
5. Save your changes and publish your article as normal

In this Blogger tutorial you have learned how to add internal links to a particular section of a post from both within the same Blogger post and within a different post. By adding internal links you will help your visitors to find their away your blog more easily and access information quickly. You will also be adding to your blog's SEO by linking related posts.


Related Articles
List of Blog Know How Tutorials for Blogger Blogs
Blogger SEO Tips and Tricks