Senin, 09 Mei 2011

Cara membuat Readmore / Baca Selengkapnya berada di tepi kanan

Read more atau baca selengkapnya merupakan suatu perintah dalam bentuk link yang mewakili pemenggalan paragraph dalam sebuah webpage. Dalam aktifitas blog readmore menjadi bagian yang sangat penting karena peranannya begitu besar mampu memenggal paragraph yang seharusnya ditampilkan satu halaman full menjadi terpotong. Pembaca bisa mendapatkan kelanjutan paragraph dengan mengklik readmore.
Secara default sebelum dimodifikasi, Blogger memberikan firut readmore dalam bentuk TextLink (bentuk tampilannya : Readmore>>) Bagi creator yang suka ngoprek penampilan blog ini sah-sah saja memodifikasinya dengan tulisan lain semisal: Baca Selengkapnya, Baca Selanjutnya, Seterusnya, dan lain-lain.

Bagi yang mahir bermain image dapat memodifikasi readmore ditampilkan dalam bentuk gambar.
Selain dari pada itu Blogger menempatkan readmore berada di sisi kiri, bagi yang suka dengan posisi ini bukanlah menjadi persoalan yang besar. Tapi buat yang tidak suka posisi di kiri, ada tips untuk memindah readmore agar berada di tepi kanan.

Kalau anda berminat silahkan ikuti pelajaran yang saya berikan tentang bagaimana cara menempatkan readmore agar berada di tepi kanan.
Caranya :
1. cari kode kode:

<div class='post-body entry-content'>
<data:post.body/>
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>

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

</b:if>

2. Perhatikan kode yang berwarna merah tebal
3. Tambahkan kode berikut ini:

<div style='float:right;padding:10px 0px 5px 0px'>

Tambahkan pula kode </div> sebelum kode </b:if>

3. Kalau sudah, jangan lupa diSave

Sehingga Urutan kode setelah ditambahkan, menjadi:

<div class='post-body entry-content'>
<data:post.body/>
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<div style='float:right;padding:10px 0px 5px 0px'>
<a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a>
</div>
</div>
</div>
</b:if>
 
Keterangan:
1. Kode yang berwarna biru adalah kode dalam template html
2. Dan Kode yang berwarna Ungu tebal adalah kode tambahan.

Penambahan style :
Float:right; mendefinisikan posisi suatu object yang diawali dari tepi kanan
Padding: 10px 0px 5px 0px; mendefinisikan jarak object dengan dinding pembatas
Urutannya dimulai dari atas, kanan, bawah dan berakhir di kiri. Sebagai patokan adalah mengikuti arah putaran jarum jam.

Selesai sudah pelajaran tentang cara menempatkan tulisan readmore agar berada di tepi kanan. Mudah-mudahan informasi singkat ini dapat berguna bagi pembaca semua.

 

2 komentar:

Exstacycop mengatakan...

Terimakasih Banyak Sob,Bagi2 trus Ilmunya Biar Tambah Pinter .

Arie W mengatakan...

ok,.. sm2 gan . . :)

:10 :11 :12 :13 :14 :15 :16 :17
:18 :19 :20 :21 :22 :23 :24 :25
:26 :27 :28 :29 :30 :31 :32 :33
:34 :35 :36 :37 :38 :39

Posting Komentar

Related Posts Plugin for WordPress, Blogger...