Adding A "Top Of Page" Button To The Blog

This week, I added a gadget that's been needed, on this blog, for some time.

You may see my new "Top" button, at the lower right corner of this blog. If you have a normally wide browser window, with wallpaper showing on either side of the posts / sidebar section, you'll see the new gadget floating on top of the wallpaper. If you have squeezed your browser window to save horizontal space, you may see the new gadget floating on top of the sidebar (but beneath the sidebar gadgets).

This is an extremely easy tweak to add. The hard part was finding - and sizing - the icon that I used.

To find a suitable icon for the button, Google for it.

To find the icon, Google Is Your Friend. Just look through the search listings, until you find one that fits with your blog.

free up arrow icon

Once you have found an icon that you like, download to your computer - then upload to your blog - politely. Don't hot link icons.

• Hotlinking is rude, and may abuse somebody's limited bandwidth.
• Hotlinking depends upon somebody's intention to host their icons, using their service, for eternity (however long you publish your blog, anyway).

Once your chosen icon is saved as a blog image, setup the button code.

Once you have your icon politely saved as part of your blog, add an HTML gadget - and add the gadget code, in the Content window of the HTML gadget.

<a style="display:scroll;position:fixed;bottom:20px;right:60px;" href="#" title="Top"><img border="0" height="60" width="60"  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2eOcCRS3N1_JwNrk6zva82CQybo8TWCvgMs6lUtZhyl_6XrkbjWP8Ayf2eQLtg3KEaUMruYNMT3uHK7llf3gltPNd6PMaMEjSWXuTpPzCX-fAebzTg5xQTb9kdRRiRhVVm347DAyfZzdk/s320/Up+Arrow+4.jpg" /></a>

Here's the magic.

style="display:scroll;position:fixed;bottom:20px;right:60px;"

That positions the icon in a fixed location on the screen. The new HTML gadget contains the code - and can be located anywhere in the blog. The magic determines where the icon is displayed.

Adjust settings, to make the button appear in an acceptable screen position.

Adjust "Bottom" and "Right" values, to position your new icon in the desired location, for your blog. Resize the browser window a few times - make it narrower and wider - and get an idea how the final location of the icon may vary. Test in different browsers, too.

This is my icon:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2eOcCRS3N1_JwNrk6zva82CQybo8TWCvgMs6lUtZhyl_6XrkbjWP8Ayf2eQLtg3KEaUMruYNMT3uHK7llf3gltPNd6PMaMEjSWXuTpPzCX-fAebzTg5xQTb9kdRRiRhVVm347DAyfZzdk/s320/Up+Arrow+4.jpg

Your icon will have a different URL. Use your own icon, please!

Then sit back, and enjoy your blog, with its new navigational aid.

A caveat.

If you add your "Top Of Page" button code into a page or post, never switch between Compose and HTML modes, when editing that page or post.

Make A Custom Pages Index For Your Blog

Even before Blogger added static pages as a blog feature, blog owners have been asking how to make hidden or separate pages for their blogs.

When static pages, and the Pages index gadget, were added, people started asking about indexing label searches and external links in the Pages gadget.

There are several solutions to the need to have a Pages gadget that indexes archive / label searches, and external URLs. Each solution has its advantages, and disadvantages.

If you want a Pages gadget for your blog, that indexes more than just static pages, you have two basic choices. Each choice gives you different possibilities.

1. Replace the Pages gadget with a linklist. You can index any URLs that interest you, in a linklist.
2. Use the Pages editor, in the dashboard Layout page, which lets you add URLs of your choice, directly to the Pages gadget.

I've been advising people for several years, how to make a horizontal index bar for the blog.

With most Blogger templates, the Tabs section contains CSS that displays any linklist positioned there, horizontally. This gives you the choice of using "Add a gadget", and creating a linklist as an XML based "Linklist" - or one created as an HTML based "HTML / JavaScript" gadget - and both choices have advantages.

Use an XML based linklist.

If you look at the menu bar on this blog, you'll see how the active menu button "lights up" when selected. The "Selected" feature is a CSS tweak - and requires that you use a linklist that's XML based.

I created the menu bar here, using "Add a gadget", and tweaked the template code. The default Pages gadget is XML based - and does not require the latter tweak.

Use the Blogger supplied Pages gadget.

As an alternate to using a linklist gadget, you could use the Pages gadget.

If you use the Pages Editor, and you position the Pages gadget in the proper position, your blog, when displayed using a dynamic template, will populate the black menu bar with your Pages list. When that happens, the dynamic view menu will be displayed as a drop-down list, at the far left of the menu bar.

Jump Break, Main Page Contents, And Search Engines

The articles in this blog, which discusses production and use of Blogger blogs, are written as posts.

The various posts are combined, using embedded links, in different ways. Each new post appears on the main page, as it is written - and the various posts, appearing together on the main page, create opportunities for confusion, with the readers of the blog.

Long ago, the task of moderating comments was rather depressing to me, as the focus of many of the comments made me think that nobody was actually reading the articles. Maybe, I would write an interesting post about URL availability; but when moderating comments, I would find questions about posting comments on static pages. Or maybe a post about dynamic template concepts would attract complaints about referer spam.

Why should I publish my advice, if nobody cares enough to read the articles and comment relevantly?

Just previous to this post, I wrote about Stats displays, and the contents of the Posts lists.

In the process of writing the latter article, I discovered one obscure benefit of using "Jump Break" - and how "Jump Break" affects main page view, search engine indexing, and finally, relevance of comments to post subject.

A home page, with a variety of posts, naturally produces un focused comments.

Why the apparent lack of focus, of the comments? One reason is that many different posts, published one after the other, appear in sequence, in the blogs main page.

People will read the posts - and the search engines will index the posts - using main page view. Only after newer posts force the older posts, one by one, from main page view, will the individual posts have any significance - to people or search engines.

Using my example above, and looking at my main page when this post was new, one would have found a post about URL availability, published a week after a post about posting comments on static pages. By the time the search engines indexed the latter post, I would have published the former post. The post about URL availability would be visible in main page view, ahead of the post about posting comments on static pages.

Clicking on the link to my blog, attached to a SERP entry referencing static pages, the reader will read my main page from the top, find the previously visible post about URL availability, and the Comments link following the post. Clicking on the first Comments link found, the reader will post his question about static pages, against my post about URL availability.

Use of Jump Break gives a home page that can be easily read, top to bottom.

So, what effect does the use of "Jump Break" have on this problem? Using "Jump Break" on all main page posts makes it more likely that a potential reader of the blog, following a home page link to the blog, has more chance to see all recent posts, with their summaries.

The reader is more likely to scan down the page, see a summarised relevant post, click on "Read more" - and read the relevant post, on the individual post page, before commenting.

Use of Jump Break gives more weight to the individual posts, as indexed.

Additionally, with the posts summarised in main page view, the search engines will find less content on the main page. The full posts will be indexed as individual post pages, more than as part of the main page. This gives more weight to the individual posts, and less weight to the main page.

When indexed using an automatically generated, robust sitemap (2014), the posts will appear individually in SERP lists, decreasing reader main page confusion. Each SERP entry, pointing to an individual post, will be more relevantly focused - giving it more weight than a SERP entry, pointing to main page view.

Use of Jump Break, consistently, produces a win-win-win scenario.

In summary, careful and consistent use of "Jump Break" leads to:

• Better focus on individual and relevant blog articles, by the search engines.
• Less confusion to the blogs readers, when accessing the blog using SERP hit lists.
• Less frustration for the blog owner, when moderating comments.

It's really a win-win-win, when used consistently. And, it's so simple to apply, on a post by post basis. Check it out, in action.