Internal Links for Blogger Posts – How to

Named link follows

VOCAB DATA LINK BREADCRUMS

*********************************************************************************************

 »  »  »  »  »  » How to Add Internal Links Within Blogger Posts ?

How to Add Internal Links Within Blogger Posts ?

Info 1 Here
*****************************

Share :

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 we 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


Create Internal Links To Sections Within The Same Blogger Posts:

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 we create these links? The answer is that we used simple html that anyone can learn in a few minutes. Here are the steps we 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 we are going to use headings. When creating this post we 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

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 we want to take my reader to a particular post in this case Blogger Sitemap. How would we go about it?

  1. We 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://addictofblogging.blogspot.com/2015/08/how-to-create-sitemap-table-of-contents-in-blogger.html”>Blogger Sitemap</a>


    The link would appear like this in a browser:

    Blogger Sitemap

  2. Now we want to direct my visitors to the section about creating breadcrumb navigation so we 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://addictofblogging.blogspot.com/2015/08/how-to-create-sitemap-table-of-contents-in-blogger.html#breadcrumb“>Blogger Sitemap</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://addictofblogging.blogspot.com/2015/08/how-to-create-sitemap-table-of-contents-in-blogger.html#breadcrumb”target=”_blank”>Blogger Sitemap</a>


  4. Now we need to go to the post we am linking to and add the anchor. So in the post Blogger Sitemap we 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 Blogger Sitemap 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 Sitemap

  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.


Enjoy !

Video How-to’s

1. VideoJug: VideoJug mixes user generated clips with professionally made content. Videos are accompanied by a text version, and you can download clips to your iPod or PSP. This UK-based site is receiving a lot of hype from the British press.
2. Sclipo carries a remix of the YouTube tagline: “Broadcast your skills”. The European startup provides how-to guides in English and Spanish.
3. Sutree: Sutree is a video aggregator that pulls in videos from sites like YouTube and Metacafe. Clips are picked by users and approved by moderators. There are no user profiles or playlists, making it a fairly lightweight offering.
4. 5min: 5min is a “videopedia” with a large amount of content. What we like: it offers unique features like slow-motion and zooming, especially useful for learning new skills.
5. Expert Village: Expert Village is trying to win on volume, with thousands of videos posted by experts. Currently, the site counts more than 1,700 experts and some 17,000 videos.
6. ViewDo: similar to VideoJug, ViewDo provides tagging, comments, video embeds, and RSS feeds for each expert. The contributors are ranked based on their expertise.
7. Helpful Video: With its minimalist interface, Helpful video is one of the few sites where you actually have to pay for some clips. The concept is interesting, but we doubt anyone will pay for your beginner’s guide to karate: there are just too many free alternatives.
8. TeacherTube: TeacherTube is YouTube for education, with courses for maths, data processing and literature. The site is organized by “channels” and “groups” (college, university, sciences, technology, Maths…). Features include blog embeds, favorites, tagging and commenting.
9. Vidipedia: Vidipedia wants to be the Wikipedia of the videos. It provides info on personalities, historical events and other content you’d expect to find in an encyclopedia. You can leave comments, download or embed videos elsewhere.
10. YouTube: Don’t forget YouTube itself: the YouTube category “How To and DIY provides a massive number of how-to videos and inspiration for projects. In fact, it could crush the others simply because of YouTube’s massive userbase.

Yearly Calendar

Code:

<iframe width=’370′ height=’568′ frameborder=’0′ src=’http://spreadsheets.google.com/pub?key=pIM_J1gg-sMP2juPolM-OMg&output=html&gid=1&single=true&range=A1:W33′></iframe>

Cal Gad

Smaller/Green
<iframe width=’120′ height=’132′ scrolling=’no’ frameborder=’0′ src=’http://spreadsheets.google.com/pub?key=pIM_J1gg-sMPXdimA-V85Vg&output=html&gid=1&single=true&range=A55:G62′></iframe>

Larger/Blue
<iframe width=’155′ height=’158′ scrolling=’no’ frameborder=’0′ src=’http://spreadsheets.google.com/pub?key=pIM_J1gg-sMPXdimA-V85Vg&output=html&gid=5&single=true&range=A19:G26′></iframe>

Calendar Gadgets for Your Blog

Embed one of our preformatted calendars.
We’ve recently discovered the beauty of Embedding Google Spreadsheets in Blogs, and calendars and schedules make for excellent examples. If you don’t feel like creating your own spreadsheet, you are welcome to embed any of our preformatted calendars listed on this page. All of the calendars listed on this page are perpetual orautomatically updated, meaning that they will update every 20 minutes or so. The one downside is that the current day is based on one specific timezone, Mountain Standard Time (MST) or GMT-7.

Perpetual Holiday Calendar

The Holiday Calendar below shows the current month and lists some common holidays. This calendar only includes U.S. holidays and a few religious obervances (like Easter, Hanukkah, and Ramadan).


120 x 260 pixels

Perpetual Monthly Calendar – 120×133 pixels

The 8 calendars listed below are designed for inclusion in narrow side bars on blogs or websites, with a commonly used width of 120px. You can see one in action by looking at the right side bar on this page.









Perpetual Monthly Calendar – 155×158 pixels

The second variety of monthly calendars is slightly larger, with a width of 155 pixels. Instead of showing every version and giving the html code for each version, you just need to find the format you like from the 8 listed above and then change a few things in the html code:
  • Change width=’120′ to width=’155′
  • Change height=’132′ to height=’158′
  • Change gid=1 (within the long SRC string) to gid=5



Perpetual 3-Month Calendar

These two calendars show the current month in the middle and the previous and next months on the left and right, respectively.





Perpetual Yearly Calendar

I didn’t create many variations of the yearly calendar, simply because I doubt they are going to be as popular for embedding as the small monthly versions.





How to Create Your Own Calendar

Don’t like any of these formats? Read the article Embedding Google Spreadsheets in Blogs to find out how to create your own spreadsheets and embed them into your website. I created a Google Spreadsheet template called “Embedded Calendar” that you can use to get started. If you want to create a monthly calendar that updates automatically, you’ll need to know a little trick through: The formulas for the calendar reference the cell used as the month title, for example the cell containing “February 2009”. If you use the formula=DATE(YEAR(TODAY()),MONTH(TODAY()),1) then the calendar will update based on the current day.

Embedding Google Spreadsheets in a Website

by Jon Wittwer, 2/26/2009
There are many ways to add free gadgets and widgets to your blog or website, but perhaps a lesser known technique is to embed a Google Spreadsheet.
You can always include a simple link to your published Google Spreadsheet, but what I’m talking about is displaying the actual spreadsheet or a portion of the spreadsheet on your site like the example below which shows a school event calendar for a fictional elementary school.



Why Use a Google Spreadsheet

Before listing some ideas for embedding Google Spreadsheets in your blog or website, let me address a few reasons WHY you might want to use a spreadsheet instead of using some other approach.

1. Calendars and Schedules

Spreadsheets are a popular tool for creating calendars because of the flexibility of formatting. You can also do some pretty fancy stuff with an embedded spreadsheet. For example, you could embed an automatically updatingholiday calendar on your blog or website. You could display your team’s practice and game schedule, or your school’s event calendar. There are many calendar and schedule templates that you could customize, but if you don’t want to bother creating your own calendar, you can use one of our the preformatted calendars for your blog.

I created two templates for the Google template gallery designed specifically for creating embedded calendars or schedules. In the gallery, they are entitled Embedded Calendar and Embedded Schedule.

2. Frequently Changing Data or Content

Perhaps you want to allow someone to update a list on your website, but they don’t know HTML or you don’t want to have to give them FTP access. You might be able to use an embedded spreadsheet as an alternative to programming in PHP/Java/ASP/etc or installing a script or content management system. Just create the list as a Google Spreadsheet and give the person permission to edit the spreadsheet. After they edit the spreadsheet within Google Docs, if they republish it, the updates will show up automatically on the website(s) where it has been embedded.
The examples below show two different ways of embedding a sample reading list. In the first case, the entire worksheet (named “List”) has been published, and in the second case, only a specific range of cells has been published. Note that in the first case, the embedded document shows the document title and the worksheet tab. You can find a Reading List template in the Google Docs Templates gallery.

 

3. Displaying Tabulated Data

Creating a nice looking table in HTML can be tricky, especially if you want to do fancy stuff with background colors. If you’re handy with a spreadsheet, you could just put the data in a spreadsheet and embed the table into your blog or website. Or, if your data is already in a spreadsheet – why go through the extra work of converting it to an HTML table? The data is stored in an <iframe> tag, so if the table is large, you can set the size of the embedded iframe so that the user can scroll through the data without scrolling the entire web page, just like in the reading list example above.

20+ Ideas for Embedded Spreadsheets

School / Academics

  • School Calendar – Many schools post yearly event calendars on their websites. For a detailed calendar, you might want to just link to a full spreadsheet, but it would also be nice to see a full year at a glance, with the main dates highlighted (like the example shown above).
  • Class Schedule – This might be just a list of the times and periods for a high school, or you could display your own personal class schedule on your blog or class website.
  • Homework Assignments / Syllabus – It is pretty common for a class syllabus to contain a table listing the homework assignements and due dates. You could embed the table on your class website.

Lists

  • Reading List – Share your list of favorite recent reads and indicate which book you are currently reading. Put your book club’s reading list on your blog. On a blog, this would allow others to comment on your current book, but be careful – maybe somebody would end up spoiling the ending.
  • Favorite [fill in blank] List – List your favorite movies, music, games, etc.
  • To Do Lists – I can’t think of a very good reason to share this with the world, but hey, it’s an idea.
  • Quote/Tip/Fact/Joke of the Day – With the Quote of the Day template, you can create a list of quotes and the spreadsheet loops through the quotes based on the current day. The example below is an embedded “quote of the day” gadget.

  • Price List – For a small business, home business, online auction …

Sports

If you run a website or have a blog devoted to your favorite team, here are a few ideas for ways to use embedded spreadsheets. These ideas may also work for a local club or organization that you belong to.
  • Training Schedule – This might be used on your school website if it’s for your team, or perhaps you train with a partner or group and want to show which days you’ll be in the gym.
  • Tournament Bracket – Do you have a tournament that spans multiple days? If so, you could use a tournament bracket template and display it on a blog or website.
  • Team Roster – Spreadsheets are great for tabulated lists.
  • Win-Loss Records or other Statistics – Keep track of your favorite teams, or the stats for your club or local organization.
  • Game Schedule – Embed your team’s game schedule on your school site, or if you are a devoted fan, show the game schedule along with a win-loss record on your blog.
  • Record Book – Use a spreadsheet to list the standing records for your school, club, or organization.

Business or Organization

Remember that publishing a document will make it viewable by the rest of the world. However, if you aren’t sharing secrets, it may still be useful to display on a portion of your website viewed mostly only by employees.
  • Conference Room Schedule
  • Shift Schedule – You could modify one of the calendars, use the Shift Schedule template included in the template gallery, or the Embedded Schedule template like the one used to create the school calendar shown above.
  • Work Schedule
  • Project Timelines or Outlines
  • Contact Lists

Personal

While I’m not to keen on putting a bunch of personal stuff on a blog, I know many people who like to share with the world their plans, progress, successes, or life stories.
  • Car Pool Schedule – This is something that might be constantly changing, and could either be a shared spreadsheet that you share with others, or something you embed in your blog or website.
  • Fitness Log – In a social setting, sharing your fitness log may help inspire others (or in my case, show others how lazy I am)
  • Personal Record Book – An idea for fitness enthusiasts who like to keep track of their personal bests.
  • Weight Loss Status / Chart – I’ve heard it said that if you write it down and share it with others, you are much more likely to reach your goal.

Other Gadgets

  • Countdown Timer – The following example shows a live countdown gadget embedded in this web page. It only updates about every 20 minutes (keep that in mind before you create something thinking it will update every second).

How to Embed a Google Spreadsheet

There are a few different ways you can embed a spreadsheet, and you can experiment with the different approaches. The steps below outline how to embed a specific range of cells into a blog or website.
  1. In Google Docs, create a new spreadsheet starting from the Embedded CalendarEmbedded Schedule,Reading ListQuote of the Day, or Countdown Timer templates (or use one of the other templates if you get permission from the owner to do so, or create your own spreadsheet from scratch).
  2. Publish as a Web Page: Go to Share and select “Publish as Web Page”. Click on the Publish button.
  3. Click on “More Publishing Options” at the bottom of the “Publish as Web Page” dialog box.
  4. Check the “Automatically re-publish when changes are made” option. If you have a dynamic formula like=TODAY() or other automatically updating content, this will cause your embedded spreadsheet to update every 20 minutes or so, even without you having to make manual changes.
  5. Select “HTML to embed in a web page” from the “File format” options.
  6. Select just the Sheet you want to publish from the “What sheets” options.
  7. Enter the range of cells you want to publish in the “What cells” text box, or if you want to show the entire sheet, leave the default as “All Cells”.
  8. Click on Generate URL
  9. Copy the HTML, and edit the width and height values as needed to size the iframe for your blog or web page. See the guidelines below about sizing the horizontal width.

Some Guidelines

  • Horizontal Width – By default, scrollbars will appear if the spreadsheet is wider or taller than the size of the iframe. The pixel width of an embedded spreadsheet in FireFox is wider than in Internet Explorer or Safari. Therefore, if you change the width=’xx’ attribute of the iframe, you should probably base the width value on how it appears in FireFox.

    One way to avoid having the scrollbars appear is to set the scrolling=’no’ attribute in the iframe tag like this: <iframe … scrolling=’no’ … >. The problem with this approach is that if the spreadsheet is larger than the iframe, the right-size will be truncated and the viewer will not be able to scroll to see it.

    Note: If your embedded spreadsheet is N cells wide, then the width within Safari is N pixels narrower and within Internet Explorer the width is N+1 pixels narrower. I haven’t checked this with different browser versions or on different computers.

  • Publish the Entire Sheet or a Range of Cells? Depending on your content, you may want to publish the entire worksheet instead of a range of cells. For example, if you create a list and only publish a specific range of cells, then if you edit the list later and it extents beyond the range specified in your blog, the list will show up truncated.
  • The method you use to publish and embed your spreadsheet (entire workbook, entire sheet, range of cells, scrolling or non-scrolling) should depend on how the spreadsheet might change in the future. Ask yourself the following questions:

    (a) Will the spreadsheet possibly change size (height or width)?

    (b) Will the number of columns or rows change?

    (c) Will the spreadsheet fit/display well within a blog or web page?

Cite This Article

To reference this article from your website or blog, please use something similar to the following citation:

Embedding Google Spreadsheets in Your Blog” by Jon Wittwer at Vertex42.com, Feb 26, 2009.