Membuat Readmore Otomatis Untuk Blog | Teks Micro

Minggu, 12 Mei 2013

Membuat Readmore Otomatis Untuk Blog

cara membuat readmore otomatis di blogger
Seringkali kita melihat kata Readmore / Baca Selengkapnya pada setiap artikel di halaman home blog seseorang. Kegunaan Readmore adalah untuk memenggal kalimat yang ditampilkan pada halaman utama situs kita. Letak Readmore ini ditempatkan di sebuah artikel.
Fungsi dari pemasangan Readmore :
  • Menghemat Ruang pada tampilan halaman utama sebuah website.
  • Menjadi Lebih Elegant dan Interaktif.
  • Membuat pengunjung membaca artikel tersebut hingga selesai.
  • Menambah pageviews artikel yang dibaca oleh pengunjung.
  • Menambah Link Anchor terhadap keyword judul.
Hingga saat ini sudah banyak tersedia berbagai macam template dengan fitur auto readmore dan lainnya. Tetapi anda harus cermat dalam pemilihan readmore. Apabila anda menggunakan readmore dengan hanya menggunakan kata saja, anda tidak boleh memakai kata tersebut melainkan dengan menggunakan gambar.
Karena apabila pada setiap artikel yang anda potong menggunakan readmore dengan anchor yang sama, maka Google kurang menyukai halaman yang anda buat. Contohnya pada blog ini saya menggunakan kata read more tetapi kata tersebut adalah gambar. Jadi, secara otomatis tidak ada kata readmore di halaman blog saya.
Cara Membuat Readmore Otomatis di Blogger yang lebih berkualitas terhadap SEO :
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 Pratinjau untuk melihat hasilnya. Jika sudah sesuai dan terpasang dengan benar klik Save Template.
Contoh hasil Auto Readmore :
memasang readmore otomatis di blog
Dengan memanfaatkan judul artikel, maka readmore tersebut dapat lebih terjaga kualitas kalimatnya di bandingkan hanya dengan memberikan 2 kata tersebut. Apabila anda ingin menggunakan readmore dengan gambar dapat mengikuti panduan berikutnya.

Untuk pemasangan readmore cara manual dapat menggunakan tools, insert jump break di dalam opsi posting artikel. Untuk sebagian template memang memiliki prmasalahan yang berbeda. Oleh karena itu, sebagai solusi silahkan coba Cara Membuat Readmore Otomatis dengan Gambar .
Share this post
  • Share to Facebook
  • Share to Twitter
  • Share to Google+
  • Share to Stumble Upon
  • Share to Evernote
  • Share to Blogger
  • Share to Email
  • Share to Yahoo Messenger
  • More...

0 komentar

:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer

 
© 2011 Teks Micro
Designed by Blog Thiet Ke
Posts RSSComments RSS
Back to top