October 21, 2015

Memindahkan Judul Posting ke Samping Gambar Thumbnail Auto ReadMore

October 21, 2015

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:

Judul Posting atas Gambar Thumbnail Auto ReadMore


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:

Judul Posting Samping Gambar Thumbnail Auto ReadMore

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:

Judul Posting Samping Gambar Thumbnail Auto ReadMore

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).*

Previous
« Prev Post
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

3 comments on Memindahkan Judul Posting ke Samping Gambar Thumbnail Auto ReadMore

  1. berhasil gan. thanks ya

    ReplyDelete
  2. terimaksih ya gan saya juga berhasil gan

    ReplyDelete
  3. mas, saya kok gak masih bingung dengan caranya ya..
    bisa buatkan lebih lengkap sama gambarnya?


    soalnya saya lihat kode thumbnail saya memang udah di atas kode judul posting..

    tolong banget mas.
    alamat blog di bangnasti(titik)id

    saya pakai template default blog

    ReplyDelete

Contact Form

Name

Email *

Message *