Cara Memasang Tombol Button Read More Atau Baca Selengkapnya Pada Blog

Cara Memasang Tombol Button Read More Atau Baca Selengkapnya Pada Blog - Dengan memanfaatkan tombol ‘Insert jump break’ yang terdapat pada editor blogger, dan akhirnya menjadikan artikel terpenggal dengan kalimat ‘Read more »’ atau ‘Baca selengkapnya »’, maka pada artikel ini diuraikan tentang bagaimana cara untuk mengganti kalimat ‘Read more »’ atau ‘Baca selengkapnya »’ tersebut dengan sebuah gambar berbentuk tombol read more seperti halnya yang tampak pada gambar tombol read more di atas.

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 :

1.   Klik menu ‘Template’;

2.   Klik tombol ‘Edit HTML’ dan kemudian klik tombol ‘Lanjutkan’;

3.   Klik kotak yang terdapat di depan pilihan ‘Expand Template Widget’ sehingga muncul  tanda checklist.

4.   Tekan tombol keyboard Ctrl + F untuk mencari kode HTML 

5.   Ganti kode  dengan kode di bawah ini :

" Click Kanan Button Ini Lalu Salin URL/Copy URL Khusus Tombol Button Di Bawah Tulisan Ini"

"Copy Paste Code Di Bawah Tombol Button Yang Kalian Suka"

/*---------- Black --------------*/ .pB-readmore{ background:#000800; text-align:right; cursor:pointer; color:#fff; margin:5px 0; float:right; border:2px solid #ddd; padding:5px; -moz-border-radius:6px; -webkit-border-radius:6px; font:bold 11px sans-serif; } .pB-readmore:hover{ background:#fff; font:bold 11px sans-serif; color:#000800; border:2px solid #000800; } .pB-readmore a { color:#fff; text-decoration:none; } .pB-readmore a:hover { color:#fff; text-decoration:none; }




/*---------- Orange ------------*/ .pB-readmore{ background:#EB7F17; text-align:right; cursor:pointer; color:#fff; margin:5px 0; float:right; border:none; padding:5px; -moz-border-radius:6px; -webkit-border-radius:6px; font:bold 11px sans-serif; } .pB-readmore:hover{ background:#FFB93C; } .pB-readmore a { color:#fff; text-decoration:none; } .pB-readmore a:hover { color:#fff; text-decoration:none; } 

/*------------ White + Green -----------*/ .pB-readmore{ background:#fffff; text-align:right; cursor:pointer; color:#008000; margin:5px 0; float:right; border:2px solid #ddd; padding:5px; -moz-border-radius:6px; -webkit-border-radius:6px; font:bold 11px sans-serif; } .pB-readmore:hover{ background:#008000; font:bold 11px sans-serif; color:#fff; border:2px solid #ddd; } .pB-readmore a { color:#fff; text-decoration:none; } .pB-readmore a:hover { color:#fff; text-decoration:none; } 

/*-------------- Blue Blank-----------------*/ .pB-readmore{ background:#0080ff; text-align:right; cursor:pointer; color:#Fff; margin:5px 0; float:right; border:2px solid #ddd; padding:5px; -moz-border-radius:6px; -webkit-border-radius:6px; font:bold 11px sans-serif; } .pB-readmore:hover{ background:#FFf; font:bold 11px sans-serif; color:#0080ff; border:3px dotted #ddd; } .pB-readmore a { color:#fff; text-decoration:none; } .pB-readmore a:hover { color:#fff; text-decoration:none; }

/*-------------- Pink Left right -----------*/ .pB-readmore{ background:#fff; text-align:right; cursor:pointer; color:#FE80DF; margin:5px 0; float:right; border-right:2px solid #FE80DF; border-left:2px solid #FE80DF; padding:5px; -moz-border-radius:6px; -webkit-border-radius:6px; font:bold 11px sans-serif; } .pB-readmore:hover{ background:#fff; font:bold 11px sans-serif; color:#CC0099; border-right:2px solid #CC0099; border-left:2px solid #CC0099; } .pB-readmore a { color:#fff; text-decoration:none; } .pB-readmore a:hover { color:#fff; text-decoration:none; } 

6. 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 cari kode 

kemudian ganti dengan  kode  

Selamat mencoba, kalau belum jelas silakan bertanya pada kolom komentar yang ada dibawah tulisan ini.