 |
| 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..
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,
Radmore di ikuti dengan judul postingan
Radmore di ganti dengan banner
Jika sobat ingin memakai readmore banner ini,,, gunakan/isi 'URL gambarmu', dengan alamat <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeYO8ft5lOZnplrapnia8f8LP3mT_WOYhLzAwArP3S9Vje1VyJjiz27sg0bS6YT5ELjU1lOe-gZ2oUcFl2L1T4iuUM-QNcHZwvm1031qlTZh9uhTqyGS_67Jad1mq4rxXegRNZeJPHYmU/[1].png' alt='read more'/>
Maka jika digabungkan hasilnya akan menjadi seperti 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:
7. setelah itu save template,, coba sekarang lihat hasilnya...
Thanx to: kang rohman
sebagai dasar pengetahuan dulu, kode readmore blogger seperti ini..
<b:if cond='data:post.hasJumpLink'>Nah setelah mengetahui kode dasarnya.. mari kita ubrak-abrik sedikit kodenya biar agak menarik,,
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if>
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'>Atau readmore ingin terlihat tebal
<div class='jump-link'>
<div style='float:right;padding:10px 0px 5px 0px'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</div>
</b:if>
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<strong><a expr:href='data:post.url + "#more"'><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 + "#more"'><data:post.jumpText/> → 
<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 + "#more"'><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/AVvXsEjeYO8ft5lOZnplrapnia8f8LP3mT_WOYhLzAwArP3S9Vje1VyJjiz27sg0bS6YT5ELjU1lOe-gZ2oUcFl2L1T4iuUM-QNcHZwvm1031qlTZh9uhTqyGS_67Jad1mq4rxXegRNZeJPHYmU/[1].png' alt='read more'/>
Maka jika digabungkan hasilnya akan menjadi seperti ini...
<b:if cond='data:post.hasJumpLink'>Sekarang untuk menggunakan fungsi ini,
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><img src='<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeYO8ft5lOZnplrapnia8f8LP3mT_WOYhLzAwArP3S9Vje1VyJjiz27sg0bS6YT5ELjU1lOe-gZ2oUcFl2L1T4iuUM-QNcHZwvm1031qlTZh9uhTqyGS_67Jad1mq4rxXegRNZeJPHYmU/[1].png' alt='read more'/>' alt='read more'/></a>
</div>
</b:if>
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'>6. kemudian pilih kode-kode html yang akan di pasang, atau silahkan berkreasi sendiri, dan tempatkan di bawah kode "pada no.5"...
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
7. setelah itu save template,, coba sekarang lihat hasilnya...
Thanx to: kang rohman
