The very first tutorial published in this blog was a walkthrough on how you can set-up a welcome screen in your blog, so that you won't be presented with Blogger's default homepage. I thought it's about time to update the old walkthrough, as an easier way to set-up a custom landing page is now available to us. Basically, this walkthrough is gonna teach you how you can set a custom page to be the first page that your readers will be seeing upon visiting your blog (from hereon referred to as 'new landing page'). This can be useful if you want to include some sort of welcome screen, content warning, or whatever tickles your fancy. And yes, it works on non-dynamic as well as dynamic view templates!
Click here for a video tutorial!
Note: In the walkthrough below, I will change my default landing page to a custom welcome screen. It is not a must to use a static page as your custom landing page. You can use any page in your blog for this purpose.
Step 1:
It is important that you have a Pages gadget in your blog so that you readers can navigate from your new landing page to your blog posts. If you don't already have one, add it by going to Dashboard - Pages - Show pages as - Top tabs.
It is important that you have a Pages gadget in your blog so that you readers can navigate from your new landing page to your blog posts. If you don't already have one, add it by going to Dashboard - Pages - Show pages as - Top tabs.
Step 2:
Go to Dashboard - Pages - New Page - Web Address. Use 'Blog' as its title. As for the URL, use your current URL, with a suffix of '/search' at the back.. For example, if my blog's address is:
..in the URL field, I'd enter:
Just FYI: You might be wondering why this step is necessary. Here's why. Though you can easily change the default landing page, it is important that sufficient measures are taken to ensure your readers have the options to view your blog posts. Otherwise, your readers will only see your new landing page + your pages links, and no way to view your blog posts..
Go to Dashboard - Pages - New Page - Web Address. Use 'Blog' as its title. As for the URL, use your current URL, with a suffix of '/search' at the back.. For example, if my blog's address is:
1 | http://testblog13yoboy.blogspot.com |
1 | http://testblog13yoboy.blogspot.com/search |
Just FYI: You might be wondering why this step is necessary. Here's why. Though you can easily change the default landing page, it is important that sufficient measures are taken to ensure your readers have the options to view your blog posts. Otherwise, your readers will only see your new landing page + your pages links, and no way to view your blog posts..
Step 3:
You don't have to create a new page to serve as a landing page. You can use any page/post in your blog and set it as your new landing page. But if you haven't created a custom landing page for your blog, this will be a good time to do so. Under Dashboard - Pages, create a new static page by clicking on New Page - Blank Page. Design the page as you like. You might want to leave a link to your blog posts by entering a text that says 'Click here to continue' or something to that effect. Link it to the URL that you've used inStep 2.. Publish your new landing page when when you're done composing.
You don't have to create a new page to serve as a landing page. You can use any page/post in your blog and set it as your new landing page. But if you haven't created a custom landing page for your blog, this will be a good time to do so. Under Dashboard - Pages, create a new static page by clicking on New Page - Blank Page. Design the page as you like. You might want to leave a link to your blog posts by entering a text that says 'Click here to continue' or something to that effect. Link it to the URL that you've used inStep 2.. Publish your new landing page when when you're done composing.
Step 4:
You need to note down your new landing page's URL before proceeding to Step 5. Just view the page that you've created from Step 3 in a browser and note it's URL, by going toDashboard - Pages - Click 'View' on your new landing page. This is the URL of my new landing page:
You only gonna need the part after the .com for the next step. This is the portion that I'm referring to.
You need to note down your new landing page's URL before proceeding to Step 5. Just view the page that you've created from Step 3 in a browser and note it's URL, by going toDashboard - Pages - Click 'View' on your new landing page. This is the URL of my new landing page:
1 | http://testblog13yoboy.blogspot.com/p/welcome.html |
1 | /p/welcome.html |
Step 5:
Go to Dashboard - Settings - Search Preferences - Errors and redirections - Custom Redirects - Edit, and use the settings below:
Go to Dashboard - Settings - Search Preferences - Errors and redirections - Custom Redirects - Edit, and use the settings below:
- In the 'Form' field, insert a forward slash /
- In the 'To' field, insert the part that you've gotten from Step 4
- Check the box that says 'Permanent' next to it.
- Click 'Save' (the blue link)
- Click on 'Save Changes' (the Orange button)
Extras:
1) In your pages menu, you'd probably have 'Home', 'Blog' and the link to your new landing page (in my example, I named it 'Welcome'). Now, you'd notice that the 'Home' link and 'Welcome' link serve the same purpose. You might wanna remove one of these links by going to Dashboard - Layout - Pages - Edit - Uncheck either the 'Home' box or the box next to your new landing page.
2) Since your landing page is probably gonna be a static or post page, you'll see your comment box on the very front page itself. You can turn this off by editing your landing page, and on the right-side column - Page Settings - Options - Reader comments - choose 'Don't allow, hide existing'. Click 'Done' and 'Update' when you're done.
3) Having sidebar(s) on your welcome page might not be desirable, especially when you could use the space to widen your new landing page. Click here to check out a tutorial on how you can remove sidebar(s) and maximize width on selected page(s).
1) In your pages menu, you'd probably have 'Home', 'Blog' and the link to your new landing page (in my example, I named it 'Welcome'). Now, you'd notice that the 'Home' link and 'Welcome' link serve the same purpose. You might wanna remove one of these links by going to Dashboard - Layout - Pages - Edit - Uncheck either the 'Home' box or the box next to your new landing page.
2) Since your landing page is probably gonna be a static or post page, you'll see your comment box on the very front page itself. You can turn this off by editing your landing page, and on the right-side column - Page Settings - Options - Reader comments - choose 'Don't allow, hide existing'. Click 'Done' and 'Update' when you're done.
3) Having sidebar(s) on your welcome page might not be desirable, especially when you could use the space to widen your new landing page. Click here to check out a tutorial on how you can remove sidebar(s) and maximize width on selected page(s).
Remove Blogger Sidebar and Maximize Main Width on Selected Pages
This one is a famous request in Blogger Help Forum - how to hide the sidebar on one of the static pages, and make the main blog show in full width in that page, and in that page alone. Usually, I'd give a personalize solution for each asker, as each one of them had different blog with different template that had different settings. Today, I finally took the time to generalize this tweak. Anyone can use the solution in this page, and you'll get what you want - refer to the title, I'm not gonna repeat what this tutorial does. Or maybe I will. You get to hide your sidebars (doesn't matter left, right or both) and use that space to widen your main posting area, on pages that you choose. You can apply this tweak both on your static pages and/or your post pages (the page that loads when you click on the title of your posts).
Click here for a live demo.
Did I mention that this is a one-step tutorial?
That will be all folks, now go have fun.
Click here for a live demo.
Did I mention that this is a one-step tutorial?
Step 1:
If you're using the old Blogger interface: Go to Dashboard - Design - Edit HTML - Back Up (Download Full Template) -
If you're using the new Blogger interface: Go to Dashboard - Template - Backup/Restore - Download Full Template - Close - Edit HTML - Proceed -
Find for </b:skin> - Paste the following directly below </b:skin> - Change the address inLine 1 to the address of your page.
The code in place:
Again, don't forget to change the address in Line 1 to the address of your page. If you want to apply the tweak to more than a page, just copy and paste another set of similar code below the first one, and place the other page's address on the second code. If you want to apply the tweak to all of your static pages, see the Bonus section below.
If you're using the old Blogger interface: Go to Dashboard - Design - Edit HTML - Back Up (Download Full Template) -
If you're using the new Blogger interface: Go to Dashboard - Template - Backup/Restore - Download Full Template - Close - Edit HTML - Proceed -
Find for </b:skin> - Paste the following directly below </b:skin> - Change the address inLine 1 to the address of your page.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <b:if cond='data:blog.url == "http://yoboy-testblog7.blogspot.com/p/bla-bla.html"'><style>.main-inner .columns {padding-left: 0px !important;padding-right: 0px !important;}.main-inner .fauxcolumn-center-outer {left: 0px !important;right: 0px !important;}.main-inner .fauxcolumn-left-outer, .main-inner .fauxcolumn-right-outer, .main-inner .column-left-outer, .main-inner .column-right-outer {display: none !important;}</style></b:if> |
The code in place:
Again, don't forget to change the address in Line 1 to the address of your page. If you want to apply the tweak to more than a page, just copy and paste another set of similar code below the first one, and place the other page's address on the second code. If you want to apply the tweak to all of your static pages, see the Bonus section below.
Bonus:
If you want to apply the tweak to all of your pages, instead of addressing the page one by one, use the following code:
To apply the tweak to all your post-pages (the page that opens when you click on the title of your post), which might not be a good idea, use the code below:
If you want to apply the tweak to all of your pages, instead of addressing the page one by one, use the following code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <b:if cond='data:blog.pageType == "static_page"'><style>.main-inner .columns {padding-left: 0px !important;padding-right: 0px !important;}.main-inner .fauxcolumn-center-outer {left: 0px !important;right: 0px !important;}.main-inner .fauxcolumn-left-outer, .main-inner .fauxcolumn-right-outer, .main-inner .column-left-outer, .main-inner .column-right-outer {display: none !important;}</style></b:if> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <b:if cond='data:blog.pageType == "item"'><style>.main-inner .columns {padding-left: 0px !important;padding-right: 0px !important;}.main-inner .fauxcolumn-center-outer {left: 0px !important;right: 0px !important;}.main-inner .fauxcolumn-left-outer, .main-inner .fauxcolumn-right-outer, .main-inner .column-left-outer, .main-inner .column-right-outer {display: none !important;}</style></b:if> |
That will be all folks, now go have fun.
