Cara Membuat Readmore Otomatis di Blog

Share this article on :

Cara membuat readmore otomatis sebenarnya sangat mudah. Sebelum masuk ke tutorialnya akan admin jelaskan sedikit manfaat readmore. Apa saja manfaat readmore bagi blog? diantaranya dapat meringankan blog, dan juga dapat memperindah tampilan blog sobat sehingga tampilannya terlihat lebih profesional, maka pengunjungpun akan betah di blog sobat. Langsung saja sob, berikut tutorialnya:

1. Silahkan login ke Blogger > Template
2. Supaya lebih aman, klik tombol Cadangkan / Pulihkan yang ada di pojok kanan > Unduh Template Lengkap, setelah selesai template terunduh, tekan Tutup
3. Sekarang klik tombol Edit HTML.
4. Copy kode ini:
</head>
5. Letakkan kursur DI DALAM kotak Edit HTML.
6. Tekan CTRL+F untuk mencari lalu tekan CTRL+V lalu tekan ENTER
7. Setelah ketemu kode </head> , maka letakkan kode berikut diatas </head>

<script type='text/javascript'>var thumbnail_mode = &quot;float&quot; ;summary_noimg = 250;summary_img = 220;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>


8. Sekarang cari kode <data:post.body/> sebagaimana anda tadi mencari </head> maka akan anda temui kode tersebut tidak hanya satu. sehingga kita harus coba-coba, tapi mulailah dari <data:post.body/> yang paling bawah atau akhir.

Jika sudah ketemu yang paling akhir, maka ganti kode tersebut dengan 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>
9. Klik Pratinjau Template untuk melihat apakah artikel di homepage anda sudah menampilkan baca selengkapnya kemudian judul artikel.

Jika anda ingin mengatur seberapa panjang teks yang di tampilkan atau seberapa besar gambar yang dimuat berikut ini keterangannya:

summary_noimg = 250;  adalah banyaknya karakter yang ditampilkan ketika postingan anda tidak ada gambar
summary_img = 220; adalah banyaknya karakter yang ditampilkan ketika postingan atau pada artikel anda terdapat gambar.
img_thumb_height = 120; adalah tinggi gambar thumbnail

img_thumb_width = 220; adalah lebar gambar thumbnail

Anda bisa juga mengganti BACA SELENGKAPNYA dengan kata-kata lain.




TAG : Cara membuat readmore otomatis di blog, cara membuat readmore, cara membuat baca selengkapnya, baca selengkapnya, readmore, tips dan trik blogging.

Related Post

Ditulis Oleh : nanda zulvi rahman

Nanda Zulvi Rahman Artikel Cara Membuat Readmore Otomatis di Blog ini ditulis oleh nanda zulvi rahman pada hari Minggu, 02 Juni 2013 pukul 2:38 PM. Terimakasih atas kunjungan Anda pada blog ini. Kritik dan saran tentang Cara Membuat Readmore Otomatis di Blog dapat Anda sampaikan melalui kotak komentar dibawah ini. Bagi Sobat yang ingin mengcopy paste atau menyebar-luaskan artikel ini, tolong letakkan link dibawah ini sebagai sumbernya

1 komentar:

zona download mengatakan... Reply comment Senin, 03 Juni, 2013

mantep, thanks infonya gan..

Jangan malu untuk meninggalkan komentar, kritik dan saran anda. berkomentarlah dengan baik, sopan, sesuai dgn isi postingan dan dengan bahasa Indonesia yang benar. No link aktif. no spam!

 

Recent Comment

:: Get this Widget here! ::

Friends Link

YOU'RE NEXT HERE!
Mau link anda dipasang disini juga? lihat persyaratan tukar link disini

SITE INFO


JOIN US ON FACEBOOK AND GET UPDATE! close

Get this widgethere