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 adalah mengubah tampilan halaman utama, label dan arsip (Halaman Index) dari post body menjadi post snippet plus thumbnail. Sebab jika dibiarkan, halaman utama blog menjadi sangat panjang, dan tentunya kurang efektif dan efisien. Bayangkan jika halaman utama blog anda berisi 10 artikel, pastinya akan sangat melelahkan pengguna Blog.

Selain itu membuat halaman utama menjadi post snippet plus thumbnail bisa mengurangi beban kilobite saat pengunjung blog membuka halaman utama blog kita, jadi enteng dan hemat tentunya (lagi -lagi user friendly).

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

Cara pertama yaitu dengan mengubah skema 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 adalah cara termudah untuk mengubah tampilan halaman index / utama menjadi post snippet plus thumbnail. silahkan ikuti langkah - langkah berikut ini.

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

2. Menghilangkan tampilan tanggal artikel.

Sebenarnya setelah tahap pertama, halaman utama blog sudah berubah menjadi 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 saat membuka postingan tanggal tetap muncul.

Masih di dalam <b:includable id='main' var='top'>⋯</b:includable>, cari kode yang seperti di bawah ini, perhatikan kode warna merah, itu adalah kode yang harus anda copy dan pastekan sesuai dengan pola 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 kode di dalam <b: includable id='mobile-index-post' var='post'>...</b:includable> (hapus isinya saja, kerangkanya jangan), lalu ganti dengan kode 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 agar dinamis dan SEO friendly.
Dan ikuti juga :

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