Cara Mempersingkat Tulisan Artikel Dengan Menambahkan Read More Pada Blog Di Halaman Utama

COPAD | Cara Mempersingkat Tulisan Artikel Dengan Menambahkan Read More Pada Blog Di Halaman Utama - Tentunya kita akan risih atau merasa terganggu dengan artikel yang bertumpuk di halaman utama pada blog kita. Apalagi jika tulisan kita begitu panjang dan tanpa tahu ujungnya, sehingga pengunjung tidak dapat membedakan atau kesulitan dalam membaca artikel yang kita posting dan akhirnya menimbulkan rasa tidak nyaman.

Maka dari itu, pada artikel kali ini mimin akan memberikan dua cara untuk mempersingkat tulisan artikel dengan menambahkan read more agar tampilan blog terlihat lebih rapih. Langsung simak saja, berikut penjelasannya.

Dengan Cara Otomatis

1. Silahkan Log In ke blog kalian terlebih dahulu, lalu klik Tema / Theme kemudian klik Edit HTML.

2. Cari kode </head> dengan menaruh kursor di salah satu tempat pada kode yang ada, kemudian tekan Ctrl + F pada keyboard. Ketik </head> lalu tekan Enter, maka kode </head> nya akan ketemu. Setelah itu, paste kode berikut di atas kode </head>.

<script type='text/javascript'>
no_thumb_sum = 500;
thumb_sum = 330;
thumb_h = 200;
thumb_w = 300;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(t,e){if(-1!=t.indexOf("<")){for(var n=t.split("<"),i=0;i<n.length;i++)-1!=n[i].indexOf(">")&&(n[i]=n[i].substring(n[i].indexOf(">")+1,n[i].length));t=n.join("")}for(e=e<t.length-1?e:t.length-2;" "!=t.charAt(e-1)&&-1!=t.indexOf(" ",e);)e++;return t=t.substring(0,e-1),t+"..."}function createSummaryAndThumb(t,e,n){var i=document.getElementById(t),m="",r=i.getElementsByTagName("img"),s=no_thumb_sum;r.length>=1&&(m='<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+e+'" title="'+n+'"><img src="'+r[0].src+'" width="'+thumb_w+'px" height="'+thumb_h+'px" /></a></span>',s=thumb_sum);var g=m+"<div>"+removeHtmlTag(i.innerHTML,s)+"</div>";i.innerHTML=g}
//]]>
</script>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
.post-footer {display: none;}
.jump-link  {float: right; }
.jump-link a {text-decoration: none; }
</style>
</b:if>
</b:if>

Catatan:
Kalian juga dapat mengganti seberapa banyak karakter (kata) yang akan muncul pada satu artikel di menu utama blog dan juga dapat mengganti ukuran dari gambar yang akan tampil. Berikut penjelasan beserta keterangannya.

no_thumb_sum = 500; (Banyaknya karakter yang akan tampil pada menu utama blog jika artikel tanpa gambar)

thumb_sum = 330; (Banyaknya karakter yang akan tampil pada menu utama blog jika artikel memiliki gambar)

thumb_h = 200; (Lebar gambar yang akan tampil pada menu utama blog)

thumb_w = 300; (Tinggi gambar yang akan tampil pada menu utama blog)

Sebagai catatan lain, perubahan ini tidak akan mempengaruhi artikel aslinya yang dalam bentuk lengkap ketika pengunjung mengklik read more. Perubahan ini hanya akan ditampilkan pada menu utama blog.

3. Cari kode <data:post.body/> dengan cara yang sama seperti sebelumnya. Biasanya akan terdapat dua kode <data:post.body/>, maka dari itu cari kode yang kedua dengan menekan Enter dua kali. Setelah kodenya ketemu, ganti kode <data:post.body/> dengan kode di bawah.

<!-- Auto Read More Body Start by COPAD -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:blog.pageType == &quot;index&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;,&quot;<data:post.url/>&quot;,&quot;<data:post.title/>&quot;);</script>
<span class='jump-link' style='float:right;'><a expr:href='data:post.url' expr:title='data:post.title'><img  src="https://dabuttonfactory.com/button.jpg?t=Read+More+%3E%3E&amp;f=Calibri-Bold&amp;ts=14&amp;tc=fff&amp;hp=6&amp;vp=8&amp;c=5&amp;bgt=gradient&amp;bgc=783f04&amp;ebgc=e69138"/></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>
<div style='clear: both;'/> <!-- clear for photos floats -->
<!-- Auto Read More in Body End by COPAD -->

Catatan:

Kalian dapat mengganti kata read more ataupun mendesain tombol tersebut sesuai dengan keinginan kalian dengan mengunjungi situs berikiut. Klik Di Sini. 

Setelah mendesain sendiri tombol yang kamu inginkan, klik </> Embed lalu copy link yang ada pada kolom Link to the current button image. Selanjutnya, parse link tersebut di situs ini. Klik Di Sini. 

Setelah itu, ganti kode html yang beda warna di atas dengan kode yang baru saja telah di parse.

Perhatian:
Jika kalian ingin meng-Copy kode-kode html seperti di atas lebih baik Copy lalu Paste-kan dulu di Notepad ataupun Microsoft Word.

4. Selesai. Cek blog kalian untuk melihat hasilnya.

Sekian untuk cara mempersingkat tulisan artikel secara otomatis pada menu utama blog dengan menambahkan read more, selanjutnya silahkan simak cara yang kedua. Namun jika sudah berhasil ataupun puas dengan cara yang pertama, kalian tidak perlu lagi untuk mengikuti cara yang kedua ini.

Dengan Cara Manual

1. Silahkan Log In ke blog kalian terlebih dahulu, lalu di menu Postingan / Posts, klik Edit pada artikel yang akan kalian persingkat.

2. Tentukan terlebih dahulu "mulai dari mana" dan "sampai di mana" kalian akan persingkat tulisan artikel kalian, dengan cara cukup menaruh kursor di salah satu tempat pada tulisan artikel kalian. 

3. Setelah itu, klik Insert jump break, maka akan muncul pembatas tulisan pada artikel yang akan ditampilkan nantinya pada halaman utama blog. Selanjutnya, klik Perbarui / Update. Contohnya kalian bisa lihat pada gambar di bawah.

4. Selesai. Kalian bisa mengecek hasilnya dengan melihat blog kalian. Kalian juga bisa melakukan hal serupa dengan artikel-artikel lainnya.

Catatan:
Jika kalian ingin mengubah kata read more / baca selengkapnya dengan kata yang lain, silahkan klik menu Tata Letak / Layout pada blog. Kemudian klik Edit pada Posting Blog / Blog Post. Ubah kata pada kolom Teks link halaman entri / Post page link text dengan kata yang kalian inginkan lalu jangan lupa untuk disimpan.

Perhatian:
Tutorial ini mungkin tidak akan berlaku pada blog yang memiliki tema lain selain yang disediakan oleh blogger.com atau mungkin saja hanya dapat digunakan pada blog yang menerapkan tema sederhana yang telah disediakan oleh blogger.com. Untuk itu, mimin mohon maaf atas keterbatasan ini.

Sekian artikel untuk kali ini, semoga yang mimin berikan dapat bermanfaat dan memiliki hasil yang baik. Jika memiliki kendala ataupun masalah dalam tutorial tersebut silahkan tinggalkan pesan pada kolom komentar dan menceklis kotak Notify me untuk mendapatkan pemberitahuan tanggapan secepatnya. Atas perhatiannya mimin ucapkan terima kasih.