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

Cara Mudah Membuat/Memasang Auto Read More Otomatis Pada Blog

SPONSOR :


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.

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>

<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, Versi 2.2 (khusus blogspot)

(C)2011 oleh Reeza

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 == &quot;item&quot;'><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...

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

13 comments:

Rifqi Ikhsann said...

potingan yg menarik... ^^
ayo.. mampir http://rifqiikhsann.blogspot.com/

Annisa Chan 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 ;)

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... :)

Annisa Chan said...

nyeraah :|
hmm mungkin ga usah aja deh yaa.. ^0^

Mang uem said...

Thanks sudah berbagi ilmunya, sukses selalu...

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 ;

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

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 ;

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

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

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

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

Anonymous said...

smokeless cigarette, e cig, e cigarette reviews, ecig, smokeless cigarettes, e cigarette

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Post a Comment

Blog ini sudah DoFollow, silakan berkomentar untuk mendapat backlink gratis. Mohon untuk tidak melakukan spam. Untuk semua, terima kasih atas komentarnya...