Cara membuat read more otomatis untuk blog!!


Kalian pasti menjumpai tulisan read more atau baca selengkapnya disebuah postingan blog . Di blogger sudah disediakan read more , tapi menurut saya read more dari blogger kurang memuaskan . Jika kalian setuju dengan pendapat saya , mari kita buat read more otomatis untuk blog . Read more ada dua jenis yaitu jenis yang pertama bergambar / sebuah gambar yang bertuliskan read more sedangkan jenis yang kedua read more tanpa gambar atau hanya tulisan saja contohnya read more , baca selengkapnya , baca selebihnya , dll . 


Sebelum memasang read more , kalian harus tahu dahulu apa sih guna read more untuk blog kita ??? read more sangatlah berguna dalam sebuah blog , yaitu menampilkan sebuah cuplikan postingan . Read more jika dklik akan menuju ke postingan tersebut dan akan menjelaskan semua postingannya . Sangat bermanfaat bukan ?? coba kalian bayangkan jika tidak ada read more , pasti blog kalian akan saaaaangaaaat panjang kebawah karena tidak berikan cuplikannya saja . 

Baiklah sobat mari kita buat read more untuk blog .

Langkah- langkahnya adalah :

  1. yang pertama adalah seperti biasanya kita harus log in diblogger , kemudian di Menu dashboard kalian pilih Template, kemudian klik Edit HTML 
  2. Jika muncul sebuah jendela baru , klik kotak  Expand Template Widget  untuk mencontrengnya. 
  3. Selanjutnya cari kode ini </head> . Baca artikel ini untuk cara cepat menemukan kata. Jika kode sudah ditemukan Paste kode dibawah ini tepat diatas </head>

 <script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 150;
summary_img = 150;
img_thumb_height = 100;
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>


4. Selanjutnya cari lagi kode ini <data:post.body/> atau <p><data:post.body/></p>


  • Jika Kalian ingin menggunakan read more tanpa gambar atau berupa text:


hapus kode tersebut dan ganti dengan kode dibawah 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 style='float:right'><a expr:href='data:post.url'>Read More..</a></span> 
<b:else/>
<data:post.body/>
</b:if>


 tulisan yang berwanra merah itu merupakan kata read more untuk nantinya. Kalian dapat mengganti dengan kata terserah anda untuk read more , bisa berupa baca selengkapnya.. , baca selebihnya >> , dll .



  • Jika Kalian ingin menggunakan read more dengan gambar :

hapus kode ini <data:post.body/> atau <p><data:post.body/></p> dan ganti dengan kode dibawah 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 style='float:right'><a expr:href='data:post.url'><img alt='Read More..' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigQQsgi3YpPXncoUc65iurcXNcR3Oob_GCLRPG_MmWrs5_-gjnHKzBfjoFZNtOekarJy0BkgUgccS_Ca0duUsk_UHnnfzYzpwq_3z1sq6IW68n9oft38q0Sh2VABB_JO_PL83Og4cMoA86/s1600/black1.gif'/></a></a></span> 
<b:else/>
<data:post.body/>
</b:if>



tulisan yang berwanra merah itu merupakan gambar untuk read more , kalian dapat menggantinya sendiri . Jika kalian  ingin mengganti icon read morenya dengan gambar yang lain silahkan lihat Disini .

Jika semua langkah sudah dilakukan klik Simpan setelan untuk menyimpan hasil setelan tadi .


Sekian artikel , semoga berhasil ...










Nimbuzz Hijau

Phasellus facilisis convallis metus, ut imperdiet augue auctor nec. Duis at velit id augue lobortis porta. Sed varius, enim accumsan aliquam tincidunt, tortor urna vulputate quam, eget finibus urna est in augue.

Tidak ada komentar:

Posting Komentar