Showing posts with label Template Tweaks. Show all posts
Showing posts with label Template Tweaks. Show all posts

Tuesday, October 11, 2016

Custom Domains And HTTPS Redirection Code

As most of us know, Blogger HTTPS support does not include custom domain publishing.

The advantages offered by HTTPS access are widely advertised - and have led to envy between blog owners who publish to custom domains, and native BlogSpot blog owners proudly advertising their new HTTPS connectivity.

Long ago, we saw possibly malicious code which helps our readers avoid using country code aliases, to read our blogs from an aliased country. Recently, there was dodgy code which blocked HTTPS mode, to read a customised blog.

Now, we have custom code to force HTTPS access, for BlogSpot published blogs.

Along with providing code to help blog owners avoid country local domain aliasing, some marginally helpful hackers are providing code to help blog owners force reader access to HTTPS.

Some blog owners always wanted HTTPS to be used, to access their blog.

Some blog owners wanted their readers always using HTTPS to access their blogs, before forced HTTPS access became an option. They Googled, and found, semi helpful hackers who provide clever code to force the "HTTP --> HTTPS" redirection.

<script type='text/javascript'>
$(document).ready(function() {
  $("a[href^='http://']").each(
    function(){
      if(this.href.indexOf(location.hostname) == -1) {
        $(this).attr('target', '_blank');
      }
    }
  );
  $("a[href^='https://']").each
    function(){
      if(this.href.indexOf(location.hostname) == -1) {
        $(this).attr('target', '_blank');
      }
    }
  );
});
</script>

This is clever code - when only BlogSpot access is involved. When you add BlogSpot to custom domain redirection, it becomes another "404".



Adding this clever code is an excellent solution - until the blog owner forgets about it, and later upgrades to a non BlogSpot custom domain.

With a custom domain published blog, the redirection becomes a problem.

The added code contains no exception to permit custom domain published blogs to remain in HTTP mode. When accessing an otherwise properly setup custom domain published blog, from a reader using the "blogspot.com" URL, this prevents the BlogSpot to domain redirect from operating.

BlogSpot URLs, which should redirect to the HTTP published custom domain URL, instead redirect to a non existent HTTPS URL - and result in another "404". As the custom domain URL becomes more commonly used for a recently published blog, confusion increases when the rarer BlogSpot URL reference is encountered.

My blog has been using the domain URL for months, why is this happening now?

The problem involves dual redirection - to "https:" mode, and to the custom domain.

After painful problem diagnosis, we find the clever redirection code buried in template HTML - and we see that the blog reader is starting from the BlogSpot URL, and using the BlogSpot to domain redirection, to access the blog.

With blog access redirected to "https:" mode, then subsequently to the custom domain URL, the readers sees a "404" - because the custom domain URL is not available as "https:" content.

This problem will become increasingly rarer - but not extinct.

As self caused custom domain victims become rarer, this way of breaking ones own blog will become more obscure - and it's likely that some cases will go, unsolved. This will be similar to the problem of un migrated classic templates, which has increasingly less experienced support.

If you must install unsupported template tweaks into your template - consider the long term effects. Learn to recognise a problem that you have caused, to your own blog.

Not every helper will realise that you have added custom redirection code - and when looking at the problem code, when a problem is reported, will recognise it for what it is. Your problem may remain your problem - at least, until Blogger Engineering completes Blogger SSL integration (may this happen soon).



Some blog owners have added clever HTTP to HTTPS redirection code, acquired from helpful third party providers, installed in the template. When later publishing a blog to a custom domain, this code will prevent proper blog access - and as installed, may not be easily recognised.

https://productforums.google.com/forum/#!category-topic/blogger/bl5W39BKX4U

Monday, December 15, 2014

Don't Try To Number Dynamic Pages

One interesting question, which we see occasionally in Blogger Help Forum: Learn More About Blogger, would be about making the blog easier to read - if the blog were static.
How do I number the pages, in the blog?
This blog owner does not quite understand the concept of dynamic content.

With a static website, and each page linked linearly, one after the other, it might make sense to number the pages.

Blogger blog content is dynamic.

A Blogger blog has dynamic content. Each reader retrieves the posts, in reverse date sequence, in a number of contexts.

  • In main page view, one page linked to the next - owner selectable maximum posts / page, auto paginated.
  • In individual post view, one post linked to the next - one post / page.
  • In an archive retrieval, one page linked to the next - a maximum of 20 posts / page, auto paginated.
  • In a label search, one page linked to the next - a maximum of 20 posts / page, auto paginated.

Each label in the blog can generate a different label search, one search / label.

We say that the content is dynamic, because each of the above contexts use blog content, retrieved just when a reader clicks on a link.

Each time content is retrieved, for each reader, it will differ.

Each different retrieval will generate a series of physical pages of display, with a different combination of posts. Each retrieval will be paginated according to amount of content, by auto pagination.

If the posts are summarised using Jump Break, pagination will reflect the visible post content. With other "Read More" solutions, this may or may not be the case.

Dynamic indexes can use any combination of various dynamic accessories.

You can index the posts in a blog, using various dynamic sidebar gadgets.

  • An archive index.
  • A label index.
  • Any number of linklists.
  • Any number of feed gadgets.

Again, each index will be dynamic.For truly dynamic indexing, you can provide a single blog search - or a multiple blog search - or even a label combination search.

You can get installable gadgets, and custom templates, from various third party developers. Some gadgets and templates will let you setup an index (whether dynamic, or static), with page numbers. This will be third party code - and carries with it the risks of using third party code.

Non dynamic accessories require post template tweaks.

Non dynamic indexes generally install as code, inserted into the post template. The post template is not a blog component that should be tweaked, without understanding the risks.

Also, if you apply to host AdSense ads on the blog, you'll probably get a refusal, cited as "Difficult navigation". The AdSense crawler can't navigate JavaScript based links - and won't be able to analyse post content, to place ads.


The AdSense crawler can't navigate this blog, with numbered pages.



All of the above details affect how much content may appear on one physical page, and how many pages may be relevant to the retrieval. With these unknowns, it is not productive to identify each post - or set of posts - using page numbers.

How many index listings would you want to keep - especially considering that any one index could change, in the next minute, as a new post is published, or maybe a label is added to, or removed from, one or more posts?

Blogger content is dynamic. Treat it, dynamically.

Thursday, November 13, 2014

The Blogger "Contact" Form - What You See Is What You Get

Blog owners add the Blogger supplied Contact Form, then wonder about the details, and what options are available.

The Blogger supplied "Contact Form" gadget provides a very basic form, with few options. There's not a lot to do or see.

With the Blogger "Contact Form" gadget, what you see is what you get.

You add the form to the blog, and you change the Title of the form.

Use is simple. You fill out the form, and Send. The content, once sent, can't be edited.

The reply address is whatever you entered, in the "Email" box.

If you are the owner of the blog, the message goes to you. If the blog has multiple administrators, Send a test message, and have everybody check their Inboxes. Find out who should expect to see Contact messages, and what email addresses are targeted.

If you test the form on your blog, when using a Blogger account based on a non GMail email address, you may not receive the test entry in your Inbox.

If you, as the blog owner, want a form with more options, or the ability to manage form recipients, you use a third party form. You can use Google Docs, and create a simple "Contact Me" form, in 15 minutes. A Google Docs created form can have multiple, designated recipients, and can be edited by the sender. The Docs based form entry goes into an online database, which can be accessible by designated recipients.

You can embed a Google Docs based form in a page or post - and you can create your page or post as a separate tab, in the blog - as I added my Blogger "Contact Me" form or alternately, my Expanded Followers gadget, to this blog.

What you see below is my demonstration Google Docs form, embedded using an IFrame. The IFrame code is provided with the form, which required a brief 10 minutes to create. When you create your form, hit "Send form", then "Embed", to get the code for your form. You can see my improved Contact form, in my page, "Contact Me, Improved".
<iframe src="https://docs.google.com/forms/d/1JvoY2yf5aTChnvXlCgGsUerSCtI7RHpRdkq5SPBPm90/viewform?embedded=true" width="700" height="800" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>



There are various third party, non Google "Contact" form suppliers - some free, others not - some reliable and safe, others not. Be careful, if you decide to use a non Google, third party, product.

>> Top

Wednesday, October 29, 2014

Blogger Magic - Hiding The Blog Pager And Blog Feed Subscription Lines

One of the neatest magic tricks is to make something disappear, with just a flick of the wrist (whether or not holding a "magic" wand).

We see occasional requests to make template components disappear. Many times, we end up recommending editing the blog template. Sometimes, unwanted components are part of the post template - and we have to explain why editing the post template is not a good idea.

Some template components, when properly identified, can be made to disappear with the proper CSS rule. CSS rules can be added, using the Template Designer - and do not require editing the template.

Even better news, CSS rules added using "Add CSS" are persistent. Even changing the blog template - or resetting the post template - does not erase CSS rules, added using the Template Designer.

Two post template components, regularly requested for removal, are the "Blog Pager" caption lines
Newer Posts   Home   Older Posts
and the "Post Feeds" caption
Subscribe to: Posts (Atom)

To hide these components, a simple one line CSS rule is necessary, added using the "Add CSS" option in the Template Designer.

For the "Blog Pager" line:
#blog-pager {display:none}
For the "Posts Feeds" line:
#post-feeds {display:none}
As with any addition using "Add CSS" always precede and follow any added rule, with a blank line.

This trick, as with many magic tricks, is easier to do, than to explain. Was I to add this to my blog, I would have been done, long ago.

>> Top

Tuesday, December 13, 2011

Owners Of Blogs, With Images In The Header, Report Changes In Header Appearance

During the past few days, we're seeing a few reports in Blogger Help Forum: Something Is Broken, from owners of blogs that use an image in the header, instead of or in addition to, plain text, claiming changes in the appearance of the header. The exact problem report varies - that the image has been resized, has shifted in position, has become pixelated, or has simply disappeared.

We have a rollup discussion, where we are requesting details from each person observing this problem in their blog.
  1. What is the URL of the blog?
  2. What exact symptom are you observing, that's a problem?
  3. Does the blog use a Blogger or third party template?
  4. Does the blog use a Designer or Layout template?
  5. Has the blog been configured for a Dynamic template?
  6. How did you setup the image, that is in use on your blog? Did you use the Layout "Configure Header" wizard, did you upload the image using the post editor "Insert image" wizard, or other?
  7. If you used the "Configure Header" wizard, which Image / Placement options did you select?
    • From your computer.
    • From the web.
    • Behind title and description
    • Instead of title and description
    • Have description placed after the image
    • Shrink to fit
  8. Can you find the image on your computer? If so, what is the name of the file, as uploaded? Is it a .bmp, .jpg, .png, what?
  9. When you setup / uploaded the image, what browser (name and version) was used?
  10. What browser (name, and version) are you using, right now, where the problem is visible?

If you can provide details, please do so as best as you are able, either here or in the rollup discussion.

In cases where the URL of the image in use can be edited, you may be able to work around your problem, by editing the precise URL. It appears that images hosted by Picasa, which are currently stored in a variety of sizes (which you may see when you use "Insert image", for instance), are now selected in a different way, when you do not explicitly select the right size for your purpose.

Look at the image at the top of the screen. If you were to look at it's URL, you would see:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2C5RmwbU8URBRB_n_HzNYhK2r3KBzHNIRCjjnOPDDcP5FSddfRh9bKZ3Qyxg10CU24Pr9Zx7j8IJzq1rlptTB_NtJpltts4jm3Hfsi3E2Ovt3QqFXnT-NavhPRoaVUQJJcQZRyjgn2_s8/s1600-r/RBS+Header+4a.gif

If that image had been uploaded using the current "Insert image" wizard (in post editor), or the "Configure Header" wizard (in "Page Elements"), it might have the URL

http://1.bp.blogspot.com/_pzC_7PLtN-0/R_buGAu4D3I/AAAAAAAABCI/wxcsyLm3DoE/RBS%2BHeader%2B4a.gif

If the latter URL was correct, there would be 4 aliases available:
  • Small: http://1.bp.blogspot.com/_pzC_7PLtN-0/R_buGAu4D3I/AAAAAAAABCI/wxcsyLm3DoE/S160/RBS%2BHeader%2B4a.gif
  • Medium: http://1.bp.blogspot.com/_pzC_7PLtN-0/R_buGAu4D3I/AAAAAAAABCI/wxcsyLm3DoE/S320/RBS%2BHeader%2B4a.gif
  • Large: http://1.bp.blogspot.com/_pzC_7PLtN-0/R_buGAu4D3I/AAAAAAAABCI/wxcsyLm3DoE/S640/RBS%2BHeader%2B4a.gif
  • Full Size: http://1.bp.blogspot.com/_pzC_7PLtN-0/R_buGAu4D3I/AAAAAAAABCI/wxcsyLm3DoE/S1600/RBS%2BHeader%2B4a.gif

If I had this problem with my header image, I would edit the URL, in the template, and I would replace:
http://1.bp.blogspot.com/_pzC_7PLtN-0/R_buGAu4D3I/AAAAAAAABCI/wxcsyLm3DoE/RBS%2BHeader%2B4a.gif

with

http://1.bp.blogspot.com/_pzC_7PLtN-0/R_buGAu4D3I/AAAAAAAABCI/wxcsyLm3DoE/S1600/RBS%2BHeader%2B4a.gif

If your blog has this problem, you may be able to similarly edit your blog - using "Configure Header" or "Edit HTML" - and work around your problem. If you use "Edit HTML", I suggest, as usual, that you backup the template - before and after making this tweak.

>> Top

Sunday, November 27, 2011

Blogger Magic - A Static Home Page

Every week, somebody asks for such a simple blog feature.
How do I have a single blog post always displayed, for the home page?
There are many things that Blogger has yet to provide, and this is one. A blog, by definition, contains a dynamic home page, with the most current posts displayed.

Today (sorry, too late!), if you view this blog, this post will be displayed, at the very top of the home page. Tomorrow, this post will be displayed, just not at the top of the home page. In a couple weeks, this post will not be displayed on the home page, at all. That is how blogs work. If you want to display anything else, you don't have a blog.

That's the purist position, anyway. A blog is simply a web site with the latest posts displayed on home page (the main page), and hidden older posts (the archives).


(Update 2012/06/06): The recent "Search preferences" feature allows us to setup a true static home page, with none of the complications below.
The neat thing about this magic trick is that it's not difficult to make it work. I categorise this trick as a snake, after the old taunt from my mother
If it had been a snake, it would have bitten you.

It's so simple, really.
  1. Make the blog not display any posts, for home page.
  2. Add a text gadget.
  3. Tweak the text gadget to only display, when home page URL is displayed.
  4. Use the Pages gadget, and index the rest of the blog. Add links using various label searches, pages, and posts, as you like.

Make The Home Page Not Display Any Posts
If you make the main page not display any posts, you get an empty home page. Settings - "Posts and comments" contains the "Show" setting. Set "Show" to "0 posts", and the blog has an empty home page.

Add A Text Gadget
Add an HTML / Text gadget, positioned just above or below the "Blog Posts" gadget. Setup the new gadget just like the blog post, that you would want permanently displayed. If you want to use the post editor to compose the gadget, do that.

Tweak The Template
This is the one part of this project, that requires any technique. Use the Template Editor, and edit the gadget template, for the gadget that you just added, so the gadget only displays when the home page URL is being displayed.

Use The Pages Gadget, To Index The Rest Of The Blog
Once you have a static home page gadget, just add links to the rest of the blog. You can have links in the new gadget - and you can have an index in the blog header, or in the sidebar. Use your imagination here, it's your blog.

That's it. Really.

>> Top

Thursday, November 10, 2011

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.

Monday, May 3, 2010

The New Designer Templates Lack Text Overflow Protection

If your blog is similar to mine, you may, on occasion, include content that doesn't fit, horizontally, in a post. A long time ago, that would make the blog, when viewed in Internet Explorer, show either the post or sidebar at the bottom of the page. Blogger added a bit of code to the templates, to prevent this from being a problem.

A bit of extra code takes care of this problem.
#main-wrapper {
...

float: left;
display: inline; /* fix for doubling margin in IE */
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

The "overflow: hidden" rule had a second benefit. It also stopped long lines of text, when encased in "<pre> ... </pre>" blocks, from overflowing into the sidebar or margins of the blog display.

It appears that the new designer templates, written for newer versions of Internet Explorer, which automatically provide overflow protection, do not provide that feature. If your blog has posts which contain long, unbroken lines of text inside "<pre> ... </pre>" blocks, and you just migrated the blog to a designer template, you may have noted this change.


This is what I saw earlier, yesterday.



If you lament this change, fortunately, there is an easy fix, using the "Add CSS" window in the Template Designer.

#main {
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

I added that code, yesterday, and now you can see how my blog displays long lines of unbroken text. Or, you can look immediately above.


This is what I have, now.



It's an easy fix, when you know how to make it.

Friday, April 30, 2010

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.

Thursday, April 29, 2010

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

Monday, April 26, 2010

Adding A Gadget Above Or Below The Posts Gadget

Almost every blogger is used to adding gadgets of various types, using the "Page Elements" wizard, to the header, the sidebar, and / or the footer of their blog. If you can't do that, you just aren't enjoying Layout Templates, to their fullest.

Some folks haven't yet realised that you can also add a gadget just above, or just below, the posts.

This is not the same as adding a gadget to the bottom of the header (which is, admittedly, just above the posts); nor is it the same as adding a gadget to the top of the footer (again, just below the posts).

A gadget just above, or just below, the Blog Posts gadget stops next to the sidebar - as opposed to continuing above or below the sidebar, should you add a gadget to the header or the footer. It's just as easy to add a gadget to one place, as to the other, though.


Just drag and drop any gadget of your choice, to the right spot. See what this looks like, in my demonstration blog, Nitecruzr New Template Laboratory.

For a variation on this, you can setup such a gadget to appear only on the first page.

Wednesday, April 21, 2010

The Template Designer Uses Cascaded Code

CSS stands for Cascading Style Sheets - and the new Designer Templates use CSS to full advantage.

The new Layout templates, with the GUI "Fonts and Colors" and "Page Elements" wizards eliminated the need to edit template HTML to change fonts or colors of many template objects, or to add or move objects around the screen. The Template Designer goes even further, in GUI wizardry.

We can select template backgrounds, layouts, and an expanded array of fonts and colors, all without editing template HTML.

Besides the expanded GUI wizardry, the CSS concept is used to full advantage, where we can enter additional CSS rules. You need only enter the CSS rule into the Advanced - "Add CSS" wizard, to add or override any CSS rule in the template header.

In Blogger Help: Editing CSS in the Template Designer, we see a simple example to get us started.
Head over to the CSS field located in the Advanced | Add CSS tab in the Template Designer. Once there, simply drop in the following lines of code:
.Header {
text-align: center;
}

Just paste that into the "Add CSS" window, and watch the Header text jump into center, in the preview window below, right before your eyes. Don't blink.
If you like what you see, just click the orange Apply to Blog button and your header image will be saved. If you ever decide to remove or change the header image at a later point, it's as easy as deleting or swapping out the image code from the field.

In other words, there's no need to use the "Edit HTML" wizard to add, or to change, any CSS rules. Just add what you need, in the "Add CSS" window. It's that simple - a live preview, and one button to apply the changes previewed.

A second example is provided, and this one should be of great interest to many blog owners.
The second CSS change we'll cover is how to add your own background image to your blog.

When using "Add CSS", always follow each individual section of code by hitting "Enter", and adding a blank line. Every different CSS code addition should be separated from the one above it by a blank line, to make each section of code work properly.

If the Template Designer GUI controls take care of 90 of 100 of the needs to tweak template HTML, the "Add CSS" wizard should take care of 9 of the remaining 10.

Saturday, April 17, 2010

Making Jump Break Work For Blogs With Older Templates

The new Blogger solution for auto summarised posts, also known as "Read More" or "Jump Break", is becoming increasingly popular in Blogger blogs, for several reasons.
  • Auto Pagination resulted in display segmentation, caused by the perceived need to publish hundreds of posts on the main page.
  • Desire to display a dynamic index of posts as the main page.
  • Desire to simply make the main page and / or archive retrieval displays smaller.

The "Jump Break" feature itself is reasonably easy to use, when you are using the New Post Editor, and with blogs that use a template released after Jump Break was released - apparently in September 2009. If your blog was created before then, you may need to add a critical bit of code to the post template.

The simplest way to add the necessary code would be to refresh the post template.

If you have customised your post template, this won't be a good idea. If you want to keep the current post template, and add the critical bit of code, you're going to have to edit the template HTML, and you're going to have to Expand Widget Templates when you edit the HTML.

Instruction from Blogger, in Creating 'After the jump' summaries is pretty simple
After backing up your template, then click the Expand Widget Templates checkbox, and scan your HTML for the following snippet:
<data:post.body/>
Once you've located that code, paste the following snippet directly below it:
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if >
After you've pasted in the code, click Save and then you're done!

It's possible that such simple instruction may be slightly misleading.

Here's the snippet in question, as seen in the template in my newest test blog, "Chuck's Jump Break Test", with surrounding code to provide a contextual reference.
<div class='post-header'>
<div class='post-header-line-1'/>
</div>

<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>


<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>

If you read the above instructions literally, Blogger would have us take an older template
<div class='post-header'>
<div class='post-header-line-1'/>
</div>

<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>

Add the recommended snippet to produce
<div class='post-header'>
<div class='post-header-line-1'/>
</div>

<div class='post-body entry-content'>
<data:post.body/>
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if>

<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>

I suspect that the update may be much more correctly installed as
<div class='post-header'>
<div class='post-header-line-1'/>
</div>

<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if>


<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>

Or possibly, you may even want the full, original snippet
<div class='post-header'>
<div class='post-header-line-1'/>
</div>

<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>


<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>

So, what is "expr:title='data:post.title'"? Look at my demonstration, hover the mouse cursor over "Read more »", and see.

If you just added the Jump Break to your blog after following the instructions from Blogger, and you followed their instructions literally, you may be observing odd details. It's possible that reports of post / sidebar alignment problems, and odd problems with photos and jump break, may be related to this confusion. You may do well to modify their instructions, when you update your template.

>> Top

Friday, April 16, 2010

Putting A Post At The Top (A "Welcome" Post) - Part 2

Many people have asked how they can have a Welcome or Index message in their blog.

I have a Welcome message, at the top of Nitecruzr Buzz, or on this blog, for instance.

This blog uses a text gadget, positioned above the post gadget, which leaves a gadget that shows up on every page. On Nitecruzr Buzz, I used a future dated post, so my "Welcome" showed up only on the "Home" page. Neither solution was optimal.
  • A true "Welcome" message should show up only on the "Home" (first) page. A text gadget shows up on every page.
  • A future dated post shows up only on the "Home" page, but it shows up in the Archive index with a future date.


Today, I fixed my Buzz Welcome message, so it only shows up on the "Home" page, and it does not show up as a post, in an archive index.

What I now have is a Text gadget, that only displays on the "Home" page. Here's how you do that.

First, (you should have to ask?) backup the template. Then add a Text gadget to the page, and position the gadget just above the post gadget. Give it a snappy title, "Welcome To My Blog!".

Then tweak the new gadget.
  1. Identify the gadget to be tweaked.
  2. Add the Conditional Gadget CSS rule, using the Template Designer "Add CSS" wizard.

 
<b:if cond='data:blog.canonicalUrl != data:blog.homepageUrl'>
<style>
#Text1 {display: none !important;}
</style>
</b:if>


Remember to add a blank line, above or below the code block being added, if there is already code visible in "Add CSS".

Save the change. Edit the text gadget as displayed on the blog, and remove the "WelcomeMessage" title. And of course, backup the template, again. And, it's done.

Now, if you want a dynamic "Welcome" page - maybe one based on posts published to a given label, you can do that too, with just a bit more work. And there are several variations on the "if" statement, that will let you selectively display (or not display) your gadget on other specific pages.

An easy alternative solution for this need, more recently offered, would be to use a static page, and a redirected Home page.

The choices are multiple. Just consider your needs, and how easy the various alternatives may be.

Monday, April 12, 2010

Make The Blog Header Non Clickable

Everybody has their own idea how they want their blog.

Not everybody wants the blog title to link back to the main page at all, while some folks would like to have the title link back to the main page even when the main page is displayed.

The default Blogger code enables a link in the blog header, when anything but the first segment of the main page (aka "home" page) is displayed. Some people would like the link completely disabled, on all segments. Others would like the link enabled, on all segments.

Some folks don't like the way the title changes colour - in many blogs, the "links" (unvisited links) and "visited links" have colours that stand out from the text. Look below - see the purple and blue text? Those are links. If you don't like the title to colour itself, you remove the links - or replace the title with a picture - as I have done above.

In most of my blogs, I could do without the clickable title, completely, as I have my Menu Bar, which includes a "Home" link.

For some blogs, removing the link, in the blog title, is a fairly simple change.

Blogs that use text in the header (including text over a picture) contain code that's reasonably easy to tweak. Blogs that use a custom image in the header, with no text, are slightly more challenging.

This is done under the layout template editor. First, (yes, again!) back up the template. Next, "Expand Widget Templates" and look in the body, for
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>

To disable the link completely, change all of that to one simple line.
     <data:title/>

To enable the link, completely, change all of that to one alternately simple line.
     <a expr:href='data:blog.homepageUrl'><data:title/></a>

Blogs that use only an image in the header contain some more complex code to display the image. They include the link in all pages, without any checking for the home page.
      <!--Show the image only-->
<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a>
<!--Show the description-->
<b:if cond='data:imagePlacement == "BEFORE_DESCRIPTION"'>
<b:include name='description'/>
</b:if>
</div>
Here, the only choice is to remove the link, if you wish.
      <!--Show the image only-->
<div id='header-inner'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
<!--Show the description-->
<b:if cond='data:imagePlacement == "BEFORE_DESCRIPTION"'>
<b:include name='description'/>
</b:if>
</div>

Save, and test. And (yes, yet again) backup the template.

>> Top

Saturday, March 6, 2010

Editing The Blog Template

The template is like the skeleton of your body - you can't see it (easily), but the success of the blog depends upon its being there, and being structured properly.

If you're going to have a blog, and publish it effectively, eventually the dashboard Layout and the Template Designer pages won't do enough for you. You're going to want to get to the details, underneath the GUI processes.

You access the template editor using the dashboard Theme page, where you will find (among other options) the "Edit HTML" button.


Click on "Edit HTML".



Clicking on "Edit HTML", you may get a serious warning to read.

Directly editing HTML may affect the way some features work and is only recommended for advanced users. Editing template HTML may unpredictably affect other Blogger features. We recommend using the Template Designer first, where you can Add CSS under the Advanced section.

Should you choose to click on "Proceed", you'll be into the "Edit HTML" display.


Edit carefully. Some changes may require editing / removing multiple lines of code.



With a Classic template, you have just one major activity when you're in "Edit HTML" - and that's what the name suggests, you edit the HTML. You'll have some CSS code, but no XML - so it's all relatively straightforward.

With a Layout template, you'll have a few extra options.


With a Designer template, you'll have one additional minor option.


And with a layout template, you'll have "Edit HTML", but with a few more tweaks than with a classic template. You'll have CSS and HTML - and XML - code to edit. And don't overlook the possibility of using HTML code in place of XML code, in a layout template.

One of the least understood selections in the Template "Edit HTML" wizard is the option to "Expand Widget Templates" , which has been replaced by selectively unfolding any gadget to be edited. Just understand when to unfold - and when to not unfold.

Remember that Blogger blogs offer many possibilities. Some code can be installed using HTML / JavaScript gadgets, as an alternative to adding code to the template using "Edit HTML".

And please, as always - backup the template, before and after using Template Editor.

Sunday, November 1, 2009

The New Post Editor And Read More

One problem which we seem to see, pretty consistently, in Blogger Help Forum, is where the posts and a sidebar end up in one long column, with one above the other.

Reports like
My posts have vanished!
and
My sidebar (my archives, my Followers, my profile gadget, ...) have dropped to the bottom of the page!
are seen a lot in the forum. Generally, it's caused by trying to put too much in one place.

Recently, though, a few bloggers report the dropped sidebar symptom, after they try the new post editor, and the Blogger "Read More" option (called by Blogger, "Jump Break").

The "Read More" feature in Blogger blogs has been a long needed option.

Before the new post editor, Blogger, and at least 2 other bloggers, had their own competing, and mutually incompatible, procedures for making your blog show, and execute, a "Read More" link. All 3, to my knowledge, had drawbacks. One of the most obvious was that each different version was added by editing the post HTML, and the HTML was complex, and messy.

The "Jump Break" option, in the new post editor, is easy to add.
  1. Add a New Post, or edit an existing post, in Compose mode.
  2. Position the cursor after the words that you want to be always shown.
  3. Hit the "Jump Break" button, in the editor toolbar.
  4. The jump break is inserted into the post editor window.
  5. When you publish the post, you'll see the words that you want to be shown, followed by the link "Read More".
  6. What could be simpler?



(Update 2010/04/17): It's possible that the above instructions from Blogger, if you follow their complete instructions and add Jump Break to an older template, may be slightly misleading. Read their instructions, then read mine, please.


In rare cases, the "Jump Break" button in the toolbar may not work. If you have that problem, go into the "Edit HTML" mode, and insert
<!-- more -->
right where you need your jump break.

For all the simplicity in adding this (either in Compose or "Edit HTML" mode), it's not producing simple results.

There appear to be at least two scenarios where a blog, with one or more posts published with jump breaks, would have a dropped posts or sidebar section.
  1. When the blog displays more than 10 posts in main page view, each post with a jump break, the 11th post will cause this problem.
  2. If the jump break is inserted into the middle of a section of text with formatting implemented using a "<div> ... </div>", a "<div>" section broken by a jump break will cause this problem.


The workarounds to prevent these scenarios are obvious.
  1. Reduce your main page size.
  2. Don't add jump breaks in the middle of "<div> ... </div>" sections.



One possible cause of code containing lots of "<div> ... </div>", a "<div>" would be content composed in Microsoft Word, or another external word processor / desktop layout program. Another, as noted above, may be slightly misleading instructions.

Also, watch out for the third party gadget "Related Posts" LinkWithin. You need this gadget ahead of the "Read More" break (you want your readers to see it without having to display the entire post), but be careful and don't put the "Read More" break in the middle of the LinkWithin code!



But those workarounds may not be popular, or easy to implement.
  1. Some bloggers like to publish blogs with 15, 20, or more posts in the main page.
  2. Blogger who like this new, shiny feature may not be aware of when their posts include "<div> ... </div>" sections. How can they avoid breaking a section that they can't see?



(Update 2010/02/22): This week, we are seeing an incompatibility problem between the new Auto Pagination feature, and the older "Read More" variants. This is resulting in greatly reduced main page and archives page height. It appears that the proper solution is to replace all old "Read More" variants with the new "Jump Break" solution.


>> Top

Sunday, September 14, 2008

Removing the "Subscribe to:" Caption / Link

Not everybody who produces a blog, and not even everybody who produces a blog and provides a feed, likes the caption / link at the bottom of the posts column
Subscribe to: Posts (Atom)
or
Subscribe to: Post Comments (Atom)
Some folks think this feature makes the bottom of the posts look cluttered. Maybe they're right.

Fortunately, it's not hard to remove.

First (and I always advise this) Backup Your Template. Next, From the Template Editor, select "Expand Widget Templates". Look through the code for "nextprev".
<!-- navigation -->
<b:include name='nextprev'/>

<!-- feed links -->
<b:include name='feedLinks'/>


Remove just one line.
<!-- navigation -->
<b:include name='nextprev'/>

<!-- feed links -->



Save. Test. Finally, Backup Your Template, again.

Sunday, August 31, 2008

Customising The Newer Post - Older Posts Captions

Not everybody who like Layouts templates, and their flexibility, likes the "Newer Posts" / "Older Posts" links. Some people are content to just remove them, but others would like to change the captions.

The latter task isn't terribly difficult. As always, backup your template before and after making these changes.

The simplest changes that you can make involve editing the CSS rules that control the fonts.
  • You can change all 3 links together. The "Newer Posts" - "Home" - "Older Posts" container uses the Class rule "blog-pager".
  • Alternately, you can change each link separately.
    • "Newer Posts" uses the Class rule "blog-pager-newer-link".
    • "Home" uses the Class rule "home-link".
    • "Older Posts" uses the Class rule "blog-pager-older-link".

Here is the CSS rule set for a Minima / Simple template.


#blog-pager-newer-link {
float: left;
}
#blog-pager-older-link {
float: right;
}
#blog-pager {
text-align: center;
}


Make the "Home" link bold.


#home-link {
font-weight:bold;
}
#blog-pager-newer-link {
float: left;
}
#blog-pager-older-link {
float: right;
}
#blog-pager {
text-align: center;
}


Make all three links bold.


#blog-pager-newer-link {
float: left;
}
#blog-pager-older-link {
float: right;
}
#blog-pager {
font-weight:bold;
text-align: center;
}



If you want to change the link captions, or maybe replace the captions with pictures, you'll have to edit the template XML. This is slightly more work than tweaking the CSS rules.

From the Template Editor, expand the post template, aka "Blog1". Look through the code for "nextprev". (Note): What you see below contains gratuitous line breaks, to prevent post / sidebar alignment problems.



<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl'
expr:id='data:widget.instanceId + "_blog-pager-newer-link"'
expr:title='data:newerPageTitle'>
<data:newerPageTitle/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl'
expr:id='data:widget.instanceId + "_blog-pager-older-link"'
expr:title='data:olderPageTitle'>
<data:olderPageTitle/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>

</div>
<div class='clear'/>
</b:includable>



Change that. Here, we'll change "Newer Posts" to "Next", and "Older Posts" to "Prev".



<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl'
expr:id='data:widget.instanceId + "_blog-pager-newer-link"'
expr:title='data:newerPageTitle'>
Next</a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl'
expr:id='data:widget.instanceId + "_blog-pager-older-link"'
expr:title='data:olderPageTitle'>
Prev</a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>

</div>
<div class='clear'/>
</b:includable>



Here, we'll change "Newer Posts" to a left arrow, and "Older Posts" to a right arrow.



<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl'
expr:id='data:widget.instanceId + "_blog-pager-newer-link"'
expr:title='data:newerPageTitle'>
<img src='http://3.bp.blogspot.com/_pzC_7PLtN-0/
SLspRekw94I/AAAAAAAABO0/xBrN8YSo-Vc/s200/
Left.gif'/>
</a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl'
expr:id='data:widget.instanceId + "_blog-pager-older-link"'
expr:title='data:olderPageTitle'>
<img src='http://4.bp.blogspot.com/_pzC_7PLtN-0/
SLspRqEA42I/AAAAAAAABO8/yuwkwz-8Tr4/s200/
Right.gif'/>
</a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>

</div>
<div class='clear'/>
</b:includable>



Here, we'll change "Home" to "My Home Page".



<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'>
My Home Page
</a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'>
My Home Page
</a>
</b:if>
</b:if>



And Save, which ever change you make. See it in action, if you like.

(Note): The "Newer Posts" / "Older Posts" links are only available in blogs with layouts templates, because they require XML. If your blog uses a classic template, this is an excellent opportunity for you to consider upgrading to a layouts template. If you insist on using HTML for the template, upgrade to layouts anyway - then use your HTML in the layouts body.

And please, backup the template - before and after making these changes.

Friday, July 25, 2008

The Post Editor And HTML Special Characters

Most web pages that you will view on the Internet are written in HTML.

HTML, or Hypertext Markup Language, was designed long ago to enhance simple text, giving it ability to display more than simple letters, numbers, special characters, etc. What you're looking at is mostly simple text. Here, on the other hand, is an example of bold text. And here, italicised text. And here, red text. Are you interested yet?

Here's how I coded the above paragraph in HTML:

Most web pages that you will view on the Internet are written in HTML.<br /><br />HTML, or Hypertext Markup Language, was designed long ago to enhance simple text, giving it characteristics beyond simple letters, numbers, special characters, etc. What you're looking at is mostly simple text. Here, on the other hand, is an example of <span style="font-weight:bold;">bold text</span>. And here, <span style="font-style:italic;">italicised text</span>. And here, <span style="color:rgb(255,0,0);" >red text</span>. Interested yet?


The above paragraph was translated, from the introductory paragraph at the top, by Postable, a web based utility.

You can use Postable, other similar utilities, or Notepad, and convert your HTML to displayable text. When you compose a post, in "HTML" mode, there are several special characters, that you can't enter as simple text.

  • The quote symbol " which must be entered as "&quot;", or "&#34;".
  • The apostrophe ' which must be entered as "&apos;" (If you are reading this in Internet Explorer, you may not see this properly!), or "&#39;".
  • The ampersand & which must be entered as "&amp;", or "&#38;".
  • The less than sign < which must be entered as "&lt;", or "&#60;".
  • The greater than sign > which must be entered as "&gt;", or "&#62;".

When you display HTML code in your posts, you'll have to translate each of these characters as in the above examples - or using the corresponding ASCII numeric codes - if you want your code to be selectively readable as code, in a post.

If you want the entire post to display all special characters as code, you can use the Post Editor "Post settings" feature - Options - "Compose mode", and select "Interpret typed HTML". This lets you display a block of code without requiring special character translation, as above - though it prevents you from using formatting in the post, in HTML mode.

To display "&quot;", "&apos;", "&amp;", "&lt;", or "&gt;", you enter "&amp;quot;", "&amp;apos;", "&amp;amp;", "&amp;lt;", or "&amp;gt;", respectively.

I'll let you figure out how to display "&amp;quot;" "&amp;apos;", "&amp;amp;", "&amp;lt;", or "&amp;gt;".

Now that the post editor in New Blogger June/July 2008 is part of Production Blogger, you can, optionally, display HTML routinely, by a selection in the Post Editor "Post settings". Or, you can still enter special characters in HTML.

Navigate» Become author for this Blog