Powered by Blogger.
Menu :
Showing posts with label Blog structures. Show all posts
Showing posts with label Blog structures. Show all posts

How to make a blog into a real website

This article explains how you can use Blogger to make a site that looks just like any other website and why you might, sometimes, want to do this.


Blogs vs Websites

Some people are very happy to use Blogger to make a blog, that is, website that looks like a diary or journal that they write in regularly.

But a common question is "how to I make my blog into a real website, just like "someone" has done over at "this website"?

This isn't easy to answer:  Not everyone means the same thing when they say "real website".  "Someone" might have just changed the background image, installed a third-party template, changed a few settings - or re-written the entire Blogger template!  They may have just made the blog look more professional than the basic templates do - or maybe they've removing all "blog" features so that the site is like a regular brochure website.

The bottom-line is that, even with no changes a blog is a "real website", because it's got:
  • An url (www.your-blog-name.blogspot.com)
  • A space on the internet that's dedicated just to it. (For Blogger users, that space is inside Google's servers - we don't have to pay for our own hosting).
  • Web-pages, made in HTML, which visitors can look at using a web-browser (eg Internet Explorer, Firefox, Chrome, Safari, etc)

And there are some sites which are very popular and not at all ashamed to look like blogs, for example:

This article from Blogger Buster lists a 100 others - and I'm sure that there are plenty of popular non-English language sites that look like blogs, too.

But there are many other sites that have had some or all of their Blogger features hidden, for example

You need to do more work to make the second type of site - and even then, if a knowledgeable visitor looks at the source-code for a page, they can still tell that you're using Blogger.   So, usually, I'd recommend that you focus on what you want to achieve with the site, rather than "getting rid of blogger".

That said, here is a lit of things that you may want to to do to "turn your blog into a website".   They are in, roughly, the order that I recommend doing them to have the maximum effect.


Initial steps to reduce the "bloggy" feeling


1)   Get a custom domain

This is a website address like  www.mySite.com  or  www.yourBlog.org - or whatever available name that you choose.

Using a custom domain means that your address will not have "blogspot.com" in it.

You can do this either:

This step is essential if you don't want the site to be perceived as blog, because the address is what people see when they first find the site in search-engine results.

If you are going to get a custom-domain, then I strongly recommend doing it at the very beginning of setting up your blog, so all the later steps are based on the custom-domain name rather than re-directions.  This is is A Good Thing for SEO - and even if SEO doesn't matter for your blog initially it may become important later on.


2)    Turn off the navBar, and remove the space where it used to be


3)   Show only 1 post on the main page.


4)   Hide the "blog-specific" values from posts, on the Layout > Blog post (edit) tab.  

At a minimum the things to turn off are:
  • Post-date
  • Posted-by
  • Post-time
  • Comments
  • Links to this post
  • Labels
  • Reactions
  • Email post links
  • Post sharing

5)    Make a home page - ideally using the custom-redirect option


6)    Remove the attribution gadget (the bit where it says "Powered by Blogger")


7)    Remove the "subscribe to posts (atom)" link


8)    Add an RSS-subscription gadget using Feedburner.
Some people say this is optional - but I believe that all "proper" websites offer an RSS feed and show that they do so by using a feedburner-style RSS chiclet.   If you just add Blogger's Subscribe gadget instead, it gives the Atom - ie blog-style feed.


Banishing the Blogger look for good

These next steps really go together: if you do one, you need to do the others too. They are needed if you totally want to remove the blog-ish-ness:


9)     Remove all gadgets that show a list of posts. These include the Archive, Labels.  This is simply the reverse of the add-a-gadget procedure - edit the existing gadget, and click Remove.


10)   Remove the "older posts / home / newer posts" links.


11)   Set up your own navigation system: every post or page needs to be able to be accessed from either a button or a link that is in either a gadget or another post/page.

It's temping to think about navigation from the home page. But first-time visitors who come to your site from search-results will not arrive at the home page. They might not even think to look at the home page. Ideally your navigation system should offer several routes to get to every piece of information, and should include both logical links between posts and a search-based option.

Tools that you might use to help with this:
  • Summary posts, with links to detail pages about the topic. (Eg my public-transport site has a "city buses details" page, which links to individual route maps)
  • A menu bar with links to the most-important summary posts.
    NB  If you use the Pages gadget for this, it is automatically included if you give the site a mobile template which is an important step if you want the site to be responsive.
  • Linked-List gadgets to show summary posts, or lists of related detail posts, in the sidebar or footer.

An alternative to your own navigation system is to use categories to put your posts into pages. This doesn't fully reduce the bloggy feeling, since someone who looks at a page sees a list of posts (with just post-summaries if you've used jump-links).   However changing the the status message (the grey box that says "showing all posts with label whatever") can make this acceptable in some sites (ie ones where the line between blog and website is blurred).


What you (currently) cannot do

You cannot remove the post-date values from the URL of blog posts.
If your entire site could be done with 20 or fewer screens, you could use Pages for everything - but IMHO this isn't necessary, visitors don't seem to be overly spooked by URLs with numbers in them.

You cannot use a dynamic template 
If you want your site to look like a website, not a blog: you need to use a Designer, or possibly a Layout, template.


Other things that you might do

You might want your blog tostand out in the seach results in order to get more visitors - see Getting Started with SEO.

You might want to link it to the social networks - remember that there are wide range of possible links, and you need a strategy about how the site relates to each social medium that you use.


Have I missed anything?

I wrote this article  while I was setting up a site on which I want to minimise the "blog" look-and-feel, and I've tried to capture all the steps that I did.  

But maybe I've missed some things?   Maybe there are features that work differently on other templates.

What else would you do?

How to remove or change the Newer Post and Older Posts links

This article explains how to hide or change the format of the "Older Posts" and "Newer Post" and "Home" links that are shown at the bottom of Blogger blogs with Layout or Designer templates.


Why are the older and newer posts links used


Most designer and layout templates have links at the bottom of your page of blog posts which let readers navigate back and forward among the list of posts.

This is basic to how a blog is intended to work:  you post regularly, and give people a way to get back to previous posts.

The pager-links are particularly important on pages that are reached using the Label or Archive gadgets, which may show more posts than you normally have on your home page, or displaying in your blog.

But some people want to remove them - and this is fine provided readers have other ways of navigating around the blog.


How to remove "Newer Posts" and "Older Posts" from your blog:


To totally remove these items, you just add some new CSS rules to your template in the usual way.

To remove "Older Posts" add:
#blog-pager-older-link {
float: right;
}

To remove "Newer Posts" add:
#blog-pager-older-link {
float: right;
}

Or to remove both of them and the "Home" link that appears in between them, add:
#blog-pager {
display: none;
}

How to format the "Newer Posts" and "Older Posts"

Changing the way that these links look is very similar, you just add the same codes, except instead of 
display: none;
use the CSS element for the effect you want.   For example, to make the text bigger and bold, you might use rules like
font-size: 150%;
font-weight: bold;

You need to put these commands inside the curly brackets, where the display: none; is now - make sure that each component has a semi-colon at the end of it.   It makes the code easier to read if each component is on a new line, but this isn't necessary.

Another option is to swap the "float" commands around to put "older posts" on the left and "newer posts" on the right (I've never quite understood why they were the other way around).


You can also use background images and colours, with elements like:
background-image:url('URL OF YOUR IMAGE');
background-color:#cccccc;

How to change the "Newer Posts" and "Older Posts" text


If you want to change the text values - either to different words, or by replacing them totally with pictures, you need to accept the disadvantages of editing your template.   If this is ok, and you you want to proceed then:

1  Edit your template in the usual way

2  Turn the Expand Widgets checkbox to ON (ie ticked)

3  Replace the existing links:

  • To replace the "newer posts" link, find <data:newerPageTitle/>  in your template, and replace it with whatever text you want.   
  • To replace the "older posts" link, find <data:olderPageTitle/>  in your template, and replace it with whatever text you want.   
  • To replace the "home" link, find <data:homeMsg/>  in your template, and replace it with whatever text you want.   


In each case, the code you are replacing will be inside some other code, like this:
  <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>
Make sure that you only replace exactly the code listed above, including the < and >'s.   The other code around sets up the links to the actual older or newer posts, and you don't want to change this.

Also, if you want to use a picture instead, replace it with <img alt='...' border='0' src='THE URL OF YOUR PICTURE'/> - of course with the right picture URL put in.

Do make sure that the meaning of your pictures is obvious though - what may look like a cute "newer posts" symbol to you may look just like a pretty picture to someone else.



Related Articles: 




What bloggers need to know about Responsive Web Design

This article is about responsive web design, and what it means for Blogger users.

Some of the information is relevant for people who use other platforms (especially Wordpress) but much isn't, because Blogger does so much of this for us.


What is Responsive Web Design?

One of the biggest changes to how people use the internet recently is the range of screen sizes.

Back in the day, we had ever-increasing screen resolutions, so most people went from 800x600 to 1024x768, etc - the specific varied along with the type of monitor and graphics card.  But the constant was the annual joke about "What's your New Year's resolution?" - the answer always got larger each year.

But now there are smartphones, tablets, and giant TV screens in the mix. Users may be looking at websites in anything between 300x200 to 4096 × 2160 - or more if they're using a TV.

To start with, no one was quite sure how websites should cater for this. Many people made two sites: one for their "regular sized" users and one for "mini-screen" users. Sometimes this led to  duplicate-content, which didn't amuse Google's search-engines. It made more work (of the boring kind) for people maintaining websites, who had to update two places. And it didn't cater for the super-size-screen folks at all.

After much thought, in June 2012, Google announced that a technique called "responsive web design" was their recommended approach. Basically, it says to have one version of the website, but to put instructions into it (usually with CSS) saying whether or where to show things based on the size of the user's screen - ie, effectively by "responding" to the user's settings.

This article from Blacknight Solutions goes into a lot more detail - and uses more technically precise language to describe the challenges and the approach.


What does Responsive Design mean for Blogger users?

This infographic is a quick-and-visual summary of the area of responsive-website design.

It recommends various books and in the "toolkit" section, it lists options for Wordpress, Drupal and Joomla and JQuery.

Of these, JQuery is used for display tools that a number of Blogger-helpers provide - so I would expect to see "responsive" being added to their features soon. 

Apart from the JQuery front, initially I thought that responsive website design didn't matter for people who use Blogger: as Ive explained before, we simply don't have much control over the web-pages that are made to display our blogs. But it made me wonder about how Google might change Blogger so they were following these guidelines fully themselves.

But after thinking some more, I realised that Blogger is already starting to use the responsive design approach with mobile templates: if one is enabled for your blog, then the gadgets that are shown a different on mobile and non-mobile devices ane the way that posts are displayed is different - but the underlying site content (posts and pages) is the same.

And there are things that we can do in our posting and template editing that will help Blogger make our sites work better on devices with different screen sizes.


So, what should we do?

Set the maximum width for pictures.

In the post-editor, you can choose to make pictures small, medium, large, etc - and the values that are used for this are absolute numbers of pixels height and width.

But what happens if you set the width to, say 400 pixels ("400px"), and a user has a screen which is narrower than this?  The question is hard to answer, because mobile devices apply some scaling-down so that in many situations the picture fits, and look fine.

I recently read an article from an English coffee-drinker, showing how to change these sizes to any values you want and to control the picture quality at the same time.   At first I thought that this would solve the problem.

But there are cases where it won't work properly, eg if you want text and pictures to be side by side, and use a table rather than a "<div>" statement to do this. If the amount of space that you allocate to the picture is wider than the space on the screen, then the results my be unpredictable, or the text may be very, very narrow.

I was originally going to suggest working around this problem by specify the width in terms of percentages instead of pixels, for example:   style = 'width: 80%;'  But, as I found tonight, if you float your pictures to the left or the right, that approach doesn't quite work - the way that the post-editor puts in <div> statements means that scaled down pictures can be left inside empty larger empty divisions, etc..

A better alternative is to continue to use small / medium / large etc, and also to add a CSS rule  saying that pictures can take more than a certain proportion (ie percentage) of the available. space.    (Thanks to Paul of Spice Up Your Blog who suggested this, as a way to stop pictures from spilling into the sidebar).  

Luckily it's very easy to do this - just add a CSS rule in the usual way for your template.   The specfic rule to add is
.post img {max-width:98% !important}

When you copy and paste - don't forget the dot (.) at the start of that line.

Also, you may like to experiment with values - you might even go as low as 80% on some blogs.   The beauty of this rule is that it specifies the maximum - if your photo is smaller than that, it's not affected.

Width of other embedded elements, eg PDF files

Pictures aren't the only things that have a fixed width - the same thing can happen to embeddded documents / PDF files, slideshows, maps, forms, etc. They can be more challenging to use on sites with smaller screen sizes. Somteimes their code might cater for differnt sizes. But one good overall principle is simply to remove the height statement from the, and specify the width in terms of a percentage.

That said, I don't do this for the embedded Google custom maps on one of my sites: as a user I very much prefer to see the map at full size, and to scroll around as I need to - so I've assumed that my visitors prefer the same approach.   It all depends on the nature of your site, and how people use it.


Responsive AdSense ads

If you use Adsense via Blogger's gadgets, then appropriately sized units will be placed on your blog. And (unless you choose the "ads between posts" option in the Blog Posts gadget) - this includes inside mobile-template viewers.

But many Bloggers use AdSense by getting the code and installing it to their template or putting it into an HTML/Javascript gadget, perhaps because they want better control over the ad colour-scheme, or to have the option of image-only AdSense ads.

Fortunately it's pretty easy to adapt these ads to be responsive - this excellent article from Digital Inspiration explains this technique in more detail.


Sidenote: I was quite amused with recent announcements by some Blogger-helpers (eg Paul in Spice Up Your Blog) that we can now use AdSense in Dynamic Templates.  As far as i know this has been the case since Dynamic Templates were introduced: provided AdSense is enabled in your blog with a gadget (not embedded in posts, or put into HTM/Javascript gadgets), then the Dynamic Template view promised to show an advertisement in an appropriate place (most likely the footer, I think). In princple, this is just another dimension of being "responsive" to different screens and ways of reading website content.


What else

My instinct is that there are other things which blogger users will need to think about as we move into a "responsive" world - at least Bloggers who care about visitors from different screen sizes will need to be busy.

At a minimum, consider whether you need to enable a mobile template for your blog, and set up some specific gadgets just for it.


What else do you think is relevant here?





Related Articles:

-->

Who Blogger converts out posts into web-pages

Giving your blog a special template that only mobile users see

Showing Google maps inside your blog

Getting image-only AdSense ads

Putting 3rd party HTML into your blog

How to add a gadget using Blogger

Adding a CSS rule to your template

Putting files into Blogger's root directory

This article explains the issues, and options, for putting a file into the "root directory" of your Blogger blog.


Turnips (Brassica rapa) 
from Wikimedia commons
Originally posted to Flickr 
by thebittenword.com.  
Licensed under the terms of 
the cc-by-2.0.
If you are using certain non-Google products to enhance your Blog, they will sometimes tell you to put a file into your root-directory.   They may even tell you to use an FTP  tool to do this.

Sometimes this happens when a product also gives you code to install into your blog , This approach is used when the code is written for websites in general rather than specifically to work with Blogger: putting useful files into a place relative to the root directory makes it a lot easier to move a website from a test-address to the live one, so is a common approach outside of Blogger.
Or maybe the other tool has been designed to verify that you do own the website in this way, rather than asking you to change the website code itself.


How to add a file to your blog's root directory:

The short answer for Blogger users is "sorry, you cannot do this".

 The long answer is still no:  "there is no way to do this, but see the rest of this article for an explanation of why, and some suggested work-arounds."


Why not?  Every other website tool lets me do this.

Home - cpg1.5.x demo 1287551599033
Posts:  Blogger's tool for managing
the content on our blogs
If you're clever, and have lots of time, you can make a website just using a text-editor like notpad, a graphics programme, and ftp software that lets you put the files into the right places on computer that's connected to the internet.

Tools like Dreamweaver take away a lot of the time-consuming work, and some of the need for cleverness.  But you still need to know a lot about the internet to do things in a way that makes a good website.

Content management systems make this easier still: they let a technically-minded person do the nuts-and-bolts work to make the website, and give authors / artists / editors / content-creators simpler-to-use tools that let them put "stuff" (ie content) into the website, without needing to worry about the details of how it works.

Blogger is a (very simple) website content-management system, it creates our web-pages for us based on data that we put into certain places. Administrators can set up and change templates, other people, eg authors simply make posts.

When we use Blogger, the main way that we change the data in our web-pages is using the Blogger software. 

Some items inside posts or gadgets can be changed using other software, eg Google Docs, provided they were were set up using that other software in the first place. But - key point - there is nothing in the way that Blogger is put together that means we need to access the base directory. So they don't let us do so.    And I doubt that this this will change anytime soon.


What to do instead

The options for getting around this restriction depend on how the file that you need to put into your root directory is intended to be used.

Installing code:

If you have code to install into your blog, and a file to go with it, then you just need to
  1. Host the file somewhere else (maybe in your Picasa-web-album for the blog, if it's a picture)
  2. Change the code to point to the full path of where you have hosted the file, instead of the relative path used in the code
For example, here is the code for a button linking to my blog, with the picture in the root directory:
<div class="separator" style="clear: both; text-align: center;"> <a href="http://www.Blogger-hints-and-tips.blogspot.com" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"> <img border="0" src="//Logo.png" width="100" /></a></div>
To change this to use a specific location, I just add a file-path and the file-name of the picture wherever it is hosted.
<div class="separator" style="clear: both; text-align: center;"> <a href="http://www.Blogger-hints-and-tips.blogspot.com" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVwUWvKu-tvELmF0SRMkpv2btdAZiAewj9xwPgILYNFVl0Mq0TYs2HHbsyacBk6vuIOymCp_-F-Y-9qZMEQI8VqZ6pwx_fkg7Bd07JUoMw6gdOT6oGyfuxMR22sfItGV1evpoi0zUOZsqM/s320/Logo.png" width="100" /></a></div>

TIP: blogger's editor sometimes gets links mixed up, so it's important to start the filepath with "http://"


Verifying ownership:

If someone wants to use a file's position to check that you control a website, then they will have code on their own website that looks for the file in your root directory.

You cannot change this code. And you cannot place the fie.

So you need to ask them for an alternative way to verify, that is suitable for people without root directory access.

 If they don't have any alternatives, try lobbying for this on their product support forum:  by not having alterantives, they are ensuring that Blogger users, among others, cannot use their service.

If the official answer is still "no", then you could also ask in other on-line forums if anyone has found any other work-arounds.


What other reasons have you found for installing files to your root directory?   
What work-arounds have worked for you?




An afterthought:   what isn't recommended

Transclusion-iconI've recently seen someone suggest in a help forum that people with custom domains can put files into their blog's root directory by FTP'ing the files into place.

 This may be true, if the service that you are purchasing from your domain registrar includes file-hosting. But file hosting(*)
  1. Isn't necessary for a custom domain used in Blogger (since Google hosts our files for us), and
  2. Isn't available as part of the services when you buy a custom-domain through Blogger.

So it's not a general solution for most Blogger users, though it may work for some.

Initially I was a little sceptical of the idea: Blogger doesn't expect to see any files in our root directory, so I was concerned that it might do strange things if it found them there. But on reflection, I think there is probably a low risk of this happening, since the file-location is outside Blogger's control.

(*) To avoid any confusion, file hosting and DNS hosting are not the same thing. If you buy a custom domain for your blog from a registrar without going through Google/Blogger, then you do need to pay for DNS hosting, but do not need to buy file-hosting.



Related Articles:



File hosts - places to store files used in your blog.

Picasa-web-albums: a quick introduction

How Blogger data is organised

Setting up a new administrator for your blog

Options for letting other people write in your blog

Not showing any posts on your blog's home page

You can set your blog up so that no posts are shown on the main screen - provided you have used some of the other "home page" aproaches to give readers other ways of getting to your content.

A blog with no posts is like a pub with no beer?

Blue Bull, Sneem - geograph.org.uk - 889696Previously I've explained how to only show one post on the main page - and this explanation looked at the types of screen that your non-dynamic-template blog can have (main, label, archive, post, and page).

But some people who want to give their blog a home page want to go further than that, and not show any posts on the main screen at all.   (Remember, the main screen is where people who navigate to your blog, rather than to posts within it, go.)

This sounds like a strange thing to do - after all, blogs are about posts.

But actually it's fine, provided you use some other tools to let readers move around the blog.  I've made a 150+ page blog this way, and it works very nicely because I have organised the information and used of "key" pages (lists of bus-routes, suburbs, shopping centres, etc) with tables that link to many other posts.


How to show no (ie zero, 0) posts on the main screen?

Some people want to do this, as part of the process of giving their blog a home page.  Again, it's not possible (at the moment, anyway) using Dynamic templates, but can be done with others:

In Blogger-2011:
  • Choose the Options drop down from the main menu, 
  • Choose the Settings > Posts and Comments panel from the left sidebar.  
  • Enter zero (0) into the Show at most field
  • Click Save Settings in the top right hand corner of the screen.

In the pre Sept-2011 Blogger:
In this interface, you can change posts-per-page on the Settings > Formatting screen to 0, and it works  nicely.

Unfortunately the Design > Page Elements > edit Blog Posts screen doesn't accept 0 as a valid value, so if you later need to change something on it, you need to:
  • Change it to 1 on the edit Blog Posts  screen
  • Make the other changes you need to make on that screen
  • Save the changes
  • Use Settings > Formatting to change posts-per-screen back to 0, 
  • Save again.

Doing this means that there is a slight period (maybe a minute or two, depending on how fast you are) when your blog will show a post on the main screen.   But this is a problem that most people can live with.

What your readers see: 
Unless you take steps to avoid it, your readers will see a grey box saying "0 Posts" when they look at your blog's main URL.   Some of the things you can do to avoid this include hiding the "showing posts with label XXX" message, and creating a gadget that only shows on the "home" page.




Related Articles:



Limiting your blog to only have one post on the main page

Giving your blog a home page

What are dynamic view templates?

Blogger template types
.
Using tables in your blog

Displaying a gadget only on the home page

How to make every Blogger post appear on a separate page

You can set your blog up so that only one post is shown at a time - provided you don't use a Dynamic template, and you don't use Label or Archive pages.

One Post per Page?

One Blogger option that confuses some people is how to set up their blog so that only one post shows up on each "page" or screen, and there is a complete break between the posts.

This is fairly easy to do, you just need to understand a little about the types of screens that Blogger uses to display your posts, and how they can be manipulated and used - or importantly not used.

Most people refer to the screens that their blog as "pages".   However I try not to use that word, because the Pages feature in Blogger is quite different.  See "The Difference between pages and posts" for more about this.


The types of screen in your blog:

If your blog has a Designer or Layout template (ref  What templates does my blog have) then Blogger offers these major "views" of it:
  • The main screen
  • The posts-by-label screen, which shows all the posts (or the most recent however-many posts) that have a label that you or the visitor selects
  • The posts-by-archive screen, which shows all the posts (or the most recent however-many posts) made in a time-period that your visitor selects
  • The pages screen, which shows only one page at a time
  • The post screen, which shows only one selected post at a time.

Visitors see the post  screen when they navigate to the URL of an individual post.   In Blogger-HAT, for example, most visitors are from a search engine or a referral from the  Help Forum.   These people always follow a link to a specific post, so they see the post-screen showing only that post.

You cannot control how many posts are shown on the label or archive view - that is simply not how these screens work.

Similarly, you don't have full control how many posts are shown on the main screen:   you can make a suggestion (up to 500), but Blogger's auto-pagination rules decide how many post are actually shown, and how many are behind the "older posts"link.

But, you can set your blog up so that only a single post is ever shown on the main screen.  And if you do that, you may want to
  • not use the Labels gadget (which shows the posts-by-label screen) 
  • not use the archive gadget (which shows the posts-by-archive screen)
because these screens always show more than one post-per-screen.


How to show one post at a time on the main screen:

  • Choose the Options drop down from the main menu, 
  • Choose the Settings > Posts and Comments panel from the left sidebar.  
  • Enter one (1) into the Show at most field
  • Click Save Settings in the top right hand corner of the screen.


(Yes, these commands talk about "page", but they mean "the main screen".)



Related Articles:

Blogger template types

The difference between pages and posts

Removing dynamic templates from your blog

How to cut, copy and paste if you don't have an Edit menu

Putting Posts into your Pages in Blogger

Post.snippet and post.thumbnail: tools for summarizing your blog

The snippet and thumbnail attributes now appear to be available for all Blogger posts, even though they're not documented in Blogger's official list.  This article shows documents what I've found out about them.

"Fields" in Blogger:

XML verstehen.Titelseite Many people are used to computer systems that are based on databases which have rows (records) and columns (fields).

Blogger use a database, which has tables and fields.

But instead of record.field notation, Blogger templates use XML tags to access the data  that make up blog posts.

This means that Blogger templates can be made up of statements like this:
<b:if cond='data:post.title'>
      <h3 class='post-title entry-title'>
     <b:if cond='data:post.link'>
       <a expr:href='data:post.link'><data:post.title/></a>
     <b:else/>
        <b:if cond='data:post.url'>
          <a expr:href='data:post.url'><data:post.title/></a>
        <b:else/>
          <data:post.title/>
        </b:if>
     </b:if>
      </h3>
    </b:if>

This basically says "If the post has a title, and if it has a link, then show the title value linked to the URL.   If it just has a title but no link, then just show the title.   Otherwise don't show anything in this spot.   And if something is shown, format it with the header-3 style."

A list of the tags (much like fields or attributes in other programming languages) that Google has told us about is available in this help article (I have a link to it in the "handy tools" section of the sidebar).

But recently people have noticed two new tags that are not included in this list, and have started writing Blogger tweaks, hacks etc to make use of them.   They are are
  • data:post.snippet
  • data:post.thumbnail

I haven't been able to find any official documentation about what these tags refer to.

But I have done some investigations in a test blog    (by altering the template to explicity show these things, and then making posts with particular possible values.    And this is what I've found.



Post.Snippet

If a post has a jump-break before character 140, then the snippet is all the text before the jump-break.

But if the post does not have a jump-break, or it is after character 140, then the snippet is the first 140 or so characters.   (Line breaks are shown when the snippet is displayed, in Blogger, but they are not included in the character count).

Currently, the only way to control what is in the snippet is to put the contents at the start of the post.  There is no other way to edit it.    (You may notice that all the posts in Blogger-Hints-and-Tips start with a paragraph or two in bold.   This is how I flag the "snippet" code to myself.)


Post.thumbnail

I haven't been able to work out the rules for this item by testing options.   So far I know that:
  • Not every post has one, sometimes it's blank even if there's an image in the post
  • It's not automatically the first image in the post
  • It's not automatically the last image in the post.
  • It's not the automatically the biggest image in the post.

I now strongly suspect that it's the first image in a post that is both hosted in Picasa-web-albums and  over a certain size (possibly about 18kb).


What your readers see:

Unless you edit your blog template to use these values in a visible way, then your readers will not see anything different about your thumbnail and snippet - they just look like regular parts of the post.

But there are some specific ways that you might to use them, including:
  • Setting the post-description meta-tag to the value of post.snippet
  • Editing the template to only show the snippet or thumbnail on certain types of pages.

And if you allow your visitors to see your blog using Dynamic templates, then I'm 99.9% sure that the post.snippet is the picture used to represent your blog in some of the more graphical formats.


Using the post.thumbnail and post.snippet tags

If you are happy to accept the disadvantages of edit your blog's template, then you can show the snippet and thumbnail anywhere inside the blog post area.

The code to use to display them is:
<data:post.snippet/> - for the snippet, and
<img expr:src='data:post.thumbnailUrl'/>  - for the thumbnail

You need to put the thumbnail into an image tag because, of course, it is an image.



Do you have any more information?

In this article, I've shared what I have found out about these two fields by doing some testing.   But it's likely that I've missed some things out.

Have you been able to find, or work out, any more detailed rules about what post.thumbnail shows?

What else have you found out about these tags - or any other tags that are available in our blog-templates but not in the official list?




Related Articles:

Installing code into your blog

Centering gadgets in your blog.

What are dynamic templates

Advantages and disadvantages of editing your blog's template

Putting text and pictures side-by-side

Why RSS / Subscribe to Posts is important for your blog

This article explains why an RSS feed is important to bloggers, and some options for making it available.

Overview

Previously, I've described how to hide the Subscribe to Posts (atom) link that appears that the bottom of the screen on all Blogger's standard templates.

This is a sensible thing to do, because the link:
  • is ugly, 
  • is hard to find (except for hardened Blogger users who know what they're looking for), and 
  • uses words ("atom") that don't mean much to many readers, especially ones who don't use Blogger.
But providing an RSS feed for your blog is A Very Good Thing to do, and there are many ways of doing it which don't involve that link.


Why is an RSS feed a good thing?

When websites were invented, people found that it took a lot of time to visit all their favourite sites regularly just to check for any changes.   It was frustrating for sites that don't change often.  It was hard to spot changes in big sites.   And web-site owners realised that some people simply wouldn't remember to check back anyway.

A few approaches were created to solve this problem.  One is RSS ("really simple syndication"), which is based on the idea that
  • Websites are set up so that every time they are updated, they "publish a feed" of what's new, and
  • People who are interested in websites use "feed reader" software to check if the sites they are interested in have new material, and
  • Feed aggregator tools sit in the middle and keep track of what websites have published and what sites individual people are interested in what updates they have read so far.
Blogs that are made with Blogger are really just another type of website, so to work with RSS they needed a way to "publish a feed" of new material when posts are added.

The approach that Google originally used for Blogger involves "Atom" format.  The "Subscribe to Posts (atom)" link that appears on the bottom of most Layout and Designer templates is saying
 "Here's a link for your feed-reader to use, in our Atom format".
This works, but as I've said, it's ugly and not so obvious for non-Blogger-users.  The rules used to publish feeds on the internet have developed over time and different ways of organising the data in "feeds" (eg Atom 2.0, XML) have been adopted.  And website publishers have begun to look for more features in their feeds and in the statistics they get about who reads them.

Blogger also has a a Subscription-links gadget, which has buttons to let users subscribe to either your Posts or your Comments.  Recently I've had difficulty with this gadget:   I can add it, but it doesn't actually show up on my blog.   I've reported this via the Something-is-broken section of Blogger Help Forum, but not found a solution.


Alternatives:

cute picture of an anthropomorphic rabbit
The simplest alternative to the "Subscribe to posts (atom)" link is to make something else on your website that points to the same place as that link, but looks more obvious.
For example, you could use a cute picture of a rabbit, or even some text like "Follow this blog in RSS".

All you need to do is find the RSS feed address for your blog, and link it to this picture or text.

But although this gives your readers access to your feed, it does nothing for you.


A better alternative is to use a tool like Feedburner.


This takes your blog's "raw" feed and delivers it to subscribers in the format your specify - and also offers a number of other features including tools to
and many more.

Other alternatives?

There are other products that can be used to do similar things.

But Feedburner was purchased by Googe in 2007 (according to Wikipedia), so it's now part of the Google family of products.   Until I find some feature that I need but it doesn't have, I'm not likely to explore other tools, simply because it's often easier to use products from the same toolset.  

Your mileage may vary.  But if you're interested click here to find out about getting started with Feedburner.



Related Articles: 


Adding an RSS feed icon to your blog

Giving your blog an email subscription option, using Feedburner

How to hide the Subscribe to Posts (atom) link

Finding the RSS feed address for your blog.

Blocking categories of AdSense ads from your blog

Posts, Pages and navigating inside your blog

This article explains Posts, Pages, and some ways that they can be used to help people move around inside your blog.

Overview:
Since Google introduced the new Pages feature, there has been a lot of confusion about Posts, Pages, Sub-pages, and how to categorise things.

This isn't helped by a lot of Blogger's own documentation, written before the Pages feature was introduced, which used the term "pages" to refer to a collection of Posts.

This article explains the difference, and looks at when each type of item should be used.


Pages vs Posts

A Post is the basic unit of information that you publish in Blogger.  Each post has a post-date, and this date is often the main tool for navigating around your blog.

On the surface, a Page is similar to a Post.  But really, they are quite different, and should be used for different things.

Pages are meant for static content that doesn't change often.  This is content that supports your main content, which is in your posts.   Because of this, Pages:
  • Cannot be set as your home page
  • Cannot be navigated to from the Newer/Older posts links
  • Don't have labels
  • Can only be navigated to from the Pages gadget - cannot be navigated to from the Labels gadget
  • Are not included in RSS feeds
  • Are not included when you export your blog contents,
Ideally, you should only edit your Pages very rarely.


Navigating around a Blog

When the Pages gadget is displayed as a horizontal bar, it looks like a menu bar.



This makes many people think that Pages are the main way of navigating around a Blog.  This wasn't true, initially, but recent changes to the Pages gadget have made it more helpful.   That said it's not the only - or best, IMHO - way to get your users navigate.

The tools that Blogger provides for navigating around a blog are:
  • The Labels gadget (to list posts by category) - you can use it to make it seem like you have put your posts into "pages"
  • The Archives gadget (to go directly to a post by date)
  • The Newer/Older posts links (to go through the blog one screen at a time)
The Linked List gadget can also be used for navigation, provided you set it up with links to Posts in your blog.  

And you can put links between individual Posts using regular hyperlinks (select the text, cick the Link item in the toolbar, put in the URL of the post that you are linking to).

The Pages gadget is not intended for navigating through most of the contents your blog - it is only useful for getting directly to reference information that isn't stored in the same sequence that your main blog contents are.


Related Articles: 


Blogs, Blogger, blogger, Post, Pages and  Labels - some basic definitions

The difference between Posts and Pages

Why Blogger's "static" pages are more trouble than they're worth

Categorising Items in your Blog

Putting your posts into "pages"

Jump Breaks and Posts

Adding a separator line between your posts

This article shows how to put a horizontal separator line between posts in your blog, using either HTML's line command, or CSS rules.  It also has suggestions about ways of formatting these lines using different colours and line-styles.



There are at least four approaches to choose from if you want to put a divider between your posts in Blogger.  These days, I prefer the CSS-rule approach, because it's so easy and flexible.  But I've shown details of a few other methods too:
  • Manually add a horizontal line command to each post
  • Use the post-footer colour block as a line (in Designer templates only)
  • Add the HTML command for a line to the main section of your template, in one of the post-footers
  • Add a top or bottom-border to the CSS rule that formats the body of your posts.
The following sections give more detail about each option, including how to apply them to your blog, and their advantages and disadvantages.


Manually add a line to each post

When you are editing a post, you can put a horizontal line anywhere in the contents.

If Compose Settings (under Post Options) is set to  Interpret typed HTML, then you can just type <hr />, and Blogger will place a line like this in your post.


If your Compose Settings (under Post Options) is set to  Show HTML literally, then you need to switch to the Edit HTML tab before you type <hr />.

Disadvantage: If your post is set to display comments, or the blog is set to show the author, labels etc under the post, these items will be underneath any line that you add manually to a post.


Designer Template - post footer colour

If your blog has a designer template (ref, What sort of template have I got), then the Template Designer > Advanced tab may have an option for setting the background colour of the post-footer (depending on which template you are using).



If you use a dark colour (or have a dark background and use a light color), this makes the post-footer look like a line.

Disadvantage:  The "line" might be a bit thicker than you like.   And if your post is set to display comments, or the blog is set to show the author, labels etc under the post, these items are shown right inside the footer line.





Add a line-command to your template

If you don't like the other two approaches, you can change your template to add a horizontal line.  To do this:

1  Edit your template:

In Sept-2011-Blogger (ie the new interface) go to Template > Edit HTML > Proceed
In pre-Sept-2011-Blogger (ie the old interface) go to Design > Edit HTML.

Download a full copy of your template, and put it somewhere safe (in case things go wrong, and you need to go back to where you were).

3  Click on Expand Widget Templates.

4  Most templates have three footer lines:  what is in each one depends on the template, and how you have arranged the items in the Layout > Blog Posts editor.

Look at the template for code like the following,
       <div class='post-footer-line post-footer-line-2'><span class='post-labels'>
        <b:if cond='data:post.labels'>
          <data:postLabelsLabel/>
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
          </b:loop>
        </b:if>
      </span> </div>
OR
 <div class='post-footer-line post-footer-line-3'/>
    </div>

and add the <hr /> command to which ever one you want, for example
 <div class='post-footer-line post-footer-line-3'/>
<hr />

    </div>

Advantage:  you can easily place the divider line anywhere you want it, relative to the other items in your post-footer.


Disadvantage:  you need to modify your template, and this does have some risks.  And it does use the <hr /> tag which some people (CSS purists) suggest is not a good idea.



Enhancements to the basic <hr /> command:


There are lots of ways you can modify the <hr / > code.   For example

<hr style="text-align: left;" /> -  to left-align it

<hr style="color: red;" /> -  to change the colour
<hr style="width: 50%;" /> -  to make it narrower

See w3c.schools <hr /> tag for more information. 



Add a border to the CSS rule that formats your posts

The cascading-style-sheet rules in your template control most aspects of how your blog looks.   They can be a very powerful way to control how your blog looks.

Quick option:

If you have a designer template, then the quick way to make this change is to add a CSS rule to your template.  The rule code to add is:
.post-body
{
border-bottom:1px dotted #666666;
}

or this one if you want the border at the top of each post:
.post-body
{
border-top:1px dotted #666666;
}

In-depth

The specific CSS rule that controls how the "body" of your posts look is .post-body.   To make changes to it:

1 Go to Design > Edit HTML

2 Download a full copy of your template, and put it somewhere safe (in case things go wrong, and you need to go back to where you were).

3 Look for .post-body in the rules section of your template. It will look something like this, but  the exact lines and values may be different:
.post-body {
margin-top: 0;
margin-$endSide: 2px;
margin-bottom: 0;
margin-$startSide: 3px;
}
 4  If you can find a .post-body rule, then add this line, just before the } character.
border-bottom:1px dotted #666666;
5    If you cannot find a  .post-body statement in the rules section of your template, then you need to add it.

Put it somewhere:
After    <b:skin><![CDATA[/*

Before  ]]></b:skin>

But not in the middle of any other rules: look at how the rest of that section of your template is laid out for clues.

The statement to add is something like the following, though you may want to try out different values for parts of it.:
.post-body {
border-bottom:1px dotted #666666;
margin-top: 0;
margin-$endSide: 2px;
margin-bottom: 0;
margin-$startSide: 3px;
padding-top:10px;
margin-top:20px;
}


Alternative formats:

The #666666 means draw the line in black - you may like to use a different colour, or use the word "solid" instead of "dotted" to make a firmer looking line.

As an alternative, you can say border-top:1px dotted #666666; - this puts a line at the top of the body of each post, just underneath the title.



Related Articles:


What sort of template have I got

Disadvantages of editing your blog's template.

Adding a new CSS rules to your template

Centering the Post-title or Page-title

Putting HTML from elsewhere into your blog.

How to put put Posts into your Pages in Blogger

This article shows how to set up your blog, using Blogger, so that it looks like your posts are on separate web-pages.


Can you put Posts onto Pages in Blogger?

Ever since Google introduced "pages" into Blogger, people have complained that their posts all go onto the "home page", and asked how to put posts onto different pages in their blog.


The standard, but unsatisfactory, answer is
"Sorry, that's not how Blogger works.   So called "static" pages in Blogger are meant to be used for reference information that doesn't change often, which you don't want to be part of your regular post-feed, but which you do want users to have easy access to."

Basically, this is part of the difference between post and pages.

Luckily it's easy to set up your blog so that it looks like your posts are on different pages [tweet this]    (even though you and I know that this isn't how Blogger works) by following three simple steps.


Follow these steps:

1   Add Categories

Categorise your posts by adding Labels to them.   (Either all of them, or just the ones that you want to show up on specific "pages".)


2 Make a "pages look alike" menu bar:

There are (at least) are three ways of doing this - choose which ever one suits your blog best:

a)   With a Labels Gadget:    

Use the usual add-a-gadget approach to put a Labels gadget into the spot where you would put the Pages gadget if you wanted to make a horizontal menu bar with it.

If your blog has some Labels that you don't want to have "pages" for, then set it to show only some of your Labels:

         b)   With a Linked-list gadget:   

Use the usual add-a-gadget approach to put a Link-list gadget where you would put the Pages gadget if you wanted to make a horizontal menu bar with it.
Add a link to the list for each Label that you want a "page" for.   The HTML to use for each Label value is

http://YOUR-BLOGS-URL/search/label/THE-LABEL-NAME

You can also add other items (eg individual Posts, or even Bllogger's static "pages" if you really must have them - see why I don't like them!) - see the menu bar at the top of this site for an example of this.


c)   With a Pages gadget:   

Use the usual add-a-gadget approach to put a Pages gadget into the menu bar area.
Use Label-links described above the Linked-list gadget option, as website links to add to your Pages gadget.
Due to the increasing importance of mobile templates, this is now the option that I recommend, because the pages-gadget does automatically appear on mobile-templates

3   Deal with the home-page

If you don't want your posts to appear on the "home page" was well as the topic pages, then there are two options:

OR

  • Give your blog a "home page" using the custom-redirect option discussed in this post.


Job Done

It really is that simple.  Your readers can now click on the "pages" in your blog from a "menu" at the top, and see a list of posts for the Page that they chose. 

Even better, if some posts relate to more than one topic, they show up on both of the relevant pages.    And if you have used the Pages gadget, your blog is well set-up to work with a mobile-template - which is something that is getting more important every month.

Don't forget to test your blog, to make sure that the menu bar is working how you expect it to and that it looks OK, in all the browsers that your readers are actually using.




Related Articles:

Using Labels to group your Blogger Posts

Adding external and internal URLs to your pages-gadget / menu bar

Giving your blog a home page

The difference between posts and pages

Showing a Gadget only on the Home Page

Making your blog work for people using smartphones and tablets