Cara membuat readmore otomatis diblog - Jika sobat pernah melihat sebuah blog dengan tulisan "read more" atau "baca selanjutnya" itu semua adalah sebuah perintah kerja yang diaplikasikan kedalam sebuah blog atau halaman web. Fungsi dari read more ini diantaranya adalah memberikan tampilan blog supaya lebih cantik, SEO friendly dan yang paling penting adalah meningkatkan trafik/pengunjung di blog sobat. Nah kali ini planetanswer hendak mengupasnya bagaimana cara membuat readmore otomatis pada blog.
tanpa berbasa-basi monggo silahkan di baca sampai tuntas panduannya dan aplikasikan ke blog kamu.
cara-caranya:
1. Seperti biasa, login ke blogger dengan akun kamu
2. Pilih Rancangan
3. Pilih Edit HTML jangan lupa berikan centang pada "Expand Widget Template"
Penting! Yang sudah memasang Read More versi lama sebaiknya di kodenya kembalikan dulu ke seperti semula, caranya hapus kode yang berwarna Merah dibawah ini (Setiap template mungkin berbeda, jadi kamu sesuaikan saja).
<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Readmore</a>
</b:if>
<div style='clear: both;'/>
Kamu bisa mengganti bacaan Readmore dengan Baca selanjutnya... Selanjutnya.. Berikutnya... sesuai keinginan kamu.<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Readmore</a>
</b:if>
<div style='clear: both;'/>
4. Jika sudah, lanjutkan Sobat cari kode yang mirip seperti ini </head>
Kalau sudah ketemu, letakkan kode dibawah ini persis diatas kode </head>
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)
(C)2008 by Anhvo
visit http://en.vietwebguide.com to get more cool hacks
********************************************/
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>
* Masih dalam Edit HTML (dalam design template). Sobat cari kode yang mirip seperti ini <data:post.body/>var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)
(C)2008 by Anhvo
visit http://en.vietwebguide.com to get more cool hacks
********************************************/
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>
Kalau sudah ketemu, ganti kode tersebut dengan kode dibawah 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:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
5. Kalau sudah klik pratinjau dulu sebelum disimpan, jika sudah oke tinggal kamu SAVE.<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:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
6. Selesai
Note: 1) Agar menghindari kesalahan dalam meng-edit, seperti biasa copy/download template sobat terlebih dahulu kalau-kalau saja sobat melakukan kesalahan editing, kamu bisa mem-back-up nya . 2) dalam memindahkan code-code diatas sobat bisa letakan di notepad pada komputer/laptop kamu.
jika kamu ingin membuat daftar isi yang dapat meningkatkan performa blog kamu, klik disini!
Nah, Begitulah panduan dari tutorial blogging planetanswer, semoga bermanfaat!
Posted on 23.00 / 0
comments / Baca Selanjutnya...
