How To Create a Static Landing Page in Blogger

You are not alone who found this article in Google. There are many users who want to create dynamic and impressive static homepage for their blogs. It's a well-known quote that the first impression is the last impression. You might have seen this technique on pro blogging sites. They usually impress their readers with the dynamic design of their blogs. If you follow this post carefully, everything will be done easily in just a few steps.

Check out: How to Create Custom 404 Error Page in Blogger

In this post we will not create a separate page neither we redirect the readers to a static page. Wondering why? Because this post will demonstrate the basic setup for your blogger homepage and we will directly design our homepage instead of creating an annoying static page. I have used Css3 and HTML5 to make it responsive and user friendly.

Demo

Click Here

Read Also: How to Split Long Blogger Post Into 3 Parts

I have also used the letters ABCD as the number of labels and pages to be shown on the homepage. You can easily increase or decrease their numbers as per your requirement. If you face any difficulty with its installation setup, you can post your valuable comments and i will get back to you. Now let's start designing the homepage.

Recommended: How to Create Blogger Numbered Page Navigation With CSS3

Steps to Create Static Landing Page In Blogger Blogs

1. Login to you blogger Dashboard > Template > Edit HTML
2. Click anywhere inside the Template Editor
3. Press Ctrl + F to open the search box
4. Search </head> and paste the given code just above/before it

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
#outer-wrapper {visibility:hidden;opacity:0;width:0;height:0;} #homers {background:#F3794B;text-align:center;margin-bottom:50px;font-weight:400;font-size:20px;position:fixed;width:100%;height:100%;line-height:1.5em;z-index:9999;} #error-text {top:30%;position:relative;font-size:20px;color:#eee;} #error-text a{color: #FFF; background: #3D99DA; padding: 10px; border-radius: 5px;} #error-text a:hover{color:#eee;} #error-text p {color:#eee;margin:50px 0 0 0;} #error-text span {position:relative;color:#fff;font-size:250%;padding:0 20px;border-radius:5px;font-weight:700;letter-spacing:3px;transition:all .5s;} #error-text span:hover {color:#fff;-webkit-animation:jelly .5s;-moz-animation:jelly .5s;-ms-animation:jelly .5s;-o-animation:jelly .5s;animation:jelly .5s;}
@-webkit-keyframes jelly{ from,to{-webkit-transform:scale(1,1);transform:scale(1,1)}25%{-webkit-transform:scale(.9,1.1);transform:scale(.9,1.1)}50%{-webkit-transform:scale(1.1,.9);transform:scale(1.1,.9)}75%{-webkit-transform:scale(.95,1.05);transform:scale(.95,1.05)}} @keyframes jelly{ from,to{-webkit-transform:scale(1, 1);transform:scale(1,1)}25%{-webkit-transform:scale(.9,1.1);transform:scale(.9,1.1)}50%{-webkit-transform:scale(1.1,.9);transform:scale(1.1,.9)}75%{-webkit-transform:scale(.95, 1.05);transform:scale(.95, 1.05)}} @media only screen and (max-width:640px){ #error-text span {font-size:200%;} #error-text a:hover {color:#fff;}} .ca-menu{ padding:0; margin:20px auto; width: 1020px; font-family: &#39;Dosis&#39;, sans-serif; }
.ca-menu li{ width: 230px; height: 230px; border: 10px solid #f6f6f6; overflow: hidden; position: relative; float:left; background: #fff; margin-right: 4px; -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2); -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2); box-shadow: 1px 1px 2px rgba(0,0,0,0.2); -webkit-border-radius: 125px; -moz-border-radius: 125px; border-radius: 125px; -webkit-transition: all 400ms linear; -moz-transition: all 400ms linear; -o-transition: all 400ms linear; -ms-transition: all 400ms linear; transition: all 400ms linear; }
.ca-menu li:last-child{     margin-right: 0px; }
.ca-menu li a{ text-align: left; width: 100%; height: 100%; display: block; color: #333; position: relative; -moz-box-shadow:0px 0px 1px #000000; -webkit-box-shadow:0px 0px 1px #000000; box-shadow:0px 0px 1px #000000; }
.ca-icon{ font-family: &#39;WebSymbolsRegular&#39;, cursive; font-size: 40px; color: #f6f6f6;; line-height: 60px; position: absolute; width: 100%; height: 60px; left: 0px; top: 30px; text-align: center; -webkit-transition: all 400ms linear; -moz-transition: all 400ms linear; -o-transition: all 400ms linear; -ms-transition: all 400ms linear; transition: all 400ms linear; }
.ca-main{ font-size: 24px; position: absolute; top: 110px; height: 80px; width: 170px; left: 50%; margin-left: -85px; opacity: 0.8; text-align: center; }
.ca-sub{ text-align:center; color: #000; font-size: 26px; position: absolute; height: 80px; width: 170px; left: 50%; margin-left: -85px; top: 110px; opacity: 0; -webkit-transition: all 400ms linear; -moz-transition: all 400ms linear; -o-transition: all 400ms linear; -ms-transition: all 400ms linear; transition: all 400ms linear; }
.ca-menu li:hover{ background: #f7f7f7; border-color: #fff; -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); box-shadow: 0 45px 60px -50px #000000; }
.ca-menu li:hover .ca-icon{ color: #555; font-size: 60px; }
.ca-menu li:hover .ca-main{ display: none; }
.ca-menu li:hover .ca-sub{ 116 opacity: 0.8; }
</style>
</b:if>
</b:if>

5. In the next step, search for the <body> tag
6. Paste the following snippet just after/below it

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='homers'>
<div id='error-text'>
  <span>Welcome To Knigulper</span>
  <p>A Successful Teams with Highly Talented Team Members</p>
<ul class='ca-menu'>
<li>
<a href='http://www.knigulper.com/'>
<span class='ca-icon'>A</span>
<div class='ca-content'>
<h2 class='ca-main'>Exceptional Service</h2>
<h3 class='ca-sub'>Personalized to your needs</h3>
</div>
</a>
</li>
</li>
<a href='http://www.knigulper.com/'>
<span class='ca-icon'>B</span>
<div class='ca-content'>
<h2 class='ca-main'>Creative Storytelling</h2>
<h3 class='ca-sub'>Advanced use of technology</h3>
</div>
</a>
</li>
<li>
<a href='http://www.knigulper.com/'>
<span class='ca-icon'>C</span>
<div class='ca-content'>
<h2 class='ca-main'>Infographical Education</h2>
<h3 class='ca-sub'>Understanding visually</h3>
</div>
</a>
</li>
<li>
<a href='http://www.knigulper.com/'>
<span class='ca-icon'>D</span>
<div class='ca-content'>
<h2 class='ca-main'>Sophisticated Team</h2>
<h3 class='ca-sub'>Professionals in action</h3>
</div>
</a>
</li>
</ul>
</div>
</div>
</b:if>
</b:if>
<div class='clear'/>

7. Finally click Save template and you are done

Customization

Replace the blue text/URL with your own URL/Text/Label Category/Page.

Share this post