Read More Blogspot dengan Gambar

Kemarin kita sudah membahas bagaimana memodifikasi tampilan Read More atau Jump breaks blogspot, agar terlihat lebih menarik. Nah, sekarang Rhafa akan mengajak kalian untuk memodifikasinya dengan menggunakan gambar.

Sebelum kita mulai memodifikasinya, sebaiknya kita persiap kan gambar yang akan di gunakan sebagai Read More artikel kita. Rhafa sudah menyediakan gambar-gambar yang bisa di gunakan untuk memodifikasi Read More Blogspot kita. berikut ini contoh dan Link untuk downloadnya.

Download

Jika kamu sudah memilih gambar yang sesuai dengan template blog kamu, upload gambar tesebut. Lalu buat tag HTML seperti contoh di bawah ini sebagai code HTML gambar kamu.

<img src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMzsIRhOfIWXIa9ciTeLGWzwGeL1TwQGppAEF-mf0GpGVTTuZUbwqcr3h-gBKL4_USGcI92wbR_PoNdheWBPm9JeoQBcktykQdjtfwwpxw-t9-9nvqrSFKt4-Y458-CL7aXVMaD3U7QSU/s1600/30-large-allblogtools.gif’ border=’0’ />

Ganti URL yang berwarna merah dengan URL gambar kamu. Lalu cari code HTML di bawah ini pada template kamu.

    <b:if cond=’data:post.hasJumpLink’>
      <div class=’jump-link’>
        <a expr:href=’data:post.url + "#more"’ expr:title=’data:post.title’><data:post.jumpText/></a>
      </div>
    </b:if>

Sekali lagi ganti code yang berwarna merah dengan code HTML gambar kamu. Sehingga menjadi seperti ini.

<a expr:href=’data:post.url + "#more"’ expr:title=’data:post.title’><img src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMzsIRhOfIWXIa9ciTeLGWzwGeL1TwQGppAEF-mf0GpGVTTuZUbwqcr3h-gBKL4_USGcI92wbR_PoNdheWBPm9JeoQBcktykQdjtfwwpxw-t9-9nvqrSFKt4-Y458-CL7aXVMaD3U7QSU/s1600/30-large-allblogtools.gif’ border=’0’ /></a>

Nah, sekarang Read More Blogspot kamu akan berubah menjadi gambar yang tadi kamu Upload ^_^