Biasanya postingan terbaru akan ditampilkan dihalaman utama blog. namun jika postingan anda terlalu panjang maka hal tersebut akan membuat penuh halaman utama. jika anda ingin supaya postingan anda yang ditampilkan dihalaman utama cuma abstraksinya saja maka di tulisan cara membuat tulisan Read More / Selangkapnya ini,saya mencoba membagi pengalaman belajar blog dasar ini untuk anda semua yang juga baru memulai belajar ngeblog apa sih kira-kira manfaatnya pasang readmore ini? menurut saya banyak sekali manfaatnya, dan salah satunya untuk mempercantik tampilan blog anda. Selain itu juga mempercepat loading blog dan banyak lagi deh manfaatnya. lihat cara buat Read More di bawah ini :
1. Pilih Tata letak / Rancangan
2. kemudian pilih Edit HTML.
3. Lalu centang pada "expand widget template"
4. Copy paste Kode dibawah ini tepatnya diatas 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)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>
Keterangan:
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)
Angka berwarna Merah anda bisa merubahnya sesuai yang anda mau
Angka berwarna Merah anda bisa merubahnya sesuai yang anda mau
6. Kemudian cari Kode <data:post.body/>
7. kemudian Ganti dengan Kode 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 == "item"'><data:post.body/></b:if>
<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>
8. Kemudian Simpan Template
Selamat mencoba...
<<SEBELUMNYA DAFTAR ISI BERIKUTNYA>>
0 komentar :
Posting Komentar