Home page Model 2

3. Hapus semua kode di dalam <b:includable id='mobile-index-post' var='post'>...</b:includable> (Hapus isinya saja, kerangkanya jangan). Lalu ganti dengan kode berikut.

<div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
                  <div class='Image-thumb'>
                    <b:if cond='data:post.thumbnailUrl'>
                      <b:with value='data:post.thumbnailUrl ? resizeImage(data:post.thumbnailUrl, 350, &quot;4:3&quot;) : data:post.thumbnail' var='image_bro'><img expr:alt='data:post.title' expr:src='data:image_bro'/></b:with>
                      <b:else/>
                      <img expr:alt='data:post.title' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIz-BT0v3dhu7FlXgxQhKQ9Pi5UqdJNkhdOvzeizNdf6F31r-J4SJCqszJQ40VWkxhgKT2UYC1Douq28cPMRSzHnXwJZteLxfF74HHp3IUG5ckkCKRSELsg37KVGFRd-6ohW1UVYpgSuA/s320/no-image.PNG'/>
                    </b:if>
                  </div>
                  <a expr:href='data:post.url'>
                    <h3 class='post-title entry-title' itemprop='name'>
                      <data:post.title/>
                    </h3>
                  </a>
                  <div class='post-info'>
                    <span class='post-author'><i class='fa fa-user'/>&amp;nbsp;<b:if cond='data:post.authorProfileUrl'><a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'><data:post.author/></a><b:else/><data:post.author/></b:if></span>
                    <span class='post-date'><i class='fa fa-calendar'/>&amp;nbsp;<data:post.dateHeader/></span>
                  </div>
                  <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' expr:itemprop='(data:blog.metaDescription ? &quot;&quot; : &quot;description &quot;) + &quot;articleBody&quot;'>
<div class='post-body entry-content' expr:id='&quot;summary&quot; + data:post.id' itemprop='articleBody'>
<b:if cond='data:post.snippet'>
  <data:post.body/>
  </b:if>
                  </div>
                  </div>
 <script type='text/javascript'>
                            createSnippet(&quot;summary<data:post.id/>&quot;);</script>
                  <div class='jump-link'>
                    <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'>
                      <data:post.jumpText/>
                    </a>
                  </div>
                  <div style='clear:both;'/>
                </div>

4. Pasang kode script di bawah ini tepat di atas kode </head>

    <script type='text/javascript'>
snippet_count = 170;
//<![CDATA[
function removeHtmlTag(n,e){if(-1!=n.indexOf("<")){for(var t=n.split("<"),i=0;i<t.length;i++)-1!=t[i].indexOf(">")&&(t[i]=t[i].substring(t[i].indexOf(">")+1,t[i].length));n=t.join("")}for(e=e<n.length-1?e:n.length-2;" "!=n.charAt(e-1)&&-1!=n.indexOf(" ",e);)e++;return n=n.substring(0,e-1),n+"..."}function createSnippet(n){var e=document.getElementById(n),t=snippet_count,i='<div class="snippets">'+removeHtmlTag(e.innerHTML,t)+"</div>";e.innerHTML=i}
//]]>
    </script>

Script di atas berfungsi untuk membuat snippet, ubah angka pada kode snippet_count untuk menambah atau mengurangi jumlah karakter dari cuplikan artikel yang ingin ditampilkan.

5. Pasang kode CSS berikut tepat di atas kode </head>

  <b:if cond='data:blog.pageType not in {&quot;static_page&quot;,&quot;item&quot;,&quot;error_page&quot;}'>
    <style type='text/css'>
      .Image-thumb{padding:0;margin:0 auto;}
      .Image-thumb img{width:100%;height:auto}
      .post-info,.jump-link{padding:10px 0}.post-author,.post-date{background:#dddddd;border-radius:2px;padding:4px;margin:5px 5px 5px 0;display:inline-block}.post-info, h3.post-title{overflow:hidden}.blog-pager{clear:both}.post-info{box-sizing:border-box}
      .post-info, h3.post-title, .jump-link{text-align:center}.snippets{text-align:justify}
.post{background:none;position:relative;margin:0 0 20px;padding:0 10px 10px 10px;height:auto;width:50%;float:left;overflow:hidden;transition:all .4s ease-in-out;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
@media screen and (max-width:414px){
        .post{width:100%;padding:0}
      }
      </style>
    </b:if>

6. Pastikan di dalam template sudah terdapat kode penghubung untuk ikon dari Font Awesome. Jika belum, silahkan pasang kode berikut di atas kode </body>

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

7. Simpan Tema

Selanjutnya : Cara membuat menu blogspot (PageList) Responsive dropdown