Home » tutorial blog » Cara Mudah Membuat/Memasang Auto Read More Otomatis Pada Blog

Cara Mudah Membuat/Memasang Auto Read More Otomatis Pada Blog

Cara Membuat Website Undangan Nikah Online

Hai sobat blogger! Pada kesempatan kali ini saya akan posting tentang Cara memasang Read More Otomatis Pada Blog. Info ini akan cukup membantu mempercepat loading suatu halaman web/blog, sehingga Halaman Web Terlihat Profesional. Biasanya berawal dari banyaknya karakter pada suatu postingan sehingga akan memperlambat loading homepage pada blog.
Oh iya, Auto Read More kali ini juga berbeda dengan Read More yang dulu. Cara kerjanya sudah otomatis(namanya saja Auto Readmore), tidak perlu menambah script pada setiap postingan, karekter yang ditampilkan bisa diatur, dan juga dapat menampilkan Image pula.
Jangan ada yang terlewatkan jika ada yang masih pakai Read more lama (khusus readmore versi lama), harap dikembalikan seperti dulu, caranya hapus code yang berwarna merah pada Edit HTML.

<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Readmore</a>
</b:if>
<div style='clear: both;'/>

OK... kemudian bagi yang baru mau mencoba, ini dia langkah-langkahnya :

Seperti biasa, masuk ke blogger.
Pilih Rancangan/Layout, kemudian pilih Edit HTML. Beri tanda centang pada Expand Template Widget

Kemudian cari kode </head> , untuk mempermudah pencarian gunakan tombol CTRL+F atau menggunakan F3. Setelah menemukan kode </head>. copy script berikut diatas kode tersebut.

var thumbnail_mode = "float" ;

summary_noimg = 250;

summary_img = 250;

img_thumb_height = 120;

img_thumb_width = 120;

</script>

//<![CDATA[

/******************************************

Auto-readmore link script, Versi 2.2 (khusus blogspot)

kunjungi http://jogoyitnan-free.blogspot.com untuk mendapat tips & trik

********************************************/

function removeHtmlTag(strx,chop){

if(strx.indexOf("<")!=-1)

{

var s = strx.split("<");

for(var i=0;i<s.length;i++){

if(s[i].indexOf(">")!=-1){

s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);

}

strx = s.join("");

}

chop = (chop < strx.length-1) ? chop : strx.length-2;

while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;

strx = strx.substring(0,chop-1);

return strx+'...';

}

function createSummaryAndThumb(pID){

var div = document.getElementById(pID);

var imgtag = "";

var img = div.getElementsByTagName("img");

var summ = summary_noimg;

if(img.length>=1) {

imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';

summ = summary_img;

}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';

div.innerHTML = summary;

}

//]]>

</script>

Keterangan :

var thumbnail_mode = "float"; (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)

Lanjutkan dengan mencari kode <data:post.body/>. Jika sudah kemudian hapus dan ganti dengan kode berikut.

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

Keterangan :

READ MORE : bisa diganti dengan kata kata lain, seperti Baca Belengkapnya, Read This Post, dsb.

Kemudian klik Simpan Template. kemudian lihat hasilnya....

Sekian dari saya, Selamat Mencoba. Semoga Bermanfaat dan Berhasil...

Salam, Reeza

Terima kasih atas kunjungan Saudara di blog kami, semoga bermanfaat :)

13 comments:

txtdarifqi said...: potingan yg menarik... ^^
ayo.. mampir http://rifqiikhsann.blogspot.com/; July 31, 2011 at 11:21 PM
Cel said...: Kak, di blog ku kok engga ada ya html data post body itu? udah aku cari kok pake CTRL+F, tetep aja engga ada...
gimana dong? Thanks be4 ;); June 30, 2012 at 7:10 PM
Nuradika Pradana Reeza said...: @Annisa Chan : Kalau pakai Ctrl+F masih belum ketemu dicoba aja manual soalnya kadang kode tsb nggabung sm yg lain. Mungkin juga lupa belum di beri tanda cek pada Expand widget template... :); July 1, 2012 at 8:29 AM
Cel said...: nyeraah :|
hmm mungkin ga usah aja deh yaa.. ^0^; July 19, 2012 at 2:19 AM
Mang uem said...: Thanks sudah berbagi ilmunya, sukses selalu...; October 10, 2012 at 9:12 PM
Anonymous said...: Hello there, I do think yοur webѕite maу be haνіng intеrnеt browser comρatіbility problems.
Wheneveг I loοk аt your blοg in Ѕafari, it looks fine however when
opеning in I.E., іt's got some overlapping issues. I just wanted to give you a quick heads up! Other than that, great blog!

Here is my web-site; vapornine
My site ;; December 15, 2012 at 11:36 PM
Anonymous said...: Τhank you for ѕharіng your info. Ι truly appreciate your effoгts and I аm wаiting fοr your nеxt write upѕ thankѕ once
again.

my homepage -
Also see my site ::; December 17, 2012 at 2:30 PM
Anonymous said...: І'm really impressed with your writing skills as well as with the layout on your blog. Is this a paid theme or did you modify it yourself? Anyway keep up the nice quality writing, it's raге to ѕee a grеаt blog lіke this
one these daуs.

My blog; www.galaxynote2.fr
Here is my web site ;; December 21, 2012 at 7:23 PM
Anonymous said...: Hi there, after reading this remarkable article i am too happy to share my experience here with friends.

Feel free to visit my web page thd; February 13, 2013 at 7:28 AM
Anonymous said...: I am actually thankful to the holder of this website who has shared this wonderful article
at here.

Here is my webpage :: cde; February 13, 2013 at 12:10 PM
Anonymous said...: Remarkable! Its truly awesome post, I have got
much clear idea about from this article.

My website - get-plus-followers.com
My page: targeted twitter followers; February 19, 2013 at 4:40 AM
Anonymous said...: Thank you for the auspicious writeup. It in reality used to be a leisure
account it. Glance complicated to more brought agreeable from you!
By the way, how can we be in contact?

Also visit my web-site ... get followers; February 19, 2013 at 5:36 AM
Anonymous said...: smokeless cigarette, e cig, e cigarette reviews, ecig, smokeless cigarettes, e cigarette; November 29, 2014 at 1:04 PM