Cara Membuat READ MORE OTOMATIS di Blogspot

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



Share this with short URL: Get Short URLloading short url

Nama saya Usman Kurniawan dari Pasuruan - jawa timur dan bukan seorang Blogger Pro, Namun saya akan serius belajar jika menyukai sesuatu hal, termasuk dunia blogging.

Previous
Next Post »

18 comments

Write comments
Bara Juardino
AUTHOR
February 18, 2015 at 8:33 PM delete

makasih om.... sangat membantu bagi blogger pemula seperti saya... kapan-kapan mampir ke blog saya ya ????
jaya selalu !!!!!

Reply
avatar
March 22, 2015 at 8:51 PM delete

Terimakasih infonya Gan (y)
Ini yang sedang saya cari-cari
http://grosirobatjellygmat.com/
http://jamutradisionalmujarab.com/

Reply
avatar
Irma Yunia
AUTHOR
March 27, 2015 at 8:52 PM delete

Izin share ka, terimakasih :)
http://goo.gl/21T1Mx
http://goo.gl/mgBCnM
http://goo.gl/zxbefd

Reply
avatar
August 7, 2015 at 2:33 AM delete

sepertinya ini yang yang paling cocok di praktekkan

Reply
avatar
Mas Poniran
AUTHOR
August 13, 2015 at 9:55 PM delete

Makasih gan buat infonya, ini sangat membatu saya yang pemula ini

mampir juga ke blog saya dukunban.blogspot.com

Reply
avatar
ageng rangga
AUTHOR
December 12, 2015 at 1:46 AM delete

cara menempatkanya gimana gan

Reply
avatar
December 13, 2015 at 4:49 PM delete

itu petunjuknya sudah jelas bro.. silahkan ikuti saja. ntar kalau ada masalah silahkan tulis di kotak komentar ini lagi

Reply
avatar
julie khoyul
AUTHOR
January 5, 2016 at 6:52 PM delete

ya ampun, aku ngotak atik blog untuk buat read more di postingan, selalu gagal. penempatan kode terakhir itu yang keliru sampai nemu postingan ini. Ternyata -nya pakai yang terakhir, baru bisa. hufff
terima kasih, ini bermanfaat bagi blogger pemula sepertiku!

Reply
avatar
January 8, 2016 at 5:09 PM delete

Kalau pake hp gmana gan..

Reply
avatar
Nanda Merita
AUTHOR
March 14, 2016 at 1:47 AM delete

Info yang bermanfaat
jangan lupa juga untuk kunjungi www.smartkiosku.com
terima kasih..

Reply
avatar
October 17, 2016 at 10:48 AM delete

Terima kasih, akan saya terapkan di blog saya http://www.pontendik.com/ mohon doa, semoga berhasil (maklum saya blogger pemula)

Reply
avatar
Madona Raise
AUTHOR
October 24, 2016 at 11:43 AM delete

Terima kasih bos, work 100%.........

Reply
avatar
Yos ardie
AUTHOR
October 24, 2016 at 10:03 PM delete

sangat membantu artikelnya..ijin copy yah gan..buat sya pasang di blog saya..trims dan salam kenal.

Reply
avatar
November 11, 2016 at 3:02 AM delete

kenapa tombol baca selengkapnya nggak mau ketindis?mohon bantuannya

Reply
avatar
March 20, 2017 at 7:22 PM delete

makasih bang atas infonya. jangan lupa mampir ke blog saya, sukma31cronous.blogspot.com

Reply
avatar
Ade
AUTHOR
January 26, 2018 at 12:52 PM delete

mantap gan. jangan lupa singga ke kapalbekas.blogspot.com

Reply
avatar