February 27, 2015

Cara Menghapus Tulisan Read More di Halaman Depan Blog

February 27, 2015

Cara Menghapus Tombol Read More di Halaman Depan
Cara menghilangkan, menyembunyikan, atau menghapus tulisan/tombol "Read More" (Readmore Button) di Halaman Depan Blog.

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):

detikcom tanpa readmore

Google tanpa readmore

yahoo tanpa readmore

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 HTML
2. COPAS kode berikut ini di atas kode </head>


<b:if cond='data:blog.pageType == "static_page"'>
<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 != &quot;static_page&quot;'>
<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>
<div><a expr:href='data:post.url'>Read more &#187;</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 != &quot;static_page&quot;'>
<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>
<div><a expr:href='data:post.url'>Read more &#187;</a></div>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><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>

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

Previous
« Prev Post
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

15 comments on Cara Menghapus Tulisan Read More di Halaman Depan Blog

  1. gak bisa gan
    bagi template yang udah di setting "menampilkan posting secara utuh di halaman depan"

    ReplyDelete
  2. template bawaan google kurang menarik gan

    ReplyDelete
    Replies
    1. Kalo gitu, ini dia:
      http://contohblognih.blogspot.com/2015/03/cara-menghapus-auto-readmore.html

      Delete
  3. saya nyoba hilangkan div sampai div ternyata berhasil, saya pake theme promagazine WpTheme

    ReplyDelete
  4. untuk menghilangkan di wordpress gimana gan? nuhun

    ReplyDelete
    Replies
    1. wordpress domain berbayar yang bisa disetting.

      Delete
  5. sori nih gan kalo ane masukin link blog ane,, mungkin agan bisa bantu ane buat ilangin readmore seperti yang ada di blog ane ini, soalnya ane search semua kode diatas ga ada yang ketemu.

    shooda.id

    Itu link nya, mungkin agan tau kode yang dipake di template blog ane.. mohon bantuannya gan

    ReplyDelete
  6. makasih, cara paling ujung yang berhasilnya :)

    yang lainnya ga bisa :(

    ReplyDelete
  7. Terimakasih tipsnya :-)

    ReplyDelete
  8. Wah ada caranya, oke langsung saya coba 😁

    ReplyDelete
  9. gan, cara hapus diberdayakan oleh blogger.....
    untuk yang desktop sudah tidak tampil, tapi untuk yang selluler masih belum mau hilang... gimana ya gan.... terima kasih

    ReplyDelete
    Replies
    1. Lho... Anda kan jasa blog & web, masak gitu aja pusing :) Nonaktifkan template mobile

      Delete
  10. mas kalau tulisannya jadi label saja bagaimana

    ReplyDelete

Contact Form

Name

Email *

Message *