Memindahkan Judul Posting ke Samping Gambar Thumbnail Auto ReadMore

Baca Juga

Cara Memindahkan Posisi Judul Posting di Atas Gambar Thumbnail ke Samping (Auto ReadMore).

SECARA default,  saat kita membuat auto readmore di halaman depan blog, baik pake javascript maupun tanpa javascript, maka posisi judul ada di atas gambar thumbnail dan ringkasan (snippet), seperti di tempalet seo friendly terbaru NJW Simple:

Nah, bagaima jika kita ingin memindahkan judul posting ke samping kanan gambar, sehingga gambar, judul, dan ringkasan sejajar? Contohnya, ya... Auto ReadMore di homepage blog CB ini.

Kita ambil contoh di template seo friendly terbaru, NJW Simple. Judul posting auto readmorenya ada di atas gambar. Kita pindahkan judul postingnya ke samping gambar, jadinya seperti ini:

BAGAIMANA CARANYA?
Kita tinggal memindahkan kode Image Thumbnail :

<b:if cond='data:post.title'> .... </b:if>

ke atas kode judul posting (h2)

<b:if cond='data:post.title'>

Sehingga susunannya seperti berikut ini:

<b:if cond='data:post.thumbnailUrl'>
  <a expr:href='data:post.url'><img alt='thumbnail' class='post-thumbnail' expr:src='data:post.thumbnailUrl'/></a>
<b:else/>
  <a expr:href='data:post.url'><img alt='thumbnail' class='post-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmlanN1HQQOnToD6eCTuEaBOrm71oIvGuaEZHazMrhnc5atmKip9GZQdtc1SaqQNDag1RAvK4-o5mEeptFvRYv1cf-YAyVX5gkd_NBAXOjvSZQRhpXEPyiYy18MpeLx2-O9Hxa8BC2akA/s72-c/default.png'/></a>
</b:if>
<b:if cond='data:post.title'>
      <h2 class='post-title entry-title'>

MASALAH
Masalahnya, di template NJW Simple itu, jika kita pindahkan judul ke samping gambar, ringkasan postingnya jadi "kebanyakan". Tentu, harus dikurangi.

Selain itu, "postmeta" atau "post info" juga sedikit mengganggu pemandangan, baiknya disembunyikan saja (display:none). Judul tulisan juga dikecilkan dikit. Seperti ini:

Lebih rapi dan bagus 'kan?

Cara ini diujicoba dan berhasil di NJW Simple. Kalo mau dicoba di template Anda, silakan, semoga berhasil.

Jika gak mau pusing-pusing mengubah Judul Posting ke Samping Gambar Thumbnail, silakan gunakan Layanan Premium CB. Silakan pilih, mode auto readmore halaman depannya mau seperti gambar yang kedua atau yang ketiga.

CARA LAIN
Jika cara di atas tidak berhasil, Anda bisa coba tips "rumit" dari DTE. Sama, yaitu memindahkan judul posting ke samping image thumbnail di auto readmore halaman depan blog. Good luck! (http://www.contohblog.com).*