Dynamic Templates And The Navbar

If your blog is published to a dynamic template, neither you or your readers will have a navbar, when your blog is being viewed.

The navbar, found on blogs which use a non dynamic template - when selected by the blog owner - has a number of reader friendly icons and links.

Dynamic templates have a "menu bar" 1/5 of the way down the page - which provides a combination of the Pages gadget, and limited navbar functions. At the far right end of the menu bar, you'll see 2 tiny icons - when you are properly logged in as the blog owner.

• New post, the "pencil" icon.
• Home, the "home" icon.

Blog administrators have limited navbar functions, on a blog that's published using a dynamic template.

Blog administrators have limited dashboard access using menu bar icons.

The menu bar, just below the dynamic template title section, has the "New post" and "Home" links.

There's the menu bar, just below the Title / Description.

At the far end of the menu bar, the "pencil" and "home" icons.



You'll see the "pencil" and "home" icons - when you are logged in to Blogger, as the blog owner.

Blog readers have no navbar icons, in the dynamic template menu bar.

If you're not logged in to Blogger, you get no menu bar dashboard access.



If you never logged in to Blogger, or if you have a problem with a filter blocking access to the login cookie, you won't have any dashboard access.

If you can't access the dashboard using icons, you'll be able to login - just use a bookmarked link.

https://www.blogger.com/home

If you have a cookie filter problem, you may have to login again, to access the dashboard for your dynamic template blog.

---

A #Blogger blog that uses a dynamic template won't have a navbar, with easy access to the dashboard, and a convenient login / logout link. Dynamic templates provide a menu bar, which is a combination of a miniature Pages gadget and navbar.
target="_blank"

Blogger Magic - Resequence Pages Buttons / Links

Some blog owners add pages - dynamic and static - to their blog, then discover that the Pages gadget lists them in the wrong sequence.

We see an occasional question, in Blogger Help Forum: Learn More About Blogger.

My pages are poorly organised. How do I change the sequence?

This is not a difficult problem, to correct.

It's not difficult to change the sequence of the Pages buttons or links, using "Configure Page List".

Use "List Order" in "Configure Page List" to change button / link sequence.

The "List Order" wizard, in "Configure Page List", is used to resequence all pages entries (buttons / links) - for dynamic and static pages, alike.

Just "grab" a pages entry to be moved, using the "handle" - and re position it as desired.

Start in the dashboard Layout page.

Find the Pages gadget. Here, it's in the "Cross-Column" container.

Edit the Pages gadget.

That gives you "Configure Page List".

Find "List Order".

To re locate a button / link, find the "9 dot" handle.

Grab the page button to be moved. Mouse over the "9 dots", click and hold the left mouse button.

Drag the button, to its new location - and release. And Save.

And now, we see the page buttons, in the new sequence.



Just "click and grab", and move any button, into its new sequence. And don't forget to Save.

---

It's easy to change the order of the #Blogger Pages buttons / links, using the "List Order" GUI in "Configure Page List". Just click and drag any button / link, using the "9 dot" handle, into the desired location sequence.

Blogger Magic - "Configure Page List"

The "Configure Page List" wizard is an extremely useful - yet obscure - feature in the dashboard Layout page.

Not every blog owner sees the "Pages" gadget, in the "Layout" page and knows to click on "Edit", to access "Configure Page List". Nor do all owners know how many assorted functions, previously part of the "Pages" dashboard wizard, are now found, exclusively, under "Configure Page List".

"Configure Page List" is an essential component in the pages management suite, in the Blogger dashboard.

"Configure Page List" is accessible in two different ways.

• From the Layout dashboard menu - if the Pages gadget has been added to the blog.
• Using the appropriate "Quick Edit" icon - if "Quick Edit" is enabled, for the blog.

Add the Pages gadget, to the blog, if it's not present.

If the Pages gadget is not visible on the Layout display, you may need to add the gadget, to the blog.

To make the Pages gadget function as a horizontal link bar - the most popular layout - you add the gadget into the "crosscol" template section, in the dashboard Layout page. The "crosscol" section, on standard Blogger templates, contains CSS rules which make lists display horizontally.

Enable "Quick Edit", if necessary.

If you wish to use "Quick Edit" to access "Configure Page List", you may need to enable "Quick Edit".

"Configure Page List" has many functions.

Find the Page List gadget, in "Layout", and click on the pencil icon.

When you edit the Page List gadget, you get "Configure Page List".



Here, we see "Pages to show" (to select static pages), "Add external link" (to add dynamic pages), and "List Order" (to delete dynamic pages, using the "X").

"Configure Page List" has various functions, in managing both dynamic and static pages.

• Change the Title of the Pages gadget, in the Layout wizard display, using "Title".
• Hide / Show "Home" and various static pages, created by Page Editor, by using "Pages to show".
• Resequence the order of display of the various pages, by dragging and dropping using "List order".
• Add dynamic pages, previously called "Web address" entries, using "Add external link". Dynamic pages can include individual posts, archive retrievals, label searches, and other blogs or websites. Be very precise, when entering an "Add external link" entry for "Web address (URL)".
• Delete dynamic pages, by clicking on the "X", using "List order".
• Note that to change the caption or URL for a dynamic page, you must delete then re add a new dynamic page entry, using the desired name and URL.
• Let you remove the Pages gadget, using the "Remove" button.

To use "Configure Page List" effectively, you need to understand the differences between Pages and Posts.

The gadget will change form, depending upon location.

The "Pages" gadget may be present in various locations, in the blog - and may have different appearances, depending upon location.

In either appearance, if "Quick Edit" is enabled, you can access "Configure Page List" by clicking on the "Quick Edit" icon. Or, you can Edit the Pages gadget from the Layout menu in the dashboard.

History.

In 2014, Blogger reorganised the various pages maintenance utilities, and moved a wide assortment of functions into "Configure Page List". This change caused some confusion, with many blog owners.

Confusion From "Add external link" In Pages

The recently redesigned Pages gadget and wizard has been with us for just over 3 months.

We are occasionally seeing some confusion from people who can't add a dynamic page link to their blog - even when they manage to find the redesigned Pages gadget.

I added a dynamic page, linking from "mymainblog.blogspot.com" to "mysecondblog.blogspot.com". Imagine my dismay, when the new page link goes to "mymainblog.blogspot.com/mysecondblog.blogspot.com", instead of to my actual target "mysecondblog.blogspot.com"!

Here is a blog owner who is not aware of the unforgiving syntax of the "New Page › Web Address" wizard, and the "Web address (URL)" entry.

If we were to view the HTML code for this web page, 'Confusion From The "Add external link" Procedure In The Pages Gadget', and look at my link to a previous post "Adding A Link To Your Blog Post, Part 2", where I discussed link entry syntax confusion, we could see the HTML behind a typical post to post link.

<a href="http://blogging.nitecruzr.net/2010/08/adding-link-to-your-blog-post-part-2.html">link entry syntax confusion</a>

See the code for the link target?

http://blogging.nitecruzr.net/2010/08/adding-link-to-your-blog-post-part-2.html

When adding a link, many blog owners would simply think

blogging.nitecruzr.net/2010/08/adding-link-to-your-blog-post-part-2.html

If I were to add a link, using the "Add link" wizard in post editor - or using the "Web address (URL)" entry in the "New Page › Web Address" wizard, I would see a window, with the essential prefix "http://" preformatted there.

Taking my target address of "blogging.nitecruzr.net/2010/08/adding-link-to-your-blog-post-part-2.html", and pasting the target after the prefomatted prefix "http://", I would get "http://blogging.nitecruzr.net/2010/08/adding-link-to-your-blog-post-part-2.html".

If I were to simply paste "blogging.nitecruzr.net/2010/08/adding-link-to-your-blog-post-part-2.html" into the window, I would end up with (no surprise, here)

<a href="blogging.nitecruzr.net/2010/08/adding-link-to-your-blog-post-part-2.html">link entry syntax confusion</a>

That's a bit odd looking - and that gets worse. A URL which lacks the prefix (for instance) "http://" has the current base URL added, when the post is compiled into the blog.

This would result in HTML code

<a href="http://blogging.nitecruzr.net/blogging.nitecruzr.net/2010/08/adding-link-to-your-blog-post-part-2.html">link entry syntax confusion</a>

With these two Blogger link entry wizards, you must remember to add the link target selectively, if and only if it is not already prefixed by "http://" - after the preformatted "http://".

Conversely, if you start with a target

http://blogging.nitecruzr.net/blogging.nitecruzr.net/2010/08/adding-link-to-your-blog-post-part-2.html

you want to overlay the "http://" prefix in the window. If you follow the "http://" in the window with

http://blogging.nitecruzr.net/blogging.nitecruzr.net/2010/08/adding-link-to-your-blog-post-part-2.html

you'll end up with

http://http://blogging.nitecruzr.net/blogging.nitecruzr.net/2010/08/adding-link-to-your-blog-post-part-2.html

and that will present a new problem.

Some link entry wizards are more forgiving - and will add / strip the target URL, as necessary, so it always ends up with the right syntax construction. This is just another Blogger peccadillo.

Renaming The Home Page, Using The New Pages Gadget

The recent Blogger redesign of the Pages list / Pages gadget has caused some confusion.

How do I create a "Web address" page?

and

How do I hide a page?

and even

How do I edit a "Web address" page?

Once you understand how to use the newly designed Pages gadget, it's not complicated do each of the above.

Then there are those who want to rename the Home page - which used to be obvious. Just use the Pages gadget.

• Look under “Pages to show”.
• There’s the box, containing “Home” (in the language of the blog).
• Type a new value for “Home”.
• Hit “Save”.
• Done.

That's how it used to work.

Now, you can hit "Save" all that you want. It just won't accomplish anything.

Fortunately, this simple omission by Blogger Engineering is not difficult to work around, using "Configure Page List".

• Use “Add external link”, and create a dynamic page, with “Web address” of the blog Home page.
• Use “Pages to show”, and de select the default “Home” page.
• Use “Page order”, and position the newly renamed “Home” page as desired.
• Hit "Save".
• Done.

It's a 60 second effort, instead of 30 seconds.

Eventually, Blogger Engineering will fix their mistake. Until then, just do it - then get back to work on your blog.

>> Top

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.

Static Pages, And A Custom Pages Index - Part 2

There are always details to deal with, and the "Linklist as Pages Index" solution, to provide a "Pages" gadget that indexes non pages, is no exception. As pointed out to me this morning, a "LinkList" gadget, when simply substituted for the "PageList" gadget, doesn't have the right stuff to make the selected tab light up, when the requested page is being displayed. The lit up tab makes the Tabs gadget seem so user friendly, and some folks like that little detail.

Fortunately, this problem is not difficult to correct.

1. First (yes, he's telling us again), backup your template.
2. Next, "Edit HTML" and select "Expand Widget Templates".
3. Look for

   <b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>

4. Look a few lines below that for
   

   <li><a expr:href='data:link.target'><data:link.name/></a></li>
   

   and replace it with
   

   <b:if cond="data:blog.url == data:link.target">
             <li class='selected'><a expr:href='data:link.target'><data:link.name/></a></li>
           <b:else/>
             <li><a expr:href='data:link.target'><data:link.name/></a></li>
           </b:if>
   

5. Save Template.
6. Test.
7. And finally, backup your template,again.

Not terribly complicated. Just another detail.

Static Pages, And A Custom Pages Index

Ever since static pages were released by Blogger, bloggers have been asking how to index non static pages in a static pages (aka "tabs") index. Questions like

How do I publish a label page with my static pages?

and

How do I link to another blog, in my Pages gadget?

and

How do I publish posts in pages?

are asked, fairly regularly.

The typical answer, to the question above, has been

You can't index anything but pages, in the Pages gadget. You have to make a custom index bar.

Posts are dynamic content, and pages are static content. Posts and pages are simply different blog content. And the standard Pages index gadget only indexes static pages.

Fortunately, a horizontal menu bar, to replace the Pages index gadget, isn't difficult to make. You can see one right now, in my home blog, Nitecruzr Dot Net.

If your blog has a new Designer Template, you may wish to go a bit further, and make a custom Pages Index. With a Designer Template, we simply position a linklist in the Pages Tab Index space, and we get a horizontal menu bar / tabs index with the look and feel of a Pages gadget.

1. First (should you ask?), backup your template.
2. Go to "Page Elements", and look below the page header space, in the Tabs section. If you do not see a space just below the page header, upgrade your template. The picture below shows what you will want to see. If you have an old blog, with a template created before static pages were released, you'll want to use the Template Designer, and give the blog a nice Designer Template.
3. If you have a Pages Index gadget already installed in the template, delete it.
4. Create a linklist, and put some links into it. You can add or change any links that you put into your new linklist, whenever you feel the need. If you want to index posts, use labels, and index label searches. In some cases, you may be better off creating an HTML based linklist, using raw linklist code copied into an HTML / JavaScript gadget.
5. Position your new linklist where the Pages gadget was (or would be).
6. Save.
7. Backup the template, again (yes, do it again)!
8. Test.
9. Add more links to the linklist, when you feel the need. It's a linklist, and you hopefully know how to add links to a linklist.

See the "Add a Gadget" space below the header ("Nitecruzr Designer Template")? If you don't see that space there, you need to get an updated template.



You can see my demonstration in Nitecruzr Buzz. I just took the linklist out of the sidebar, repositioned it as I discuss above, and voila. It took me 2 minutes.

---

Of course, there are details which should be attended to, any time you tweak a new Blogger feature.

---

For more detail, see Roberto's Report: New Designer Template and the Tabs Index.

---

(Update 2011/08): The pages editor, in the New Blogger GUI (2011), now provides us with this option.

---

>> Top

Static Pages In A Renamed Blog

It's possible that Blogger takes the term "static", as in "Static Pages", very seriously.

I've been hearing rumours of odd URLs in blogs that are renamed - ie, published under a new URL - where static pages are present. Today, I setup a brief experiment.

You may see the result of my experiment, in my test blog "Nitecruzr Test Pages In Renamed Blog". The blog started out as "nitecruzr-test-pages-blog-rename.blogspot.com". You are welcome to click on that link, if you wish. It won't get you anywhere, though.

After I setup the blog, I published a couple Static Pages - "About Me" and "About This Blog", with a tab bar below the header, as the Pages gadget.

After publishing the pages, I renamed the blog to its current URL "nitecruzr-test-pages-blog-renamed.blogspot.com". Do you see the name change?

nitecruzr-test-pages-blog-rename.blogspot.com
nitecruzr-test-pages-blog-renamed.blogspot.com

A very small change, but it's significant.

And now, please examine the blog itself. Observe the URL of the first post, "Lorem Ipsum".

nitecruzr-test-pages-blog-renamed.blogspot.com/2010/03/lorem-ipsum.html

And look at the Pages gadget

Home    About Me    About This Blog

The 3 static links:
nitecruzr-test-pages-blog-rename.blogspot.com
nitecruzr-test-pages-blog-rename.blogspot.com/p/about-me.html
nitecruzr-test-pages-blog-rename.blogspot.com/p/about-this-blog.html

That's a problem. What we should have is

Home    About Me    About This Blog

The 3 static links:
nitecruzr-test-pages-blog-renamed.blogspot.com
nitecruzr-test-pages-blog-renamed.blogspot.com/p/about-me.html
nitecruzr-test-pages-blog-renamed.blogspot.com/p/about-this-blog.html

So, try it. Click on an link in the first example, above.

The blog you were looking for was not found.

What have we observed?

• Static Pages get a new URL, when the blog is renamed.
• The links in the Pages gadget are not changed.

I think somebody has some work to do, yet.

Fortunately, if you know that this oddity exists, it's not hard to correct it. Just delete the Pages gadget. Then go to "Layout", and add a Pages gadget again. The re added Pages gadget will now have links with the correct URLs.

But please, only delete the Pages gadget - please, do not delete the individual pages. It appears that pages are given the same duplication prevention treatment, as are posts. If you delete the pages, you'll end up with suffixed URLs, when you re create the pages.

There is more to consider, when we examine a blog published to a custom domain, and the blog In Transition. We will examine that, later.

Static Pages And The Pages Index

As more people are adding static pages to their blogs, the questions about the possibilities have started coming.

How do I add a label search to my pages index?

or

How do I add a post to my labels index?

or even

How do I add a link to another blog as a page index entry?

And right now, you can't do any of these things, to a standard pages index.

A Pages Index gadget indexes the static pages in your blog. Period.

But as I've written before, a pages index is nothing more than a linklist (in the sidebar), or a horizontal menu bar (under the blog header), with the links to the pages enumerated in the linklist or menu bar.

A linklist is easy enough to make - that's just a simple gadget, in "Page Elements". A horizontal menu bar isn't all that much harder to make.

Just find the Pages List for the blog, and for each page, extract the page title, and the page URL. Each page title combined with the page URL becomes one clickable link in the linklist or horizontal index. When you want to add non pages to the pages index, those are simply more entries - a caption / title + a URL becomes yet one more clickable link in the linklist or index.

Then style the linklist or index, as you like.

The one thing that you won't get is a cute gadget, that morphs between a horizontal tab bar and a linklist, as you re position it below the header, or in the sidebar. You have to plan where you want your index, and style it accordingly. Other than that, it's a 30 minute task to make one or the other.

If you like the look of the Static Pages Tabs Index gadget, particularly in a Designer Template - but you want to index labels and / or post pages, you will need to use a linklist in place of the Pages gadget.

>> Top