Cara Menciptakan Auto Readmore - Meringkas Goresan Pena Halaman Depan Blog - Fezarzone

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 ialah 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 sesudah membuat blog di blogger Anda memakai template bawaan blogger, maka tampilan di halaman utama blog Anda berupa goresan pena penuh (full post). Di bawah ini ialah cara meringkasnya secara otomatis yang disebut menciptakan auto read more blogger.

Demonya dapat 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 menyerupai 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 menciptakan auto read more dengan judul sejajar dengan gambar, namun cukup ribet juga mengeditnya semoga 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 berjulukan Simple.

Langkah berikutnya:
1. Klik Tema > Edit HTML
2. Copas arahan CSS berikut ini, impan di atas arahan </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 arahan warna merah ialah 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 arahan <data:post.body/> yang kedua dengan arahan 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 komplemen teks Read more di bawahnya, maka tambahkan arahan berikut ini di bawah arahan <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 arahan tersebut, ada arahan 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 arahan tersebut dengan arahan 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 kalau dilakukan dengan benar. Sebelum saya share, tips Cara Membuat Auto Readmore  (Meringkas Tulisan Halaman Depan Blog) ini sudah diterapkan dan berhasil.

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

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

Itu ia 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).* Sumber https://www.romelteamedia.com