How to make ‘READ MORE’ on blog posts and front page blogger

Translate

Cara membuat read more pada blogger;

– Bagi anda yang baru mulai membuat blog mungkin merasa heran ketika melihat blog orang lain tampak begitu rapi, setiap artikel di halaman depan terlihat hanya satu atau dua paragrap, dan sisanya terpotong oleh tulisan read more atau selengkapnya. Sedangkan ketika melihat blog anda sendiri, setiap artikel telihat melorot ke bawah.





Pada dasarnya membuat read more pada blogger itu sangat mudah, karena falitas tersebut sudah disediakan oleh pihak pengembang blogger, anda tidak perlu edit apapun, hanya satu kali klik pada tool jumb reak, maka artikel anda sudah terpotong.

Cara Membuat Read More Ketika posting Pada Blogger
Berikut adalah langkah - langkah cara membuat read more di blogger :

Mode Compose;

1. Buatlah sebuah artikel seperti biasanya. Pastikan mode post editor dalam keadaan mode Compose.

2. Tempatkan cursor mouse komputer anda di akhir kalimat yang ingin di potong, klik tool jump break.

3. Silahkan publikasikan artikel anda.

4. Selesai.

Langkah diatas adalah cara membuat read more dalam keadaan mode compose, apabila anda terbiasa menggunakan mode HTML, berikut adalah langkah-langkahnya:

Mode HTML;

1. Buatlah sebuah artikel seperti biasanya. Pastikan mode post editor dalam keadaan mode HTML.

2. Tempatkan cursor mouse komputer anda di akhir kalimat yang ingin di potong, lalu masukkan kode berikut :

  <!--more-->

3. Contoh lihat gambar dibawah

4. Silahkan publikasikan artikel anda.
5. Selesai.
Sangat mudah bukan?

Cara Membuat Read More Pada Blogger

Berikutnya saya share Cara membuat read more pada blog, blogspot, Blogger ini sangat mudah sekali, karena hanya tinggal mengcopykan script code yang ada ke template blogspot anda, dan Berikut ini cara yang mudah untuk membuat Read More Otomatis dengan Thumbnail di Blogger seperti halnya yang digunakan pada Blog. Sebelum anda memulai membuat read more pada blog,
blogspot, blogger yang harus anda lakukan adalah sebagai berikut :

► Silahkan Login dan masuk di akun blogger anda
► lalu klik Rancangan dan klik Edit HTML
► Centang Expand Template Widget
► Untuk mempermudah pencarian kode HTML nya anda tekan aja ( CTRL + F )
► Cari kode </head>  dan kalau sudah ketemu
► Lalu silahkan Tambahkan kode dibawah ini tepatnya diatas kode  </head>

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 450;
summary_img = 450;
img_thumb_height = 120;
img_thumb_width = 180;
</script>

<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)

(C)2012 by wawansurya

visit http://affiliate-waones.com to get more cool hacks
********************************************/
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>

Bila anda ingin merubah ukuran Read More Pada Blog, Blogspot, Blogger anda, ubah aja di bagian-bagian kode di bawah ini, dan Ubah angka nya sesuai kebutuhan:

summary_noimg = 450; adalah tinggi potongan artikel tanpa gambar
summary_img = 450; adalah tinggi potongan artikel dengan gambar
img_thumb_height = 120; adalah ukuran tinggi thumbnail
img_thumb_width = 180; adalah ukuran lebar thumbnail

► langkah Selanjutnya cari kode <data:post.body/>   lalu ganti tag tersebut dengan kode script di bawah ini :

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='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'>&#187;&#187;&#160;&#160;READ MORE ...</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

► dan untuk kata " Readmore " bisa diganti sesuai dengan selera anda.
setelah dipastikan semua udah terpasang dengan benar langkah selanjutnya adalah simpan template dan coba lihatlah hasilnya.

Demikian sobat itulah artikel tentang Cara Membuat Read More Pada Blog, Blogspot, Blogger yang mungkin bisa sedikit membantu anda. dan ingat, sebelum anda memasukan kode2 diatas sebaiknya anda backup terlebih dahulu template dengan cara download lengkap template, langkah ini untuk antisipasi bila anda salah memasukkan kode yang ada.
Semoga artikel cara membuat read more pada blogger bermanfaat bagi anda.

Edit; wawansurya
Sumber;
www.affiliate-waones.com
http://mitra-sbm.blogspot.com/2012/10/cara-membuat-read-more-pada-posting.html

Artikel Menarik Lainnya :