Southern Listeners

Loading
Thanks to Greenlava for this cool gadget. Get yours here

Saturday, October 16, 2010

Blogger Tips: Setting Up Homepage


By default your index page, which is the page that you'd get when you type in a domain, is the page where your main post body is located. Thus, when you visit a blog, you'd see posts in your index page. Whereas in a website, usually an index page is an introductory page, and you'd be able to click a tab from the menu to bring you to the blog/posts page. This is what we are trying to achieve in this tutorial.

Test Blog


In this tutorial, you'd be able to have a homepage, with no posts on it, and you can click on a tab to bring your reader to your posts. On the downside, this method is not so straight forward, and it involves some hardcoding. Something not so suitable for beginners, but feel free to try it out.


I'd suggest you to use firefox while trying this. with FireBug add on installed.

Step 1: Compose your welcome page

Go create a new post, and start composing your welcome page. This is how the welcome page would look like, so don't compose anything overly complicated.. When you're done, switch over to HTML view (as opposed to Compose), and copy the HTML of your welcome page.. You don't have to publish this post..

Next, we wanna add this code to the main page. Go to Dashboard - Layout - Add a gadget - HTML/Javascript - Paste your code there. Place your Gadget above the Blog Post box.


Step 2: Display homepage only in the main page and remove posts from main page.

It's time to get your gadget out - Firebug! Inspect what is the id/class of the html gadget and the main post.  Click here to learn how you can find your gadget's ID. My main post's id is Blog1 and the HTML gadget's id is HTML2. Your post's ID is gonna be Blog1 most probably, but your HTML gadget's ID may vary.


Now that we have known our IDs, it's coding time. Go Dashboard - Template - Edit HTML - Proceed - find for </b:skin> - Place the following below </b:skin>

<b:if cond='data:blog.url != data:blog.homepageUrl'>
<style>
#HTML2{
display:none;
}
</style>
<b:else/>
<style>
#Blog1{
display:none;
}
</style>
</b:if> 


Step 3: Customize Menu/Navigation Bar.

Using the new Blogger interface, go to Dashboard - Pages - New Page - Web Address. Paste the the address of your blog in the following format: http://yourblog.blogspot.com/search.html


The address must end with '/search.html'. Click on save then. The newly added page would have been added to your Pages gadget, thus it goes without saying that you must have a Pages gadget as well. You might wanna rearrange its position to appear at top.


You're basically done. You now have a link in your pages gadget that links to your posts!


Step 4 (Optional): Margin fix.

When you visit your blog, you'll be greeted with your homepage now. You have a lovely set of menu at top, in which you can click on it to show your blog posts. But you might notice that the boxes for all the posts (except for your homepage) are a little bit down.


There's a quick fix for it. Use Firebug to see what's the id or class of the box. As in my case, it is known as column-center-inner. I want to pull it a little upward for all my pages except for my homepage, so this is the code that i'll use:
<b:if cond='data:blog.url != &quot;http://qwertyyyyyyy.blogspot.com/&quot;'>
<style>
.column-center-inner{
margin-top: -20px;
}
</style>
</b:if> 
Place it below </b:skin>, similar to step 2. Voila, it's done!!

Update: Have Homepage enabled on a custom mobile template

If you'd like to have a custom landing page while using a custom template for your desktop and mobile site, checkout Baby in Heels' tutorial here.

52 comments:

  1. Hi,
    I really want to do this, though I am not sure re why...so
    I did steps one and two. I get to step three and get to the 'edit html' link. When I click it nothing shows. I am thinking that the html is supposed to show someplace so that I can copy it, right? Nothing shows up. Am I not looking in the right place? Please be aware that I am a BEGINNER but not afraid to give this my best. I actually started the blog last week...sigh. exploringmybackyard.blogspot.com
    Rose aka Nature Lady

    ReplyDelete
  2. @Nature Lady: Hi there. In step 3, can you see anything when you click on 'Compose' mode? If you can't, then compose something first (which is the first step). This is where you're gonna write your welcome text and so on. Once you've composed your page, you don't have to publish it, just click on Edit HTML, and you'll see some HTML codes. That is what you have to get in Step 3. Carry on with the rest of Step 3 once you have this.

    Don't hesitate to get back to me if you're still facing some problems on this. Cheers.

    ReplyDelete
  3. Hi again,
    I typed a few words and then previewed it (just to see). After that I clicked on the edit html link...while the font changed, no html was visible. So, I clicked the link at the bottom, "post options" (because I am curious and wanted to see if I could make any sense of the stuff there!). One of the things there is this: (With "how html literally"checked)
    Compose Settings
    Interpret typed HTML

    Show HTML literally

    Would changing this make any difference...nope, it didn't. Hey, when I clicked on the icons at the top (such as the BOLD one) the html for it showed up in the text area, right next to my words that are just plain janes...
    I have looked everywhere on the page to see if I was missing the code and there is nothing anywhere.
    Could I have some sort of settings thing that is not correct?
    Rose

    ReplyDelete
  4. @Nature Lady: Sounds like everything is fine, and nope you don't have to adjust your settings. When you input plain text, you won't see any formatting in its HTML, that is why it appears similar to you (of course the font is different). If you colorize your text, change your font size, change your text's alignment, insert some pictures and so on, you will see weirder codes. Probably this is what you're referring to. Nevertheless, whatever you see in EDIT HTML mode is your HTML, so don't worry about it even if it is just plain text that you're seeing.

    ReplyDelete
  5. Hello Yoboy,

    I have come a long way since using this solution. I am still fixing my first blog http://when2meets2.blogspot.com/ (I am in charge of designing, my partner is happily posting new posts, while I believe the blog isn't ready)

    I found a problem using the mainpage, basically I can no longer control the number of posts that appears on http://when2meets2.blogspot.com/search.html (my posts page) using the the default blogger settings "Settings>>Formatting>>Show at most ....."

    Do you know of any workaround? I am attempting to introduce a js for numbered page pagination http://www.theinfow.com/2011/04/numbered-page-navigation-for-blogger.html and solving/ or understanding the html that is behind this phenomenon will contribute towards solving a few problems.

    Thank you in advance! Please wait for my acknowledgement static page (still in the works). I want you as my honorable mention

    ReplyDelete
  6. @达达: Unfortunately, we can't control the number of posts that appear on search page. The Settings that you could set Under Dashboard - Settings - Formatting is just for the main index page, to set the maximum number of posts that you wanna show on your index page. The search page is a dynamic page, I can't think of any way to possibly control the number of posts that it will show. Sorry bout that.

    Cheers and God bless.

    ReplyDelete
  7. Thank you Yoboy for the quick response and looking into this.

    I attempted a pretty crude fix, and it works, it is not elegant at all and it only solves half of the equation.

    Basically, I changed all of the http://when2meets2.blogspot.com/search to http://when2meets2.blogspot.com/search?max-results=7

    A question to you, if I do it this way, do you foresee any side effects? like messing up the SEO etc.?

    I still have to figure out how to specify the js numbered pagination Page [1] to return to/reference http://when2meets2.blogspot.com/search?max-results=7 rather than http://when2meets2.blogspot.com/

    ReplyDelete
  8. @达达: That is brilliant Robin! Sorry for not thinking of that. And don't worry about SEOs, they are definitely overrated. And with Google's new Panda update, websites that appear in Search results will be ranked according to the quality of contents, instead of SEOs. It's already in effect. SEO will be history soon.

    Cheers.

    ReplyDelete
  9. U sir, are amazing!

    ReplyDelete
  10. @Yoboy: its so very difficult to follow. I dont know where to go from step 3. is there anything that is much simplier than this? thanks.

    ReplyDelete
  11. @Paid: If there is an easier way, I would have posted in here already.

    ReplyDelete
  12. I would like to thank you about this tutorial! It's exactly what I want and it's easy to follow (though I have quite a hard time figure out the Step5 since I'm not familiar with coding, but I think you do your best to simplify it already anyway)

    Of course I will spend some more time on your other tutorial too!
    So, thank you again! :) Great blog!

    ReplyDelete
  13. Raindrop: This tutorial is a bit old. You can skip Step 5, as you can substitute pages gadget with a linklist gadget. I've included a little note at top. All the best :)

    ReplyDelete
  14. Thank you for this tutorial!! It has immensely helped me with my blog!

    Cheers!

    ReplyDelete
  15. I just have one tiny problem. After I did step 6, the whole blog seemed to have moved down with the blogger dashboard. Is there anyway to push it back up to normal?

    website url: dashming.blogspot.com

    ReplyDelete
    Replies
    1. I found a stray character above your navbar. This is causing the shift. Find and delete this character in your template, that should take care of it. Search for the following text: &#160;

      See attached screenshots below:
      http://i.imgur.com/oWmD1.png
      http://i.imgur.com/LfPa7.png

      Delete
  16. It's fixed! Thank you for looking into it and the quick response!
    Cheers!

    ReplyDelete
  17. Thank for this tutorial.. extremely helpful! Also is there a way to change the url http://qwertyyyyyyy.blogspot.com/search.html to http://qwertyyyyyyy.blogspot.com/BLOG.html or something else?

    ReplyDelete
    Replies
    1. Well, The aim is to give your homepage a .html link. The 'search' tag is a pre-fixed word that Blogger recognises. I believe you can try 'index' as well. Can't think of other tags that will fit the URL. Feel free to experience :)

      Delete
  18. I did it! On my test blog anyway. Had to take each phrase apart and read/reread very carefully, but I did it! Thanks so much!

    ReplyDelete
    Replies
    1. Hi Yoga :-)

      My blog is http://mytruckalogue.blogspot.com/

      The "Daily blog posts" tab quit working after I deleted a bunch of labels from my posts - or maybe it happened after Google did away with the old interface.

      I made a new test blog, and was going to try to put the test code into the real blog, adjusting for widget id's, etc., but I don't think it's going to work. I'm too lost.

      I used the older version of this tip to make my "home" page. I'd like to change the code back to the original – so that the "home" page is the list of posts – as in http://mytruckalogue.blogspot.com/search.html

      I hope you can help me. I drive an 18wheeler over the road, and my time is very limited. Please tell me what you need from me, and I'll get it to you asap.

      Thanks so much for your time.

      Delete
    2. Hi Sherry,

      Simply undo Step 1 by removing the welcome gadget, and remove Step 2 by deleting any conditional code below /b:skin..

      Don't forget to backup your template in case something goes wrong.

      Let me know how it goes. Cheers and God bless :)

      Delete
    3. I think I removed the welcome gadget and code, but my tabs atill aren't working right.

      I included graphics to help illustrate in my own blog post
      http://mytruckalogue.blogspot.com/2012/09/marten-transport-driver-post-110.html

      Or it's the first post on the landing page now :-)

      Once again, thanks for your time, and God bless you too!

      Delete
    4. Hi Sherry,

      You have completely removed the tweak. What remains is just your pages gadget. Unfortunately, Blogger has some bug in the gadget for now. I think it'd be best if you could replace your Pages gadget with a LinkList gadget, and re-add your links - Home, Index and Privacy Policy. You can get back to pages gadget once it is fixed.

      Delete
    5. I appreciate it more than I can say! Take care :-)

      Delete
    6. I hope it went well. Feel free to get in touch with me should you need anything.

      Cheers :)

      Delete
  19. Thank you so much for this tutorial it is very helpful. i am currently on step 5 (customizing menu/nav bar)and i have run into some trouble. I clicked on several of your tutorial links and have become confused. should i just use the page list widget and continue with this tutorial or should i follow your other tutorial regarding link list? i labeled my pre-existing post but i cannot see it when i click my "blog" tab. can you help me? :o

    also how do i make my right column disappear on my static homepage?

    -www.youareair.blogspot.com

    ReplyDelete
    Replies
    1. Hi there,

      I've updated the instructions in Step 5 - hopefully it isn't confusing anymore :)

      To hide the right sidebar on your homepage, use this code instead in Step 2:

      <b:if cond='data:blog.url != "http://www.youareair.blogspot.com/"'>
      <style>
      #HTML2{
      display:none;
      }
      </style>
      <b:else/>
      <style>
      #Blog1, .column-right-inner{
      display:none;
      }
      </style>
      </b:if>

      Delete
    2. hi after doing step2 my gadgets at the right side are shifted below the homepage contents how to fix this...i want only homepage contents to be visible in my homepage or homepage contents with gadgets at left...here is image of my page...
      https://lh3.googleusercontent.com/-GViDcnRnnmY/UGG3kwMyq8I/AAAAAAAAAKU/I7KFZ4yOFHE/s505/Capture.JPG

      https://lh5.googleusercontent.com/-96GG9X3jIyk/UGG3k9tMxYI/AAAAAAAAAKQ/jacs-NAz1n0/s337/Capture1.JPG

      Delete
    3. If you undo Step 2, does it go back to normal? What's your blog's address?

      Delete
  20. hello again! i was wondering if it is possible to have the header in my static homepage look one way but when you click on my stand alone page it looks another way? for instance i'd like a text title header on my homepage designating my blogs name. and when you go to my standalone page the header will be an image (what my current header is right now)

    current header can be seen here:
    www.youareair.blogspot.com

    ReplyDelete
  21. It is possile:

    1) Go to Dashboard - Layout - Header - Edit - Placement - Behind Title and Description. Now, you should see both your title and background in all your pages.

    2) Go to Dashboard - Template - Backup/Restore - Download Full Template - Close - Edit HTML - Proceed - Find for </b:skin> and place the following code directly below </b:skin>

    <b:if cond='data:blog.url != data:blog.homepageUrl'>
    <style>
    #header-inner{
    background: none !important;
    }
    </style>
    <b:else/>
    <style>
    .title{
    display: none !important;
    }
    </style>
    </b:if>

    ReplyDelete
  22. Hi,
    I don't know how to express my feelings.
    I changed my whole look of my blog.
    You are very nice tutor, man.
    Thanks a lot.

    ReplyDelete
    Replies
    1. Hi Deepak,

      I'm glad you've got what you've wanted! Happy blogging!

      Cheers :)

      Delete
  23. Thank you, thank you, for this fantastic tutorial! You helped me so much! I was wondering, is there a way to hide my header from the main page, but leave it on the others?

    Thanks so much!
    Johanna
    http://jsatestblog.blogspot.com/

    ReplyDelete
    Replies
    1. Yes there is! Use the following HTML in Step 2 instead:

      <b:if cond='data:blog.url != data:blog.homepageUrl'>
      <style>
      #HTML1{
      display:none;
      }
      </style>
      <b:else/>
      <style>
      #Blog1{
      display:none;
      }
      #header{
      display: none !important;
      }
      </style>
      </b:if>

      Cheers :)

      Delete
  24. i want to change the align of read more. widget...

    any1 help me......

    ReplyDelete
    Replies
    1. You mean the 'read more' link in your posts? Where do you want it to be?

      Delete
  25. Thank you so much for this tutorial it is very helpful.

    ReplyDelete
  26. H, thanks for the great tutorial!
    I was wondering though, how do you have the welcome message show ONLY on the main page, it is showing up on my other pages as well.

    Thanks,

    ReplyDelete
    Replies
    1. Something isn't right.. Can you check n see if the code that you inserted in step 2 is still there? Also, what's your blog's address?

      Delete
  27. i have a problem, i searched a lot but i cant find the solution of my problem,
    i have a blogger blog and i want to change my homepage as i like, when my home page open i want that 2 posts per label should show on my page how i do that?
    remember that i have a lot of labels, here is my blog address bestrightway.com

    ReplyDelete
    Replies
    1. Hi Tariq,

      If I understand you right, you want your homapage to show 2 posts from each label, and not more than that, am I right? Unfortunately, labels don't work that way.. A label gets tagged to a post, not a post to a label. As such, it's not feasible to make the homepage show posts based on labels.

      What you can do is add an extra label called 'homepage' to the posts that you want to appear on your homepage. For posts that you'd like to stay away from your homepage, you don't have to add this label. Once you've done that, you'd be able to see the posts that you've tagged with the following address:
      http://www.bestrightway.com/search/label/homepage

      Next, set this address as your default landing page by going to Dashboard - Settings - Search preferences - errors and redirections - custom redirect..

      All the best! :)

      Delete
  28. thax for this post i tried it its worked but I got some new problem :-

    when I open a my blog post there are both showed Welcome gadget and post too how to hide welcome post meands gadget when Open a post ??

    my test blog is this - http://test-blogone.blogspot.com

    Please give me solution

    ReplyDelete

Please use the 'Ask a Question' page to shoot questions that are not related to the tutorial in the post above.