Showing posts with label Home page. Show all posts
Showing posts with label Home page. Show all posts

How to not show any posts on your blog's home page, using Blogger

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" approaches to give readers other ways of getting to your content.


Previously I've explained how to only show one post on the main page of your blog.

But some people who want to give their blog a home page go further than that, and don't 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 some index-pages (containing lists of bus-routes, suburbs, maps 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.  It's not possible if your blog has a Dynamic thene, but can be done for blogs with Layout themes.

There are at least two ways of doing it.

Option 1 - use a custom re-direct for your home-page

Make a new Page (Pages > New Page) and add the material which you want to show on your main screen.    Publish this page.

Take a note of the URL of the Page that you use created.

Go to Settings > Search preferences > Errors and re-directions . Custom re-directs

Click Edit then New re-direct

In the dialog box which opens:

  • Enter a back-slash (ie   /  )into the first (From) box.
  • Enter the URL of the page that you noted earlier into the second (To) box
  • In the To box, remove the blog-address, because Blogger already adds that for you.
    Eg if your URL is     http:/www.myBlog.com/p/home.html
    then just enter           /p/home.html

    (note that you keep the backslash (/) just before the P.
Click the Permanent checkbox.

Click Save just under the entry you just made - it now looks like this:



Click Save changes.


Job Done!   Anyone who goes to your blog's home page will now go automatically to the alternative page you made - and the effect is that no posts are shown on the home page.



Option 2 - use the Posts and Comments setting

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.


    About this method

    The method in Option 2 works:   no posts are shown on your home page.

    But by default, nothting else is shown, either.    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.


    Recommended option

    The custom re-direct option is probably the best approach - and is certainly what I've used for my blogs recently:   it's clean, and doesn't need any special messing around with gadgets etc to put content onto the "home" page.

    But there may be cases where the second option is better - and I have recently confirmed that it still works.




    Related Articles

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

    Giving your blog a home page

    What are dynamic view themes?

    Blogger theme types
    .
    Using tables in your blog

    Displaying a gadget only on the home page

    Showing your oldest blog-post first - and the rest in reverse order.

    Blogger does not have an option to display your posts in reverse order - so that the oldest post is first, and the most recent post is last.  

    But this article describes displaying your posts in this way by manipulating their post dates.  And it links to an article about some other possible options.


    Overview

    Previously I've discussed the options for giving your blog a home page.  One option is to organise the post-date for each of your posts, so that you control the order posts are displayed in.

    This is easy enough to do, although there are a couple of risks that you need to be aware of as discussed below.


    Blogger Posts and the Post-date

    Each Post in your blog has a date-time value, which is called its "post-date".   Normally , this is set to the date/time when you publish the post for the first time.  But you can change the post date for any post, and you can do this either when you post it first or later on.

    The post-date is important because it controls the order that posts are shown in:
    • The post that appears first when a reader visits your blog is the one with the most-recent Post-date.
    • If you have more than one post-per-screen, then the next-most-recent post is on the screen underneath the first one.  And then the second-next-most-recent, etc.

    When a reader is looking at any post, and they click Newer-Posts or Older-Posts, the post-date is used to decide what posts to show on the next screen.

    This means that you can make your posts appear in the order than you wrote them (ie first post first, second post second, etc) by changing the Post-date so that:
    • your first post has the most-recent post-date, 
    • your second post has the next-most-recent-date, 
    • your third post has the third-most-recent poste date
    • etc

    An alternative approach is to just make one post always appear first, and let the other posts appear in the order that you posted them.


    How to make your posts appear in reverse order, using dates

    1  Give your first Post a post-date (eg today), AND remember that date.

    2  Give all other posts (even ones that you write next week, or next year) a post-date that is earlier than the post-date you picked in Step 1.
    • If you want your posts is strictly reverse order, you need to give each one a date that is earlier than any existing post.  This is quite easy:  just look at the list of posts in Posting > Edit Posts and scroll to the bottom of the list to see the oldest date used so far.
    3  Turn off the post-date display on your posts (since the post-date won't make sense, because you're manipulating the dates).

    • To do this, go to the Layout tab.  
    • Choose Blog-posts (edit).    
    • Un-tick the date under "Post Page Options".

    4  Remember to make the same date change for every post you write from now on.


    Also, if it might be relevant for your readers to know when you wrote a post, make sure that you always manually put the date into each post.


    Risks of this approach

    If you follow this approach, you will give a far-in-the-past date to pages that you never want to appear first.  There is a risk that Google might convert the data behind older posts at some time.   If your post-dates get too far into the past, then it's possible that they might not cope well this.   This could be for reasons that seem logical, or because of things that are totally to do with the internal workings of Blogger's database, and make no sense to you at all.

    Also, be aware that Google might choose to force the post-date to appear on posts at some time in the future.  At the moment, they don't:  it's your choice.   But you cannot guarantee that they won't change their minds about this, one day.   (Personally I think they probably won't, and I've built a couple of "real" websites that make use of the technique described here.   Just remember it's not guaranteed.)




    An Alternative Approach

    Adam of Too-Clever-by-Half has suggested a totally different way to display your posts in reverse order.   I haven't used it, but think that it has a lot of potential in some situations, provided you are comfortable using Yahoo pipes and RSS feeds to display things on your blog.

    He has also recently shared another approach he found, which uses a script to manipulate elements within Blogger, and so is more robust than his first approach.




    Related Articles

    Changing the post date for any post

    Giving your blog a home page

    Using a gadget instead of a post as your home page
     
    Stopping certain pages from ever appearing on the home page

    Blogs, Blogger and blogger, Posts, Pages and Screens - understanding how blogger works.

    Displaying a gadget only on the home page - or only on a specific page

    This article is about how to set up a gadget / widget in Blogger so that it is only visible on the first place that a reader sees when they visit your blog (often called the "home page").  It is one of a series of articles about controlling what goes on the homepage of your blogspot blog.


    Front Page Bob
    By Paginator (Own work)
     [CC-BY-3.0], via Wikimedia Commons
    There are a number of reasons why you might want to put a gadget only the screen that shows when a visitor first navigates to your blog's home page.

    You may want to show a welcome message, or a topic-index page, or to give a view of your recent tweets or some other RSS feed.    

    No matter what the reason, the process is very similar:

    How to make a gadget only appear on the first page

    Note:  in Blogger, the words "gadget", "widget", and even "page-element" all mean the same thing.  I generally use "gadget", because the Page Elements tab currently says "Add a Gadget".  But they're absolutely the same.

    1   Add the gadget

    Do this in the usual way.


    2  Place the gadget

    Drag-and-drop the gadget to the place where you want it.   It may be over or under your blog-posts gadget, or in a totally different place.

    A popular place for a gadget that is going to look like a "home page" would be in the Body section, just above the Blog Posts gadget, where "Test Gadget" is in this example:



    3   Find the Gadget-ID  in the usual way.


    4  Find the code for your gadget:

    Edit your template.

    Click in the search box inside the template editor, and look for the widget name that you noted in step 3.   Once you've found it, notice what comes after it.   In this example, it's the line for Blog1:
              <b:section class='main' id='main' showaddelement='no'>
    <b:widget id='Text1' locked='false' title='Test gadget' type='Text'/>
    <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>

    Use the expansion triangle at the left side of the template editor to expand this section of the code.  After you do, it will look like:
     <b:section class='main' id='main' showaddelement='no'>
    <b:widget id='Text1' locked='false' title='Test gadget' type='Text'>
    <b:includable id='main'>
      <!-- only display title if it's non-empty -->
      <b:if cond='data:title != &quot;&quot;'>
        <h2 class='title'><data:title/></h2>
      </b:if>
      <div class='widget-content'>
        <data:content/>
      </div>
      <b:include name='quickedit'/>
    </b:includable>
    </b:widget>
    <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

    5   Add conditional formatting

    You need to put conditional formatting code around the code for the gadget - makings sure that it doesn't go around the code for anything else!  (which is why you noted what comes afterwards in step 4)

    And to avoid leaving blank space where the gadget would have gone, you need to update a "hide" instruction to apply it to the gadget-id you noted in step 3.

    The code to use is this - except put the gadget-id instead of the XXX.

    <b:if cond='data:blog.canonicalUrl == data:blog.homepageUrl'>

    THE red CODE FOR YOUR GADGET GOES IN HERE 
    <b:else/>

    <style type='text/css'>
    #XXXX {display:none;}/*remove blank space that the gadget leaves*/
    </style>
    </b:if>

    The example above looks like this, when the code has been added:
    <b:section class='main' id='main' showaddelement='no'>
    <b:widget id='Text1' locked='false' title='Test gadget' type='Text'>
    <b:includable id='main'>
      <b:if cond='data:blog.canonicalUrl == data:blog.homepageUrl'>  <!-- only display title if it's non-empty -->
      <b:if cond='data:title != &quot;&quot;'>
        <h2 class='title'><data:title/></h2>
      </b:if>
      <div class='widget-content'>
        <data:content/>
      </div>

      <b:include name='quickedit'/>

    <b:else/>

    <style type='text/css'>
    #Text1 {display:none;}/*remove blank space that the gadget leaves*/
    </style>

    </b:if>
    </b:includable>
    </b:widget>
    <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>


    6  Check that it's worked

    Preview your blog before you save the changes:  check that the the widget is visible.

    Save the template changes, and look at your blog.  Check that
    • The widget is on the first page
    • The widget is not seen when you look at an older page (eg one from your archive)
    • The other elements of your blog (other widgets, blog post titles, dates and contents) are all as you expect them - on the first screen, and on other screens too.

    If anything is wrong with how your blog is working, go back to the template editor (Layout > Edit HTML), and upload from the copy of your template that you made at the beginning of step 1.   This will let you blog work properly, while you figure out what went wrong.


    How to display a gadget only on a specific post or page


    Follow exactly the same approach as above.

    But instead of  
    <b:if cond='data:blog.canonicalUrl == data:blog.homepageUrl'>

    Make the conditional statement based on something else.

    This can be a different condition, or a specific page URL.    For example to display a gadget only on a specific page, use this code, and put the address of the page instead of POST-URL:
    <b:if cond='data:blog.canonicalUrl == "POST-URL"'>>

    Note:   for the address of the page, if your blog does not have a custom domain, then be careful to use the "blogspot.com" version of the address, not one with a country-level name  (eg the blogspot.in or blogspot.co.uk version)


    To display a gadget on every page except a specifc one, replace the double equals signs (==) with the HTML code for not, which is an exclamation mark followed by an equal sign (!=).   For example:
    <b:if cond='data:blog.canonicalUrl != data:blog.homepageUrl'>

    Blogger have now provided an expanded list of conditional statements - you can find information about it:





    Where to get more information

    Controlling what goes on the homepage

    Adding a gadget / widget / page-element to your blog

    Editing your blogger template

    Putting a slideshow from Picasa onto your blog

    Getting the HTML code to put a picture into your blog

    Making a gadget that looks like a posthttp://buzz.blogger.com/2015/06/even-more-expansions-to-blogger.html

    Giving your Blog a Home Page

    This article is about the options for setting the home page for blogs made with Google's Blogger.


    Blogs don't have a "home page", main page or "landing page" in the same way that regular web-sites do.  Instead, they show the newest post first, since (hopefully!) most readers will be return visitors, coming back to see what's new.

    But there may be blogs/websites where you want a welcome message or a particular post to appear first whenever someone visits your blog, or where you want to put all your posts in reverse order.

    This article is about options for giving your Blogger blog a "home page".

    It lists four options, and gives advantages/disadvantages of each approach, and links to articles with details about implementing each case. If you can think of any more approaches, please leave a comment below.


    Options for giving your blog a home page include:

    • Static page combined with a custom re-direct - as discovered by Nitecruzr, and now described here.  This was my recommended method of home-page implementation for a while.   However it did not work on mobile themes for a while, so I changed my mind.  But it does work on them now, so I'm back to recommending it again.


    Advantages and Disadvantages of each option


    Option Advantages Disadvantages
    Static page and custom re-direct No theme editing is needed

    Easy page editing - no messing around putting content into a gadget

    No gaps on other pages due to the gadget being "missing"

    Simple, elegant, and fully functional for both desktop and mobile visitors.
    Back in 2011, I wrote:  
    "Google probably didn't intend to give us this option when they set up custom re-directs, so it's possible that they might remove it again.   It's such a nice solution, though, that I think it's worth the risk for now".
    But it's now 2017, they haven't removed it yet.   So I'm thinking that it's not going away any time soon.
    Show all posts in reverse order Great for new readers - they can "follow the story". Return visitors have to navigate down to where they were up to last time:  the blog has no way of helping them to remember where that was.

    You can't use most of Blogger's date features:  newer and older posts links will take the reader in the "wrong" direction.  And you have to manually enter any dates that would be relevant.

    Your posts will get "older" as you write more:  this may confuse search-engines, and there's a risk that google might to things to "very old" posts in the future.
    Make one post always show up first You can still use all of Google's date features.

    Readers will know when you actually posted to your blog.

    Great for returning readers:  they can see your (current) welcome comments, and then go straight to the latest post after that.
    You have to remember to edit the "chosen" post every single time that you make a new post - one day, you might forget.

    This approach probably won't work on multi-author blogs:  there's a very high chance that someone would forget to edit the chosen post and change its date.
    Show a "welcome gadget" on the home page only Doesn't need any changes to Post date-time settings.

    Your blog still functions like a blog (older/newer post links , archive gadget etc).

    An HTML/Javascript gadget can be very flexible, and you can get Blogger to write all the HTML for you - see Making a Gadget Like a Post.

    You can use things other than text, eg a picture or even a poll.

    It includes an extreme option:  you could show no posts on the "home" page, and just show the gadget.
    You need to edit your theme to make this work.

    You need to re-do the theme customisation every time that you change to use a different theme.

    The welcome gadget isn't one of your posts: it's not included in exports of your blog contents (It is in an export of your theme - but the words inside it are not included).

    A gadget cannot show quite as many things as a post.  

    Doesn't work for mobile device users if your blog has a mobile theme enabled, unless you some some specific things to make the gadget show on mobile.


    Can you think of other ways?   Please leave a comment below.



    Setting the homepage's post date into the future doesn't work

    Some people suggest that you can set the post-date of your main page in the future - and at some times  this has worked.

    But now that scheduled posting is working the way most people expect it to (ie if you write a post today, and publish it with tomorrow's date, then it is shown to your readers from tomorrow onwards), this will not work - because your "home page" won't show until that future date is reached.

    There may be some ways you can fudge it in to working (eg post the page with a date in the past, and then post it again with a future date).   But I VERY STRONGLY don't recommend this:  even if they work today, they may stop working at some time in the future when Google make a change to how future-dated posts are handled.



    Related Articles

    Displaying a gadget only on the home page

    Showing your oldest post first in Blogger (AKA Showing your posts in reverse order)

    Making one post always come up first

    Changing the date for a post.

    Stopping certain pages from ever appearing on the home page

    How to put put Posts into 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 to put your posts into pages

    1   Add Categories

    Categorise your posts by adding Labels to them.

    It's your choice whether to add Labels to all posts, 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 - described below.

    When Blogger first implemented static pages that could link to websites, I suggested choosing which ever option suited your blog best.  

    However now, due to the increasing importance of mobile themes, I recommend Option c), because the pages-gadget is the only one mentioned that automatically shows upon mobile-themes.

    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-BLOG-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   <===   RECOMMENDED APPROACH

    Use the usual add-a-gadget approach to put a Pages gadget into the menu bar area.   (You can do this even if you have not created any Pages of content).

    While you are editing the Pages gadget, there is an  + Add external link option.  

    Click on this, and add an entry in like the ones described above in he Linked-list gadget option, putting
    •  the text you want in your menu bar into the Page title field 
    • The label search command into the Web address field.




    3   Optional:  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 possibilities:

    OR

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

    However I generally see this as unnecessary, because in most cases, very blog visitors ever see the home page.



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

    Blog home-pages and mobile-templates: Do they work together?

    This article discusses the issues of giving your blog a home page, and how this works for people using mobile devices.



    Previously I've described the options for giving your blog a "home page", and also how and why to enable a mobile template for your blog.

    The home page (aka landing page) issue was a challenge with no good solution for a long time - until someone cleverer than me spotted the potential offered by the custom-redirect feature.   With this, you can put the content for a "home page" into a post or page, and then redirect your blog's "landing page URL" (www.yourBlog.blogspot.com) to it.


    However, I have found that if you have enabled a mobile template for your blog, then this approach does not work for visitors using mobile devices.

    Instead of the home page that non-mobile visitors see, mobile-using visitors are shown a mobile-specific page with:
    • Your header,
    • The page gadget (if you've used one - it's not used in this example) as a drop-down list
    • A list of tiles - one post each (more about these below)
    • An older posts / home / newer posts navigation tool
    • A link to view the web-version
    • A mobile attribution gadget (unless you've removed it)
    • An AdSense ad-unit, if you have put AdSense into your blog using the AdSense gadget(*).


    There may be some different things too, if you have chosen the "custom" mobile template option and added other gadgets to be shown on mobile.

    But a key point is that any home-page custom-redirect that you have set up does not work - even though other custom-redirects (ie not involving your home page) do work.



    (*) The rules for whether this is shown or not are actually a little more complex - but that's a topic for another day!


    What do mobile users see on their post-tiles.

    The landing page for a mobile user includes a vertical "tiled" list of posts.

     In this, each tile has:
    • The date and post title,
    • The post-thumbnail photo and
    • The first few words for the post (less than the whole snippet though) for a post.

    They are sorted by descending-date - meaning that your most recent post is at the top of the list.

    The applies if  you are using a standard (ie designer) or custom mobile template.

    The recently-introduced dynamic mobile template is different again - in it, the tiled post looks more like the "before the jump" summary shown on your regular blog - but even so, it is still a list of posts sorted in reverse-date order, not a custom home-page.


    What this means for bloggers who care about their home page

    There are main things that you need to think about:
    • Using a mobile template gives you far less control over your mobile landing page - although it can be set up to work well if you understand how it operates, and if you don't mind your blog looking like a blog, not a webpage..
    • With a non-dynamic mobile template enabled, visitors won't see whole posts or before the jump post-summaries initially: instead they see even more abbreviated summary tiles.
    • With a dynamic mobile template enabled, visitors will see post-tiles that are more like the post-summary from the main blog (even if it's using a non-dynamic template) - but they still won't see your custom landing page.

    If you are not happy with mobile visitors to your blog being shown a tiled-list of posts, then you should not enable a mobile template - and you should disable it if you've already enabled one

    This will mean that people using a mobile device to look at your blog will see a full-featured version, that they will most likely have to scroll around to view, ie they won't see the whole screen at one glance.   Though this sounds painful, in two of my blogs, I've decided that this is actually the best approach.




    Related Articles:

    Enabling a mobile template for Blogger

    Deleting "Powered by Blogger" from mobile-template blogs

    Making one post always come up first

    How to give your blog a fixed landing page

    Understanding post.thumbnail and post.snippet

    Using Blogger to build a "real" website