Panduan Pembuatan Read More (Lengkap)

Pada Postingan kali ini saya akan memberi sedikit tips untuk membuat readmore yang diminta oleh pengujung blog saya.sebenarnya gak cocok dengan judul diatas Panduan Pembuatan Read More (Lengkap) tapi mau di kasih judul apa lagi.dan saya akan hanya memberikan tips pembuatan readmore 3 buah aja yang sudah pernah terpasang di blog ini berikut Tutorialnya :

Pembuatan Readmore Biasa :

1. Login Ke Blogger.com
2. Klik Rancangan ---> Edit HTML
3. Klik tulisan Download Template Lengkap untuk berjaga-jaga kalau ada kesalahan pengeditan HTML
4. Beri tanda centang pada kotak di sebelah tulisan “Expand Template Widget”
5. Cari kode seperti ini <p><data:post.body/></p>
6. Kemudian ganti kode tersebut dengan kode ini :

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Read More...</a>
</b:if>

7. Kemudian klik tombol simpan template

Catatan : Teks Readmore Bewarna merah bisa diganti dengan teks sesuka kalian seperti Baca Selengkapnya atau yang lainnya sesuai selera sobat masing2 ...

Baik lah sekarang pembuatan Readmore yang kedua yaitu :

Pembuatan Readmore Button/Image

  pada postingan Diatas saya hanya memberikan tips tentang cara membuat ReadMore biasa, sekarang saya akan memeberikan tips untuk menjadikan ReadMore menjadi bergambar supaya website kita terlihat lebih menarik lagi. Kalau begitu nggak usah banyak bacot lagi langsung aja kita pelajari cara membuat ReadMore bergambar.caranya sama koq hanya sedikit berbeda

1. Login Ke Blogger.com
2. Klik Rancangan ---> Edit HTML
3. Klik tulisan Download Template Lengkap untuk berjaga-jaga kalau ada kesalahan pengeditan HTML
4. Beri tanda centang pada kotak di sebelah tulisan “Expand Template Widget”
5. Cari kode seperti ini <p><data:post.body/></p>
6. Kemudian ganti kode tersebut dengan kode ini :

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Read More...</a>
</b:if>

Catatan :
Jika pada postingan sebelumnya tulisan Read Morenya seperti tulisan yang berwarna merah. Tetapi pada postingan ini kita akan mengganti tulisan tersebut menjadi gambar. Caranya ganti kode “Read More” yang berwarna merah dengan kode ini

<IMG SRC='http://pic60.picturetrail.com/VOL1724/12312346/22573599/376383608.jpg'/></a>

Maka hasilnya kurang lebih akan jadi seperti ni :

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'><IMG SRC='http://pic60.picturetrail.com/VOL1724/12312346/22573599/376383608.jpg'/></a> </b:if>

7. Kemudian klik tombol simpan template

Baiklah selanjutnya pembuatan :

Pembuatan Readmore Otomatis

Fungsi read more kali ini sedikit berbeda dan lebih modern dan memudahkan kita untuk tidak lagi membatasi artikel yang akan disembunyikan dengan readmore.

Fungsi Read More ini mampu menampilkan image pertama dalam postingan dan mem-float image tersebut di awal paragraf awal, meskipun gambar yang kita letakan berada di tengah atau akhir postingan. Mungki lebih nyaman kita sebut saja dengan fasilitas image thumbnail.

Tidak hanya itu saja, kita dapat juga pengatur jumlah karakter yang ditampilkan. Disini ada 2 pilihan untuk jumlah karakter.

1. jumlah karakter yang ditampilkan, jika ada image yang diikutsertakan dalam postingan

2, jumlah karakter tanpa image. apabila masih bingung langsung aja kita bahas dengan praktek.


Penting! Yang sudah memasang Read More versi lama sebaiknya di kodenya kembalikan dulu ke seperti semula !!

Pertama Klik EDIT HTML, Cari kode :

</head>

kemudian letakan script dibawah ini di atas atau dibawah kode </head>.

<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;

summary_noimg = 500;

summary_img = 400;

img_thumb_height = 150;

img_thumb_width = 150;

</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}


//]]>
</script>

Kalau sudah jangan lupa disimpan terlebih dahulu.

2. Masih pada EDIT HTML, Beri tanda centang pada "Expand widget template" lalu temukan kode seperti dibawah

<data:post.body/>

Kalo sudah, ganti kode <data:post.body/> menjadi seperti kode dibawah ini :

<b:if cond='data:blog.pageType != "item"'> <div expr:id='"summary" + data:post.id'><data:post.body/></div> <script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>"); </script> <span class='rmlink' style='float:right'> <a expr:href='data:post.url'>Read More... <data:post.title/></a> </span> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/> </b:if>

Keterangan:
Tulisan yang berwarna Ungu itu menandakan readmore+judul postingan jika kita tidak menghendakinya tinggal di hapus.
dan tulisan right yang berwarna biru menandakan letak daripada tulisan read more tersebut.
jika left : berarti berada di sebelah kiri. tetapi jika kita ganti menjadi
right : berarti berada di sebelah kanan (seperti pada contoh gambar di atas)

var thumbnail_mode = "float"; (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)

summary_noimg = 500; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)

summary_img = 400; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)

img_thumb_height = 150; (Thumbnail 'tinggi dalam piksel)

img_thumb_width = 150; (Thumbnail 'lebar dalam piksel)

silahkan disimpan dan lihat hasilnya :) 

ok selamat mencoba dan semoga berhasil !! amieen.. 

• 
• 
• 
• 
• 
• 
• 

Related Posts