Tips Tutorial Home Page Model 3

3. Hapus semua arahan di dalam <b:includable id='mobile-index-post' var='post'>...</b:includable> (Hapus isinya saja, kerangkanya jangan). Kemudian ganti dengan arahan 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, 200, &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/AVvXsEhVCT7Mukp-3y-zDhYe4G3E6tvRN4LnIeQb6Ujjmk6K_SjQhatEKrqYv9rSz22-OzV1kD8KVfPcPlvC-j73HPFFApt4-GjqDqIolKp0zG77TCunHsr3ydg7Z5iIrSgnAYDDz_ZzMzEzQNc/s200/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 script di bawah ini sempurna di atas arahan </head>

    <script type='text/javascript'> snippet_count = 200; //<![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 menciptakan snippet, ubah angka pada arahan snippet_count untuk menambah atau mengurangi jumlah abjad dari cuplikan artikel yang ingin ditampilkan.

5. Pasang arahan CSS berikut sempurna di atas arahan </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{float:left;width:30%;height:auto;margin:5px 15px 0 0;padding:0}       .Image-thumb img{width:100%;height:auto}       .snippets{font-size:15px;text-align:justify}       .post-info{font-size:11px;margin:5px 0 0 0}       .post-info,h3.post-title{overflow:hidden}       .jump-link{float:right;padding:5px 0}       .post-author,.post-date{display:inline-block;padding:4px} @media screen and (max-width:414px){         .Image-thumb{margin:5px 10px 0 0}       }     </style>     </b:if>

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

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

7. Simpan Tema

Selanjutnya : Cara menciptakan tombol next page dengan nomor 1 2 3