Tuesday, September 29, 2015

Bagaimana Cara Membuat ' Read More ' Otomatis Pada Web atau Blog atau Wordpress

1. Login pada blog anda
2. Klik tulisan 'new entry' pada halaman utama blog anda setelah anda login
3. Cari tulisan 'Template'
4. Klik template lalu pilih 'edit template' (UNTUK JAGA JAGA JIKA GAGAL, COPY SEMUA CODING BLOG ANDA DENGAN CARA: CTRL dan A pada keyboard, lalu buka notepad
lalu CTRL dan V pada keyboard dan save.)
5. Copy kode dibawah diatas kata kata </head>

<script type='text/javascript'>
var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 300;
 summary_img = 450;
 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>

 6. Jika sudah, cari tulisan <data:post.body/> lalu hapus tulisan tersebut
 7. Ganti tulisan yang telah dihapus dengan coding dibawah
 <b:if cond='data:blog.pageType != &quot;item&quot;'>
 <div expr:id='&quot;summary&quot; + data:post.id'>
 <data:post.body/></div>
 <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
 </script> <span class='rmlink' style='float:right;padding-top:20px;'>
 <a expr:href='data:post.url'> <b> Baca Selanjutnya</b> &#187;&#187;&#160;&#160;
 <data:post.title/></a> </span> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'>
 <data:post.body/> </b:if>

 8. Jika sudah, klik 'Pratinjau Template' jika berhasil simpan jika tidak
 9. Tekan CTRL dan F pada keyboard anda lalu paste tulisan <data:post.body/> dan enter
 10. Tulisan tersebut ada 3 (Kalau tidak salah), coba saja satu satu tapi coba saja dari paling bawah
 11. Selamat mencoba dan jangan lupa cantumkan alamat http://radenrakha.blogspot.com/ sebagai sumber jika ingin disebarluaskan, dilarang plagiat :)

 Untuk keterangan Readmore Di atas Sebagai Berikut :
var thumbnail_mode = "float"; = Letak gambar / thumbnail berada di “float” kiri atau jika tidak suka silahkan ganti dengan “no-float”;
summary_noimg = 250; : Jumlah karakter yang akan ditampilkan di posting tanpa adanya gambar / thumbnail;
summary_img = 250;: Jumlah karakter yang akan ditampilkan di posting dengan gambar / thumbnail;
img_thumb_height = 120; = Tinggi thumbnail dalam ukuran pixel;
img_thumb_width = 120; = Lebar thumbnail dalam ukuran pixel;
READMORE-= Tulisan READMORE bisa diganti misalnya dengan “Baca Selengkapnya” “Selanjutnya” terserah sobat.
dan apabila anda tidak ingin menampilkan judul dibelakang Readmore,
sobat bisa menghapus code script ini <data:post.title/> yang ada di belakang tulisan Readmore.

Note; Kalau file saya error, silahkan kunjungi refrensi lainnya di : trikseosimple.blogspot.co.id

No comments:

Post a Comment