Cara Membuat Auto Read More di Blogspot

Halo Temans, pakabar? semangat belajar ngeblognya gak kendor kan??.. Ok, kali ini kita akan belajar membuat fitur Auto Read More di blog kesayangan kita. Apa sih kegunaan fitur Auto Read More/ Baca Selengkapnya di blog?

Dengan memasang fitur Auto Read More artinya kita meringkas semua postingan yang ada di blog kita agar pada halaman beranda ini hanya menampilkan judul postingan dengan beberapa potongan kalimat saja sehingga jika para pengunjung ingin membacanya lebih lengkap maka harus mengklik dulu tulisan Read More (Tulisan read more ini bisa diganti dengan kalimat lain sesuai keinginan sobat)

Dengan demikian kita bisa memanfaatkan fitur ini agar halaman beranda blog kita terlihat lebih rapih dan menjadikannya lebih efektif karena bisa menampilkan postingan-postingan kita dalam jumlah yang banyak tanpa harus menampilkan isi artikel secara utuh sehingga para pengunjung blog kita pun akan lebih mudah untuk memilih artikel mana yang akan mereka lihat/ baca terlebih dahulu

Kelebihan dari script auto read more yang akan saya bagikan ini sudah otomatis menyesuaikan sendiri, jadi kita tidak usah bingung mengaturnya lagi pada setiap postingan, kita cukup menerapkan langkah-langkahnya diawal saja sesuai dengan tutorial yang akan saya sampaikan dibawah

Berbeda dengan fitur read more manual yang harus menambahkan sendiri setiap kita mau posting, meskipun sebenarnya fitur readmore manual pun mempunyai kelebihan yaitu cara mengaturnya yang sangat simpel dan bisa sobat sesuaikan kata terakhir mana yang mau dipilih untuk ditampilkan dan juga tidak perlu menggunakan script

Kira-kira Sobat mau pilih yang mana? silahkan tentukan sendiri, yang jelas kita harus bisa dua-duanya gaess.. hehee

Tutorial cara menambahkan fitur read more manual akan saya share dilain kesempatan

Oke langsung saja kita mulai membuat auto read more di blogspot, berikut langkah-langkahnya:

1. login ke akun blogspot sobat

2. Backup dulu template untuk berjaga-jaga jika terjadi hal-hal yang tidak diinginkan

3. Setelah login pilih template >> Edit HTML

4. Cari kode </head> (Gunakan Ctrl+F untuk mempermudah pencarian) kemudian Copy Paste kode dibawah ini tepat diatas kode </head> tersebut

<!--Auto Read More Start-->


<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<style>

.post-body{text-align:justify;}

.post-body img{max-width:none;width:auto;}

.read-more{float:left; padding-top: 10px;}

.read-more a{ color: #fff!important;text-shadow:0 1px 0 rgba(0,0,0,0.5);background:#0457A9;  text-decoration:none;font:bold 13px Arial;padding:5px;}

.read-more a:hover{text-decoration:none;background:#666;}

.pic{border: 10px solid #fff;float:left;height:165px;width:280px;margin-right: 20px;margin-bottom:10px;overflow:hidden;box-shadow: 5px 5px 5px #111;}

.grow img{height:165px;width:280px;transition: all 2s ease;}

.grow img:hover{width:400px;height:250px;}

</style>

<script type='text/javascript'>

var thumbnail_mode = &quot;yes&quot;; //yes -dengan gambar, no -tanpa gambar

summary_noimg = 300; //banyaknya huruf jika tidak ada gambar

summary_img = 250; //banyaknya huruf jika ada gambar

img_thumb_height = 165;

img_thumb_width = 280;

</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(thumbnail_mode == "yes"){if(img.length>=1){imgtag = '<div class="grow pic"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></div>';summ = summary_img;}}var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';div.innerHTML = summary;}

//]]></script>

</b:if>

</b:if>



<!--Auto Read More End-->

NOTE:

Warna Merah untuk mengatur banyaknya kutipan dari artikel

Warna Hijau adalah Pengaturan Lebar dan tinggi gambar

Cobalah terlebih dahulu script diatas tanpa diedit. Jika hasilnya terasa ada yang kurang, barulah sobat edit-edit lagi agar sesuai keinginan

5. Cari Kode <data:post.body/>

Kode tersebut diatas jumlahnya biasanya ada 2 atau 3, Cari yang versi web, biasanya yang kedua (ke-2) dengan enter 2x pada kotak pencarian

6. Hapus Kode <data:post.body/> yang ke-2 tersebut kemudian ganti dengan kode dibawah:

<!-- Auto read more start -->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<data:post.body/>

<b:else/>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>

<data:post.body/>

<b:else/>

<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 class='read-more'>

      <a expr:href='data:post.url'>Baca Selengkapnya &#187;</a>

      </div>

</b:if>

</b:if>

<!-- Auto read more end -->

Tulisan "Baca Selengkapnya" bisa diganti dengan kalimat yang Sobat inginkan

6. Selesai, silahkan preview dahulu hasilnya, jika sudah berhasil dan sesuai silahkan disave

Jika pemasangannya benar maka fitur Auto Read More ini akan terlihat di homepage blog kesayangan sobat dan fitur ini akan berfungsi secara otomatis di setiap postingan yang Sobat buat

Cukup mudah bukan?

Demikianlah tutorial Cara Membuat Auto Read More di Blogspot. Silahkan isi komentar jika kurang jelas atau masih gagal dalam menerapkannya

Terimakasih atas kunjungannya dan semoga artikel ini bermanfaat