Menambahkan Read More ……

Hai sobat bloger? Jumpa lagi dengan saya, tetap dalam dunia seputar blog. Setelah sekian lama browsing untuk menemukan metode yang tepat akhirnya kutemukan juga cara menambahkan tulisan “baca selengkapnya” atau “read more” yang dapat bekerja dengan baik. Dengan sedikit modifikasi kode html akhirnya saya mendapatkan hasil yang saya inginkan.

 

Langsung saja cikidot ......

 

1.       Login ke Blog anda

2.       Buka halaman design > Edit HTML > centang Expand template widget    

3.       Cari kode </head> gunakan CTRL + F untuk mempermudah pencarian. Paste kode berikut tepat dibawah </head>

 

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://script-bamz-us.googlecode.com/files/read-moreotomatis.js' type='text/javascript'/>

 

Ket:

1.    430 adalah banyak kata yang ditampilkan jika tidak ada gambar

2.    340 adalah banyak kata yang ditampilkan jika ada gambar

3.    100 dan 120 adalah tinggi dan lebar gambar yang ditampilkan jika di posting terdapat gambar. Untuk menjadikan gambar seperti aslinya ganti nilainya menjadi auto

 

4.       Selanjutnya cari kode <data:post.body/> atau <p><data:post.body/></p>  ( seperti biasan unakan CTRL + F untuk mempermudah pencarian. Jika ditemukan 2 kode yang sama, gunakan atau ganti yang pertama. Jika sudah ketemu silahkan anda ganti kode tersebut dengan kode dibawah ini

 

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div> <scripttype='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);

</script>

<span class='rmlink' style='float:right;padding-top:20px;'>

<a expr:href='data:post.url'>Baca selengkapnya....</a></span>

</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

 

5.       Kita bisa mengganti tulisan “Baca selengkapnya ....”  dengan kata-kata lain yang kita suka hanya dengan mengganti kata tersebut (perhatikan huruf warna merah)  

6.       Agan-agan juga bisa mengganti kata tersebut dengan icon atau gambar. Caranya ganti kata “Baca selengkapnya.....” dengan kode berikut

 

<img src="http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif"></img>

 

Jadi secara lengkap kodenya akan berubah menjadi

 

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div> <scripttype='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);

</script>

<span class='rmlink' style='float:right;padding-top:20px;'>

<a expr:href='data:post.url'><img src="http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif"></img></a></span>

</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

 

7.       Gimana sudah puas? .... kalo belum agan-agan juga bisa mengganti icon read more dengan icon agan sendiri. Caranya tinggal mengubah alamat icon pada kode tersebut

 

<img src="http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif"></img>

 

8.       Ganti alamat icon pada kode di atas dengan alamat icon yang agan punya. Sebagai contoh di blog ini ada beberapa icon beserta alamatnya. Silakan klik galery kemudian cari icon .....

 

Sekian semoga bermanfaat.....