Cara Membuat Auto Readmore - Meringkas Tulisan Halaman Depan Blog

Baca Juga

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/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if></b:if>

Jika ingin ada tambahan teks Read more di bawahnya, maka tambahkan kode berikut ini di bawah kode <data:post.snippet/>

<b:if cond='data:post.jumpLink != data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>

4. Cari dan temukan kode   <a expr:name='data:post.id'/>

Di bawah kode tersebut, ada kode html judul posting berikut ini:

    <b:if cond='data:post.title'>
      <h3 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>
      </h3>
    </b:if>

Hapus dan ganti kode tersebut dengan kode ini:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <b:if cond='data:post.title'>
      <h1 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>
      </h1>
    </b:if>
</b:if>

Kode tersebut untuk mengubah heading tags judul halaman depan menjadi h2 dan halaman postingan menjadi h1. Baca juga: Cara Membuat Heading Tags Dinamis untuk SEO Blog.

5. Simpan Template!

Save template Anda. Lihat hasilnya. Jika gagal, coba lagi. Pasti berhasil jika dilakukan dengan benar. Sebelum saya share, tips Cara Membuat Auto Readmore  (Meringkas Tulisan Halaman Depan Blog) ini sudah diterapkan dan berhasil.

OPTIONAL
Ini kode untuk menyembunyikan tanggal di atas judul posting, icon obeng & tang, dan link subscribe. Simpan di atas kode ]]></b:skin>

.date-header,.quickedit,.feed-links {display:none}

Itu dia Cara Membuat Auto Readmore - Meringkas Tulisan Halaman Depan Blog. Ga mau capek? Ribet? Yawdah, pakai saja salah satu Koleksi Template Blog Simple Responsive Gratis. Wasalam. (www.romelteamedia.com).*