Tips Mudah Memasang Read More Otomatis di Postingan Blog


Tips Mudah Memasang Read More Otomatis di Postingan Blog

Senang banget akhirnya bisa pasang "widget read more" otomatis. Mungkin karena tadi baca doa dan sudah sarapan juga ya. Jadi, agak lancar gitu, kakaa... bye-bye lola.

Apa sih itu, kak?

Widget read more otomatis ini adalah membantu agar tampilan blog kelihatan simple dan dinamis. Kadang-kadang kita menemukannya dalam bentuk lain seperti "baca selengkapnya", "klik di sini" dan lain-lain.

Untuk beberapa template blog kece terbaru dan responsif dari blogger, fasilitas seperti ini sudah ada. Jadi tak perlu lagi dikutak-katik ya. Tinggal pakai!


Jadi tips ini murni buat kamu yang ingin eksplor diri sendiri dan ajang uji nyali.  

Jangan lupa untuk kenyamanan, template sebelumnya kudu dicadangkan!

Dan, bagi kamu yang sudah pernah pasang, kudu dilepas dulu yang versi sebelumnya. Karena yang aku pasang ini diklaim adalah versi tercepat dan terbaik. Uuu...ye...!

Yuk kita mulai!

1. Login ke dasboard blogger.

2. Klik theme (jangan lupa klik backup/restore, ada di kanan atas) untuk jaga-jaga! atau bisa coba di blog lain untuk ajang coba-coba.

3. Klik edit HTML. 
Tips Mudah Memasang Read More Otomatis di Postingan Blog


4. Cari kode  <head>

Bisa dengan mengetikkan "control F" untuk mempercepat.

Untuk kasus aku kebetulan ada di baris ke 4 dari template blog.

Tips Mudah Memasang Read More Otomatis di Postingan Blog

4. Masukkan kode berikut ini di atas <head>
<!--Auto Read More Mulai-->

<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 Akhir-->

Warna biru artinya: pengaturan lebar dan tinggi gambar
Warna hijau artinya: pengaturan jumlah huruf jika tidak ada gambar dan jika ada gambar

Namun sebaiknya setiap postingan blog minimal ada 1 gambar, agar tampilan lebih menarik.

5. Berikutnya cari kode  <data:post.body/>

Dengan cara yang sama gunakan "control F". Umumnya jumlah kode ini ada 2. Gunakan enter 2 kali pada kotak pencarian, dan ganti kode ke 2 dengan kode di bawah ini:

<!-- Auto read more Mulai --> <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 Akhir -->


Warna hijau muda bisa dihapus, bisa tidak. Suka-suka!
"Baca Selengkapnya" juga bisa di tukar sesuai selera, dengan "read more" "lebih lanjut" dan lain-lain.

Sekali lagi, jika sudah pernah menggunakan fitur "read more" sebelumnya, harus dihapus dulu, konsekuensinya, langka-langkah di atas juga akan berubah.

Tutorial ini juga merupakan buah kemasgulan setelah beberapa kali kegagalan. 

Ingin mencoba trik mudah lainnya, main ke sini yuk!




13 comments:

  1. Aku selama ini masih manual mbak...makasih infonya..

    ReplyDelete
    Replies
    1. Kalau ada yang bisa aku bantu, hubungi kontak di bagian Disclosure di blog ya.
      Selamat mencoba!

      Delete
  2. makasih tipsnya ya mbak, sangat bermanfaat ;)

    ReplyDelete
  3. Kalo di blog sendiri aku lebih suka manual mbak, biar pas peletakkan readmorenya di kalimat yang diinginkan. Tapi buat template"ku yang lainnya boleh kali ya diginiin. Baru tahu aku nih. Thanks infonya mbak :D

    ReplyDelete
    Replies
    1. Aku malah baru tahu kalau bisa seperti itu.
      Terima kasih infonya ya.

      Delete
  4. Ooh kalo pasang ini otomatis ya terpasang di semua tulisan kita :)

    Sip sip. Terima kasih sarannya ya Mbak Anna

    ReplyDelete
    Replies
    1. Iya, mbak.
      Jika langkah cocok dieksekusi, langsung jadi!
      Yuhuuu...

      Delete
  5. Makasiih tipsnya mbaak. Bermanfaaat bingitss 😁 bisaa dicobaa langsung. Hehehe

    ReplyDelete
    Replies
    1. Alhamdullillah ya.
      Senang bisa membantu.
      Peluuuk...

      Delete
  6. Kalau saya langsung pakai yang klik cut aja, bingung kalau kode2 :D

    ReplyDelete