Bermacam Cara Membuat Menu ReadMore di Blogger (Manual dan Auto Read More)

Banyak para Blogger ingin mengetahui "cara membuat menu read more" seperti pada Wordpress. Ini sangat mudah (bila kita tau caranya). Kali ini saya akan menjelaskan 2 (dua) cara membuat menu READ MORE pada postingan Blogspot. Sebelum ini, ada seseorang menanyakan "apakah ada efek Menu read more terhadap SEO?" ini tidak terlalu berefek buruk terhadap SEO. Okey ... waktu pertama terjun didunia blogging dan hingga saat ini efek Menu READ MORE tidak begitu buruk. Seperti pengalaman saya, jika anda menggunakan META TAG dan AUTO META TAG Generators untuk membuat posting-an di blogger, anda tidak perlu ragu untuk menggunakan ini.

Okay, berikut langkah-langkah yang harus anda ikuti :

1. Menu Readmore - 1

Untuk membuat menu READ MORE, anda harus login ke akun anda. Go To Layout (Tata Letak) >> Edit HTML >> centang "Expand Widgets Templates" :

Copy/Paste script berikut sebelum atau persis diatas </head>

Code :

<b:if cond='data:blog.pageType != "item"'>
<script type="text/javascript">

var fade = false;
function showFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Appear(spans[i]);
} else spans[i].style.display = 'inline';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'none';
if (spans[i].id == "hidelink")
spans[i].style.display = 'inline';
}
}

function hideFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Fade(spans[i]);
} else spans[i].style.display = 'none';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'inline';
if (spans[i].id == "hidelink")
spans[i].style.display = 'none';
}
post.scrollIntoView(true);
}

function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
spans[i].style.display = 'none';
found = 1;
}
if ((spans[i].id == "showlink") && (found == 0))
spans[i].style.display = 'none';
}
}
</script>
</b:if>

# Sekarang lihat/cari kode seperti dibawah ini :

<div class='post-body'>
<p><data:post.body/></p>
<div style='clear: both;'/>
<!-- clear for photos floats -->

#Tambahkan kode warna merah berikut persis disebelah kode atau persis seperti terlihat dibawah ini :

<div class='post-body' expr:id='"post-" + data:post.id' >
<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>
<span id='showlink'>
<a expr:href='data:post.url'>Read More......</a>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>

<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Okay ... simpan template anda. Sekarang masuk ke Setting >> Formatting >> Post Template.
Letakkan kode berikut didalam kotak post templates area. code :

Ketik postingan anda disini ... sampai dimana anda ingin memotong

<span id="fullpost">

Tulis sisa postingan anda disini

</span>

# Simpan kembali template anda. Sekarang atau kapan saja anda ingin menulis postingan akan terlihat kotak Edit HTML seperti ini:

Ketik postingan anda disini ... sampai dimana anda ingin memotong

<span id="fullpost">

Tulis sisa postingan anda disini

</span>

2. Menu AUTO READMORE - 2 Blogger.

Cara ini bisa digunakan untuk anda yang sudah mempunyai banyak postingan yang tidak mungkin untuk di edit secara manual satu per satu.

# Copy/Paste kode berikut sebelum 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>

Selesai. Sekarang # cari/lihat kode <data:post.body/> atau <p><data:post.body/></p>
ganti kode yang merah saja 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</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

Simpan template. Catatan :.
var thumbnail_mode = "float"; (tergantung yang anda inginkan untuk thumbnail. float left (Kiri) atau float right (Kanan). anda bisa menggunakan no-float jika anda tidak ingin mem-float-nya.)
summary_noimg = 250; (summary anda jika tanpa image - atur sesuai selera anda)
summary_img = 250; (summary anda jika dengan image - atur sesuai selera anda)
img_thumb_height = 120; (Tinggi gambar Thumbnail)
img_thumb_width = 120; (Your image width Thumbnail - atur sesuai selera anda)

Selesai. Sekarang lihat hasilnya di blog anda.
Semoga bermanfaat ... silahkan tinggalkan komentar. (semoga sukses !!!)