Create a Custom Landing Page for your Blogger Site

Create a Landing Page for your Blogger Template

Comments: 9
welcome page

We see many Blog site that use Welcome page or Landing Page. For creating a better impression about Blog Landing page is necessary. Landing page required for any announcement, content warning, Site profile, displaying all post list or any other kinds of purpose. You may also use a landing page for displaying about your Blog information, as well as company profile can be display in welcome page.  There are major benefit of landing page is for swift load. Suppose your blog is completely full with graphics or added many graphics then you may use landing page for faster load. Your blog visitors will love it.

So I will show you about the trick to display landing page in your Blog. And how we can make it attractive by adding simple piece of Graphics with welcome message or site information. Before proceed your Blog should have Page widget.  And for the tutorial purpose I have applied this  tutorial on Blogger default template but it will 100% work on any custom blogger template.

Creating a Welcome or Landing Page

For creating landing page you must have to create a new page with graphics and message for your visitors. However you can also show an specific blog post or any other page on your landing page. But though we will display a landing page so just follow the below steps-

Step 1 Sing in to your Blogger Account and Go to Blogger Dashboard

Step 2 Now Click on Blogger Dashboard -> Pages -> Blank Page

Step 3 After that switch to HTML view from top left corner. 
Step 4 Copy the below code and Paste it there. This script added for creating full width page.

#sidebar-wrapper, #midsidebar-wrapper,.column-left-outer, .column-right-outer, .gapad2, .blog-pager, .post-header-line-1, .post-footer, #comments {
display:none !important;
#main-wrapper { width:99%!important;}
.post { width:99%!important; }
.fauxcolumn-outer { width:99%!important; }
.main-inner .columns { width:99%!important; }

Step 5 After that Switch to Compose view. And now add any suitable graphics and write your message there. After that press the Publish button from top right corner of the screen.

Step 6 Now open your Created Page and get the Link for example

from the above link we need only
  • We need only /p/about-us.html part for further use.

Adding Page widget in Blogger Layout section

Now we will add Page widget in Blogger layout section. Try to add this widget at the top of the page.

Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Go to your Layout tab.

Step 3 Click on "Add a Gadget" then select "Pages" Widget.

page widget

Step 4 Now under Pages to show click on +Add external link and a popup windows will open.

configure page

Step 5 Now under Page title field write Blog or your Site name. And under Web address (URL)  field write your Blog URL like below-


For Example:

web address

Step 6 Now click on Save Link button to close the window.

Adding Link on Custom Redirect section

This is the final stage, here we will use a custom redirect system where Your Blog will redirect to your Landing page.

Step 1 Go to Blogger Dashboard and click on -> Settings -> Search Preferences

Step 2 Now under  Errors and redirections click on -> Custom Redirects ->Edit

Step 3 In the 'Form' field, insert a (forward slash) /

custom redirects

Step 4 In the 'To' field, insert the last part of your Landing page URL /p/about-us.html  that I have already explain above.

Step 5 Click on Check box next to Permanent option. And Click Save text link.

Step 6 Finally hit the Save changes button.

welcome page

The above Image displaying the final output of my landing Page. I just added a simple welcome image and written about my Blog within a paragraph. However you can design with your own way. For Further help feel free to write me. 

Speak Your Mind

Vishal Ostwal says: 6/22/2015

But it shows up another problem.

Recent posts aren't displayed on landing page. Any solution for that?

Mohammad Fazle Rabbi says: 6/22/2015

Hi Vishal, For displaying recent post you have to add a Button or Tab.. Under ADDING PAGE WIDGET IN BLOGGER LAYOUT SECTION

in Step 5 I have mention for displaying Latest Posts.

Terry Lui says: 9/14/2015

It works! Thank you! Other websites didn't pan out but your instructions are 100%, thanks!

DBliss Media says: 10/02/2015

Having problems with mind, I have followed all the instructions aligned here but still it's not working. what should I do

Mohammad Fazle Rabbi says: 10/02/2015

I think you have tried this code in custom blogger template. But I have shown the example in Blogger Default template. You have to change the code in Step 4 according to your custom template code. Because in custom template code maybe define different ways.

#sidebar-wrapper, #midsidebar-wrapper,.column-left-outer, .column-right-outer, .gapad2, .blog-pager, .post-header-line-1, .post-footer, #comments {
display:none !important;
#main-wrapper { width:99%!important;}
.post { width:99%!important; }
.fauxcolumn-outer { width:99%!important; }
.main-inner .columns { width:99%!important; }

Alexandria Austin says: 6/28/2016

Hello I'm still having trouble with my recent posts sharing on their tab. It says "Sorry, the page you were looking for in this blog does not exist." I've set it up like you mentioned in step 5. Would love some help!

Mohammad Fazle Rabbi says: 6/28/2016

Hi Austin..Please check your Blog page and it is opening or not. Don't try with a unpublished page or draft page. Your Blog page must published and have direct access. If your Blog page is OK, then check the redirect settings. I think you have done any mistake in "Custom redirect" settings in "Step 3". :t

Monica says: 3/01/2018

LOVE the simple, easy to follow steps. Thanks!
I, too, can not see the navigation bars on the right. I reset the % (as in step 4) but they navigations bar still does not show. Suggestions?

Rabbi Khan says: 3/20/2018

Hi Monica :t
Are you using Blogger default theme or Custom theme?

Facebook Group Community Code ConverterHide Code Converter Show EmoticonHide Emoticon

If you Got questions? Ask ’em below! While we’re here, you might like to leave a comment and let me know if you have any stories or questions.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form


Email *

Message *