Selasa, 22 September 2020

TUTORIAL: AUTO READ MORE DENGAN THUMBNAIL

Assalamualaikum dan salam sejahtera.

Apa khabar semua? Di pagi Selasa yang indah ini, Cik TK nak kongsi satu tutorial membuat auto Read More dengan thumbnail.

Kebiasaannya, template-template yang didapati dari pelbagai website penyedia template sudah ada fungsi sebegini. Tetapi tidak secara auto jika menggunakan template yang memang berasal dari blogger sendiri.

Bagi sesiapa yang selalu singgah ke teratak Cik TK yang tidak seberapa ini, pastinya perasan dengan perubahan baru di blog Cik TK ini. 

auto read more dengan thumbnail
Contoh dari blog Cik TK sendiri, menjadi jugalah cara ini

Oleh itu, mari kita mulakan tutorial kita ini dengan membuka ruangan Edit HTML. Seperti biasa:

1. Login ke Dashboard Blogger
2. Pergi ke Theme
3. Disebelah perkataan Customize, tekan anak panah ke bawah dan pilih Edit HTML


Baiklah, dari sini kita akan mengubah sedikit beberapa kod, caranya seperti di bawah:

4. Klik mana-mana bahagian dalam ruangan kod dan tekan Ctrl dan F supaya ruangan search kelihatan.
5. Cari kod </head> dan copy paste kod di bawah pada lokasi sebelum </head> tadi.  
 
 <script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
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>

Nota:
summary_noimg = 430; adalah size post tanpa gambar
summary_img = 340; adalah size post dengan gambar
img_thumb_height = 100; adalah size tinggi gambar
img_thumb_width = 120; adalah size lebar gambar
 

 

6. Kemudian cari pula kod <data:post.body/> dan gantikan kod ini dengan kod seperti dibawah
 
<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'> baca seterusnya... </a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
</b:if>
 
7. Setelah selesai, cuba Preview dulu. Kalau sudah puas hati baru Save.

Selamat mencuba!!!


18 ulasan:

  1. Waaaa bagus dah ada toturial..haritu ada kawan blogger tanya..nanti Sis sahrekan link post ni..mudah snagat ni kalau nak buat sendiri...

    BalasPadam
    Balasan
    1. Cik TK try buat dari macam2 sumber dan Cik TK share mana yang menjadi. Harap dapat membantu! =)

      Padam
  2. wahhh bagus! tq cik TK berkongsi ilmu.. =)

    BalasPadam
  3. Kak shima bila tgk koding-koding nie, terus pening kepala hehehehe

    BalasPadam
    Balasan
    1. haha kannn.. kagum dengan orang yang pandai cipta koding ni

      Padam
  4. Banyaknya ilmu baru. Saya selalu ketinggalan keretapi...hihihiiii!

    BalasPadam
    Balasan
    1. Semoga bermanfaat kepada sesiapa yang perlukan.

      Padam
  5. Assalamualaikum saya dtg follow ke blog ini

    BalasPadam
    Balasan
    1. Waalaikumsalam... Terima kasih sudi follow!!

      Padam
  6. membalas kunjungan...terima kasih ya...
    dan thanks sharing tutorial :)

    BalasPadam
  7. Hi, good afternoon. All right? I am Brazilian, from Rio de Janeiro and I want to present my Blogger. New friends are welcome, no matter the distance. I would like to invite you to follow my Blogger. I'm a follower number 480.

    https://viagenspelobrasilerio.blogspot.com/?m=1

    BalasPadam
    Balasan
    1. Greetings!! Thank you for visiting and following my blog.. I will visit yours as soon as I can, thank you!

      Padam
  8. Nice tutorial ..harap membantu kepada blogger yg nak buat entri post dalam mode readmore..kemas mcm ni..shida pun baru saja bertukar :) tq sharing cik TK.

    BalasPadam

Dipersilakan kepada semua untuk tinggalkan komen dan pendapat kalian di sini. Nak tinggalkan jejak di sini pun boleh! Nanti Cik TK blogwalking ke sana ya!

TAG / KATEGORI / LABEL

aneka mi dan pasta (5) Anime (6) asmr (1) ayam (4) bahasa Jepun (2) belajar (10) blogger (10) canva (1) cendawan (4) cinta (19) cover (3) eksperimentasi makanan (33) facebook (1) fakta menarik (44) flora/fauna (25) fotografi (6) GA (18) gitar (2) grafik (2) hadiah (2) hobi (12) ibubapa (2) ikan (2) ilmiah (11) info IT/tutorial (25) insomnia (3) instagram (1) Islamik (4) jalan-jalan (13) Jepun/Korea (42) jimat (1) kalimba (2) kesihatan (2) kraf (4) kreatif (7) Kucing (4) kudapan (8) kuih muih (3) lauk pauk (11) Lirik (15) Luahan (3) makan-makan (43) media sosial (2) melancong (5) membaca (4) mengait (4) merapu (30) mercu tanda / landmark (3) muzik (19) perayaan (5) peringatan (1) personal (149) resepi (20) Segmen (41) Shopee (1) shopping (3) snapseed (1) sotong (1) Takeru Sato (3) telur (4) template (5) throwback (4) tidur (3) tips dan panduan (2) travel (6) udang (2) ukulele (3) vokal (10) watermark (1) wayang (1) western (3) wishlist (3) youtube (15)