Membuat Readmore Pada Blogger

Readmore adalah pemenggalan kalimat yang ada dalam sebuah posting baik itu posting yang ada pada sebuah blog ataupun website yang juga merupakan penanda bahwa kalimat dalam sebuah posting tersebut masih memiliki kelanjutan. Selain itu readmore juga berguna untuk mempersingkat sebuah posting yang panjang sehingga dapat lebih memberikan ruang pada blog atau website.

Disini akan dituliskan langkah membuat fungsi readmore pada blog dalam 2 cara.
Namun sebelum melakukan perubahan saya sarankan anda untuk membackup terlebih dahulu template milik anda.

Cara pertama:
- bukalah template blog lalu pilih Edit HTML dari halaman tersebut berilah tanda ceklist pada Expand Widget Template
- carilah kode dibawah ini :

<div class='post-header-line-1'/> <div class='post-body'>

- kalo sudah ditemukan masukan kode berikut ini tepat dibawah kode tersebut :

<b:if cond='data:blog.pageType == "item"'>

<style>.fullpost{display:inline;}</style>

<p><data:post.body/></p>

<b:else/>

<style>.fullpost{display:none;}</style>

- carilah juga kode dibawah ini :

<p><data:post.body/></p>

- tambahkan kode berikut ini dibawah kode tersebut :

<a expr:href='data:post.url'>Readmore »»</a>
</b:if>

Note : tulisan readmore tersebut bisa dirubah sesuai dengan keinginan masing-masing dan bukanlah suatu hal yang baku.

Nah nantinya kode tersebut akan terangkai seperti berikut ini :

<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Readmore »»</a>
</b:if>
<div style='clear: both;'/>

simpanlah semua perubahan yang telah kita lakukan tadi
- Bukalah settings/pengaturan kemudian pilih Format/Formatting carilah bagian Post Template lalu masukan kode berikut ini :

<div class="fullpost">

</div>

- Penggunaannya nanti seperti ini, bila anda ingin membuat sebuah posting pada blog maka letakkanlah kode

<div class="fullpost">

</div>

pada bagian posting yang ingin kita potong dengan readmore. contoh :

HyperText Markup Language (HTML) adalah sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web dan menampilkan berbagai informasi di dalam sebuah browser Internet. Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML (Standard Generalized Markup Language), HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web.
<div class="fullpost">
HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C). Versi terakhir dari HTML adalah HTML 4.01, meskipun saat ini telah berkembang XHTML yang merupakan pengembangan dari HTML.</div>

selesai sudah cara pertama untuk membuat readmore pada blogger.

Berikutnya yaitu cara kedua untuk membuat readmore pada blogger dimana pada cara kedua ini selain terdapat penggunaan readmore ada juga penggunaan thumbnail dari posting bila didalam posting tersebut terdapat sebuah gambar, berikut langkah-langkahnya:
- dari halaman Edit HTML beri tanda ceklist pada Expand Widget Template masukan kode berikut ini tepat diatas </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>

- carilah kode berikut ini :

<data:post.body/>

ubahlah kode tersebut dengan kode berikut 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>

Keterangan :

* var thumbnail_mode = "float"; (float = letak thumbnail dikiri, atau jika tidak silahkan ganti dengan no-float)
* summary_noimg = 250; (banyaknya karakter yang akan ditampilkan di posting tanpa gambar / thumbnail)
* summary_img = 250; (banyaknya karakter yang akan ditampilkan di posting dengan gambar / thumbnail)
* img_thumb_height = 120; (tinggi Thumbnail dalam piksel)
* img_thumb_width = 120; (lebar Thumbnail dalam piksel)

- simpan dan lihat hasilnya...

Nah dari 2cara tersebut anda bisa memilih yang mana yang lebih mudah untuk diterapkan dan mana yang terbaik yang dapat anda gunakan..