Untuk mengubah dan mengganti kalimat ‘Read more »’ atau ‘Baca selengkapnya »’ dengan menggunakan sebuah gambar berbentuk tombol read more adalah dengan
cara mengganti salah satu kode HTML dari template yang dipakai dengan memanfaatkan editor template. Dalam hal ini yang perlu dilakukan setelah login ke akun blogger dan kemudian mengeklik nama blog yang templatenya akan di-edit adalah sebagai berikut:
cara mengganti salah satu kode HTML dari template yang dipakai dengan memanfaatkan editor template. Dalam hal ini yang perlu dilakukan setelah login ke akun blogger dan kemudian mengeklik nama blog yang templatenya akan di-edit adalah sebagai berikut:
- Klik menu ‘Template’;
- Klik tombol ‘Edit HTML’ dan kemudian klik tombol ‘Lanjutkan’;
- Klik kotak yang terdapat di depan pilihan ‘Expand Template Widget’ sehingga muncul tanda checklist.
- Tekan tombol keyboard Ctrl + F untuk mencari kode HTML <data:post.jumpText/>;
- Ganti kode <data:post.jumpText/> dengan kode di bawah ini:
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjixdxvvaBPme_EU2BmGYEdZfmWn0not4zrxB-LsvnHJrDNkTrdYudUBtRNg9TrovcV4OGs5AzfjDVuJx8R3dNb1SllCCZ6hA08qHM2F1_UPMxqB-RitZt6VrpWChnvhIPyauN14jmE_3o/s800/Read%252520More.png'/>
Sehingga akan mengubah kalimat ‘Read more »’ atau ‘Baca selengkapnya »’ dengan gambar tombol read more seperti pada gambar di bawah ini.
- Simpan template.
Namun dengan menggunakan cara tersebut, secara default gambar tombol read more akan ditampilkan pada bagian kiri halaman posting (rata kiri). Sehingga bila ingin menempatkan gambar tombol read more tersebut pada bagian kanan halaman posting, maka terlebih dahulu anda mencari kode <b:if cond='data:post.hasJumpLink'> yang terdapat pada template/edit HTML, kemudian sisipkan kode dibawah ini tepat di bawah code <b:if cond='data:post.hasJumpLink'>.
Jika sudah silahkan klik simpan template dan lihat hasilnya.
Tips: sebenarnya kita bisa mengubah bentuk atau image button/tombol sesuka kita, hanya kalian persiapkan image untuk tombol yang kira kira berukuran widht: 82px dan height: 27px. kemudia upload dan ambil direct linknya kemudian replace link gambar tombol pertama sperti dibawah ini
<div style='text-align: right;'>
<div class='baca_selengkapnya'>
buah tag </div> untuk menutup kode di tersebut tepat di atas kode </b:if>, sehingga rangkaian kode akhirnya menjadi seperti kode di bawah ini.<b:if cond='data:post.hasJumpLink'>
<div style='text-align: right;'>
<div class='baca_selengkapnya'>
<div class='jump-link'>
<b><a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a></b>
</div>
</div>
</div>
</b:if>
Tips: sebenarnya kita bisa mengubah bentuk atau image button/tombol sesuka kita, hanya kalian persiapkan image untuk tombol yang kira kira berukuran widht: 82px dan height: 27px. kemudia upload dan ambil direct linknya kemudian replace link gambar tombol pertama sperti dibawah ini
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjixdxvvaBPme_EU2BmGYEdZfmWn0not4zrxB-LsvnHJrDNkTrdYudUBtRNg9TrovcV4OGs5AzfjDVuJx8R3dNb1SllCCZ6hA08qHM2F1_UPMxqB-RitZt6VrpWChnvhIPyauN14jmE_3o/s800/Read%252520More.png'/>
ganti tulisan yang berwarna hijau dengan link image button yang sudah kalian upload.
mungkin hanya itu ilmu yang dapat saya share dari pengalaman menyedihkan saya memodifikasi template, semoga bermanfaat untuk kita semua.
Di kutip dari: http://eltelu.blogspot.com/2012/01/membuat-tombol-read-more-tanpa-ribet.html
http://ilmudi.blogspot.com/2012/05/cara-membuat-tombol-read-more-dengan.html
Posting Komentar