Memasang Readmore di Template Blogger dengan Button


read more blogger

Ada beberapa model 'readmore' yang dikembangkan oleh para blogger, baik itu model standar ataupun menggunakan javascript.

Berikut ini readmore yang saya kembangkan dari help google, yang menurut saya lebih mudah diterapkan:

1. Buka Edit HTML
2. Masukan script berikut di diatas :

untuk template klasilk :



untuk template baru (XML) :




3. Kode link readmore

Memasukan kode link readmore berikut ini persis dibawah kode <$BlogItemBody$> atau :

untuk template klasilk:



Read more!


untuk template baru (XML):



Read more!


4. Modifikasi readmore dengan button, versi blog saya (tahapan ini bisa anda abaikan langsung ketahapan 6):

ubah kode link readmore diatas dengan kode berikut:

Read more!

kemudian masukan kode CSS berikut diatas kode ]]> :

/* readmore */
.readmore a {
float : right;
font-family: "Lucida Grande", Arial, Helvetica, Sans-Serif;
font-size: 12px;
color: #fff;
background : #505050;
margin-top: 10px;
padding : 2px 15px; }

.readmore a:hover {
color:#fff;
background: #B13E2C; }

.readmore a:link { border-bottom:none; }

background : #505050; bisa anda rubah warnanya atau juga anda dapat ganti dengan menggunakan image.

5. Klik save template, tahapan di Edit HTML selesai.

6. Selanjutnya modifikasi readmore, saat melakukan posting:

Disini bagian awal postingan...........

dan ini penggalan postingan............


---
Berikut ini alamat artikel Readmore versi lain dengan menggunakan javascript:
- Cara pasang Auto Read More terbaru (Part 2)
- Read More Versi baru
- How can I make show/hide links for my posts?

Contoh Penerapan Button yang menarik:

5 Techniques to Style Buttons using Images and CSS

Read More :

bayu

for my son

Read More : bayu

grafity

coretan grafity di jalanan yang keren abizzzzzzzz

Read More : grafity

Gambar Grafity di jalanan yang Keren Abis

Grafity di jalanan yang Keren Abis

Read More :

berselancar adalh salah satu kegemaranku di waktyu liburan panjang

Read More :