Jumat, 10 Mei 2013

Cara Membuat "Read More Links"

Banyak faktor yang mempengaruhi kemampuan sebuah website dalam menarik pengunjung seperti pemilihan judul yang tepat, isi yang menarik, serta desain halaman yang memukau. Dalam perancangan sebuah halaman itu sendiri, ada elemen penting yang dapat digunakan yaitu "the read more links" yang biasanya mengikuti sebuah judul atau ringkasan artikel. Link tersebut ada bermacam-macam jenisnya yaitu berupa teks sederhana (read more, continue reading, learn more, dan lain-lain), kombinasi teks-ikon, dan berupa tombol. Dua jenis yang pertama yang paling sering digunakan dalam sebuah blog sedangkan jenis terakhir biasanya digunakan dalam website komersial.

Manfaat link ini yaitu meringkas artikel sehingga dalam sebuah halaman dapat memuat lebih banyak judul. Hal ini memudahkan para pembaca untuk memilih artikel yang diinginkan. Manfaat yang lain yaitu memudahkan administrator untuk melacak artikel yang paling populer serta memudahkan mengevaluasi artikel yang kurang menarik pembaca. Terakhir, link ini dapat meningkatkan jumlah traffic sehingga menarik perusahaan untuk memasang iklan.
Cara membuatnya cukup mudah. Jika menggunakan blogspot (Blogger), ada tombol khusus (insert jump break) yang dapat digunakan untuk memotong setiap artikel yang akan dipublikasikan. Ada pula cara lain yaitu dengan mengedit kode HTML templete blog yang digunakan. Dengan metode ini, setiap artikel yang dipublikasikan akan diringkas secara otomatis berdasarkan jumlah huruf yang ingin ditampilkan. Jika Anda ingin menggunakan metode yang terakhir ikuti langkah-langkah sebagai berikut:

1. Login ke Blogger > Template > Edit HTML. Kemudian tempatkan kursor dibagian pengeditan template dan klik salah satu script, lalu tekan CTRL+F untuk melakukan pencarian.

2. Cari kode </head> , dan letakkan kode ini diatasnya :

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 250;
summary_img = 220;
img_thumb_height = 120;
img_thumb_width = 220;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(b,a){if(b.indexOf("<")!=-1){var d=b.split("<");for(var c=0;c<d.length;c++){if(d[c].indexOf(">")!=-1){d[c]=d[c].substring(d[c].indexOf(">")+1,d[c].length)}}b=d.join("")}a=(a<b.length-1)?a:b.length-2;while(b.charAt(a-1)!=" "&&b.indexOf(" ",a)!=-1){a++}b=b.substring(0,a-1);return b+" [...]"}function createSummaryAndThumb(d){var f=document.getElementById(d);var a="";var b=f.getElementsByTagName("img");var e=summary_noimg;if(b.length>=1){a='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+b[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var c=a+"<div>"+removeHtmlTag(f.innerHTML,e)+"</div>";f.innerHTML=c};
//]]>
</script>

3. Ganti kode <data:post.body/> ( yang pertama ) pada template anda, dengan kode berikut :

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&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:left'><b>Baca Selengkapnya</b> &#8594; <a expr:href='data:post.url'><data:post.title/></a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

4. Klik view untuk melihat hasilnya kemudian disimpan jika sudah sesuai dengan keinginan.


Tidak ada komentar:

Posting Komentar

Catatan: Hanya anggota dari blog ini yang dapat mengirim komentar.