Kreasi Tombol Readmore [Kode HTML]

Kreasi Kode HTML Tombol Readmore

Sebelumnya buat gambar untuk readmore dengan title file .png

Upload kreasi gambar yang sudah anda buat, kemudian kopi alamat gambar tersebut (copy image url)

Contoh:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPKexkKQ7jNB4sDkYU2B6NMWGnEGS9TBqdASVDZ9k5oDjB0iqHZIfG8jm3CTQrgygr4Cpp6GFZSasP60npNwSdKK-S0gWQK5B74wUQTrim_5YUthf4eDWratyVxcOrLVdWb-C81_7KMKM/s1600/pic+More. Png

kemudian lengkapi kode menjadi sebagai berikut:

Kode:

<img alt='more' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvu42XgqZI4fcHc4ZD5ucUjHfvQmrwiuy30TauhTEpLm8Pkp7Lk5ker5hJISk_C7IM4HEJn6rtSiNObHICO92zvCvq5QHjdNrNlHu3Yw_qRtvEUSpayK7O91Wb4_QeK7JqP8oDj8RM9af8/s1600/read-more.png' title='read more'/>

Kode:

<img alt='more' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPKexkKQ7jNB4sDkYU2B6NMWGnEGS9TBqdASVDZ9k5oDjB0iqHZIfG8jm3CTQrgygr4Cpp6GFZSasP60npNwSdKK-S0gWQK5B74wUQTrim_5YUthf4eDWratyVxcOrLVdWb-C81_7KMKM/s1600/pic+More. png' title='read more'/>

Edit di Blogger dengan kode Html

Untuk mengaplikasikan pada blog Anda, silahkan ikuti tahapan berikut:

1. Login di ID blog anda.
2. Pilih Design.
   
3. Pilih Edit HTML.
   
4. Jgn lupa backup template Anda lebih dulu dengan pilih Download Full Template.
   
5. Beri tanda dikotak kecil Expand Widget Templates.
6. Cari kode  ]]></b:skin>
7. Copy dan paste kode berikut sebelum kode ]]></b:skin>

.jump-link a img{

  border:0;

  float:right;

  margin:10px 0;

}

8. Cari Kode yang kira-kira seperti ini ( tidak template memiliki kesamaan kode):

<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>

9. Hilangkan kode  <data:post.jumpText/> dan ganti dengan kode HTML dan kode gambar “tombol read more”.

Contoh:

<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><img alt='more' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvu42XgqZI4fcHc4ZD5ucUjHfvQmrwiuy30TauhTEpLm8Pkp7Lk5ker5hJISk_C7IM4HEJn6rtSiNObHICO92zvCvq5QHjdNrNlHu3Yw_qRtvEUSpayK7O91Wb4_QeK7JqP8oDj8RM9af8/s1600/read-more.png' title='read more'/></a>

10. Kemudian Simpan Template
11. Selesai dengan Mudah

Bagaimana cara menempatkannya??, Pada edit post, Artikel yang anda muat harus menggunakan Jump break atau read more function. 

Yaitu memotong artikel yang telah anda Muat sebelum Publish Post anda lakukan,
Cukup klik ikon yang bergambar seperti disamping pada kalimat yang hendak dipotong/
dipisahkan..dengan sendirinya akan ditandai garis pemisah.
Otomatis tombol readmore Anda akan terlihat dipojok kanan bawah post.

Namun Jika hanya ingin menggunakan teks “read more”, Anda dapat mengganti "Readmore" dengan “Baca selengkapnya”, “Read Detail” atau yang lain menurut ide anda.

Langkah untuk menggunakan teks  "Readmore" tersebut adalah sebagai berikut:

1. Login di ID Blog Anda.
2. Pilih Design/ Rancangan.
   
3. Pilih Page Elements/ Element halaman.
   
4. Arahkan pada kotak Post dan pilih Edit Blog Post.
   
5. kemudian pilih Post page link text: isi kotak tersebut dengan Read more, Atau Baca selengkapnya  atau yang lain menurut yang anda sukai. 
6. Simpan.
7. Selesai