Cara Membuat READ MORE OTOMATIS di Blogspot

BLOGINGPASURUAN akan membagi tips bagaimana cara membuat auto read more , Auto read more atau baca selengkapnya fungsi sebenernya sich untuk memotong artikel agar tidak panjang ( contohnya pada template bawa’an blogspot ) teknik ini kesannya adalah efisiensi dan mempermudah pengunjung melihat semua posting Blog Anda.

Kalau anda menggunakan template dari situs dowload template selain bawaan blogspot, bisa dikatakan hampir semuanya sudah menggunakan read more otomatis . Tutorial ini mungkin dikhususkan untuk Anda yang mau memodifikasi template bawaan blogspot.

Cara Membuat Readmore Otomatis di Blogger

1. Login ke Blogger lalu klik Template

2. Klik tombol Cadangkan / Pulihkan yang ada di pojok kanan  untuk pencegahan jika terjadi kesalahan dan Anda bingung bagaimana membetulkannya ( fungsi menu ini adalah backup template )

3. Kemudian klik tombol Edit HTML.

4. cari kode </head>

5. Setelah ketemu kode </head> , maka letakkan kode berikut diatas </head>

CSS

<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>

6. Kemudian setelah itu  cari kode <data:post.body/> biasanya anda temui kode lebih dari  satu. sehingga kita harus coba-coba, tapi mulailah dari <data:post.body/> yang paling bawah.

Jika sudah ketemu yang paling bawah, ganti kode tersebut dengan script ini:

HTML

<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>

7. Kemudian Klik Pratinjau Template dulu ( jangan langsung save ).Jika ketika di Pratinjau sudah terpasang dengan benar klik tombol Save Template.

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 read more dengan kata-kata lain ( baca selengkapnya )

Demikian artikel Cara Memasang Read More Pada Artikel di Blog. Semoga bermanfaat….

Facebook

Twitter

Pinterest

More

Less

Tumblr

Mix

E-Mail

GMail

LinkedIn

Reddit

XING

WhatsApp

Hacker News

VK

Telegram

OK

Messenger

Line

Copy Link