Sebagai dasar pengetahuan, kode read more blogger adalah seperti ini :
<b:if cond='data:post.hasJumpLink'>Dengan mengetahui kode dasarnya, maka tentu saja kita dapat membuat berbagai kreasi.
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if>
* Agar read more tampil di sebelah kanan
Secara default " Read more " akan tampil di sebelah kiri. Jika anda berkeinginan agar read more tampil di sebelah kanan, anda bisa menambahkan kode tambahan seperti ini :
<b:if cond='data:post.hasJumpLink'>Atau jika anda lebih suka memasang pada CSS, bisa seperti ini ;
<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>
Simpan ini di atas kode ]]></b:skin>
.readmore { float:right;padding: 10px 0px 5px 0px; }dan pasang ini di bagian body nya ;
<b:if cond='data:post.hasJumpLink'>* Agar Read more ditampilkan tebal
<div class='jump-link'>
<div class='readmore'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</div>
</b:if>
Agar tampilan "Read more »" atau " Read more » " bisa tampil dengan huruf tebal, anda cukup menambahkan kode <strong>Read more »</strong> atau <b>Read more » </b>. Contoh :
<b:if cond='data:post.hasJumpLink'>* Agar Read more tampil plus Judul Posting
<div class='jump-link'>
<strong><a expr:href='data:post.url + "#more"'><data:post.jumpText/></a> </strong>
</div>
</b:if>
Tulisan read more anda bisa tampil bersama dengan tulisan judul posting anda, contoh kodenya bisa seperti ini :
<b:if cond='data:post.hasJumpLink'>* Agar Read more diganti dengan banner
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/> → 
<data:post.title/></a>
</div>
</b:if>
Apabila anda menganggap tampilan huruf kurang menarik, anda bisa menggantinya dengan dengan tombol atau banner, misal banner seperti ini :
Format kodenya seperti ini ;
<b:if cond='data:post.hasJumpLink'>Contoh nyata seperti ini :
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><img src='URLgambarmu' alt='read more'/></a>
</div>
</b:if>
Dan anda bisa menciptakan puluhan atau bahkan ratusan kreasi untuk tampilan read more ini agar blog anda tampil menarik.<b:if cond='data:post.hasJumpLink'><div class='jump-link'><a expr:href='data:post.url + "#more"'><img src='http://lh3.ggpht.com/_pt7i0nbIOCY/SfWbi-PiffI/AAAAAAAAB5k/0ReSxni_N14/more_thumb[1].png' alt='read more'/></a></div></b:if>
Masih pusing dimana menempatkan hasil kreasi read more mu? berikut gambaran langkah-langkahnya :
1. Silahkan login ke blogger dengan ID anda.
2. Klik Tata Letak.
3. Klik tab Edit HTML.
4. Beri tanda centang pada kotak kecil di sampil tulisan " Expand Template Widget "
5. Carilah kode yang mirip seperti Ini :
<div class='post-body entry-content'>6. Silahkan ganti kode di atas dengan hasil kreasimu seperti yang di contohkan kang rohman tadi di atas.
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
7. Klik tombol SIMPAN TEMPLATE
8. Selesai.
Selamat berkreasi!
Editing Post : Zamrudblog.blogspot.com - of Daw-xp.blogspot.com
Posting Komentar