Membuat Read More Cara ke Dua

Sebelumnya Blog aapaaja telah membahas bagaimana membuat Auto read more. pada pembahasan kali ini kita akan membahas kembali auto Read More pada blogspot, hanya saja pada pembahasan kali ini kita menggunakan script yang berbeda dari pembahasan sebelumnya. Nah selain kita dapat menggunakan cara sebelumnya pembahasan kali ini dapat menambah pengetahuan kita, tidak hanya mengenal satu macam saja. agar tidak banyak basabasi mari kita langsung saja.

Pertama tentu kita login terlebih dahulu ke account blog kita. urutan pemilihannya yaitu pada tab Rancangan>Edit HTML>Centang Expand Template Widget.

Lanjutkan tahap dimana kita akan melektakkan script. Agar cepat Teman-teman dapat menggunakan fasilitas Find pada Aplikasi Browse yang sedang kita gunakan. Maka cari </head>  setelah ketemu lanjutkan dengan meletakkan scriptnya. Ok ini scriptnya..

<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot;;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 100;
</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(thumbnail_mode == "yes") {
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>

Pada script di atas Teman-teman dapat mengubah sesuai selera atau kebutuhan yaitu  :

summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 100;

Kita lanjutkan dengan meletakkan script berikutnya. Gunakan lagi fasilitas find dan cari <data:post.body/> ganti dengan script yang berikut ini.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<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>
<a class='more' expr:href='data:post.url'>Read More >></a>
</b:if>
</b:if>

Selanjutnya untuk script yang ini pada Read More >> yang di cetak tebal Teman-teman dapat mengubahnya sesuai dengan keinginan. Sekitan dari Blog Aapaaja semoga bermanfaat.

Membuat Read More Pada Blogs

Apa kabar Teman-teman reader...

Pada kesempatan kali ini Aapaaja memilih judul membuat Read more pada blog, Read more yang dimaksun yaitu pada suatu blog kadang kita menemukan adanya suatu fasilitas yang di berikan kepada reader, yang bertujuan untuk meringkas isi dari artikel. Sehingga pembaca dapat mengetahui isi dengan hanya membaca sebahagian bacaan dari artikel yang akan di baca. Untuk  blog kegunaanya adalah menampilkan beberapa artikel  dengan tidak memenuhi halaman, sehingga halaman dapat di efisienkan.

Baik lah kita langsung saja...

yang perlu kita lakukan dalam membuat read more ini adalah menentukan bentuk tulisan atau dalam bentuk ganbar sepetri ini contohnya

selanjutnya kita masuk ke blog kita polih perancangan > Etid HTML > cari  </head> nah kemudian Teman2 buat script ini atau biar cepat copas aja

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://yourjavascript.com/01241511071/read-moreotomatis.js.txt.js' type='text/javascript'/>

lalu lanjutkan dengan mengubah script <data:post.body/> atau <p><data:post.body/></p> menjadi sepreti di bawah ini:

<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'><img alt='Read More..' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgivGqwXMX-RW9X32uezUJyo8RVd0C95g-64S36o99YZjsh78QbN5igtjup8Nz7HfH4mCf_RBZhOv52JHcfdNA0JqrLJfuSIzx_Yxwh4lhlknjEybGDH6_4cIjiNpUA1wbv0ApjCEBqVHc/s1600/read+more.jpg'/></a></span> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/><br/><p align='right'> <strong><a href='http://aapaaja.blogspot.com/2011/11/membuat-read-more-pada-blogs.html'></a></strong></p></b:if>

 

nah jika teman-teman ingin menampilkan dalam bentuk tulisan saja gunakan scrip yang ini

<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'>[ Read More.. ]</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/><br/><p align='right'>
<strong><a href='http://aapaaja.blogspot.com/2011/11/membuat-read-more-pada-blogs.html'></a></strong></p></b:if>

 

setelah semua langkah di atas telah di ikuti jangan lupa simpan atau save templatenya.

Sekian dari Saya blogs aapaaja semoga bermanfaat.