Pasang Iklan Disini

Senin, 08 Juli 2013

Cara Mudah Membuat Read More Pada Blog


Assalamualaikum wr.wb
Hai sobat! Sebelum menuju bulan Ramadhan mari kita perbaiki akhlak kita, iman kita dan juga blog kita hehehe.
Dalam memperbaiki blog yang akan saya bahas ini memperbaiki pada bagian artikelnya. Biasanya artikel itu selalu panjang kebawah hingga menghabiskan banyak lahan di blog kita. Untuk membuatnya lebih hemat kita tinggal memasang read more pada blog tersebut agar terlihat rapih dan bagus.

Read More Otomatis


 Untuk langkah pembuatan read more ikuti langkah berikut ini:
  • Pertama-tama kita masuk ke akun blogger kita
  • Lalu Klik template
  • Selanjutnya klik Edit HTML
  • Pada kotak HTML kita akan mencari kode </head>. Untuk mempermudah pencariannya gunakan CTRL+F lalu masukkan </head>
  • Apabila kode tersebut sudah ditemukan, maka copy kode dibawah ini lalu paste/simpan diatas kode </head>
<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 900;
summary_img = 550;
img_thumb_height = 120;
img_thumb_width = 220;

</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(b,a){if(b.indexOf("<")!=-1){var d=b.split("<");for(var c=0;c<d.length;c++){if(d[c].indexOf(">")!=-1){d[c]=d[c].substring(d[c].indexOf(">")+1,d[c].length)}}b=d.join("")}a=(a<b.length-1)?a:b.length-2;while(b.charAt(a-1)!=" "&&b.indexOf(" ",a)!=-1){a++}b=b.substring(0,a-1);return b+" [...]"}function createSummaryAndThumb(d){var f=document.getElementById(d);var a="";var b=f.getElementsByTagName("img");var e=summary_noimg;if(b.length>=1){a='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+b[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var c=a+"<div>"+removeHtmlTag(f.innerHTML,e)+"</div>";f.innerHTML=c};
//]]>
</script>
  • Apabila sudah, selanjutnya cari kode <data:post.body/>. Kode tersebut tidak hanya ada satu saja, namun ada beberapa kode, jadi kita harus mencobanya satu persatu, untuk saran dari saya lebih baik coba dari yang paling akhir dulu karena biasanya yang bekerja itu yang paling akhir, apabila tidak jalan maka coba yang lainnya. Apabila sudah ditemukan kode tersebut lalu ganti kode itu dengan kode dibawah ini.
 <b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&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:left'><b>Baca Selengkapnya</b> &#8594; <a expr:href='data:post.url'><data:post.title/></a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>
  • Apabila sudah diganti lalu klik Pratinjau untuk melihat hasilnya. Jika masih gagal coba kamu undo dan kode yang diganti nya coba pada kode yang lain. Apabila berhasil maka anda beruntung haha.


Tambahan sedikit. Untuk penjelasan kode nya, apabila ingin mengatur read more nya maka tinggal kalian edit angka-angka yang pada bagian ini:
summary_noimg = 900; = banyak karakter yang ditampilkan apabila tidak ada gambar pada artikel.

summary_img = 550; = banyak karakter saat ada gambar pada artikel.

img_thumb_height = 120; = tinggi gambar.

img_thumb_width = 220; = lebar gambar
.

Mungkin dicukupkan sekian dahulu dari saya. Silahkan beri komentar, kritik dan sarannya mengenai artikel ini.
Terimakasih.
Wassalamualaikum wr.wb

Ketikkan email kalian dibawah dan klik Berlangganan untuk dapat berlangganan artikel kami:

Delivered by FeedBurner

Please Give Us Your 1 Minute In Sharing This Post!
SOCIALIZE IT →
FOLLOW US →
SHARE IT →

 
notifikasi
close