Bagaimana cara membuat read more otomatis ?

Alhamdulillah bisa posting lagi nih ,pada posting kali ini share Bagaimana cara membuat read more otomatis ? yang sebelumnya saya posting Meta tag Seo Friendly versi NABBEH ISTIAQUL HAQ AHMAD

masih buat postingan buat nglengkapin postingan seo on page dan caranya nih .

terkadang masih ada juga template blog yang belum mempunyai fasilitas ini , biasanya di blogger sa'at kita posting kita klik Insert jump break untuk readmore . tapi kalau kita lupa bagaimana ? bagi sobat yang bingung bisa nih langsung saja kita praktek buat read more otomatis di blog .

Cara buat read more ini menggunakan gambar sebagai tombol jadi semakin terlihat menarik, bisa disesuaikan sesuai kebutuhan serta cukup mudah dalam membuatnya, tapi tetap harus di perhatikan dengan baik dan ikuti ketentuan yang penulis berikan untuk Anda, berikut adalah langkah-langkahnya.

1. Masuk ke akun sobat
2. pilih template > Backup dahulu template sobat .
3. Edit HTML → proses centang "Expand Template Widget"
4. Tekan Ctrl+F untuk mencari kode </head>
5. Tambahkan kode berikut tepat diatas kode tersebut atau dibawah kode ]]></b:skin>

<!-- kode Read More -->
<script type='text/javascript'> 
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 230;
summary_img = 250;
img_thumb_height = 60;
img_thumb_width = 60;
</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>

6. Tekan Ctrl+F untuk mencari kode <data:post.body/>

7. Tambahkan kode berikut tepat dibawah kode tersebut dan diatas kode penutup </b:if>

<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script><span class='rmlink' style='float:right;padding-top:20px; border:1px solid #fff;'>
<a expr:href='data:post.url'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQZ8nLROP-atOkWR38hxZc447JeF4EGbfivDRkVlRJhlEJHsB6GX2u8uQigoawbFbAPrq4iSfILWXysewyGJ6i74-znUufahIhj5cI2Ov4msPjPHg5B68fu9V2v_FnZ77SqfwZJJFHZ8E/s74/readmore_thumb.gif'/></a></span>

8. pratinjau dan save , semoga berhasil sob :D

Keterangan:1. Kode <data:post.body/> tidak hanya ada satu, pilih kode pertama atau sesuaika. 2. Untuk link gambar http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif bisa disesuaikan dengan kebutuhan.3. Summary_noimg = 230; adalah jumlah karakter yang tampil, summary_img =250; adalah gambar yang tampil di depan konten post jika posting menggunakan gambar, img_thumb_height = 60;, img_thumb_width = 60; adalahtinggi dan lebar gambar yang tambil di depan konten post

Artikel terkait :