Cara Membuat Auto Readmore - Meringkas Tulisan Halaman Depan Blog.

Summary: Cara Membuat Auto Readmore -Mengubah Halaman Depan Blog Menjadi Ringkas (Post Snippet plus Gambar Thumbnail). Posisi judul posting sejajar dengan gambar thumbnail (judul di samping image).

Auto Read More adalah sebutan bagi tampilan halaman depan (homepage) dan halaman label (label pages) blog berupa judul, gambar thumbnail, dan ringkasan posting (snippet/summary) yang diambil dari alinea pertama tulisan.

Jika setelah membuat blog di blogger Anda menggunakan template bawaan blogger, maka tampilan di halaman utama blog Anda berupa tulisan penuh (full post). Di bawah ini adalah cara meringkasnya secara otomatis yang disebut membuat auto read more blogger.

Demonya bisa dilihat di halaman depan blog ini, atau jurnalistik template, atau blog Ahmad Fulan. Ini penampakkannya:


Tips Cara Membuat Auto Readmore berikut ini akan menghasilkan tampilan halaman depan blig seperti di atas. Gambar sejajar dengan judul posting atau judul di samping gambar thumbnail.

Sudah banyak Cara Membuat Auto Readmore, namun kebanyakan kodenya menghasilkan tampilan judul di atas gambar atau image di bawah judul.

Ada sih beberapa tips membuat auto read more dengan judul sejajar dengan gambar, namun cukup ribet juga mengeditnya agar tampilan sesuai selera.

Kode berikut ini saya modifikasi dari kode-kode yang sudah beredar dan viral di kalangan blogger, diutak-atik (modif) dengan mengintip kode-kode auto read more yang menampilkan judul sejajar gambar.

Cara Membuat Auto Readmore - Meringkas Tulisan Halaman Depan Blog.

Langsung saja. Langkah awal banget, pilih dulu atau ganti template blog Anda dengan template bawaan blogge yang bernama Simple.



Langkah berikutnya:
1. Klik Tema > Edit HTML
2. Copas kode CSS berikut ini, impan di atas kode </head>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style>
.thumb img {float: left;margin: 0 20px 5px 0;width: 180px;height: 110px;box-shadow:0;border:0;padding:0;background:#fff}
h2.post-title {font-size: 18px;margin-bottom: 8px;}
.post-body {font-size: 97%;line-height:1.3;position: relative;}
.post-footer {display:none}
.post {margin: 0 0 15px 0;border-bottom: 1px solid #f1f1f1;padding-bottom: 15px;}
</style>
</b:if>
</b:if>

Angka di kode warna merah adalah ukuran gambar. Bisa diubah menjadi lebih kecil atau lebih besar. Jika ingin gambar penuh, ubah saja keduanya jadi 100%.

3. Cari (Ctrl+F) dan ganti kode <data:post.body/> yang kedua dengan kode berikut ini.

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.snippet'>
<b:if cond='data:post.thumbnailUrl'>
<div class='Image thumb'>
<img expr:src='data:post.thumbnailUrl'/>
</div>
</b:if>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

    <b:if cond='data:post.title'>
      <h2 class='post-title entry-title' itemprop='name'>
      <b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'>
        <a expr:href='data:post.link ? data:post.link : data:post.url'><data:post.title/></a>
      <b:else/>
        <data:post.title/>
      </b:if>
      </h2>
    </b:if>

</b:if>
</b:if>
<data:post.snippet/>
<b:else/>