Tips Tutorial Home Page Model 1

3. Hapus semua isyarat di dalam <b:includable id='mobile-index-post' var='post'>...</b:includable> (Hapus isinya saja, kerangkanya jangan). Ganti dengan isyarat 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/AVvXsEhVCT7Mukp-3y-zDhYe4G3E6tvRN4LnIeQb6Ujjmk6K_SjQhatEKrqYv9rSz22-OzV1kD8KVfPcPlvC-j73HPFFApt4-GjqDqIolKp0zG77TCunHsr3ydg7Z5iIrSgnAYDDz_ZzMzEzQNc/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 sempurna di atas isyarat </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 menciptakan snippet, ubah angka pada isyarat snippet_count untuk menambah atau mengurangi jumlah abjad dari cuplikan artikel yang ingin ditampilkan.

5. Pasang isyarat CSS berikut sempurna di atas isyarat </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 isyarat penghubung untuk ikon dari Font Awesome. Jika belum, silahkan pasang isyarat berikut di atas isyarat </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 angka