How To Create A Landing Page/Squeeze Page On 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.

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

Live Demo of My Landing Page On This Blog Itself.

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.

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.

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.in so you need to change the .in 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.

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.

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 in my contact us page.

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

Chèn link từ động cho một vài từ khóa trong blogspot

Thủ thuật này sẽ cho phép bạn chèn link tự động vào các từ khóa, VD hễ gặp trong bài viết có từ khóa SEO thì nó sẻ tự động được gắn link mà bạn không cần phải gắn thủ công nữa

Cài đặt tính năng chèn link vào từ khóa tự động

1. Các bạn Đăng Nhập > rồi vào Mẫu.
2. Tìm và chèn đoạn code bên dưới trước

</head>
<script type='text/javascript'>
//<![CDATA[
function doHighlight(a,c,f){for(var d="",b=-1,g=c.toLowerCase(),e=a.toLowerCase();0<a.length;)b=e.indexOf(g,b+1),0>b?(d+=a,a=""):a.lastIndexOf(">",b)>=a.lastIndexOf("<",b)&&e.lastIndexOf("/script>",b)>=e.lastIndexOf("<script",b)&&(d+=a.substring(0,b)+'<a title="'+a.substr(b,c.length)+'" alt="'+a.substr(b,c.length)+'" href="'+f+'" target="_blank">'+a.substr(b,c.length)+"</a>",a=a.substr(b+c.length),e=a.toLowerCase(),b=-1);return d} function highlightSearchTerms(a,c,f,d){searchArray=c?[a]:a.split(" ");div=document.getElementById(d);a=div.innerHTML;for(c=0;c<searchArray.length;c++)a=doHighlight(a,searchArray[c],f);div.innerHTML=a;return!0};
//]]>
</script>

Trong đoạn code trên có từ target="_blank" // Có nghĩa là nhấp vào link từ khóa này sẽ tự động mở 1 tab web mới. Bạn có thể xóa hoặc để

3. Tìm

<data:post.body/>
Thay thế thành:
<div expr:id='"summary" + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
highlightSearchTerms('Từ khóa 1',true,'Link từ khóa 1','summary<data:post.id/>');
highlightSearchTerms('Từ khóa 2',true,'Link từ khóa 2','summary<data:post.id/>');
highlightSearchTerms('Từ khóa N',true,'Link từ khóa N','summary<data:post.id/>');</script>

Lưu ý trong Template của bạn có thể có 3 đến 4 dòng <data:post.body/>. Cho nên để kiểm tra bạn nên tạo 1 bài viết mới có các từ khóa đó, sau đó chèn code từng dòng và load bài viết lại cho đến khi có link tự động thôi nhé!..

Cách chỉ cho phép hiển thị bài viết thuộc nhãn nhất định ở trang chủ

Trong thiết kế blog đôi khi theo yêu cầu bạn chỉ muốn hiển thị bài viết thuộc một nhãn nhất định ở trang chủ hoặc kiểu trang index, về cơ bản cách này ngược với cách ẩn bài viết thuộc một nhãn nhất định ở kiểu trang index.

Đặc điểm: Với thủ thuật này ở trang chủ của bạn chỉ hiện thị bài viết của một nhãn duy nhất và bài viết thuộc các nhãn khác sẽ bị ẩn đi.

1. Đăng nhập vào blog của bạn.
2. Chọn mẫu (tempalate) => Chọn Chỉnh sửa HTML (Edit HTML)
3. Tìm đoạn code <b:includable id='main' var='top'> và kéo chuột xuống vài dòng bạn sẽ tìm được đoạn code tương tự như bên dưới (đoạn này có thể khác nhau tuỳ theo từng blog nha các bạn):

<b:loop values='data:posts' var='post'>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:post.includeAd'>
<b:if cond='data:post.isFirstPost'>
<data:defaultAdEnd/>
<b:else/>
<data:adEnd/>
</b:if>
<data:adCode/>
<data:adStart/>
</b:if>
<b:if cond='data:post.trackLatency'>
<data:post.latencyJs/>
</b:if>
</b:loop>

- Thay thế nó thành đoạn code bên dưới:

<b:loop values='data:posts' var='post'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == "Show Label"'>
<b:include data='post' name='printPosts'/>
</b:if>
</b:loop>
</b:if>
<b:else/>
<b:include data='post' name='printPosts'/>
</b:if>
</b:loop>

Ở đây Show Label, Chính là tên nhãn mà bạn muốn hiển thị bài viết của nhãn đó ở trang chủ.

- Lúc này mình tìm thẻ đóng </b:includable> của thẻ <b:includable id='main' var='top'>. Và đặt đoạn code bên dưới vào sau thẻ </b:includable> nói trên.

<b:includable id='printPosts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'>
<data:post.dateHeader/>
</h2>
</b:if>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>
</b:includable>

Lưu mẫu lại và kiểm tra kết quả của các bạn nha.

How to obtain the first image of the post in Blogger without Javascript

Hiển thị hình ảnh từ link url khác

Blogger there is an infinity of tags for the platform, among which are called <data> .These tags allow us to show certain elements within our blog, and our advantage can relocate at will.

For example, if we want to display the contents of the input, simply recurrirmos to<data: post.body /> , or if we need to show the title of this, we add <data: post.title /> to our code. Not to deviate from the main objective of this entry, we will enter no details on the use of these labels. In Blogger we can also get the thumbnail from the entrance, but only get to a size of 72 pixels. The label takes care of it is <data: post.thumbnailUrl />, and returns a URL in the following format:

How to add recent comments widget into blogger blog

Are you looking for recent comments widget for your blogger blog? In this post, I will provide you step by step guide to add the recent comments widget in your blog. This widget is very same to the recent post widget in function which is displaying the recent posts in your blog sidebar and this widget will display recently published comments from your blog readers. This widget will inspire your readers to make comments on your blog posts. This will facilitate your visitors to find the latest comments that just the arrival to your blog. If your blog has an empty place, then it will fill it.

This is not very difficult to install the recent comments widgets in blogger. We will install this widget thought already made coding. So you don’t need to write CSS, javascript or HTML coding. Simply follow the instructions.

• Login to your blogger account
• Go layout, click on add a gadget
• Select Html/javascript from appearing window
• Paste the below codes into it

<link href=’https://googledrive.com/host/0BzPgmXeCwsMRUFloS3B1NVRybWM/’ rel=’stylesheet’/>
<script type=”text/javascript”>
//<![CDATA[
var
numComments = 5,
showAvatar = true,
avatarSize = 35,
roundAvatar = true,
characters = 40,
defaultAvatar = “https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc-81SUPFn4t2MahUzXlijKai9EsDAgENhbLvP2TDen361x6hrodLBSRG2SRUw2OaQk6V7cPSmXB1RMrsq0kkG4pbrODfFN_WCtlVH4EIXxSuMgMF5Vkn1-mZL9jRhaYq0G-mTZ6IO3As/s1600/none.png”,
hideCredits = true;
maxfeeds=50,
adminBlog=’your name’;
//]]>
</script>
<script type=”text/javascript” src=”https://kang-is.googlecode.com/svn/trunk/javascript/recentcomments2.js”></script>
<script type=”text/javascript” src=”/feeds/comments/default?alt=json&amp;callback=kangismet_recent&amp;&amp;max-results=50″>
</script>

Save the gadget with your desired name such as”Recent Comments ”

Recent Comment Widget customization

You can customize this widget by little modification in its coding

• numComments = 5 (the number of comments displayed)
• showAvatar = true (false, if you want to hide avatar)
• avatarSize = 35 (the size of the avatar in pixels)
• roundAvatar = true (avatar round)
• characters = 40 (the number of characters the content of the comment)
• defaultAvatar = “https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc-81SUPFn4t2MahUzXlijKai9EsDAgENhbLvP2TDen361x6hrodLBSRG2SRUw2OaQk6V7cPSmXB1RMrsq0kkG4pbrODfFN_WCtlVH4EIXxSuMgMF5Vkn1-mZL9jRhaYq0G-mTZ6IO3As/s1600/none.png” (default avatar)
• adminBlog=’your name‘ (the name of the blog author, replace with your name)

So, friends! Now you have learned that how to create recent widget comment in a blogger blog? So this is easy or not? I’m sure if you read and follow the tutorial then you will successfully be added this widget to your blog.

Theo thebloggerguide

Recent Posts By Label Gadget For Blogger

In this post i want to show you another way to display your recent posts in your blogs sidebar or other gadget sections.We previously covered a number of recent posts gadgets you can use on your blog, and the recent posts gadget is probably the most used type of gadget by bloggers.We also covered a simple featured posts gadget and Blogger have a one click Popular posts gadget in the gadget gallery.So how about displaying your posts from a specific category on your blog.With this gadget you can display a list of posts that you have added the same label to, the gadget will have the title of the post, thumbnail from the post and an optional summery.

I think this is a neat option to get some of your favorite posts displayed or you could feature a different category daily, weekly or monthly.If used with my Tabbed Sidebar Section you could display three or more categories in your sidebar without using too much room.While there are a number of codes for this gadget credit for the code in this post goes to Blogspottutorial.We have a few pieces of code you will need to add to your blog so make sure to Save your template before making changes.


Live Demo - Recent Posts By Label Gadget

Recent Posts By Label Gadget

Step 1. In your Blogger Dashboard click > Design > Edit Html 





Step 2 . Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - More Info)

]]></b:skin>

Step 3. Copy and paste the following code Directly Above / Before ]]></b:skin>

/*** Recent Labels Gadget Css ***/
img.label_thumb{
float:left;
padding:5px;
border:1px solid #8f8f8f;
background:#D2D0D0;
margin-right:10px;
height:55px;
width:55px;
}
img.label_thumb:hover{
background:#f7f6f6;
}
.label_with_thumbs {
float: left;
width: 100%;
min-height: 70px;
margin: 0px 10px 2px 0px;
adding: 0;
}
ul.label_with_thumbs li {
padding:8px 0;
min-height:65px;
margin-bottom:10px;
}
.label_with_thumbs a {}
.label_with_thumbs strong {}

Step 4. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - More Info) 

</head>

Step 5. Copy and paste the following code Directly Above / Before </head>

<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<ul class="label_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
{s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}else thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFGUhJqk_ydpb0ZsawHbbou1kBJemu8xIOcGrkMOdeK2IkZi94xKHXxJtxCArlfb-1ArwfprRInKxk10q5i5bOIsunZPmFsz_pL2qfOAAbo-RaURrEl77je3_pEuGaYvTCG50XQJE5ltYZ/';}
var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="Jun";monthnames[7]="Jul";monthnames[8]="Aug";monthnames[9]="Sep";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)
document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br>');if("content"in entry){var postcontent=entry.content.$t;}
else
if("summary"in entry){var postcontent=entry.summary.$t;}
else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}
else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}
var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}
if(showcommentnum==true)
{if(flag==1){towrite=towrite+' | ';}
if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
if(displaymore==true)
{if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More »</a>';flag=1;;}
document.write(towrite);document.write('</li>');if(displayseparator==true)
if(i!=(numposts-1))
document.write('');}document.write('</ul>');}
//]]>
</script>

Step 6. Save your template, we have added the Css to style the gadget and the script to make the gadget work.Now we just have to add the gadget code to your sidebar in a Html/Javascript gadget.

Step 7. Click back to your Design Page > Click Add A Gadget > Choose Html/Javascript from the pop up menu :





Step 8. Copy and paste the code below into the Html/Javascript gadget.

<script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 80;</script>
<script type="text/javascript" src="/feeds/posts/default/-/LABEL?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

Important - You must add the name of the label you want to to the above code.Replace LABEL in red with the label name.

Example - If i wanted to display posts from the gadgets label i would replace LABEL with Gadgets.
(http://www.spiceupyourblog.com/search/label/Gadgets/)

If your label is made up of more than one word it can get confusing as the space between the words will be filled automatically as shown below :

http://www.spiceupyourblog.com/search/label/Social%20Media 

If you are going to use a label with more than one word make sure to first see how the label appears.

Step 9. Save the gadget and you can drag and drop it into the position you want it displayed on your blog.

Drop Your Comments, Views And Opinions Below.