Saling Follow

Membuat Read More Otomoatis Dengan Gambar dan Hanya Teks di Blog

Hai Sobat Saling Follow...!!!
Apa kabar ni..?? moga baik-baik aja ya... :)
Buat para blogger yang sudah lama berkecamuk dalam dunia blog mungkin artikel ini sama sekali tidak ada gunanya. Tapi tidak ada salahnya dong Saling Follow berbagi ilmu dengan teman-teman blogger pemula... :D
Sebelum Saling Follow ngasih tahu cara Membuat Read More Otomatis di Blog, perlu kalian ketahui read more itu bisa dilakukan dengan manual juga lho. Caranya adalah Klik "Insert Jump Break" pada tulisan dimana Sobat ingin memotongnya. Lihat gambar dibawah ini supaya Sobat lebih jelas :

Klik Insert Jump Break

 Maka hasil akan seperti ini :

Hasil Readmore manual

Tapi kelemahan menggunakan read more manual ini adalah sobat mesti tidak boleh lupa mengeklik "Insert Jump Break" setiap kali Sobat mau posting tulisan. Selain itu juga tidak akan teratur tampilan di beranda antara gambar dan tulisan.
So, Saran Saling Follow jangan gunakan Read More Manual deh...!

Langkah Cara Membuat Read More Otomatis pada Blogger dengan Bahasa Javascript

Ada dua(2) pilihan membuat readmore otomatis / auto read more pada blogger ini sob,yakni read more menggunakan gambar dan hanya menggunakan tulisan.

1.  Masuk ke desain template, kalo Sobat ada yg belum tahu Cara Desain Template bisa klik Cara Desain Template.
2. Selanjutnya,cari kode </head>,setelah ketemu tepat diATASnya letakkan kode javascript berikut:

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 150;
summary_img = 150;
img_thumb_height = 100;
img_thumb_width = 120;
</script>

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

(C)2008 by Anhvo

visit http://en.vietwebguide.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>

3. Kemudian cari kembali kode <data:post.body/> atau <p><data:post.body/></p>
4. Untuk Read More Otomatis Menggunakan Gambar hapus kode tersebut dan gantilah dengan kode berikut :

<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 style='float:right'><a expr:href='data:post.url'><img alt='Read More..' src='http://1.bp.blogspot.com/-IHpf1c0gAZE/TahDsOmCrCI/AAAAAAAAAy0/lOZgwgw7eHg/s1600/pelajaran%2Bblog%2Bread%2Bmore%2Botomatis.jpg'/></a></a></span>
<b:else/>
<data:post.body/>
</b:if>

5. Sedangkan untuk Read More Otomatis yang Hanya Teks hapus kode <data:post.body/> atau <p><data:post.body/></p> dan gantilah dengan kode berikut :

<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 style='float:right'><a expr:href='data:post.url'>Read More..</a></span>
<b:else/>
<data:post.body/>
</b:if>

Catatan :
~  Untuk tulisan yang berwarna hijau Sobat bisa menggantinya dengan angka sesuai dengan keinginan Sobat :
summary_noimg = 150; => jumlah karakter di beranda tanpa gambar
summary_img = 150; => jumlah karakter di beranda dengan gambar
img_thumb_height = 100; => tinggi gambar di beranda
img_thumb_width = 120; =>lebar gambar di beranda

~ Untuk tulisan yang berwarna merah 'Read More...' bisa sobat ganti dengan 'Baca Selengkapnya', 'Baca Selanjutnya...' atau apapun sesuai selera Sobat.

6. Sebelum disimpan, Klik Pratinjau dulu. Karena kalau ada script yang salah maka di halaman Pratinjau akan gagal memuat. Segera temukan dan perbaiki script Sobat yang salah, karena kalau tidak pada Template Blogger yang baru sobat akan kesusahan dalam masuk ke Desain Template lagi.

7. Untuk yang sudah terlanjut menggunakan Read More Manual seperti yang sebutkan di paling atas tadi, Sobat tinggal hapus kode :

<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/>
<a expr:href='data:post.url'><strong>Selengkapnya...</strong></a></p>
</b:if>

8. Kemudian gantilah dengan cara nomer 4 atau nomer 5 sesuai keinginan Sobat.

Demikianlah artikel tentang Cara Membuat Read More Otomoatis Dengan Gambar dan Hanya Teks di Blog. Semoga bermanfaat...
Haturnuwun... :)