RINGKASAN posting di halaman depan (home) sangat populer digunakan para blogger. Biasanya, setelah judul, thumnbail, dan ringkasan tulisan, ada readmore button --tombol "read more" atau "continue reading"-- untuk membuka link posting.
Namun, banyak blogger tidak suka ada tombol readmore ini di halaman depan. Lagi pula, Google, Yahoo, Facebook, Google Plus, dan media-media berita tidak menggunakan tombol readmore ini. Pasalnya, user (pengguna) diasumsikan sudah paham bahwa jika ingin membuka posting, mereka tinggal klik saja judul posting yang mengandung hyperlink/link.
Sejauh ini, tidak ada keluhan soal tampilan posting halaman depan tanpa readmore. Artinya, dalam konteks UX (User Experience), tidak masalah.
Berikut ini contoh tampilan Google, Yahoo, dan Detikcom yang tanpa tombol readmore di Summary Post halaman depan (Homepage):
Itulah kenapa banyak blogger ingin menghapus atau menghilangkan tombol readmore di halaman depan. Apalagi, tombol readmore itu "hanya" akan menjadikan adanya link ganda di halaman depan (hyperlink di judul posting & tombol).
Cara Menghapus Tombol Read More di Halaman Depan Blog
1. Template > Edit HTML2. COPAS kode berikut ini di atas kode </head>
<b:if cond='data:blog.pageType == "static_page"'>
<style>.readmore {display:none;}</style>
</b:if>
<style>.readmore {display:none;}</style>
</b:if>
3. Save!
Jika tidak berhasil, karena kode templatenya beda, maka lalukan langkah ini:
1. Template > Edit HTML.
2. Cari kode seperti di bawah ini:
</script>
<b:if cond='data:blog.pageType != "static_page"'>
<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>
<div><a expr:href='data:post.url'>Read more »</a></div>
</b:if>
</b:if>
<b:if cond='data:blog.pageType != "static_page"'>
<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>
<div><a expr:href='data:post.url'>Read more »</a></div>
</b:if>
</b:if>
3. Hapus kode yang berwarna merah.
4. Hapus pula kode CSS Readmore yang biasa ada di atas kode ]]</b:skin>
5. Save!
Kini tombol autoreadmore sudah terhapus alias hilang di halaman depan blog Anda.
KEBALIKANNYA: MENAMPILKAN POSTING PENUH
Ada juga blogger, dengan alasan apakah tidak tahu, justru ingin menghapus sama sekali auto readmore. Artinya, ingin posting di halaman depannya utuh, tidak terpoting readmore.
Caranya gampang saja, gunakan saja template bawaan blogger! Namun, jika sudah telanjur sayang sama template yang digunakan, tapi ingin menghapus summary/snippets berupa auto readmore itu, maka lakukan langkah ini:
1. Template > Edit HTML
2. Cari kode seperti di bawah ini:
<script type='text/javascript'>
summary_noimg = 800;
summary_img = 650;
img_thumb_height = 150;
img_thumb_width = 200;
</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>
<b:if cond='data:blog.pageType != "static_page"'>
<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>
<div><a expr:href='data:post.url'>Read more »</a></div>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>
summary_noimg = 800;
summary_img = 650;
img_thumb_height = 150;
img_thumb_width = 200;
</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>
<b:if cond='data:blog.pageType != "static_page"'>
<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>
<div><a expr:href='data:post.url'>Read more »</a></div>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>
3. HAPUS tuh semua kode tersebut dan ganti DENGAN kode:
<data:post.body/>
CARA LAINNYA:
1. Cari kode
<div class='post-body entry-content'>
2. Akan ada kode seperi ini di bawahnya:
<b:if cond='data:blog.pageType != "static_page"'><br />
<b:if cond='data:blog.pageType != "item"'><br />
<div expr:id='"summary" + data:post.id'>
<data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script><br />
<div class='readmorecontent'>
</div>
</b:if><br />
</b:if><br />
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if><br />
<br />
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType != "item"'><br />
<div expr:id='"summary" + data:post.id'>
<data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script><br />
<div class='readmorecontent'>
</div>
</b:if><br />
</b:if><br />
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if><br />
<br />
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>
3. HAPUS dan GANTI dengan kode
<data:post.body/>
BERES!!!
Itu dia Cara Menghapus Tombol Read More di Halaman Depan dan sebaliknya: menampilkan posting secara utuh di halaman depan. Good Luck! (http://contohblognih.blogspot.com/).*
Sumber:
Knowing Itech
PB Templates
All Blogger Tips
