November 15, 2017

Cara Membuat Auto Read More di Halaman Depan Blog

November 15, 2017

Cara membuat auto read more - ringkasan posting, summary, atau snippet post plus gambar thumbnail di Halaman Depan Blog. Judul di samping gambar.


Auto Read More
CARA membuat Auto Read More disertai gambar (thumbnail) di halaman depan blog (homepage) ini sudah berkali-kali CB terapkan, dan berhasil.

Cara ini sudah diterapkan dalam banyak modifikasi template blog.

Tips ini untuk Anda yang menggunakan template bawaan blogger (default blogger templates), seperti template simple, yang belum menampilkan ringkasan posting di halaman depan alias tampilannya sama dengan single post/single page.

Umumnya, template blog sekarang sudah otomatis menggunakan auto read more atau menampilkan ringkasan posting di halaman depan blog.

Fungsi Auto Read More


  1. Menghemat ruang pada tampilan halaman utama sebuah website.
  2. Menjadi lebih elegant dan interaktif.
  3. Membuat pengunjung membaca artikel tersebut hingga selesai.
  4. Menambah pageviews artikel yang dibaca oleh pengunjun.
  5. Menambah link anchor terhadap keyword judul.
  6. Blog lebih rapi dan bersih, enak dilihat.

Cara Membuat Auto Read More di Homepage Blogger

Cara Membuat Auto Read More di Halaman Depan Blog dengan tampilan seperti gambar di bawah ini.Posisi gambar di samping kiri, judul dan ringkasan di samping kanan.

Auto Read More di Homepage Blogger

Kode dan tutorial ini untuk mengedit tampilan halalam depan template blog bawaan blogger Sederhana (Simple). Pastikan Anda pilih tema Sederhana.

tema Sederhana

Jika sudah memasang template Sederhana seperti gamba di atas, lakukan langkah berikut ini.

1. Klik Tema > klik Edit HTML
2. Copas kode berikut ini di atas kode </head>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style>
.thumb img {float: left;margin: 0 20px 5px 0;width: 180px;height: 110px;box-shadow:0;border:0;padding:0;background:#fff}
h2.post-title {font-size: 18px;margin-bottom: 8px;}
.post-body {font-size: 97%;line-height:1.3;position: relative;}
.post-footer {display:none}
.post {margin: 0 0 15px 0;border-bottom: 1px solid #f1f1f1;padding-bottom: 15px;}
</style>
</b:if>
</b:if>

3. Cari (Ctrl+F) kode <data:post.body/>
4. Hapus kode <data:post.body/> yang kedua dan ganti dengan kode berikut ini:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.snippet'>
<b:if cond='data:post.thumbnailUrl'>
<div class='Image thumb'>
<img expr:src='data:post.thumbnailUrl'/>
</div>
</b:if>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:post.title'>
<h2 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'>
<a expr:href='data:post.link ? data:post.link : data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h2>
</b:if>
 </b:if>
</b:if>
<data:post.snippet/>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
</b:if>

5. Cari kode <a expr:name='data:post.id'/>. Di bawahnya pasti ada kode seperti :

<b:if cond='data:post.title'><h3 class='post-title entry-title' itemprop='name'><b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'><a expr:href='data:post.link ? data:post.link : data:post.url'><data:post.title/></a><b:else/><data:post.title/></b:if></h3></b:if>

Hapus kode tersebut dan ganti dengan kode di bawah ini:

<b:if cond='data:blog.pageType == &quot;item&quot;'><b:if cond='data:post.title'><h1 class='post-title entry-title' itemprop='name'><b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'><a expr:href='data:post.link ? data:post.link : data:post.url'><data:post.title/></a><b:else/><data:post.title/></b:if></h1></b:if></b:if>

6. Save! Simpan template. Beres.

Gambarnya Buram?

Kok gambar thumbnailnya blur?
Tenang, tinggal tambahkan kode berikut ini di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
function replaceText(){if(!document.getElementById){return;}
bodyText = document.getElementById("Blog1");
theText = bodyText.innerHTML;
theText = theText.replace(/s72-c/gi, "s200-c");
bodyText.innerHTML = theText;
}replaceText();
//]]>
</script>

Kode Auto Read More Sebelumnya

Membuat Auto Read More di Halaman Depan Blog
Kode yang ini (kode lama) menempatkan judul di atas gambar dan ringkasan seperti dalam gambar di samping.

Untuk membuat auto read more atau menampilkan judul, gambar, dan snippet (kutipan bagian awal posting) cukup dengan menggunakan kode terbaru berikut ini, sudah seo friendly.

1. Simpan kode berikut ini di atas kode ]]></b:skin>

.thumbnail-post {width:100px !important; height:100px !important;float:left;margin:0px 10px 0px 0px;}

2. Hapus dan ganti kode <data:post.body/> yang kedua dengan kode berikut ini:

<!-- Auto Read More start -->
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:post.firstImageUrl'>
      <a expr:href='data:post.url'><img class='thumbnail-post'
expr:alt='data:post.title' expr:title='data:post.title' expr:src='data:post.firstImageUrl'/></a>
    <b:else/>
      <a expr:href='data:post.url'><img class='thumbnail-post'
expr:alt='data:post.title' expr:title='data:post.title' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipHaSFFEpe79mgmNJ-hoRYNi5tTpN1MSLZn5eXcFHH7C-FDvobg-48FKpsJVQVQHxjSby0cUtgqj9ztqXkcXaiUorJbK49I2zHC1vDLtRdU67LVdWr4Fhk6iNkDie-Zkg6O1TkeEqwCz3v/s220-Ic42/noimage.png'/></a>
    </b:if>
    <div class='post-snippet'>
      <data:post.snippet/>
    </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>
<!-- Auto Read More end -->

Selesai! 
Save tempate Anda.

Auto Readmore Pake JavaScript & Tanpa JS

Ada dua cara membuat Auto Read More di Halaman Depan Blog, yaitu Menggunakan JavaScript dan Tanpa JavaScript (JS).
  • Kelebihan menggunakan JS adalah kita bisa mengatur ukuran foto dan panjang-pendek ringkasan tulisan. Kekurangannya: "sedikit" mengganggu kecepatan loading blog.
  • Kelebihan Auto Readmore Tanpa JS adalah loading blog tetap kenceng (fast loading) atau tidak mengganggu loading time blog. Kekurangannya: ukuran gambar thumbnail distandar ke 72x72 pixel dan panjang-pendek ringkasan tulisan gak bisa diubah. Kalaupun mau diubah, tetap... akhirnya..... menggunakan javascript juga!

Membuat Auto Read More di Halaman Depan Blog #1 (JavaScript)

Ini cara Membuat Auto Read More di Halaman Depan Blog mengunakan JavaScript (JS). Tips, kode, atau script Membuat Auto Read More di Halaman Depan Blog menggunanakan JS ini CB kutip dari Help Blogger.

1. Klik "Template" > "Edit HTML"
2. Cari (CTRL+F) kode <data:post.body/>.

Jika ada lebih dari dua <data:post.body/>, pilih yang kedua. Jika gagal, pilih yang ketiga atau pertama dst. Coba saja satu-satu hingga berhasil. 

3. Replace atau ganti kode <data:post.body/> tersebut dengan kode di bawah ini:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&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>
<span class='readmore' style='float:right'><a expr:href='data:post.url'>Read More &#187;</a></span></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>
4. Cari kode </head> dan COPAS kode berikut ini tepat di atasnya!

 <script type='text/javascript'>
posts_no_thumb_sum = 490;
posts_thumb_sum = 400;
img_thumb_height = 120;
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 = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 5px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = posts_thumb_sum;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>


5. SAVE Template!

CATATAN: 

1. Anda bisa mengganti ukuran gambar/thumbnail dengan mengubah angka 120 menjadi lebih kecil atau lebih besar.

2. Anda juga bisa mengubah jumlah/panjang karakter dengan mengganti angka 490 (jika postingnya tanpa foto) dan angka 400 (jika postingnya ada foto).

Membuat Auto Read More di Halaman Depan Blog #2 (Tanpa JavaScript)

Cara kedua ini tanpa skrip, hanya menggunakan CSS/HTML sehingga disebut "Fast Loading Auto Readmore", meski cuma beda dikit sama yang JS.

1. Template > Edit HTML
2. Copy & Paste kode berikut ini di atas kode ]]</b:skin>

.thumbnail-post {width:140px;height:80px;float:left;margin:0px 10px 0px 0px;padding-right:15px}

3. Ganti kode  <data:post.body/> dengan kode berikut ini:

<!-- Auto Readmore Start -->
<b:if cond='data:blog.pageType != &quot;static_page&quot;'> <b:if cond='data:blog.pageType != &quot;item&quot;'> <b:if cond='data:post.firstImageUrl'> <a expr:href='data:post.url'><img class='thumbnail-post' expr:title='data:post.title' expr:src='data:post.firstImageUrl'/></a> <b:else/> <a expr:href='data:post.url'><img class='thumbnail-post' expr:title='data:post.title' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipHaSFFEpe79mgmNJ-hoRYNi5tTpN1MSLZn5eXcFHH7C-FDvobg-48FKpsJVQVQHxjSby0cUtgqj9ztqXkcXaiUorJbK49I2zHC1vDLtRdU67LVdWr4Fhk6iNkDie-Zkg6O1TkeEqwCz3v/s220-Ic42/noimage.png'/></a> </b:if> <div class='post-snippet'> <data:post.snippet/> </div>
<div class='rm-button-wrap'> <a class='button' expr:href='data:post.url'>Read More</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>
<!--Auto Readmore Codes End-->

Keterangan:
  • Jika ada dua kode <data:post.body/> di template blog Anda, ganti kode yang kedua.
  • Ukuran gambar thumbnail (140px/80px) bisa diubah menjadi lebih besar atau kecil
  • Kode warna Orange adalah URL Gambar Thumbail Default. Bisa diganti dengan gambar sendiri.
  • Kode yang warna biru adalah teks Read More yang bisa diubah menjadi Baca Selengkapnya atau bisa juga dihapus saja jika tidak ingin ada tulisan Readmore.

Bagaimana jika mau tanpa gambar dan tanpa tombol "readmore" dsb? Tutorial lebih lengkap, bisa disimak di blog "wong" Vietnam, Duypham. Pake saja Google Translate!

Apa itu Auto Readmore?

Auto Readmore Blog
Auto Read More adalah istilah bagi tampilan halaman depan blog (Homepage) berupa judul tulisan, gambar thumbnail, dan kutipan bagian awal tulisan.

Contohnya seperti gambar di samping kiri ini.

Auto Read More ini sebenarnya sudah disediakan oleh Blogger, jika kita menggunakan template bawaan blogger, yaitu dengan cara klik menu/link "Insert jump break" saat kita posting. Klik bagian akhir alinea pertama atau kedua, lalu klik Insert jump break.

Namun, template bawaan blogger terbaru, sudah semuanya auto readmore.

Desain halaman depan berupa judul dan ringkasan posting ini sangat user friendly (ramah pengguna), memenuhi kaidah pengalaman pengguna (user experience, UX), karena halaman hasil pencarian Google juga menampilkan judul dan ringkasan posting.

Sebaiknya, hapus tulisn "Read more" atau "Baca selengkapnya", karena Google juga tidak mencantumkan hal itu, juga hanya menambah banyak link di halaman depan yang bisa memberatkan loading blog.

Demikian Cara Membuat Auto Read More (Ringkasan Posting) di Halaman Depan Blog Blogger/Blogspot dengan & Tanpa JavaScript.

Good Luck and Happy Blogging! (http://www.contohblog.com).*

Previous
« Prev Post
Author Image

Romeltea

Recommended Posts

Related Posts

Show comments
Hide comments

51 comments on Cara Membuat Auto Read More di Halaman Depan Blog

  1. kok ga ngaruh ya gan?

    coba agan liat di *http://nattashanauljamlovers.blogspot.com/*

    ReplyDelete
    Replies
    1. coba terus... pilih <data:post.body yang pertam, kedua, dst... sampai berhasil, coba satu-satu......

      Delete
  2. udah berhasil gan... :)

    supaya bisa kaya gini *http://2.bp.blogspot.com/-PSHS8MQubc4/U3MTzXIbwII/AAAAAAAAAEE/HH689OmNptU/s1600/autoreadmore.jpg* gimana caranya yah gan :)

    ReplyDelete
  3. Terimakasih @aga Edi Efendi, saya berhasil menerapkan nya pada blog saya.
    kunjungin ya http://dimas73.blogspot.com/ terimakasih

    ReplyDelete
  4. Klo mau menghilangkan auto readmore gmn? Sy mau buat spt mini site.. spt sales letter gitu. Mohon sarannta. Tq

    ReplyDelete
    Replies
    1. wah agak susah.... ganti aja templatenya dengan yang biasa, yang tidak auto readmore..

      Delete
    2. revert template ke default aja gan,,, dijamin ilang smua... ^_^

      Delete
  5. Sip, berhasil :D
    Terimakasih tipsnya...

    ReplyDelete
  6. This comment has been removed by the author.

    ReplyDelete
  7. Terima kasih, sangat membantu saya :)

    ReplyDelete
  8. saya sudah ikuti tutorial di atas dan mencoba 1/1 data post bodynya tapi tetap saja tidak bisa. kalau sudah begitu bagaimana?

    ReplyDelete
    Replies
    1. Ganti template dengan template seo friendly :
      http://contohblognih.blogspot.com/search/label/Template%20Blog%20SEO

      Delete
  9. Thanks For This Helpful Tutorial

    ReplyDelete
  10. Artikelnya bagus banget,,,.. mantap bbisa jalan...

    gan, blogku kok gaka terdetek di google search yah?
    pdh udah aku daftarin macem2 seo. aku ketik halaman blogku saja gak tahu google...
    harus ngetik lengkap baru bisa..

    ReplyDelete
    Replies
    1. Copy URL nama blog Anda lalu Paste di kolom search google secara lengkap, misalnya: http://bauketeklo,blogspot,com/ nah klik enter. Jika muncul nama blog milik Anda berarti sudah terdeteksi. Gampang dong yaa.. Begitu juga dengan artikel blog, cara mendeteksinya sama dengan URL artikel.

      Delete
  11. Nice post bro... terimakasih, sangat membantu. Keep posting ... keep sharing! Good luck!

    ReplyDelete
  12. Makasih gan ane berhasil, visit juga blog baru ane Download manager

    ReplyDelete
  13. Makasih gan ane juga berhasil trims.

    ReplyDelete
  14. alhamdulillah....
    akhirnya berhasil, terimakasih gan, mantap tutorialnya.

    ReplyDelete
  15. waduh..da muter-muter ternyata disini tempat berlabuh..terima kasih banyak mas bro..sukses selalu

    ReplyDelete
  16. gimana cara nya ngatur jumlah huruf / kata kalau pake kode CSS

    ReplyDelete
  17. kalo pake JS lebih cantik gan...
    kalo tanpa JS susah ngaturnya...
    jadi pilih yg praktis SJ..

    ReplyDelete
  18. kalau misalkan buat halaman depannya berisi link-link postingan blog, tanpa ada read morenya gimana????

    ReplyDelete
    Replies
    1. Ada di sini, lengkap!
      http://www.contohblog.com/2015/05/variasi-tampilan-posting-halaman-depan-blog.html

      Delete
  19. Tutorial yang sangat bagus, java script ditampilkan penuh tanpa sembunyi sehingga kita tidak harus menggunakan java script yang harus menuju akun orang lain. Gambar juga disampaikan secara jujur untuk bisa mengganti dgn gambar sendiri. Terima kasih admin CB. Untuk teman-teman yang memodif blognya baiknya menggunakan contoh diatas.

    ReplyDelete
    Replies
    1. sama-sama pak, terima kasih atas apresiasinya

      Delete
  20. bang thanks infonya sebelumnya tapi kok tulisan posnya kaya gini Normal 0 false false false IN X-NONE X-NONE ...

    ReplyDelete
    Replies
    1. baca ini:
      http://www.contohblog.com/2015/11/mengatasi-normal-0-false-posting-blog-home.html

      Delete
  21. Bang CB, saya kan pakai template New Jhony Wuss, tadinya mau dihapus Read More nya atau skalian ditambah jadi seragam, mMalah ga bisa dua-duanya. Coba Abang lihat ada dua doang kan ga matcing. Mohon bantuannya Bang CB. Terima kasih.

    ReplyDelete
    Replies
    1. NJW memang sudah tidak menggunakan link auto read more

      Delete
  22. gan, klo ngga pake thumnail gimana gan?

    soalnya udah ada thumnailnya dari template, cuman ngga ada read morenya...

    ReplyDelete
  23. Sip.. Thx.. Setelah Mengunjungi banyak bimbingan,, Saya ketemu Blog ini.
    Saya pakai cara pertama, Pada Body ke 3..
    Thx Agan !!

    ReplyDelete
  24. ok om, maksih udah sukses di terapin di Mang Munk , warung kecil ane.

    makasih banyak om.

    ReplyDelete
    Replies
    1. Sama-sama, warung kecil (small) is beautiful

      Delete
  25. Thanks,Gan..It work nih.Saya sudah coba berbagai cara akhirnya setelah baca trick dari agan yaitu cari tiap akhirnya pada bagian yang kedua berhasil.Sekali lagi thanks,Gan

    ReplyDelete
  26. terima kasih gan atas caranya
    berhasil ya meskipun tadi adayang ganggu di bawahnya gak tau apa tapi yang sung saya hapus. Tapi Good Job lah gan (y)

    ReplyDelete
  27. Terima kasih banyak mas, work 100% di blog saya. saya sudah kesana kemari mencari kode ini tapi tidak ada yang work... trims banyak mas

    ReplyDelete
    Replies
    1. Sama-sama, semoga yang lain juga auto read more nya work

      Delete
  28. terima kasih .. sudah saya coba dan work .. akhirnya tampilan blog saya terlihat lebih rapi ..

    ReplyDelete
    Replies
    1. Sama-sama, salah satu fungsi auto read more memang membuat rapi

      Delete
  29. Gan. Klo kode css auto readmore yg instan ada gak. Yang bisa di pasang lewat sesuaikan di kolom tambahkan css.

    ReplyDelete
    Replies
    1. Gak ada, karena melibatkan kode HTML data : post body

      Delete
  30. Terima kasih untuk saran pada bagian yang terakhir Bang. Benar juga tu.

    ReplyDelete
    Replies
    1. Yang Google itu ya.. Benar, no read more text on Google SERP

      Delete

Contact Form

Name

Email *

Message *