Cara pasang Auto Read more

Jika anda sedang mencari bagaimana untuk meletakkan  read more pada blog anda,disini saya akan tunjukan cara baru membuat Read More.Perkataan Read more atau baca seterusnya  adalah biasa terdapat pada mana blog dan web.Tapi kali ini agak berbeza dengan yang terdahulu kerana sistem auto Read More kali ini,kita tidak perlu lagi menulis kod sebelum posting seperti <div class="fullpost">  dan sebahagian lagi setelah <div class="fullpost"> kerana dengan sistem auto read more ini semua posting kita akan terpotong dengan sendirinya. Selain itu juga sekiranya terdapat gambar dalam posting,ia terpapar dalam bentuk thumbnail pada halaman hadapan secara Automatik,tanpa perlu menukar apa apa setting lagi.
dibawah ini adalah contoh paparan Auto read more ini: 


Sekiranya anda ingin memasang Auto Readmore Versi terbaru ini.Ikutilah langkah langkah dibawah ini:

Nota : Jika anda pernah memasang read more sebelum ini ,anda perlu kembalikan ia seperti asal.Caranya ialah dengan Klik menu Layout dan pilih Edit HTML.Tandakan pada Expand Template Widget.Setelah itu delete kod read more lama anda yang berwarna hijau seperti dibawah ini :



<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;'/>


Seterusnya ikuti langkah berikut:

1. Setelah anda login ke blogger, seterusnya masuk kemenu Layout dan pilih Edit HTML. Klik pada kotak"expand widget template" dan cari kod  </head>.

2. Copy dan paste kod  dibawah ini tepat di atas kod </head> yang anda cari tadi.



<script type='text/javascript'>

var thumbnail_mode = "float";
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;

</script>


<script type='text/javascript'>

//<![CDATA[

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

Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks

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

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>
3. kemudian  anda cari kod <data:post.body/>. bila anda jumpa kod tersebut. gantikan,  kod <data:post.body/>  dengan kod dibawah ini.


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


4.Kemudian klik save
5. Selesai.


Nota: : Kod yang mempuyai cetak tebal(bold) dan berwarna hijau, pada  kod  diatas mempunyai maksud seperti berikut.


var thumbnail_mode = "float";  (menunujukkan posisi gambar thumbnail  pada  kedudukan di sebelah kiri.

summary_noimg = 250; (menunjukkan   berapa banyak huruf yang akan dipaparkan dalam posting anda tanpa gambar)gantikan mengikut  keinginan anda)

summary_img = 250; (menunjukkan   berapa banyak huruf yang akan dipaparkan dalam posting anda yangtanpa terdapat gambar)   gantikan mengikut  keinginan anda)

img_thumb_height = 120; (ukuran tinggi gambar yang akan dipaparkan)
img_thumb_width = 120; (ukuran lebar gambar yang akan dipaparkan)
READ MORE = gantikan dengan perkataan seperti baca seterus nya,baca lagi,seterunya dll.

Untuk menukar perkataan read more kepada ikon dan menghilangkan tajuk posting disebelahnya rujuk pada artikel disini

Catat Ulasan

55 Comments:

Muhafis berkata...
Teknik Buat Blog

memang besh bah!

LittLeMyRsHMaLLoW berkata...
Teknik Buat Blog

gUd !

Tanpa Nama berkata...
Teknik Buat Blog

trus cara naruh read morenya gmn..

cikmimmie berkata...
Teknik Buat Blog

done..thanks a lotss..

Yellow LEOpard berkata...
Teknik Buat Blog

haa...yang ni senang sikit nak wat..tankiu

defka blog berkata...
Teknik Buat Blog

gue kuk g bisa ya gini katanya"Your template is invalid because the tag 'div' appears inside of the tag 'head'"pencerahanya yach

anamizu berkata...
Teknik Buat Blog

yeaa!!! bejaye!!
nti ajar cemane nak letak icon/gambar read more utk ganti perkataan 'read more tu ye ^^

yahaya berkata...
Teknik Buat Blog

@anamizuada tutorial cara ganti dgn ikon tutorial no 77

yahaya berkata...
Teknik Buat Blog

@defka blogsalah letak kod,letak selepas kod </head>

yahaya berkata...
Teknik Buat Blog

to yumz,muhafis dan little myrshamallow..terima kasih atas komen ...

~aku boy~ berkata...
Teknik Buat Blog

terima kasih atas tutorial ini... blog saya sudah kelihatan kemas... tapi, memandangkan background blog saya agak berwarna terang dan link "read more" saya juga berwarna gelap... oleh itu, saya ingin menukar warna "read more" itu agar mudah dilihat,seperti warna "read more" kamu... boleh bagi tunjuk ajar???

yahaya berkata...
Teknik Buat Blog

@~aku boy~sobatcuba lihat pada tutorial blog no.77

Tok Cik (shahril) berkata...
Teknik Buat Blog

adoi...asal xjadi erk???pe masalahnye? dia jd berdouble la....

yahaya berkata...
Teknik Buat Blog

@Tok Cik (shahril)kena guna cara lain untuk read more.Mungkin ada kod pada template yg membuatkan jadi double.

Tok Cik (shahril) berkata...
Teknik Buat Blog

tok nk sgt pasang read more ni....nnt dh jumpa caranya..rojer tok ya...ty ya...

Ikhsan berkata...
Teknik Buat Blog

Thx berat, artikelnya sangat berguna

abudi berkata...
Teknik Buat Blog

Keren...manfaat banget buat aku yang pemula.please klik my blog:http://abudi.co.cc

Wardahtul Jannah berkata...
Teknik Buat Blog

tak jumpa kod yg ke 3. da cari ulang2 kali

yahaya berkata...
Teknik Buat Blog

@Wardahtul Jannahkena tick pada expand widget template

Yayan berkata...
Teknik Buat Blog

Saya sudah coba ini dan berhasil pada "entri-entri" saya. Namun yang terjadi pada postingan "halaman" read more-nya nampak terus. dan bila di klik pada read more tidak nampak bacaan selanjutnya. dan tetap pada halaman read more.
Tolong apa ada kesalahan atau kekurangan yang harus saya tambahkan.
kasih tahu secepatnya bos! Trims

yahaya berkata...
Teknik Buat Blog

@Yayanmungkin salah pada langkah ke3.kodnya <data:post.body/> ada lebih dari satu coba ubahkan letak kod pada kod yg lain.

Wardahtul Jannah berkata...
Teknik Buat Blog

alhamdulillah da dapat. nak letak link ke post saya yg lain pula..mcm mana ya? terima kasih..

Hasyimi Rafsanjani Mokhtar berkata...
Teknik Buat Blog

makasih tuan blog... aq wat jdi.. huhu...

kienah starz berkata...
Teknik Buat Blog

sedang mencuba....xrau jd ke x...huhuhu

kienah starz berkata...
Teknik Buat Blog

dh try...tp die kuar gni laa...emmmmm....;(

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The element type "p" must be terminated by the matching end-tag "
".

kienah starz berkata...
Teknik Buat Blog

sy da brjaya buat....skue nye....suke nye....hehehe trime ksh bebanyak ye....(^_^)

nurul jannah binti ahmad berkata...
Teknik Buat Blog

salam,kod ni xda pun dlm html sy...mcm mna nk buat ea??

rengga berkata...
Teknik Buat Blog

makasii iia. ..
dah lama q nyari ini. ..
g`d luck iaa

~Eule-owlsz berkata...
Teknik Buat Blog

THANKS DI ATAS TUTO NI SGT MEMBANTU

id_a berkata...
Teknik Buat Blog

ada ayat yang sukar untuk difahami:-(

yahaya berkata...
Teknik Buat Blog

@id_a

ayat yg mana satu..
blogger dah buat perubahan pada dashboard..memang ada perubahan nak buat edit pada template..

nolove berkata...
Teknik Buat Blog

nie yang den cari selama nie.. tq bro

chegu abbas berkata...
Teknik Buat Blog

terima kasih banyak membantu selesaikan masalah saya...

yahaya berkata...
Teknik Buat Blog

@chegu abbasterima kasih juga sudi melawat blog ini..cikgu...

yahaya berkata...
Teknik Buat Blog

@noloveterima kasih...juga sudi dtg...:)

Hardy_Hunt2 berkata...
Teknik Buat Blog

nice.thanks for the tutorial
http://tekok-beriuh.blogspot.com/

Arau Blogger berkata...
Teknik Buat Blog

terima kasih la bagi tutorial ni ...sehari suntuk sy cari dalam google.....i follow dan like u

yahaya berkata...
Teknik Buat Blog

@Arau Bloggerterima kasih....datang lagi cari tutorial disini...:)

putera izman berkata...
Teknik Buat Blog

salam saya dah buat banyak kali dah jumpa head dh ganti sume dah buat tp x blh gak

Areda berkata...
Teknik Buat Blog

thanx ,,tp camne kalo just nk buat readmore je..tajuk tu xyah..

yahaya berkata...
Teknik Buat Blog

@Areda
Bagi menghilangkan tajuk posting yang ada read more ini tambahkan NO pada kod seperti dibawah:

<data:post.title/></a></span>
menjadi seperti dibawah ini
<nodata:post.title/></a></span>

MamaKaisah berkata...
Teknik Buat Blog

tq tuan tanah..mama berjaya dah...

Areda berkata...
Teknik Buat Blog

salam,,mcmane nk buat yer nk jdkan readmore tu,,duk statik tepi jer,,teratur sikit...tQ

#yQa suLaiman# berkata...
Teknik Buat Blog

thanks,,jadiiiii dah,,

sofea berkata...
Teknik Buat Blog

TERIMA KASIH.Diharap sofea berjaya dalam misi mencantikkan laman blog.ada masa sudilah jenguk2 ya

Pena Biru berkata...
Teknik Buat Blog

salam.. terima kasih atas tutorial ni.. menjadi.. :)

AnikSungaiKut berkata...
Teknik Buat Blog

hoooray... tq boss

Rudy Hartono berkata...
Teknik Buat Blog

thanks atas infonya

Cassidy Lisut or Key Key berkata...
Teknik Buat Blog

thank you very much...

rahmat blog berkata...
Teknik Buat Blog

maaf gan, kalo kode nya ga ada di tamplete saya gima gan???

AkuC.gis berkata...
Teknik Buat Blog

Thanx bro...

KoTaK KoSonG berkata...
Teknik Buat Blog

TAK MENJADI :(

jom menaip berkata...
Teknik Buat Blog

x mnjd la....

Fokus Impian berkata...
Teknik Buat Blog

@jom menaipkalau dah dipastikan tiada kod yg tertinggal,sesetengah template ada kod 3 kod&Lt;data:post.body/> cuba letak kod &Lt;data:post.body/> yang stserusnya.

sisjaat berkata...
Teknik Buat Blog

tak jumpa kod tu..