Tips Tutorial Cara Mengubah Halaman Utama Blog Dari Post Body Menjadi Post Snippet Plus Thumbnail

<data:post.dateHeader/>             </span>           </h2>       </b:if> </b:if>
Terakhir simpan template.

Update : Minggu 08 januari 2017

Jika ingin tampilan halaman utama nya lebih menarik (mirip dengan gambar di atas). Silahkan ikuti langkah selanjutnya.

UPDATE : JUM'AT 01 SEPTMBER 2017

Untuk tampilan halaman utama model lainnya, silahkan lihat DI SINI

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 di bawah ini.

<div class='mobile-post-outer'> <a expr:href='data:post.url'>  
<h3 class='mobile-index-title entry-title' itemprop='name'>  

  <data:post.title/>     </h3>     <div class='mobile-index-contents'>     <b:if cond='data:post.thumbnailUrl'>       <div class='mobile-index-thumbnail'>         <div class='ImageR'>           <img expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/>         </div>         <span>           <div class='post-body'>             <data:post.snippet/>           </div>         </span>       </div>       <b:else/>         <div class='post-body'>           <b:if cond='data:post.snippet'>             <data:post.snippet/>           </b:if>         </div>       </b:if>     </div>     <div style='clear:both;'/>   </a>   <div class='jump-link'>     <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'>       <data:post.jumpText/>     </a>     <div style='clear:both;'/>   </div>   <div class='post-footer post-footer-line'>     <span class='post-author vcard'>       <b:if cond='data:top.showAuthor'>         <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>           <span itemprop='name'>             <data:post.author/>           </span>         </span>       </b:if>     </span>     <span class='date-header'>       <b:if cond='data:post.dateHeader'>         <data:post.dateHeader/>       </b:if>     </span>     <span class='post-labels'>       <b:if cond='data:top.showPostLabels and data:post.labels'>         <data:postLabelsLabel/>         <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-comment-link'>       <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>
4. Agar snippet berada di samping gambar thumbnail, tambahkan css di bawah ini, letakkan saja di atas ]]></b:skin>

.ImageR {float: left; padding:5px 10px 5px 0;}  .jump-link {padding:5px 0;}

Klik Format Template, kemudian Simpan Template.

Selanjutnya
Cara Modifikasi Tag H1 biar dinamis dan SEO friendly.
Dan ikuti juga :

Cara mengubah tampilan sajian laman menjadi munu dropdown pada tampilan seluler.