How To Create a Custom Landing Page in Blogger

Wondering How To Create A Landing Page in Blogger Blog? Don’t worry, today in this tutorial we are going to share How To Create a Landing Page in Blogger. Creating a Landing page on blogger remains a back-breaking task as we have no one click solution like as the other popular Content Management System, for example, WordPress or Joomla because at blogger platform, there are not any plugin or tool by which you can easily create a landing page for your blogger blog. We need to handle everything manually from a to z to make our custom landing page on blogger where there are numerous plugins and templates available to create stunning landing pages on other CMS platforms such as WordPress or Joomla. Click Click and there you go with your highly dedicated professional landing page on these platforms.

Why Do You Need Of A Landing Page?

If you are in the field of blogging then you will surely know about the importance of landing pages for your blogs. We see many Blog site that use Welcome page or Landing Page. For creating a better impression about Blog Landing page is necessary. When it comes to branding and affiliate marketing then custom landing pages are also very useful. They Help you to increase your subscribers, promote your products and services and increase your affiliate sales. 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 readers will love it. There are many types of landing pages which we want on our blog. List is given below:-

Types Of Landing Pages:-

Welcome Landing Page

Welcome page is what you have seen on many blogs. How and when we should have Welcome Page? When someone hit to our blog then this is the first page who welcome to our readers.

Thank You! Landing Page

A Thank you page is what you might have seen most of the time on other blogs. How and when did you land on a thank you page last time? Probably either you had commented on a blog post or downloaded a digital product.

Coming Soon Landing Page

Coming soon page is designed to let your audience know that we are launching our blog/website/service soon. So you just put an email opt-in form and let your visitors subscribe to get notified when your blog/website/service is launched.

Start Here Landing Page

A Start Here page is designed specially for the first-time landing visitors on your blog and link to it is included in the main navigation bar. On a Start Here page, you can offer your all the relevant information and links they need to get started. Include your call to action buttons above the fold so that they know what is the next step to do.

Other Landing Pages

You can create your landing pages according to your purpose. Like as for the visitors landing on your blog from your social network profile links, you can create a special landing page welcoming the visitor, telling about yourself and what you have to offer with a strong call to action button.

Are You Ready To Design Your First Landing Page On Blogger?

So now if you want to create a landing page on your blog then ready to learn it. Before we start the process, let’s have a eagle’s-eye view on creating our landing page in a separate page of our blogger blog.

1) Make a page in your blogger and name it like “Welcome” or anything that can fit for a landing page

2) Now insert all that things in this page which are required for a custom landing page.

3) After you have finished working on your landing page, Just go to Settings > Search preferences :

And in the “Errors and redirections” section edit the “Custom Redirects” like this :

a) In “From” section add “/” (Forward Slash)

b) In “To” section add “/p/YOUR_LANDING_PAGE.html”

Replace “YOUR_LANDING_PAGE.html” with the URL of the landing page which you have created recently, Set it like this :

If you have a landing page with URL : mybloggerguides.com/p/landingpage.html

Then in the “To” section insert like this : /p/landingpage.html

c) Tick on “Permanent” just like above image.

d) Click on “Save”

e) Now click on “Save changes” button

4) That’s it. You are done!!

Tips on How You Can Customize Your Landing Page Using Post Editor:-

Switch to the HTML mode and change the page settings from the right side as shown in the screenshot below.

First we should add CSS Coding by which we can hide our Sidebar, Header, Footer. I mean to say if you want to make your blog’s main section full width then copy below CSS code and paste it on post editor.

<style>
#sidebar-wrapper, #midsidebar-wrapper, .gapad2, .blog-pager, .post-header-line-1, .post-footer { display:none !important;}

#main-wrapper { width:98%!important;}

.post { width:98%!important; }
</style>

This code works well for original blogger template, But you can also try it on Custom Made/Magazine style blogger templates.

Now to use the CSS then just put your CSS code using the </style> tag. For example:-

<style>

#my-landing-page-header {

width: 100%;

background: #000;

font-size: 20px;

padding: 20px 0px;

color: #FFF

}

</style>

Now you can call the above CSS style in HTML to apply it. For example:-

<div id=”my-landing-page-header”> Hello World! This is my First Landing </div>

Result is this:-

Wondering if we could use the CSS code we have added to our template code using a conditional tag inside the post editor itself?

So this is how you can design your own custom landing pages on blogspot. All those bloggers who are familiar with the CSS and HTML will find this tutorial super easy and those who are new to it, please feel free to poke me anytime. I’ll personally visit your blog and help you out to make things super easy for you. 🙂

Right now there is no one click solution for creating your landing page but in future, I’ll design my own template and a Landing page will be the integral part of it. Then you’ll need not to inspect the elements and mess-up with the code.

Soon I’ll design my different landing page templates and share with you if you guys need (let me know in comments :p). You can use them with a simple copy & paste function inside the post editor. Then make a few changes here and there and voila, your landing page is ready so please don’t forget to subscribe. 🙂

Our Recommended Blogger Widgets

Conclusion:

So above guide is about How To Add or Create A Landing Page in Blogger Blog? Hope this tutorial helps you in creating a landing page in Blogger. If you have any query related to the topic then drop a comment below. You can also shoot me an email using the contact form in my contact us page. Do share and subscribe us for get more updates direct in your mail box.

Contents

Paramjot Singh

I’m Paramjot Singh, the creator of mybloggerguides.com. I started this blog back in 2016 to share my real experiences from the world of blogging – the wins, the failures, and everything in between. Originally from India and now living in Australia, I’ve spent years learning how blogging, SEO, and online income actually work in the real world. On My Blogger Guides, I focus on SEO tips, blogging strategies, product reviews, and step-by-step guides for Google’s Blogger platform, so that anyone can start their blogging journey without investing much money. My goal is simple: to make blogging easier, clearer, and more accessible for beginners who want to build something of their own online.

Click Here to Leave a Comment Below 0 comments