Step by Step Guide To Creating Landing Page On Blogger
If you've ever wondered:
How do I create landing pages on blogger ?
Why my landing pages are NOT converting?
Then You're in the right post. Today I am going to show you step by step process to creating a landing page on blogger and give you access to 5 best conversion focused squeez pages.
There are many things you need to focus when creating pages except from design.
Here are few things You need to know:
Now I'm going to breakdown all the points with examples.
Benefit driven Healines:You are creating a blog post or landing page headline plays important role.Out of every 10 people, 8 of them only read your headline and if it is not eye-catching you're loosing 80% of your visitor who not clicking on your headlines.
Before you create post or landing pages make sure you have a benefit driven headline.
What makes a headline benefit driven ?
Look at the example from Neilpatel.com where Neil write super benefit driven headlines:
1.7 Proven Strategies to Increase your Blog's Traffic by 206%
2.How to Remove Referral Spam in your google analytics
In above example I underlined the benefit of the headline. So whenever his post rank on SERPs visitors see the benefit and want to achive it(so they click on the headline and land on Neil's blog.)
Another example from Backlinko.com where Brian dean always write super actionable headlines. Look at his headlines:
1.How to Generate 36,286 readers and 1000 email subscribers from your next blog post
2.Awesome! This SEO Campaign = 15% more Organic Traffic
An Image or Video : An image speakthousand word. Human brain process visual 200% faster than chunk of text blocks.
Tweets with images receive 150% moreretweets than tweets without images.
When you creating a landing page, an explainary video or image tell them what they got after clicking on the button.
Econsultancy found that 4X as many consumers would prefer to watch a video about a product than to read about it.
If it is a video, make it super easy to understand to your visitors. If it is an Image, show them (overview) of the product.
For example:
If you offering a free membership then smart to include a video of how to navigate on membership area.
If you givingaway a free ebook then it is smart to include the cover image of ebook, same goes as whitepapers, swipe files and templates.
Benefits : Landing pages or blog posts are all about benefits. The more value you provide on landing page the more likely to give you their email address.
Having a benefits list on landing pages can boost your conversion by 68%.
It's all about solving problems your readers have.
Call To Action (CTA) : Call to action navigate visitors what to do next ? You want them to click on a button, share on twitter or signup on your newsletter. The better your CTA the more people would listen to you.
Unbouncefound that when they change the image of the landing page and change the button text theres an whooping 40% increase in signup. Interesting ?
Make sure you always testing your copy, button text, button colour. It's always smart move to split testing your landing pages.
Well, there are many types of landing pages for collecting subscriber of your email list or customized service pages. Here 's some of them frequently used:
Enough introduction, lets start creating one:
You can buy leadpages templates and they can integrate with blogger.com . If you want to buy leadpages and setup it on blogger contact me Now.
Step 0:Backup your current template. (Before we do anything it always better to start with backup template)
Step 1:First we are going to hide post title, header, navigation menu,sidebar, footer navigation, widgets.
You can start using google chrome inspection tool (here is a guide from MBT) for finding wrappers to hide above sections.(A class wrapper start with "."; a ID wrapper starts with "#". )
In my case:
Hide all the wrappers mentioned aboved like this:
.header-wrapper,.sidebar-wrapper,.footer-wrapper,.post-title{display:hidden;}
Step 2:Make the content wrapper full width. (#content always same for you and me.)
#content{width:100%!important}
Now the code looks like this below:
.header-wrapper,.sidebar-wrapper,.footer-wrapper,.post-title{display:none;}#content{width:100%!important}/*for full width page*/
Step 3:Now we are going to create a page where our landing page will be live.
Open Blogger dashbord >> Pages >> New page.
Publish the page with desprective title like:
Creating a landing page for facebook use: "fb landing page"
Creating a landing page for email subscriber use: "landing page for subscribers". (You get my point)
After adding title to the page, from the right panel click on 'Don't allow comments'. Save the settings. Click on Publish page.
Note the page url for future use. If you are using custom domain name, then only copy the URL. For blogspot sub-domain url(like: http://abc.blogspot.com/p/landing-email.html) use blogspot.com only.
Now paste the below code just before tag of your blogger template.
Before I move to next (and last) step
I hide all the wrappers, publish the page(where I am going to paste landing page code), added above code into my template. Now in next step we are going to create your very own template and publish it.
Step 4: You know CSS and HTML, then you can create your own landing page.
Here is an example:
But if you don't know HTML and CSS (or maybe don't want to mess with codes alignment problems) you can download my own template(which are free to copy) after you join my email list. Send me a quick email to get your bonuses.
Hope you may find this valuable. Is this is something you want to read more? Share your valuable thoughts in comments.
How do I create landing pages on blogger ?
Why my landing pages are NOT converting?
Then You're in the right post. Today I am going to show you step by step process to creating a landing page on blogger and give you access to 5 best conversion focused squeez pages.
Anatomy Of A Prefect Landing Page:
There are many things you need to focus when creating pages except from design.
Here are few things You need to know:
- A benefit driven Headline.
- An image or video.
- Benefits list.
- Call To Action.
- Above-the-fold.
- Social Proof and Testimonals.
Now I'm going to breakdown all the points with examples.
Benefit driven Healines:You are creating a blog post or landing page headline plays important role.Out of every 10 people, 8 of them only read your headline and if it is not eye-catching you're loosing 80% of your visitor who not clicking on your headlines.
Before you create post or landing pages make sure you have a benefit driven headline.
What makes a headline benefit driven ?
Look at the example from Neilpatel.com where Neil write super benefit driven headlines:
1.7 Proven Strategies to Increase your Blog's Traffic by 206%
2.How to Remove Referral Spam in your google analytics
In above example I underlined the benefit of the headline. So whenever his post rank on SERPs visitors see the benefit and want to achive it(so they click on the headline and land on Neil's blog.)
Another example from Backlinko.com where Brian dean always write super actionable headlines. Look at his headlines:
1.How to Generate 36,286 readers and 1000 email subscribers from your next blog post
2.Awesome! This SEO Campaign = 15% more Organic Traffic
An Image or Video : An image speakthousand word. Human brain process visual 200% faster than chunk of text blocks.
Tweets with images receive 150% moreretweets than tweets without images.
When you creating a landing page, an explainary video or image tell them what they got after clicking on the button.
Econsultancy found that 4X as many consumers would prefer to watch a video about a product than to read about it.
If it is a video, make it super easy to understand to your visitors. If it is an Image, show them (overview) of the product.
For example:
If you offering a free membership then smart to include a video of how to navigate on membership area.
If you givingaway a free ebook then it is smart to include the cover image of ebook, same goes as whitepapers, swipe files and templates.
Benefits : Landing pages or blog posts are all about benefits. The more value you provide on landing page the more likely to give you their email address.
Having a benefits list on landing pages can boost your conversion by 68%.
It's all about solving problems your readers have.
Call To Action (CTA) : Call to action navigate visitors what to do next ? You want them to click on a button, share on twitter or signup on your newsletter. The better your CTA the more people would listen to you.
Unbouncefound that when they change the image of the landing page and change the button text theres an whooping 40% increase in signup. Interesting ?
How can you do the same on your landing page ?
Make sure you always testing your copy, button text, button colour. It's always smart move to split testing your landing pages.
How Many Types of landing pages out there ?
Well, there are many types of landing pages for collecting subscriber of your email list or customized service pages. Here 's some of them frequently used:
- Comingsoon Page:As the name of this page is coming soon it means there are some services or new website (they launch near future) or even an affiliate program going to launch soon in near future. The main motto of this type of page is collecting email subscriber and email them when the service is avaible online.
- Landing Page: Though all the pages of your blog is landing pages when any user land from google, facebook, twitter or any social media. But a specific page with specific action can do the work for you. You offer free lead magnet(like: pdf, cheetsheet, white papers ) on the specific pages(that is your landing page) for collecting emails.
- ThankYou Page:When readers subscribe to your blog they landed on a thank you page. Here you can give them some thing you promised they get after subscribing to email list.
Enough introduction, lets start creating one:
You can buy leadpages templates and they can integrate with blogger.com . If you want to buy leadpages and setup it on blogger contact me Now.
Step 0:Backup your current template. (Before we do anything it always better to start with backup template)
Step 1:First we are going to hide post title, header, navigation menu,sidebar, footer navigation, widgets.
You can start using google chrome inspection tool (here is a guide from MBT) for finding wrappers to hide above sections.(A class wrapper start with "."; a ID wrapper starts with "#". )
In my case:
- header-wrapper for header section
- nav-wrapper for navigation
- sidebar-wrapper for sidebar section
- footer-nav for footer nav section
- footer-wrapper for footer section
- post-title for title of post
Hide all the wrappers mentioned aboved like this:
.header-wrapper,.sidebar-wrapper,.footer-wrapper,.post-title{display:hidden;}
Step 2:Make the content wrapper full width. (#content always same for you and me.)
#content{width:100%!important}
Now the code looks like this below:
.header-wrapper,.sidebar-wrapper,.footer-wrapper,.post-title{display:none;}#content{width:100%!important}/*for full width page*/
Step 3:Now we are going to create a page where our landing page will be live.
Open Blogger dashbord >> Pages >> New page.
Publish the page with desprective title like:
Creating a landing page for facebook use: "fb landing page"
Creating a landing page for email subscriber use: "landing page for subscribers". (You get my point)
After adding title to the page, from the right panel click on 'Don't allow comments'. Save the settings. Click on Publish page.
Note the page url for future use. If you are using custom domain name, then only copy the URL. For blogspot sub-domain url(like: http://abc.blogspot.com/p/landing-email.html) use blogspot.com only.
Now paste the below code just before tag of your blogger template.
<b:if cond='data:blog.url==&quot;landing-page-url&quot;'>.header-wrapper,.sidebar-wrapper,.footer-wrapper{display:none;}#content{width:100%!important;}</b:if>Before I move to next (and last) step
I hide all the wrappers, publish the page(where I am going to paste landing page code), added above code into my template. Now in next step we are going to create your very own template and publish it.
Step 4: You know CSS and HTML, then you can create your own landing page.
Here is an example:
This is a headline looks like
But if you don't know HTML and CSS (or maybe don't want to mess with codes alignment problems) you can download my own template(which are free to copy) after you join my email list. Send me a quick email to get your bonuses.
Hope you may find this valuable. Is this is something you want to read more? Share your valuable thoughts in comments.