kostumasi raadmore

read more

Sebelumnya zoel pernah posting tentang sebagai konsep dasar suatu readmore, sekarang kita akan membahas tentang kelanjutan dari sekedar tampilan tulisan readmore sederhana, disini kita akan memberikan sesuatu yang beda dari readmore, agar blog kita bisa lebih cantik dilihatnya.


sebagai dasar pengetahuan dulu, kode readmore blogger seperti ini..

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a>
</div>
</b:if>

Nah setelah mengetahui kode dasarnya.. mari kita ubrak-abrik sedikit kodenya biar agak menarik,,

Readmore akan tampil disebelah kanan>>
Secara default memang readmore terletak disebelah kiri, untuk itu jika ingin di simpan di sebelah kanan, bisa gunakan kode seperti ini,

<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>
</b:if>

Atau readmore ingin terlihat tebal

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<strong><a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a></strong>
</div>
</b:if>

Radmore di ikuti dengan judul postingan

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/>&#160;&#8594;&#160;
<data:post.title/></a>
</div>
</b:if>

Radmore di ganti dengan banner

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;'><img src='URLgambarmu' alt='read more'/></a>
</div>
</b:if>

Jika sobat ingin memakai readmore banner ini,,, gunakan/isi 'URL gambarmu', dengan alamat <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhym1xETNbCVW15C3srQ9En744DSWpBckjS4fHFXkzpcmnWk5nHAL0rAj4lV_x0-ln2Gh8yOb52MkCbwdc-CuCmr0FbSGxdLHC5g4WIdiWimexmPZohPPnDa9bhbP7A5GsaRZmrl7cELW8/[1].png' alt='read more'/>

Maka jika digabungkan hasilnya akan menjadi seperti ini...

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;'><img src='<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhym1xETNbCVW15C3srQ9En744DSWpBckjS4fHFXkzpcmnWk5nHAL0rAj4lV_x0-ln2Gh8yOb52MkCbwdc-CuCmr0FbSGxdLHC5g4WIdiWimexmPZohPPnDa9bhbP7A5GsaRZmrl7cELW8/[1].png' alt='read more'/>' alt='read more'/></a>
</div>
</b:if>

Sekarang untuk menggunakan fungsi ini,
1. login di blogger sobat

2. Setelah dashboard -> Layout

3. Edit HTML,,

4. centang kotak kecil bertuliskan "expand template widget",

5. carilah kode yang mirip seperti ini:
    

<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

6. kemudian pilih kode-kode html yang akan di pasang, atau silahkan berkreasi sendiri, dan tempatkan di bawah kode "pada no.5"...

7. setelah itu save template,, coba sekarang lihat hasilnya...

Thanx to: kang rohman