How To Create A Custom Landing Page In Blogger To Increase Leads

If you are in the field of blogging then you will surely know about the importance of landing pages for your blogs.When it comes to branding and affiliate marketing then custom landing pages are very useful. They Help you to increase your subscribers, promote your products and services and increase your affiliate sales.A Landing page is the first page which appears to your visitor when he visits your site (i.e. Homepage) generally blogs have their recent posts links and thumbnails as the hompage but if you want to succeed in the field of blogging you need to stand out of the crowd.

WordPress a highly flexible blogging platform and you can create a custom landing page in wordpress without much efforts but when it comes to Blogger, you don’t get any kind of automated comforts for the job.

Now don’t worry,

I have researched on this topic for a week and ultimately came up with the following trick to implement a landing page to a blogger blog.

All you need to do is just follow the steps listed below and you will have your own custom landing page and all your sales and subscribers will double within a few weeks.

First thing which you need to do is create a new post or page (as you wish) and write all those things and insert all those things you want on your landing page.

Don’t forget to turn off comments for the page as you won’t like the comments section on your landing page.

When you are done with creating the page then go to your blogger dashboard and go to Settings and then Search Preferences.

On the search preferences page you will see the Errors and Redirections option with two sub options below. Click on Custom Redirects.

There you will see two fields, the first one is the from one and other one is the destination.

In the From field just enter a slash “/” and in the To field enter the destination URL of your landing page you just created.

For example if the URL of your page is

then in the “To” section enter


click on save changes,

Now whenever any user will visit your blog with your homepage URL and then he will be automatically redirected to your landing page.

The landing page will open like any other page or post on your blog, if you want to give it new look and you can also make your page full width,

You can hide the sidebar from the post body. Making a full width page is as simple as the above steps.

Open your pages/posts page on your dashboard and edit the landing page post you just created. now in the above tab you will see Compose and HTML view options.

click on the HTML view and insert the below code before your page text starts.

#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; }

Thanks to Syed Faizan Ali from My Blogger Lab for this code.

NOTE: You might have gone through the old tutorial which also covered adding a recent posts widget on your landing page but due to some problems with that page I have edited this post and came up with a simple solution of the problem of the display of the recent posts

You don’t have to create a new page, that will just add a redirect loop or will just get you in trouble because the widget is designed for your sidebar not your full width page and editing the script is really irritating

In you landing page go to the HTML compose mode and at the end of the HTML code add the following code

<style type='text/css'>
img.recent_thumb {padding:0px;width:55px;height:55px;border:0;
.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:14px;}
ul.recent_posts_with_thumbs li {padding-bottom:0px;padding-top:5px;min-height:65px;}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs strong {font-size:10px;}</style>
<script style='text/javascript' src=''></script>
<script style='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = true;
var numchars = 95;</script>
&lt;script src='http://<span style="background-color: blue;"></span>/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentpostswiththumbs'&gt;&lt;/script&gt;
replace by your blog URL
this script is the code of a recent posts widget which will be added to the page below your landing page content so that while running behind leads your readers don’t miss the latest content on your blog

Now just have a preview (to check for any errors) and publish the page.

Don’t forget to switch off comments for that page

Tadaaaa….you are done

If you face any problem with the tutorial you may contact me via comments or send me an email through the contact form

Hoping for success and an increase in subscribers, If you found it useful then consider leaving your comments below or contact us on Facebook or Twitter.

Don’t just keep it with you, useful information needs sharing. share it on your favorite social networks, as they in our field.

Sharing is Sexy

About Nishant Arora

+Nishant is a Tech Blogger, Freelance Writer, Blogging Tips Guru (Just Kidding!). A guy who no matter what happens is always ready to blog and blog and blog and blog. The proud owner of Inside Tech Tricks


  1. Jessica @ a new adventure says

    Love the landing page! Question: How would you then get to the blog? Every time you hit home you would redirect to the landing page.

    • says

      Hi Jessica,

      Yes whenever you click on the home button you will automatically get redirected to the landing page.

      and sorry, currently there is no solution to this problem, even if you add one more redirect record the problem will still persist.

      don’t worry, thanks for showing your interest I will get to you with the solution soon

    • says

      Hi Jessica

      your question got me thinking and I am here with a simple solution

      I’ve added some more steps in the tutorial to solve the problem of the homepage you can read the post again for the solution

      I am sorry for the inconvenience

  2. says

    Hi Nishant,

    THanks for sharing this. I tried it a week ago but now it doesn’t work. I tried doing it from scratch again but no luck. I don’t know now where did I messed up.

    KInd regards,

    • says


      First of all, thanks for leaving you comment

      and I guess the problem must have occoured while inserting the code for the recent posts page

      You might try replacing the second code with any other code of a recent posts widget

      and please mail me your problem with the details so I could be of more help to you

  3. says

    Hi Nish,

    I found out that the problem was on this link

    That script became empty. After replacing it with

    it worked fine now but each time I edit the landing page using WIndows Live Writer (@ WSYWYG Edit), the actual landing page after publishing cannot display the recent post. I can’t figure out where it gone wrong.

    I am really a clueless newbie on Html, I would appreciate it very much if you can give clues and tips.

    • says

      Hi Bong

      Please check I’ve rewritten the post and simplified this tutorial as I got many emails and comments about the problems my readers were facing

      No you don’t need to create a new page for the recent posts widget

      the recent post widget is now to added in the same landing page as a result giving your readers a much better experience

      sorry for the inconvenience

  4. says

    great idea, great post, everything works fine except the loop, anytime home is pressed or the custom “Enter Site” button i designed is pressed, it simply takes a visitor back to the landing page…

    • says

      Yeah that’s a bug in blogger,

      but I have discussed a small solution to this problem, you have to add a recent posts widget in the same landing page so your readers don’t miss out the latest posts on your blog while you are building your email list

      Thanks for leaving a comment

    • says

      See, we can hide that post from search engines and other things

      and no matter what you do after you’ve added the redirection you will always be redirected to the landing page and you can’t hide it that way

      that was as far as I am concerned, though if you have any solution then please tell me more about it so we both together can solve the bug

  5. says


    I have implemented the code, without changing anything, and the feed from your website came out and things works fine.

    Then, I replaced the url and use my blogspot url and it works fine too

    Then I replaced the url and use another blogspot url (of same blogger account) and it works too.

    But when I changed the url and use my wordpress url (my paid hosting and own domain), nothing came out.

    Can you advise if there’s anything that I haven’t configure at my hosting and paid domain? I am kind of new with wordpress still


    • says


      There is actually no problem with your wordpress installation, the problem is in the code

      This code works on a javascript which is programmed only for Blogger and can’t be used in wordpress

      If you are a wordpress user you have to use another code for a recent posts widget or maybe a plugin

      and if you want to create a landing page for your wordpress blog then there are plugins available for the job which can help you out, the landing page tutorial was for blogger users wordpress is already very flexible

      I remember such plugin, it is OptimizePress

      or you may search the plugin directory for landing page plugins

  6. says

    Hi. Thanks for the lengthy explanation. I will try that shortly

    Btw, Suppose I have blog A and B of same blogger account. And I use this code to display the summary of posts of Blog A into Blog B and vice versa. Do you know if it is ok for google, or will this violate it in any way, like cloaking or something? Thanks.

    • says

      Yeah, it is totally OK for google as you are only adding some links from another blog and that would be fine according to me and google will also not consider it as spamming or something until you do in a decent way, like 5 to 6 posts or something

      you can use it that way

  7. says

    Thanks for the wonderful tips.

    The recent post tip is very good. But when i placed the code, it only displays a link “Newer Post” without the posts title or thumbnail picture. I’d wanted something that would display the title of the recent or newer posts and thumbnails if possible. Also can the code be placed on the sidebar gadget so that visitors can see the newer posts first when they visit the page.


    • says

      Hi Onyebuchim C. Obike

      let me answer all your questions

      the reason you are not able to see the recent posts might be that either the javascript is not working on your blog, so I recommend adding javascript to your blog

      and yes you can add the recent posts code in the sidebar

    • says

      Hi Jack,

      Landing pages for mobile devices is a really good idea as on a smaller screen the user should have a big idea in his mind about your blog

      If you are using a responsive theme then your current landing page might do the job but if your theme is not responsive then, you might have a small landing page using the same redirection all you need to do is just add


      after the URL you add in the custom redirects and it will start working for mobile devices

    • says

      I looked at it and I think there is problem with the page text, not with my code

      Try viewing your post in the HTML view and look for excessive <div>,   or <br/> tags which might be responsible for the space, and if still the problem persists send me an email and I will help you out with your landing page

  8. says

    Good read thanks – but everytime I access blog via cell phone I get the /?m=1. Can I either change landing page or edit same?

  9. says

    But while using CUSTOM REDIRECT in Blogger, it has been noticed that when people try to access the website via mobile then they could not due to an error saying the document has moved here. Do you know how to fix that?

Leave an awesome and valuable reply