Cara mengelakkan read more automatik pada halaman statik

Memasang read more secara automatik memang menyenangkan kita kerana tidak perlu lagi memasukkan apa apa kod dan memilih bahagian mana teks yang hendak dipotong.Tetapi masaalahnya bila kita membuat halaman statik pada blog pun ada read more juga.Halaman static untuk meletakkan sitemap dan tukar link tenyunya kita nak paparan penuhkan?Jadi tutorial ini adalah bagi rakan rakan ingin mengatasi  masaalah dengan read more automatic ini.

Masuk kedesign—edit HTML
Tandakan pada expand template widget
Cari kod dibawah ini:

<div class='post-body'>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/>
<data:post.body/>
<b:else/>

<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:right;padding-top:20px;'><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>

</b:if>

<div style='clear: both;'/> <!-- clear for photos floats -->

</div>

Apa yang perlu kita buat ialah tambahkan kod warna hijau padanya.Cara ini telah saya gunakan pada read more automatic dengan thumbnail yang ada pada blog ini.

Jika kod diatas tiada gunakan cara ini:
cari kod dibawah ini:

<div class='post-body entry-content'>

kemudian letakkan kod ini dibawahnya:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/>
<data:post.body/>
<b:else/>


kemudian cari pula kod ini:

<div style='clear: both;'/> <!-- clear for photos floats -->

dan letakkan kod ini diatasnya:

</b:if>

Selamat mencuba

cara menukar perkataan read more dengan ikon

Memasang read more pada posting adalah dengan tujuan menyembunyikan sebahagian artikel dari paparan dan membolehkan lebih banyak posting dipaparkan pada halaman depan blog.Kebiasaannya terdapat perkataan READ MORE,selengkapnya dan sebagainya pada bahagian bawah posting.dan ada yg menukarnya dengan ikon.Sebelum menukarnya dengan ikon terlebih dahulu tentulah kena letak read more  pada template.Tutorial untuk membuatnya ada pada blog ini.

Kemudian untuk read more kepada ikon:
Masuk ke design--dan pilih edit HTML
tandakan pada Expand Template Widget

Kemudian cari kod ini:

<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE – <data:post.title/></a></span>

Pada kod diatas terdapat perkataan READ MORE.Jadi untuk menukarnya dengan ikon kita perlu meletak url gambar

contohnya seperti ini:

<span class='rmlink' style='float:left'><a expr:href='data:post.url'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLz4F2rUbSBR0MrdUG8jW2uHnLE41Sjec9txG3lwd-x9jIOEYw_cfGTsD-6btbZZptEci8TApCpDoFhvWRIOAMjsPh1hCvwgSnOXhYI9pjmFg068optTVODlDmhyJSAtvf1yAtvf9gYls/s1600/ReadMore.png" /><data:post.title/></a></span>

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>

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

memasang read more dengan jump break

Membuat "read more" pada blog telah saya muatkan dalam tutorial sebelum ini.Blogspot telah mengeluarkan satu fungsi bagi membuat read more iaitu dengan menggunakan jump break. .Sebelum dikeluarkannya fungsi baru read more ini, yang dulu kita perlu memasang script pada kod template. Tetapi sekarang akan menjadi lebih mudah dengan terlancarnya  read more versi baru ini.

Berikut adalah cara membuatread more dengan menggunakan jump break.

Pada posisi compose klik  pada artikel yang ingin anda potong menggunakan read more. Kemudian klik pada ikon jump break, seperti pada gambar di bawah )  maka artikel anda akan terpotong dengan sendirinya.

Cara di atas tersebut jika sekiranya anda menggunakannya pada posisi compose. Pada posisi edit HTML maka anda perlu  tambahkan kode <!-- more --> di antara artikel yang ingin dipotong ( lihat gambar di bawah ini ).

Nota:

pada yang menggunakan template bukan dari blogspot anda perlu menambah kod bagi memastikan jump break berfungsi

Untuk membuatnya,masuk ke  Layout | Edit HTML,sebelum itu backup dulu template anda dengan klik pada butang Download Full Template.dengan membuat sedemikian anda akan memuat turun fail XML template anda yang boleh anda upload kembali jika diperlukan.

Selepas membuat backup, Klik pada checkbox Expand Widget Templates , kemudian cari kod dibawah ini:

<data:post.body/>

Selepas jumpa kod tersebut, masukkan kod berikut dibawahnya:

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if >

Selepas memasukkan kod tadi, klik Save