Mungkin sebagian anda merasa tidak nyaman dengan tampilan postingan yang terlihat full di halaman depan blog. Sehingga halaman depan blog anda menjadi tampak panjang kebawah, apalagi bila ada beberapa postingan yang ditampilkan, tentu ini akan memakan waktu bagi anda maupun pengunjung blog anda yang hendak melihat-lihat isi blog anda tersebut.
Solusinya adalah, anda dapat memenggal sebagian entri anda, pada saat anda akan mempublikasikanya. caranya, anda hanya tinggal mengatur seberapa tulisan yang akan di penggal, lalu tekan Insert Jump Break. Fasilatas Insert Jump Break / pemenggalan postingan ini seperti yang telah ada di blogspot, terdapat di atas, saat anda menulis entri.
Tapi kelemahan dari pemenggalan secara manual ini, tampilan beberapa postingan anda tidak bisa sama rata, dan gambar yang tampil dihalaman blog tidak bisa sama besar. Tergantung besar gambar yang anda posting. Lalu bagaimana agar tampilan postingan dan gambar dihalaman blog anda bisa sama besar dan lebarnya ?
Untuk mengatasi hal tersebut anda bisa membuat Auto Read More, sehingga anda tidak perlu repot-repot secara manual untuk mengatur postingan dan gambar saat hendak mempublikasikan entri. Langsung saja ikuti caranya dibawah ini :
1. Masuk ke halaman dashboard blog anda.
2. Pilih Edit HTML dan klik Expand Widget (jangan lupa untuk memback up template anda).
3. Setelah itu cari kode </head>.
4. Kemudian letakkan kode ini sebelum kode </head> :
| <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)http://belajarsaraf.blogspot.com **/ 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> |
5. Kemudian cari lagi kode <data:post.body/>.
6. Setelah ketemu ganti kode <data:post.body/> tersebut dengan kode 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 == "item"'><data:post.body/></b:if> |
7. Kalau sudah save template anda dan lihat hasilnya.
Keterangan tambahan :
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)
Selamat moncoba.
0
Comments
