“Bagaimana cara menampilkan postingan blog dihalaman utama dengan tombol “Read More” otomatis dan thumbnail”
Read more akan menampilkan postingan anda dihalaman Home Page berupa judul, thumbnail, dan ringkasan dari isi artikel kita, thumbnail dari gambar yang pertama kali di Upload akan muncul dihalaman utama. Setelah thumbnail dan ringkasan dari artikel anda baru setelah itu tombol Read More, ketika anda mengklik tombol read more maka anda akan di arahkan kehalaman post sebenarnya.
Ini script Read More otomatis yang akan membuat tampilan home page anda akan lebih rapi dan tidak memakan banyak place di halaman utama anda.
Menggunakan Read More omomatis pada blog anda
Langkah 1 : Login ke Blogger Dashboard => Pilih Template => Kemudian klik tombol Edit HTML
Langkah 2 : Klik dimana saja dalam area kode, tekan CTRL + F dan temukan kode dibawah ini
<data:post.body/>
Note :
Setelah tekan enter, anda akan menemukan kode tersebut beberapa kali, tapi anda cuma perlu berhenti pada yang kedua atau yang ketiga, [kalau anda menemui kode tersebut tiga kali maka berhenti pada yang ketiga, akan tetapi kalau dua kali maka anda perlu berhenti pada yang kedua].
Langkah 3 : Ganti kode tersebut dengan kode ini
|
1 2 3 4 5 6 7 |
<b:if cond='data:blog.pageType != "static_page"'> <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/>","<data:post.url/>","<data:post.title/>");</script> <span class='readmore' style='float:right;'><a expr:href='data:post.url'>Read More »</a></span></b:if></b:if> <b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if> <b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if> |
Note : Jika anda sudah mengikuti semua langkah diatas dan belum ada perubahan, maka anda harus coba mengganti juga code <data:post.body/> pada pertemuan yang kedua, mudah-mudahan akan lebih baik
Langkah 4 : cari tag berikut
</head>
Langkah 5 : diatas tag </head>, tambahkan kode berikut
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<script type='text/javascript'> posts_no_thumb_sum = 490; posts_thumb_sum = 400; img_thumb_height = 160; img_thumb_width = 180; </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, pURL, pTITLE){ var div = document.getElementById(pID); var imgtag = ""; var img = div.getElementsByTagName("img"); var summ = posts_no_thumb_sum; if(img.length>=1) { imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></a></span>'; summ = posts_thumb_sum; } var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>'; div.innerHTML = summary; } //]]> </script> |
Note :
#Ubah nomor dari karakter ringkasan tidak terhitung dari thumbnail, modif nilai posts_no_thumb_sum = 490 warna biru. Untuk karakter yang terhitung dengan thumbnail post, modif nilai posts_thumb_sum = 400
#Untuk memperbesar ukuran thumbnail, modif nilai img_thumb_height = 160 (height) dan img_thumb_width = 180 (width) .
Langkah 6 : tekan tombol save template untuk menyimpan perubahan
