Cara Membuat Read More Otomatis di Blog

Cara Membuat Read More Otomatis di Blog - Sebelum kita ke tahap pembuatan, terlebih dahulu saya akan menjelaskan mengapa read more harus digunakan di blog. Secara default setiap anda memposting artikel di blog, tampilan tulisan di halam utama akan penuh sampai ke bawah pada setiap postingan. Untuk melihat judul postingan lain yang berada di bawahnya, pengunjung atau pembaca harus men-scroll jauh ke mana postingan itu berakhir. Begitulah seterusnya untuk melihat postingan selanjutnya. Akibatnya tentu saja proses penjelajahan navigasi judul-judul postingan akan menjadi kurang lancar, karena tidak bisa melihat semua judul postingan secara bersamaan. Misalkan di halaman depan terdapat 7 judul postingan dengan menampilkan sepenggal isi postingan pada setiap judul. Ketika pengunjung atau pembaca meng-klik salah satu judul, barulah terlihat seluruh isi postingan. Nah inilah yang di maksud dengan read more.

Read more dalam bahasa indonesia artinya " Baca Selengkapnya " yaitu sebuah fitur untuk meminimalis tampilan postingan di depan halaman beranda blog atau homepage. Adapun fungsi dari read more ini adalah menghemat ruang pada tampilan utama atau homepage, blog atau website terlihat lebih rapi, pengunjung bisa melihat semua judul secara bersamaan dan masih banyak lainnya. Lalu bagaimana cara membuat read more di blog? Ada dua cara untuk membuat read more ini yakni :

• Cara manual versi blogger, Anda harus membuka semua artikel anda dan pada bagian editor di menu toolbar klik Insert jump break di halaman yang ingin kalian potong. Anda harus melakukan ini secara satu persatu ke semua artikel anda.
• Cara otomatis, Anda hanya melakukan sedikit mengedit HTML di template blog anda dan dengan sendirinya semua artikel yang ada di blog akan terpotong atau dipersingkat secara otomatis.

Saya yakin anda pasti akan memilih cara yang ke dua karena anda tidak harus capek melakukan jump break ke semua artikel blog secara satu persatu. Yuk kita langsung ke langkah-langkahnya.

Cara Mudah Membuat Read More Otomatis di Blogspot atau Blogger
1. Silahkan login ke akun blogger anda. Pada menu blogger atau dashboard, pilih menu Template atau Tema. Untuk berjaga-jaga klik Backup/Pulihkan sebelum melakukan edit HTML.
2. Selanjutnya silahkan klik Edit HTML. Lalu cari dan temukan kode </head> (gunakan Ctrl+F untuk mempermudah pencarian).
3. Jika sudah ketemu, copy paste kode di bawah ini tepat di atas kode </head>.

<!--Auto Read More Mulai-->
<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 430;
summary_img = 340;
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>
<!--Auto Read More Akhir-->

Catatan :
summary_noimg = 430; Jumlah huruf jika tidak ada gambar
summary_img = 340; Jumlah huruf jika ada gambar
img_thumb_height = 100; Tinggi tampilan gambar
img_thumb_width = 120; Lebar tampilan gambar
4. Kemudian cari dan temukan kode <data:post.body/> (gunakan Ctrl+F untuk mempermudah pencarian)
5. Jika sudah ketemu ganti kode <data:post.body/> dengan kode di bawah ini. Biasanya kode <data:post.body/> terdapat lebih dari satu. Kalian coba ganti kode tersebut satu persatu dengan kode di bawah ini. Di template blog ini, saya mengganti kode yang ke 2.

<!-- Auto read more Mulai -->
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
      <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' expr:title='data:post.title'><img src='http://i1176.photobucket.com/albums/x335/b0_0ys/black-1.png'/></a></span>
<b:else/>
<data:post.body/>
     </b:if>
</b:if>
<!-- Auto read more Akhir -->

Catatan :
http://i1176.photobucket.com/albums/x335/b0_0ys/black-1.png ganti ling gambar ini dengan link gambar favorit anda. Anda juga bisa menggantinya dengan tulisn "Read More" atau "Baca Selengkapnya".

 

6. Terakhir klik Simpan Template atau Tema.

Kini blog atau website anda sudah menggunakan read more. Dengan menerapkan read more otomatis pada tampilan postingan blog, akan membuat tampilan blog lebih dinamis dan sederhana.
Demikian turial sederhana mengenai bagaimana cara membuat read more otomatis di blog. Semoga bermanfaat. "Happy Blogging"

Related Posts :

Silahkan klik disini untuk berlangganan Artikel Gratis via email, Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di HARMANSYAH BLOG