Cara Buat Read More Otomatis di Blogspot

Cara Buat Read More Otomatis di Blogspot >> Dengan membuat Readmore yang otomatis natinya tampilan Home page blog anda akan lebih rapi tidak memanjang turun ke bawah seperti kalau tidak memakai readmore dan yang lebih unik lagi di text "Readmore" kita bisa menyisipkan sebuah link dari halaman postingan kita yang secara tidak langsung menambah power Seo sobat. 

Sebagai Media Belajar Seo Blog tidaklah salah jika kita mencoba membuatnya. Berikut langkah-langkah yang harus sobat tempuh :

____________________________________________________________________________
1. Login ke akun blogger
2. Pilih Template kemudian Edit HTML Centang Expant Templat Widget
3. Cari kode Cari kode </head> (gunakan Ctrl+F untuk membantu pencarian),setelah sobat menemukan kode tersebut letakkan kode berikut tepat di atasnya:
____________________________________________________________________________

<script type='text/javascript'> var thumbnail_mode = &quot;no-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>

____________________________________________________________________________

Kemudian sobat cari kode <data:post.body/> Ganti kode <data:post.body/> dengan kode di bawah ini :
____________________________________________________________________________
<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 class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'>
<b> Readmore  →  <data:post.title/> </b> </a></span></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
____________________________________________________________________________

4. Kemudian Save Template Selesai jika tidak ada kesalahan pastinya anda dapatkan tampilan Read more tersebut. Jika saja sobat mau merubah tampilanya dengan selera sobat sendiri berikut keteranganya dari Script di atas.

____________________________________________________________________________

var thumbnail_mode = "float";: Letak thumbnail berada di “float” kiri atau jika tidak silahkan ganti dengan “no-float”;

summary_noimg = 250;: Jumlah karakter yang akan ditampilkan di posting tanpa gambar / thumbnail;

summary_img = 250;: Jumlah karakter yang akan ditampilkan di posting dengan gambar / thumbnail;

img_thumb_height = 120;: Tinggi thumbnail dalam ukuran pixel;

img_thumb_width = 120;: Lebar thumbnail dalam ukuran pixel;

____________________________________________________________________________

Tulisan Readmore bisa diganti Contohnya “Seterusnya” atau "Selengkapnya" Sesuka hati sobat. Demikianlah admin yang lagi bercerita tentang Cara Buat Read More Otomatis di Blogspot Semoga aja Bisa membantu dan bermanfaat. Sumber rujukan dalam artikel ini adalah seobento.blogspot.com.

Tweet