How To Create a Static Landing Page in Blogger

By -

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.

Static Landing Page for Blogger

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.

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

Comments

Post a Comment

Popular posts from this blog

List of Top 11 Social Bookmarking Sites for 2018

By -
Image
Today, I'm going to share with you the most popular and widely used social bookmarking sites for 2018. These sites will help you increase your content visibility on social media and search engines. The process begins with the content curation and content aggregation. But before you bag the list, you need to understand what social bookmarking is and why you should use them instead of browser bookmarks. What is Social Bookmarking? Social Bookmarking is the process of adding, storing, submitting and sharing your contents on those websites where people and search engines can see and access your work actively. It includes a webpage, an image object, a video or text-based links like services or products that you offer. When you share (bookmark) your contents on a social bookmarking site, it means your data has been whitelisted or stored for quick access in future if the original web page exists. Check out: Role of Social Media in Boosting Your Traffic Easily Why You Should Use...
Read more

6 Digital Marketing Strategies for Small Business

By -
Image
Revenue is the lifeblood of any business. To get enough sales, it is very important to market your business as well as the products and services which you are providing. Today, there are millions of potential consumers on the Internet. Therefore, digital marketing is highly necessary. This is an activity where the company's name, brand, products, and services are spread throughout the Internet so that online consumers can view them, make purchases and possibly make referrals. By boosting your company's brand awareness online, you can create an attractive, positive and profitable business. One of the most effective methods of achieving this is by using SEO methods and other useful techniques. Here is more on Search Engineering Optimization. What is Search Engine Optimization? (SEO) This is a specialized strategy where the online visibility of a website is grown in the organic search engine results. Involving a collection of technical and web-based strategies, SEO optimizatio...
Read more

How to Create Separate AMP Pages On Blogger [AMP Plugin]

By -
Image
Today, I am going to share an awesome technique by which you can install AMP version on your responsive blogger template. By doing this, your responsive theme will not get disturbed because with this method, you can add AMP snippets to the mobile version (m=1) instead of upgrading your whole template to AMP. So let get started! As we know, people are upgrading their responsive themes to AMP themes and this method has badly impacted their blog layout. But in this article, we will be learning to create a separate AMP page in a native manner that will keep your responsive design up. So creating a separate AMP page on Blogger's mobile URL m=1, we need to have valid AMP snippets in our Blogger template. Then we will make some minor changes to make AMP on mobile URL m=1. How to Easily Add Hreflang Tag to Blogger Steps to Add AMP Pages On Blogger Mobile Redirect URL Creating a separate AMP page in Blogger is not a difficult task as you think. In today's article, I am going t...
Read more