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

Setelah membuat template default Blogger responsive, hal selanjutnya yang harus kita lakukan ialah mengubah tampilan halaman utama, label dan arsip (Halaman Index) dari post body menjadi post snippet plus thumbnail. Sebab jikalau dibiarkan, halaman utama blog menjadi sangat panjang, dan tentunya kurang efektif dan efisien. Bayangkan jikalau halaman utama blog anda berisi 10 artikel, pastinya akan sangat melelahkan pengguna Blog.

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

Selain itu menciptakan halaman utama menjadi post snippet plus thumbnail dapat mengurangi beban kilobite dikala pengunjung blog membuka halaman utama blog kita, jadi enteng dan irit tentunya (lagi -lagi user friendly).

Ada beberapa cara untuk mengubah halaman utama blog dari post body menjadi post snippet.

Cara pertama yaitu dengan mengubah bagan pada <b:includable id='post' var='post'>⋯</b:includable>. Tapi ini rumit hhhh, aja wis mbati puyeng.

Cara kedua yaitu dengan mengalihkan halaman utama blog ke halaman utama versi mobile. Ini ialah cara termudah untuk mengubah tampilan halaman index / utama menjadi post snippet plus thumbnail. silahkan ikuti langkah - langkah berikut ini.

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

1. Cari arahan <b:includable id='main' var='top'>⋯</b:includable>, kemudian buka ... nya, anda cari arahan yang serupa dengan di bawah ini.

<div class='post-outer'>     <b:if cond='data:blog.pageType not in
{&quot;static_page&quot;,&quot;item&quot;,&quot;error_page&quot;}'>         <b:include data='post' name='mobile-index-post'/>      
<b:else/>         <b:include data='post' name='post'/>     </b:if>   
<b:include cond='data:blog.pageType in {&quot;static_page&quot;,
&quot;item&quot;}' data='post' name='comment_picker'/> </div>

Perhatikan arahan warna merah, itu ialah arahan pengalihan yang harus anda copy dan pastekan sesuai dengan teladan di atas (jangan lupa pasang penutupnya).

2. Menghilangkan tampilan tanggal artikel.

Sebenarnya sehabis tahap pertama, halaman utama blog sudah menjelma post snippet plus thumbnail. Hanya saja masih ada yang mengganjal diantara post snippet, yaitu tanggal artikelnya (jika anda mengaktifkan tampilan tanggal artikel / postingan). Berikut cara menghilangkannya khusus untuk halaman utama, label dan arsip, jadi dikala membuka postingan tanggal tetap muncul.

Masih di dalam <b:includable id='main' var='top'>⋯</b:includable>, cari arahan yang ibarat di bawah ini, perhatikan arahan warna merah, itu ialah arahan yang harus anda copy dan pastekan sesuai dengan teladan di bawah (jangan lupa pasang penutupnya).

<b:if cond='data:post.dateHeader'>    
 <b:if cond='data:blog.pageType not in
{&quot;static_page&quot;,&quot;item&quot;}'>           <b:else/>           <h2 class='date-header'>             <span>        
<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.