A homepage or a landing page, or a page loaded when reader visit your main url of the blog, can help your blog to get more visitor. The idea is making your blog load faster, get more subscriber, introduce your blog headline or making your blog look more professional.

If you visit at someone Blogspot blog, usually it have some numbered post in it, sidebar, also the design its look same on every page or article you visited. Your blog will look more cooler if  the homepage or main url on your blog have different design.

We are about to make a Real Homepage not a Static Page with custom redirect!
We will make a landing page look like picture below.


First, go to Theme - Edit HTML and go to Blog1 widget by clicking "Jump to Widget" an choose Blog1, then expand "Main" part of the widget.

Inside, we will find code <b:loop> attribute like this

<b:loop values='data:posts' var='post' >
  <!-- ITEM -->
</b:loop>

In above code, 'data:posts' which mean our article will be taken to show in that page and repeated 'X' times from the number of post we set in the Blog settings. As example if we set 7 post, it will show 7 article in main page.

In landing page or homepage we want to make like picture above, as you see it doesnt have any post or article. So we will give some condition to make our post does not show in homepage, after we give some condition, the code look like below

<b:if cond='!data:view.isHomepage'>
<b:loop values='data:posts' var='post' >
  <!-- Other Code -->
</b:loop>
</b:if>

That code have condition '!data:view.isHomepage' it has Inequality operator which mean condition is true when view is not a homepage.

Our modified homepage does not have navigation like default homepage do. So, move other <b:include> part inside Blog1 widget that we want do hide from our modified homepage. Page navigation for example code will look like

<b:if cond='!data:view.isHomepage'>
<b:loop values='data:posts' var='post' >
  <!-- Other Code -->
</b:loop>
<b:include name='nextprev'/>
</b:if>

And now for page that appear only in homepage, we give other condition

<b:if cond='data:view.isHomepage'>
  <!-- ITEM -->
</b:if>

This time, the condition does not have ! (exclamation mark) which mean, the result will true if view is a homepage. For <!-- ITEM -->" part, copy and replace source code below to its place.
So our modified Blog1 will look like

<b:if cond='!data:view.isHomepage'>
    <b:loop values='data:posts' var='post' >
      <!-- Other Code -->
    </b:loop>
    <b:include name='nextprev'/>
</b:if>
<b:if cond='data:view.isHomepage'>
    <!-- ITEM -->
</b:if>

<style>
@media (min-width: 480px){
 .page-homepage-header {
    padding: 55px 0 50px 0;
 }
}
.page-homepage-header {
    background: #f7f7f7;
    color: #43464b;
    padding: 35px 0;
    text-align: center;
}
.page-homepage-header .advanced {
    letter-spacing: .025em;
    padding-bottom: 1.5em;
    margin-bottom: 1.31818em;
}

@media (min-width: 768px){
 .size-22 {
    font-size: 22px;
    line-height: 1.63636;
 }
}
.size-22 {
    font-size: 18px;
    line-height: 1.66667;
}
.page-homepage-header .title {
    margin-bottom: .5em;
}

@media (min-width: 480px){
 .size-84 {
    font-size: 56px;
    line-height: 1;
 }
}
.size-84 {
    font-size: 34px;
    line-height: 1.17647;
}

@media (min-width: 480px){
 .page-homepage-header .bonus {
    margin-bottom: 3.4em;
 }
}
.page-homepage-header .bonus {
    font-size: 15px;
    line-height: 1.66667;
    color: #a0a3a7;
    letter-spacing: .025em;
    margin-bottom: 2em;
}
.blog-title {
    font-size: xx-large;
    font-weight: bold;
    color: rgb(250, 140, 4);
    display: inline-block;
    letter-spacing: 0;
    margin: 0;
    vertical-align: top;
}
@media (min-width: 480px){
 .page-homepage-header .btn {
    padding: 20px 30px 18px 30px;
 }
}
.page-homepage-header .btn {
    letter-spacing: .16em;
    border-color: #f16334;
    font-size: 12px;
    line-height: 1.66667;
    height: auto;
}
.btn-wrr {
    background-color: #f16334;
    border-color: #f16334;

}
@media (min-width: 480px){
 .btn {
    width: auto;
    min-width: 140px;
    padding-right: 20px;
    padding-left: 20px;
 }
}
.btn {
    display: inline-block;
    text-transform: uppercase;
    text-align: center;
    font-size: 12px;
    line-height: 1.5em;
    font-weight: 700;
    letter-spacing: .126em;
    padding: 21px 10px 19px 10px;
    width: 100%;
    border: solid 1px;
    cursor: pointer;
    border-radius: 2px;
    white-space: normal;
   color: #fff !important;
}
.btn-wrap a {
    color:#fff;
}
.page-homepage-header .btn:hover {
text-decoration:none;
    background: #f16334;
    color: #fff;
    -webkit-box-shadow: 0 20px 28px 0 rgba(241,99,52,.16);
    box-shadow: 0 20px 28px 0 rgba(241,99,52,.16);
}
@media (min-width: 1024px){
 .page-homepage-header .inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
 }
}
.inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 10px;
}
@media (min-width: 1024px){
    .page-homepage-header .text {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
    padding: 80px 0 0 6.77966%;
    align-self: center;
}
}
@media (min-width: 769px){
 .page-homepage-header .photo {
    display: block;
    width: 30.25424%;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
    align-self:center;
 }
}
@media (max-width: 768px){
 .page-homepage-header .photo {
    display: none;
 }
}
.regular {
    font-weight: 400!important;
}
.light {
    font-weight: 300!important;
}
</style>
<div class='page-homepage-header'>
 <div class='inner'>
  <div class='text'>
   <div class='blog-title'>BloggerBasics101</div>
   <div class='size-22 regular border advanced'>The <span class='bold'>ADVANCED</span> Blogspot Guide</div>
   <h1 class='size-84 light title'>How to make our blogger blogspot blog look more beautiful than other</h1>
   <div class='size-15 regular bonus'><span class='bold red'>FREE BONUS:</span> A cheat sheet on how I made this for &quot;you&quot;</div>
   <div class='btn-wrap'>
       <button class='btn btn-wrr'><a href='/search/'>Enter Blog</a></button>
   </div>
  </div>
  <div class='photo'>
   <img alt='' class='img' height='auto' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnyuqjHHxj4tQh3YKbbgKrurDg7T2Po0ItTDN-4y3KhqEmPPm6NqMA-qC9_IX6xw76BigXekO4rZG3TjlMjLz-FHnPoiNEq41t1ViP7sNJai6OijrUPhLoWvihAGRG4qE75FXXz7RDs2w/s1600/picb.png' width='100%'/>  
      </div>
 </div>
</div>
          

For newer default blogger blog themes like Soho, Emporio, Contempo, etc it not have looping code, replaced by <b:include name='super.main'/> and after we give condition will look like

<b:if cond='!data:view.isHomepage'>
<b:include name='super.main'/> 
</b:if>

Maybe someone will ask, if we modified our blogger blog homepage, how we can show our default homepage? In the source code, if you look closely when we hit button it will go to https://BLOG_NAME.blogspot.com/search and the view is like our default homepage.

And what about sidebar section? our modified homepage does not have Sidebar. We will give sidebar section with inequal condition too '!data:view.isHomepage', look at post How to Hide Sidebar for detail.

Share This

Facebook Twitter WhatsApp LINE Google Bookmark