Home page Model 1

3. Hapus semua kode di dalam <b:includable id='mobile-index-post' var='post'>...</b:includable> (Hapus isinya saja, kerangkanya jangan). 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>
                    <span class='post-timestamp'><i class='fa fa-clock-o'/>&amp;nbsp;<abbr class='published' expr.title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></span>
                    <span class='post-labels'><b:if cond='data:post.labels'><i class='fa fa-tag'/>&amp;nbsp;<b:loop values='data:post.labels' var='label'><a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='not data:label.isLast'>,</b:if></b:loop></b:if></span>
                    <span class='post-comm'><i class='fa fa-comment'/>&amp;nbsp;<b:include cond='data:blog.pageType not in {&quot;item&quot;,&quot;static_page&quot;}                                  and data:post.allowComments' data='post' name='comment_count_picker'/></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 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'>
      .post-date {background: rgb(245, 123, 84)}
      .post-comm {background: rgb(32, 56, 172)}
      .post-author {background: rgb(122, 195, 235)}
      .post-labels {background: rgb(123, 50, 40)}
      .post-timestamp {background: rgb(50, 200, 50)}
      .post-author a, .post-timestamp a, .post-comm a, .post-labels a{color: white}
      .jump-link{float:right;padding:5px}
      .post-author,.post-date,.post-timestamp,.post-labels,.post-comm{display:inline-block;padding:4px;margin:5px 5px 5px 0;font-size:11px;color:white;border-radius:2px}
      h3.post-title,.post-info{overflow:hidden}.post-info{background:none;vertical-align:baseline;border:0;padding:10px 0;margin:0;color:#999999;}.snippets{text-align:justify;font-size:15px}.blog-pager{clear:both}.Image-thumb{width:35%;height:auto;float:left;padding:0 15px 0 0}.Image-thumb img{width:100%;height:auto}
@media screen and (max-width:414px){
        .jump-link{float:none}h3.post-title,.post-info,.jump-link{text-align:center}.Image-thumb{float:none;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 tombol next page dengan angka