There are lots and lots of users who use Blogger as a blogging platform search and want to create a static and impressive landing page for their Blogger blogs and probably you are not alone.
You might have visited some pro blogger’s site and might have been disappointed that you did not get the desired results for what you searching for, then you have come to the right place.
If you follow this post and the steps carefully, everything will be done easily with ease.
In this tutorial, you not only able to create a separate page and you would not redirect your readers to a static page.
Are you wondering why?
Because this tutorial will demonstrate the basic setup that you can create for your Blogger as a homepage and you can directly design your homepage instead of creating an annoying static page and believe me your homepage will be responsive and user-friendly as you will use only the CSS3 and HTML5 for coding.
So, let’s get started.
Note: Replace all the red text and URLs with your own Text, URL, Label or Category or Page.
Step 1. Login to your Blogger blog and click on Template and select Edit HTML
Step 2. Click anywhere inside the template editor area and by pressing Control + F search for </head> tag and paste the below code just above the </head> tag.
<b:if cond='data:blog.pageType == "index"'>
<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:# ffffff;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:#080808;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: 'Dosis', 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: 'WebSymbolsRegular', 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>
Step 3. Then search for the <body> tag and paste the below code just after the <body> tag.
<b:if cond='data:blog.pageType == "index"'> <b:if cond='data:blog.url == data:blog.homepageUrl'> <div id='homers'> <div id='error-text'> <span>Welcome to Wonder Krish</span> <p>Digitally Leading You a Step Ahead</p> <ul class='ca-menu'> <li> <a href=’https://www.wonderkrish.com/'> <span class='ca-icon'>Circle 1</span> <div class='ca-content'> <h2 class='ca-main'>SEO</h2> <h3 class='ca-sub'>Search Engine Optimization</h3> </div> </a> </li> </li> <a href=’https://www.wonderkrish.com/'> <span class='ca-icon'>Circle 2</span> <div class='ca-content'> <h2 class='ca-main'>Marketing</h2> <h3 class='ca-sub'>Optimize your business online</h3> </div> </a> </li> <li> <a href='https://www.wonderkrish.com/'> <span class='ca-icon'>Circle 3</span> <div class='ca-content'> <h2 class='ca-main'>Blogger Tricks</h2> <h3 class='ca-sub'>Blogger Tips and Tricks</h3> </div> </a> </li> <li> <a href='https://www.wonderkrish.com/'> <span class='ca-icon'>Circle 4</span> <div class='ca-content'> <h2 class='ca-main'>Blog</h2> <h3 class='ca-sub'>Discover the Life’s hacks</h3> </div> </a> </li> </ul> </div> </div> </b:if> </b:if> <div class='clear'/>
Step. 4. Click Save in order to save your template and you are done.
No comments:
Post a Comment