Memasang Auto Read More yang SEO Friendly

Halo sobat blogger, masih setia ya di blognya putramandar, tentu dong...Nah buat sobat blogger yang ingin mengetahui tentang blogging atau SEO blog, di sini saya akan bagikan satu tutorial yaitu membuat blog tampil dengan SEO FRIENDLY. Salah satu cara membuat blog kita semakin SEO Friendly adalah mengubah tampilan pada halaman blog standar. Bagaiman cara merubah dan apa yang perlu kita rubah. Di jumpa kita kali ini saya akan membahas tentang cara Memasang Auto Read More yang SEO Friendly pada blog. Mungkin sobat sudah pernah melihat atau mengetahui apa read more atau bahkan sebelum anda masuk ke halaman ini, ada sedikit membaca dari halaman utama blog ini yang mana di akhir dari kotak postingan yang tertulis BACA SELENGKAPNYA-->.  Dengan memasang elemen ini blog kita akan terlihat elegan dan dinamis dan pengunjung pun tidak akan merasa bosan dan mereka pasti akan kembali dan kembali lagi. Oke sobat blogger mari kita langsung kepada inti dari tema kita kali ini....
Langkah pertama adalah;
  • LOGIN ke blog.
  • Pilih Blog yang ingin anda edit.
  • Klik TEMPLATE pada menu vertical di bagian kiri dashboard.
  • Klik CADANGKAN atau EXPAND adalah langkah terbaik.
  • UNDUH TEMPLATE LENGKAP blog anda untuk menghindari kesalahan pengeditan pada Kode HTML template.
  • Setelah selesai mengunduh, Klik close pada pop up expand.
  • Klik EDIT TEMPLATE untuk mengedit html nya.
  • Lalu cari kode </head> atau gunakan Ctrl+F dan copy paste kode yang dicari.
  • Setelah ketemu kode </head>, copy kode di bawah ini dan pastekan tepat di atas kode </head>

<script type='text/javascript'> var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 250;
summary_img = 220;
img_thumb_height = 70;
img_thumb_width = 90;
</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>

Keterangan: Pada kode yang dicetak tebal berwarna biru itu bisa anda rubah sesuai keinginan anda. Kode tersebut menunjukkan jumlah angka banyaknya karakter yaitu artikel tanpa gambar dan artikel yang bergambar. Sedangkan kode berwarna merah adalah anda juga bisa mengubah tinggi lebarnya gambar pada artikel.

Setelah langkah di atas selesai anda lakukan, sekarang kita melanjutakan ke tahap yang terakhir yaitu;
  • Ikuti cara ini biar lebih mudah, tekan Ctl+A  >>  Ctrl+C  >>  DEL  >>  Ctrl+V
  • Cari kode ini <data:post.body/> atau gunakan Ctrl+F.
  • Pada Template Standar biasanya ada tiga (3) kode seperti di atas.
  • Copas kode di bawah ini dan ganti kode ini <data:post.body/> satu persatu mulai dari bawah
<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>

Keterangan: Setelah anda mencopy kode di atas dan mengganti kode yang di sarankan satu persatu, ada baiknya lakukan pratinjau agar kita lebih mudah mengetahui apakah kode di atas bekerja dengan normal.

Setelah semuanya selesai dengan apa yang di sarankan pada penjelasan di atas dan anda menemukan kesulitan atau kode di atas tidak berfungsi, silakan beri komentar anda di kotak komentar di bawah, Insya Allah saya akan menjawabnya.. Berkomentar karena ingin mengetahui adalah awal dari keberhasilan anda tentang sesuatu yang asing bagi anda.

Semoga dalam penjelasan cara Memasang Auto Read More Yang SEO Friendly bisa bermanfaat bagi anda semuanya. Salam

No comments:

Post a Comment