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

Baca Juga

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

Selain itu menciptakan halaman utama menjadi post snippet plus thumbnail dapat mengurangi beban kilobite ketika pengunjung blog membuka halaman utama blog kita, jadi enteng dan ekonomis 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 yakni cara termudah untuk mengubah tampilan halaman index / utama menjadi post snippet plus thumbnail. silahkan ikuti langkah - langkah berikut ini.

1. Cari instruksi <b:includable id='main' var='top'>⋯</b:includable>, kemudian buka ... nya, anda cari instruksi 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 instruksi warna merah, itu yakni instruksi pengalihan yang harus anda copy dan pastekan sesuai dengan contoh di atas (jangan lupa pasang penutupnya).

2. Menghilangkan tampilan tanggal artikel.

Sebenarnya sesudah tahap pertama, halaman utama blog sudah bermetamorfosis 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 ketika membuka postingan tanggal tetap muncul.

Masih di dalam <b:includable id='main' var='top'>⋯</b:includable>, cari instruksi yang menyerupai di bawah ini, perhatikan instruksi warna merah, itu yakni instruksi yang harus anda copy dan pastekan sesuai dengan contoh 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 instruksi di dalam <b: includable id='mobile-index-post' var='post'>...</b:includable> (hapus isinya saja, kerangkanya jangan), kemudian ganti dengan instruksi 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.