Modifikasi Tampilan Read more



Pada pembahasan kali ini akan mempelajari tentang bagaimana caranya customization / modifikasi tampilan read more di homepage blog. Kita bisa merubah segala sesuatu yang kita inginkan sesuai selera kita.

Disini DAW-XP hanya akan berbagi sedikit yang diperlukan tentang code HTMLnya, selain dari itu silahkan sobat blogger kreasikan sendiri. Walaupun sudah ada fungsi Insert jump break pada post editor untuk melakukan fungsi auto read more, namun itu hanya akan berfungsi pada templates pendukung langsung dari blogger dan kemungkinan tidak akan mendukung dari templates lain.

Sebelumnya Saya harus berterima kasih kepada Kang Rohman karena telah memberikan ilmu pengetahuannya dan sharing sehingga kami bisa. Nah sekarang ikuti tutorial berikut tentang bagaimana cara modifikasi tampilan read more.

Sebagai dasar pengetahuan, kode read more blogger adalah 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>
Dengan mengetahui kode dasarnya, maka tentu saja kita dapat membuat berbagai kreasi.

* 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'>
<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 jika anda lebih suka memasang pada CSS, bisa seperti ini ;

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'>
<div class='jump-link'>
<div class='readmore'>




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




</div>
</b:if>
* Agar Read more ditampilkan tebal

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'>
<div class='jump-link'>
<strong><a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a> </strong>
</div>
</b:if>
* Agar Read more tampil plus Judul Posting

Tulisan read more anda bisa tampil bersama dengan tulisan judul posting anda, contoh kodenya bisa seperti ini :


<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>
* Agar Read more diganti dengan banner

Apabila anda menganggap tampilan huruf kurang menarik, anda bisa menggantinya dengan dengan tombol atau banner, misal banner seperti ini :


mengganti read 
more dengan gambar
Format kodenya seperti ini ;


<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>
Contoh nyata seperti ini :


<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;'>
<img src='http://lh3.ggpht.com/_pt7i0nbIOCY/SfWbi-PiffI/AAAAAAAAB5k/0ReSxni_N14/more_thumb[1].png' 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.

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 "


mengganti read 
more dengan gambar
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. Silahkan ganti kode di atas dengan hasil kreasimu seperti yang di contohkan kang rohman tadi di atas.
7. Klik tombol SIMPAN TEMPLATE
8. Selesai.

Selamat berkreasi!

Ingin Berlangganan Artikel Terbaru ke email kamu? Masukan Email kamu disini:

Tidak tahu cara berlangganan? Klik disini

Related Post:

Anda sedang membaca artikel tentang Modifikasi Tampilan Read more dan anda bisa menemukan artikel Modifikasi Tampilan Read more ini dengan url http://daw-xp.blogspot.com/2011/04/modifikasi-tampilan-read-more.html, anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Modifikasi Tampilan Read more ini sangat bermanfaat bagi teman-teman anda, namun jangan lupa untuk meletakkan link Modifikasi Tampilan Read more sumbernya.


4 comments

andi April 2, 2011 at 8:11 PM

boleh juga untuk di coba ...salam kenal bos....mantap blognya...

Reply delete
Deny Arya Wiranata April 2, 2011 at 8:28 PM

@Andi
Salam kenal jg bos, silahkan dicoba.

Reply delete
doesa January 16, 2012 at 10:40 PM

gan makasih buat tips nya,, dah lama ane cari cara mengganti readmore punya ane biar jadi dalam gambar namun gagal semua baru tips dari agan berhasil nya, makasih ya gan tipsnya

Reply delete
hezty tatawarna December 25, 2013 at 5:48 PM

berarti dijadi'in kayak button download gitu ya ?? :O

Reply delete

Post a Comment

Silahkan Anda kritik dan sarannya pada kolom komentar di bawah ini. Karena setiap satu kata Anda berkomentar sangat berarti untuk kemajuan blog ini (baca: Cara Berkomentar yang Baik).

 

Site Info

  • Fortuner SUV Terbaik
  • Commonwealth Life Perusahaan Asuransi Jiwa Terbaik Indonesia
  • Cincin Kawin
  • PageRank

    Followers

    back to topReturn to top of page Copyright © 2012 | Blog SEO DAW - XP | Tutorial Blogspot | Belajar SEO Blogspot - Privacy Policy Template by Hack Tutors