Cara Membuat Read More/Baca Selengkapnya Otomatis Di Blog

Oleh edodije

Saturday, September 12, 2015

Bagikan :

Tweet

Yo gan, berbagi tutorial lagi nih, sekarang turorial tentang cara buat Read More/Baca Selengkapnya.

Yang mana sih, enggak ngerti maksudnya? Read More/Baca Selengkapnya merupakan penggalan dari suatu artikel, biasanya hanya beberapa kalimat saja dan selanjutnya ditandai dengan tulisan "Read More" / "Baca Selengkapnya".  

Untuk lebih jelasnya, lihat ilustrasi dari halaman blog ane berikut,

Perhatikan area yang ditandai dengan Tanda Kotak Merah, nah itulah yang dimaksud dengan Read More/Baca Selengkapnya.

Gunanya jadi untuk menyingkat artikel-artikel yang udah kita post sebelumnya gan, jadi lebih singkat dan sistematis, hanya menuliskan beberapa kalimat awal dan gambar thumbnail saja. Kalau mau baca selengkapnya ya tinggal di klik itu tombolnya untuk melihat keseluruhan artikelnya.  Bagus kan jadinya, manfaatkan Read More ini untuk membuat blog kalian rapi dan sistematis. 

Gimana gan buatnya, ayo kita buat gan.

Saran : Lakukan back up terhadap Template agan terlebih dahulu sehingga akan mudah dikembalikan ke kondisi seperti semula jika terjadi sesuatu yang tidak diinginkan terhadap template agan karena proses pengEditan ini. ( Menu Design, Template, Back up / Restore, Download Full Template, beri nama untuk Template yang akan disimpan, disarankan sertakan tanggal sewaktu pembackupan, Save )

1. Pergi ke menu Design gan, pilih menu Template, lalu pilih Edit HTML, agan akan menjumpai banyak sekali berbaris-baris script code dari blog agan.

2. Cari script code berikut ini gan,

</head>

Untuk mempermudah silahkan agan pergunakan fitur Find dengan menekan tombol Ctrl +F pada keyboard agan,

3. Copy dan Paste-kan script code berikut dibawah ini tepat DI ATAS tadi gan


<!--ReadMore http://mynameisedodije.blogspot.com-->

<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:250px;margin-right: 20px;margin-bottom:10px;overflow:hidden;box-shadow: 5px 5px 5px #111;}
.grow img{height:165px;width:250px;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 = 250;
</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-->


4. Save template agan lalu scroll ke bawah dan cari script code seperti berikut.

Atau pergunakan fitur Find dengan menekan tombol Ctrl +F pada keyboard agan, kemudian masukan kata kunci " Blog Posts ". 

5. Jika sudah menemukan kode seperti gambar di atas silahkan agan Expand atau klik  panah kecil warna hitam sebelah kiri . Kemudian agan akan mendapati script code dengan tanda panah hitam di kiri lebih banyak seperti gambar berikut.

Cari kode yang di tandai dengan kotak hitam. 

'post' var='post'.

Setelah ketemu klik tanda panah yang lurus dengan kode tersebut, selanjutnya akan terbuka kode kode yang lain, geser atau scroll ke bawah dan cari kode

<data:post.body/>

7. Setelah ketemu hapus kode diatas dan ganti dengan kode dibawah 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 -->

8. Setelah itu klik Pratinjau/Preview dulu untuk memastikan script sudah benar. Lalu Save gan.
9. Selamat mencoba, Happy Blogging gan.

Tag : blog