Readmore Berganti Menjadi Gambar - Inspirasi Generasi Milenial Mewujudkan Mimpi

Tuesday, 30 July 2019

Readmore Berganti Menjadi Gambar

 

Cara Mengganti Tulisan Read More Pada Blog Dengan Gambar

Sobat OW| tercinta....

Read More merupakan salah satu cara untuk bisa menampilkan ringkasan dari beberapa postingan yang ada pada sebuah blog agar bisa tampil menjadi satu halaman awal.

Bnayak modifikikasi readmore yang bisa kita jumpai dan kita temukan di sebuah blog. Ada yang menggantinya dengan tulisan lain seperti Selanjutnya, Berikutnya, Selengkapnya dan ada pula yang lainnya.

Kali ini, Admin akan coba bagikan mengenai Mengganti Tulisan Read More Dengan Gambar. Jadi Read More yang kita bahas diatas tadi kita gantikan posisinya dengan sebuah gambar. Gambar apa yang mau kita gunakan..? Itu terserah Sobat CC semua untuk menempatkan gambar sebagai pengganti read more tadi.
Baik, langsung saja... Berikut tahapan yang akan kita jalani bersama dalam mengganti Read More dengan sebuah gambar.
1. Buat gambar terlebih dahulu yang akan kita gunakan sebagai pengganti readmore tadi direkomendasikan ukurannya 130x50 pixel.

2. Upload Gambar yang sudah kita buat tadi ke Draft Postingan Sobat pad Blogger yang Sobat miliki layaknya Sobat membuat postingan seperti biasanya namun tidak di publish kan hanya disimpan saja.
3. Copy link dari gambar yang sudah Sobat upload tadi dengan cara klik kanan gambar, lalu pilih open in new tab sehingga pada bilah bar alamat dibagian atas browser yang Sobat gunakan bisa terlihat dan didapatkan link alamat dari gambar yang telah Sobat upload tadi, silahkan di copy.
4. Masuk ke akun blogger
5. klik Template
6. lalu pilih Edit HTML kemudian klik Lanjutkan
7. selanjutnya centang pada kotak Expand Template Widget
8. Lalu cari kode berikut <data:post.jumpText/>, untuk mempercepat pencarin gunakan CTRL+F lalu ketikan <data:post.jumpText/>

sehingga akan muncul kode seperti berikut


<b:if cond='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>

lihat kode yang berwarna kuning, ganti dengan kode <img src="ISI DENGAN URL GAMBAR"/> pada kode ini ganti tulisan yang berwarna hijau dengan url gambar yang ingin di jadikan icon / gambar pada Read More
9. Klik Pratinjau jika tulisan Read More pada tab baru yang terbuka telah terganti dengan gambar maka langkah kita telah berhasil.
10. Jika berhasil klik Simpan Template.

Demikian informasi Mengenai Cara Mengganti Tulisan Read More Denagn Gambar yang bisa Admin bagikan, terima kasih atas kunjungannya dan dinantikan kunjungan berikutnya....

Semoga bermanfaat....

No comments:
Write komentar