331A96E0-3037-43FC-8D93-543B900B11C9

😍 Loving this theme? Download

Please enter at least 3 characters.

How To Create A Landing Page/Squeeze Page On Blogger

Did you ever wonder how to create a Professional landing page on Blogger blog? Follow this ultimate tutorial to create WordPress like landing pages on blogspot blog.
How To Create A Landing Page/Squeeze Page On Blogger
create a professional 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 Systems, for example, WordPress or Joomla.

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.

So in this post, I am going to deal with it and make it easier for everyone to create landing pages on your existing blogger blog.

By the end of this post, you'll have your own landing page ready, I hope so. :)


Wait! Why Do You Even Need A Landing Page?

Landing pages are designed to focus only on one particular goal you want to achieve – whether you want to capture emails to grow your email list, promote your own products or anything else. On a landing page, everything else which can distract the visitors attention like as sidebar, footer, header or navigation area is hidden except your landing page content.

Below are a few types of landing pages you can create on your blog to get the maximum user engagement and ROI.
Create Professional Landing Pages On Blogger

1. 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.

2. 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.

3. 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.

4. Promotion-Specific Landing Page

Do you promote some affiliate products or your own? Then you need to have a special dedicated promotion-specific landing page for that particular product to get the maximum conversion rate on it. You don't have any other choice. :)

5. Other

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.

So now you want to create your first landing page on your blogger blog? Curious enough to know how? Keep your curiosity alive and let's begin. :)



The below demos are not hosted on blogger, but they can be added as a landing page in blogspot for completely free. I'll be sharing tutorials very soon. Leave a comment to get notified.





So did it impress you? You can achieve the same results on your existing blogspot blog whether you're using a custom domain name or a free blogspot sub-domain name. Although you need to to take care of some things on a free sub-domain name so please read carefully all the steps given below.

Ready To Design Your First Landing Page On Blogger?

Before we start the process, let's have a bird's-eye view on creating our landing page in a separate page of our blogger blog.

Creating A Landing Page On Blogger


Step 1. Create a new Page

 
First of all you need to create a new page so just Login to Blogger account > Select your blog > Go to Pages section and on top of it, you'll see a link "New Page" so click on it.

Now enter your Page Name in the title area (be careful about the title text because you'll get the same Permalink address for your page) and publish it. See the screen shot below to create a new page.

Create A New Page On Blogger


Now visit your new page and copy the URL of page from the address bar of your browser.

Note: If you are using a custom domain name then copy your page URL as it is but, if you're using a free blogspot sub-domain name then you need to make few changes as given below:

Changing the country specific extension to .com
 
For example: If you're from India then your sub-domain name will be http://example.blogspot.np so you need to change the .np to .com at the end of the URL (do not add www after http://). Got it? Good. :)

Step 2. Add The CSS to Style Your Landing Page Using Conditional Tag

 
Now we will add a conditional tag to our template code and inside it, we will put our CSS code to hide the other unwanted wrappers except the content area. This CSS style will override the main CSS style of our template and it will be applied to the new page only.

Go to Template section > Click on Edit HTML (backup your template code first) now click inside the code box and press Ctrl+F to open up a search box.

Now find out this code line </b:skin> and just below it, paste the code given below after making the required changes (required changes to make are given below the code in Editing step so read them carefully). After adding the code just save your template and visit your page again to see the results you have accomplished. Don't expect too much at this stage. :p

<b:if cond='data:blog.url == &quot;YOUR-BLOG-PAGE-URL&quot;'>
<style type='text/css'>
/*--- Find out all the ids or classes of the main wrappers and add them in below code to hide them---*/
.sidebar-wrapper, .header-wrapper, .post-title, #blog-pager, .post-footer, #footer-wrapper, .comments {
display: none !important; /*-- This will hide those main wrappers--*/
}
/*---If you're using one of the default blogger templates---*/
.header-outer, .column-right-outer, .tabs-outer, .footer-outer {
display: none !important; /*-- This will hide header, footer, navbar and sidebar--*/
}
/*---Changing the Content Width to 100%---*/
#content {
width: 100% !important; /*---This will change the content area width to 100%--*/
}
/*---Changing The Body Background Image And Color---*/
body {
background: #FFF url('YOUR-IMAGE-URL') no-repeat scroll top center !important;
margin:0;
padding:0;
}
</style>
</b:if>

Editing: Change YOUR-BLOG-PAGE-URL with the page URL you had copied earlier. I have added the detailed comments in the above code to make things easier. If you're using a custom third party template then you need to find out all the classes or ids of the wrappers like as Header, Navigation Bar, Sidebar, Footer etc. to which you want to hide on your landing page.

These ids or class names may be different used by their respected developers so please don't expect my above CSS code to work for you completely. Take it as a reference and a quick head start.


* Last Updated: Nov 2019

We have shared landing page templates in our website. Feel Free to use them anywhere. Enjoy!



Finding The Class/Id Names Using Developers Mode in Your Browser

 
You can find all these ids or classes simply by visiting any existing page of your blog then start the developer mode (Ctrl+Shift+I for Chrome) and inspect the elements in your browser. For example, after starting the developers mode just right click on sidebar then choose inspect element and you will see the id or class name of the inspected element into right side under Styles tab.

Now to make sure that you found the right class or id to hide, just add one code line display: none; to the style of particular inspected element. If it ceases to appear then pat your shoulder, you just did a great job. :)

Replace YOUR-IMAGE-URL with the URL of the image you want to use in the background and change the color code #FFF to your choice of color code.

Changing the Content area width to 100% part may work or may not just because of the Id name of it. My template code uses this #content id name for the content wrapper and yours may be totally different. So you gotta find it out in the same way I explained above.

So If you have successfully figured out all the ids or class names to hide and they are working perfectly, just add them to the CSS code above to hide them. By now your landing page is ready. After hiding all the unwanted distractions just go back to edit your page the way you want.

Now what you can do with HTML and CSS inside your post editor is totally depends upon you. I have done the same on my Landing Page. Sky is the limit!

How to use HTML and CSS inside Post Editor?

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

Change Page Settings On Blogger and Switch to HTML Mode


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 Page</div>

Result is this:-

Hello World! This is my First Landing Page

Wondering if we could use the CSS code we have added to our template code using a conditional tag inside the post editor itself? I did the same while designing my landing page and the result was totally unpleasant.

It worked for sure but the template code is loaded form the root directory first and then it is rendered in the browser immediately. So when you'll use the CSS code inside the post editor to hide the wrappers, they will end up showing for a fraction of second before your CSS code inside the post editor will take effect to override it. Isn't it a bad user experience?

How would you call it a professional looking if it will happen to my landing page I have designed awaking hours late night? :)

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. :)

You can also shoot me an email using the contact form.


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. :)

Finally I want to thank my best buddies +ROHAN CHAUBEY and +Naveen Kumar for the immediate feedback on my landing page design. :)

Stay Blessed!

Share this post

Explore more articles by Satbir

78 comments

Please leave comments related to the content. All comments are highly moderated and visible upon approval.

Comment Shortcodes

  • To insert an image, add [img]image_link[/img]
  • To insert a block of code, add [pre]parsed_code[/pre]
  • To insert a link, add [link=your_link]link_text[/link]
  • To insert a quote, add [quote]quote_text[/quote]
  • To insert a code, add [code]parsed_code[/code]
  1. Glad to know :) Stay tuned.
  2. The blog was absolutely fantastic! Here Lots of great information landing page design. Which can be helpful in some or the other way.
  3. Nice blog post. Are you searching for Create Custom Landing Page Designs? Get best-paid search results with an increase in conversion rates. Choose from a variety of models which can interest your visitors to stay longer on your business websites. Get more choices regarding blog template and more.
  4. Thanks guide. Thanks for sharing
  5. Keep working hard. My prayers are with you.
  6. Very helpful post for landing page, thanks. But what about squeeze page for email subscription? what more code is required for that or does this have a place for email collection?
  7. Hi Satbir!
    Great Tutorial! Been looking for this for quite a bit of time Im very grateful you posted this.

    I got a lil problem and hope you could help. Im following the tutorial and got a lil lost at the end. When i write on the editor I don't see nothing on the page. Don't know if Im missing anything. Here is the link so you see my experiment which will be a capture page.
    http://work-at-home-2017.blogspot.com/p/passive-income.html
    Thanks In Advance!
    1. Hi Lopez,

      Just checked your landing page, you have added #outer-wrapper id to display none in your CSS. #outer-wrapper

      so that is why everything is hidden. You need to remove that and hide other unwanted id/class like class for sidebar, footer, header etc. Then your content wrapper will remain visible. Later you have to add width 100% to content wrapper to make it full size on page.


      There is a much better and easy way to create a landing page on blogger but that will need a new tutorial. May be in future I'll do it but right now I have stopped updating this blog from over an year now because I need to make money and focus on other projects for now :)
  8. This beautiful... Something I need for my blog.
  9. I have read this post and decided to creat a landing page. I think your clear information help me much. Thank you very much.
  10. Hello Satbir, You've done a great job. It inspire me to create some landing pages for me (inspired from Leadpages) and giving away readers for free. Hope you also like it.
    1. Hello Pradip :: Checked your blog. Nice. You need to wrap the codes inside pre tag on your blog. You can see they are overlapping on your sidebar. Use the below css code:

      pre {
      white-space: pre-wrap;
      white-space: -moz-pre-wrap;
      white-space: -pre-wrap;
      white-space: -o-pre-wrap;
      word-wrap: break-word;
      }

      And you're done :)
  11. Great Article as usual.
    You are my no#1 resource for design related stuff for my some blogspot blogs.
    But I want to ask you a question "Is there any WORKING method for social locker on blogspot blog?"
    I have read many tuts on this but never find a working solution.
    Wating for reply
    1. Nekraj :: I don't have any plugin like social locker for blogger and all those who try to make a plugin or duplicate wordpress plugins, does not last long as social media sites do change frequently and script stops working properly. But for wordpress those plugins get regular updates.

  12. Satbir, I don't have that words so that I can praise your work. You amazed me by this tutorial. Landing page on Blogger? It was impossible man but you did it. Grand salute to your hard work. Can you provide me the demo design please?
    1. Thanks! Demo design template codes are there on demo page. Just inspect elements and grab them :)
  13. Hi, Satbir. This is my first visit on your blog. I was confused, can we make blogger blogs professionals? Can we get traffic on blogger blogs? Blah Blah Blah,,,, But after visiting your blog, My all doubts are cleared. Thanks for sharing this huge tuts collection for blogger platform. Now, I'm in love with your blog. :) Thanks a lot buddy. :)
  14. Nice .tutorial: www.semanprofit.org
  15. Nice post. But how do i do backup as mentioned on he post
  16. It is not removing these contents for mobile devices. please help
    1. Hi, You need to use a responsive template and disable the blogger's default mobile template. Blogger's mobile template will take place on mobile devices so these codes will not load at all.
      Satbir~
      Regards!
  17. Hi bro Satbir!
    I'm amazed and thankful. Your tip, tutorial and infos so much informative. Thank you.

    From madam affiliate Malaysia,
    www.jomaffiliate247.com
  18. sabir you tutorial were fabulous..
    its very helpful

    http://latestjobsadda.in
  19. thanls
  20. nice
  21. Please can you help me with your pop up email subscription form?
  22. Hi Satbir please help me
    http://jobs-ali.blogspot.in/p/sitemap.html
  23. Tthis utorial is gold
  24. Hi satbir very nice presentation i applied sitemap page on my blog its very good but i will try to create landing page but possible please visit my blog and give me guidance
  25. Satbir, your tutorials are wonderful. Checkout what i did with your instruction: http://www.easyjobguides.com.ng/
  26. Please i have problem with image url. Must i search for image to use on the internet or on my computer?
  27. How are you Patial,

    Thanks for your great work, please i don't know if blogger has access to clickable scrolling test with specific label, If yes please kindly held me out, this is my blog : relationshipng.blogspot.com

    Regard.
  28. I like your design...i'll try on my blog
  29. Hi Thanks for ur tutorial.
    can u give the full example for code above like have the id code please.. im just problem how to put the id code. Thanks!..i just trial and error to learn it. Thank You
  30. wow.. nice post mate.. i want to try this.
  31. Great guide! thanks a lot!
  32. Nice Post!! Thanks for sharing!!
  33. very necessary to me, thank for sharing
  34. stay tuned and bookmark :D

    cant wait for the plugin

    need it so bad dude
    since im applying into adsense :D
  35. Hai Bro!
    I have implemented your tutorials for creating contact form in a page, its works awesome,but while designing landing page i faced problem that i couldn't make contact form centerd and i could not able to widen the background colour.( Bro i want to make contact form centered and background colour to be spread through out the screen).How to to do that? and the following page what i designed with your tuts.
    http://www.newsydroozy.com/p/httpsdraft.html
    1. Hari :: Hi Buddy, I checked your landing page. Which color do you want to remove? That green color behind the contact form? This is the code for it > #66cdaa so just remove it and you're done. This tut is my first one and had posted it last year. Now I have found other ways to do the job quickly and make landing pages super easy. Will come back on this blog (did not post from last year) soon with new plugins and tuts about landing pages. Make take some days so stay tuned buddy :)
  36. Hi, thank you for sharing this! This is very informative! :) Will try this one later for my page. I'm just at work right now and can't edit stuff yet.

    Will also share your article in my page if you would allow me. You may check my site at www.weekndguy.com.

    Thank you!

    Regards,

    Ace
  37. Hi Satbir, Thanks for sharing
  38. Mantapp
  39. Hi Satbir, I would like to create a landing page WITHOUT losing the great HOME-PAGE that I already have(it has that blogger-ish feeling <3 ). I Was wondering if yo know a way to transfer the properties of that home page into some static page :) Also, I know this is NOT the correct thread, but I would like to request a horizontal POPULAR POSTS widget tutorial. Please make it look like the one from "ThemeXpose's Socio". Much appreciated
  40. what if i wanted to capture emails in landing page? how to do that ?
  41. Big thanks to sharing this info bro..
  42. Thanks Satbir for sharing such interesting detail about creating a landing page on blogger. I have been creating landing pages for my paid campaigns with the help of landing page creator software which are getting converting with high conversion rate. I would like to know other interesting factors on landing pages which can be beneficial for any business.
  43. thankyou verymuch Sabir.
    1. Gerard Widy :: You're more than Welcome Buddy :)
  44. hy satbir i need two squizz page can you help me ? contact me on skype my id is : dominicvr
    1. Mac Strategics :: I guess you contacted me on our Facebook Page. Will Get back to you there in few days as little busy with other client at the moment.
  45. Nice post. Please can you help me with SEO for my tech blog please
  46. you can upload this topic video tutorial
  47. Aiman :: Hi,
    This is because you inserted the code in wrong place. Please read the instructions carefully. Up to now I have designed many landing pages for my clients on blogger with same method. It is little difficult for newbies but trial and error is the only option for them.

    Regards!
  48. Hi, i got this error

    A skin cannot contain the element: b:if. Only text and CDATA sections are accepted

    when inserting the code into html

    Then, when save and see the result, still got the header and sidebar as well
    Just using simple template from blogger.



  49. thanks bro finally I found your article alhamdulillah..
  50. Now this is what I have been looking for. Thanks sabir for sharing this. I need to apply this A.S.A.P

    Nice one satbir. and nice to meet you
  51. Hello could send me the ready Template? I could not do my page with this step by step, please send me the XML file ready to use in my email - dupessoa21@gmail.com
  52. How i add this style for multiple landing page URLs ?
    1. Vaishakh Vinod :: Welcome to my blog buddy :)
      You can create multiple landing pages and you have to follow the same route explained above for each one. Just keep changing the url in conditional tag and there you go.

      Regards!
    2. Hi! I tried your method and it works great! I also wanted to make a second landing page on the same Blog. You say to "keep changing the URL in the conditional tag" . Does this mean I would erase the previous URL? Or place them next to each other? Please explain in detail, thanks!
  53. hard tutorial :D not work
    1. Protr:: You gotta learn then :D because it works!
    2. hey bro nice page slider feature tutorial pls
  54. Nice tutorial man, well explained.

    Please we bloggers readers of your blog need the Next and Pervious Post widget Displaying Under Very blog post. please we beg you make this your next post.

    thanks and weldone.
    1. Ogundipe Vicdayo:: Hello Friend,
      Welcome to my blog. Glad to know that you found my tutorial helpful. :)

      About your request:- Thank you for letting me know that you liked my Next and Previous Post widget, I'll definitely share this widget on my blog in one of my next upcoming posts. It may take a little time as I have already got some requests about other tutorials so I hope you would not mind. :)
      Thank you so much for taking time to leave your comment.
  55. Hi Satbir,

    I am so sorry to land on this post so late. Better late than never. As usual I found your explanation so easy and cool. Even a person with no technical knowledge can understand this post. I must say that you share technical information with so much simplicity. *Applause for you*

    Thank you for the kind mention Satbir. Always happy to be helpful in whichever ways possible as you have been such a great friend. Whether technical glitches or addition of functionalities, you have helped me in everything.

    Thank you so much for sharing this great resourceful post. I am surely going to treasure this post and bookmark it. I will definitely make a landing page at my blog and share with you.

    I celebrate people who make Blogger platform better than it already is. And you surely are one of those humble bloggers who work to make Blogger a great and delightful platform.

    Thank you so much Satbir for all that you do. Have a great week ahead. :)

    ~ Rohan Chaubey.
    1. Hello Rohan :)
      So much happy to see your awesome comment on this post and Blogger had put this lovely comment in SPAM section lol.

      Going to design a landing page on your blog? I would be eagerly waiting to see it as I know you would come up with something so "Creative" as you always do and I love that. :) And please poke me anytime if you need my help with your landing page design, always there.

      Today, somehow I managed to login but still it is not working properly. :p

      Thank you so much for everything Rohan. *I'm so glad I've got a friend like you*
  56. Hi Satbir,

    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.

    Regards,
    Abdullah
    1. Abdullah Malik:: Welcome to my blog bro :)
      This is really simple bro and I know you can play with HTML and CSS very well. Can I see the landing page you're trying make? After checking the page I can surely tell you what you're missing.
      Thanks a lot for taking time to leave your comment. :)
  57. very nice way to teach and this is the best thing for BlogSpot new user
    thank you soo much
    1. Tariq Aziz :: Hello and you're more than welcome buddy :)
      I try my best to explain things in a very simple way as if I were a new user to understand them.
      Thanks a lot for your appreciation and kind words. :)
  58. Hi Satbir,
    Nice to meet you today,
    I am here today via Rohan's pinterest page.
    Glad to read lot of informative posts/tutos here.
    Thank you very much for providing such a lot
    of information to your readers/visitors.
    Though some of the technical terms are still
    new to me i found this post very valuable and
    i am bookmarking it for my further study.
    May you have a great week ahead.
    Keep writing
    Keep sharing
    Regards
    PS:
    I found another problem with G+ comment box, the first comment i post will get disappeared and again if we post it will appear, this initially happened to me and i lost it, then whenever i post or type comments in the box i take a copy of it before pressing the publish button. can you tell me why this is happening.
    Thanks.
    ~ Philip
    1. P V Ariel :: Welcome to my blog and I am so happy to connect with you. :)
      Glad to know that you found my tutorials helpful.

      Back to your question - Google Plus commenting system is really a worse commenting system. This problem you're facing is very common and even those months older comments go disappear in G+ commenting system. If you would ask for my recommendation, then I'll suggest you to use Disqus rather then G+.

      If you ever need my help regarding blogger then please feel free to poke me. :)
    2. Hi Philip sir,

      Thanks for mentioning me. Glad that you could land on this helpful post following my Pinterest share. :)

      ~ Rohan.
    3. Hi Satbir,
      Glad to be here again,
      I have one more question.
      As you suggested Disqus, i would like to go for it, but, my question to you is that, will I lose my existing comments if I opt for this comment option? or how to migrate my existing comments when i go for a new comment option.
      @Rohan Nice to speak to you via this column.
      Wish both of you a great and profitable weekend
      ~ Philip
      PS:
      @Satbir, I have one more doubt, hey why you still use this G+ comment system, did you not face any such problems? :-)
      Thanks
      Philip
    4. Philip :: Welcome back Sir :)
      If you opt for Disqus then those comments using G+ comment system or blogger's default comment system will not be added to Disqus so it will start from zero. But you can use both comment systems like Rohan is using on his blog (Disqus + Blogger's Default Comment System). So this way you'll have the old comments too.

      I am not using G+ comment system. It is blogger's default comment system and I never face any problem using it :)

      Have a great weekend ahead!
Post a Comment