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 = "no-float" ; 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 != "item"'><div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</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 == "item"'><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.
<b:if cond='data:blog.pageType != "item"'><div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</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 == "item"'><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.
Artikelnya sangat bermanfaat bagi pengguna anyaran
ReplyDeletesama-sama gan, terimakasih
Deletemantap
ReplyDeleteijin copas skrip nya Mas Sahid
alhamdulillah dapat tutorialnya
ReplyDeletedicopy masbos,langsung gaskeun ke tkp readmore, semoga barokah blognya
ReplyDelete