Cara Mempersingkat Tulisan Artikel Dengan Menambahkan Read More Pada Halaman Blog

Bismillah,, selamat pagi semua pengunjung setia blog Milano-ruus yang semoga tetap dalam hidup yang harmonis dan fit dalam keseharian sehingga apapun yang sahabat Milano lakukan pasti maksimal jika kesehatan selalu dijaga. Dan besar doa kami semoga semuanya juga selalu dalam lindungan Allah SWT serta apa yang sahabat Milano lakukan hari ini menjadi asbab kita mendapatkan Ilmu yang bermanfaat bagi diri dan masyarakat banyak pada umumnya.

Baiklah sahabat Milano pada kesempatan ini kita akan membagikan tentang Cara Mempersingkat Tulisan Artikel Dengan Menambahkan Read More Pada Halaman Blog.

Jika tulisan atau artikel kita panjang maka Tentunya kita akan kesal 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 kami akan memberikan dua cara untuk mempersingkat tulisan artikel dengan menambahkan READ MORE agar tampilan blog terlihat lebih responsive. Langsung kita kupas tuntas, berikut penjelasannya.

Cara Mempersingkat Tulisan Artikel Pada Halaman Blog Dengan Cara Otomatis

1#. Silahkan Log In ke blog anda 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 != "static_page"'>

<b:if cond='data:blog.pageType != "item"'>

<style type='text/css'>

.post-footer {display: none;}

.jump-link {float: right; }

.jump-link a {text-decoration: none; }

</style>

</b:if>

</b:if>

Note:

Anda 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.


<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:blog.pageType == "index"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>","<data:post.url/>","<data:post.title/>");</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&f=Calibri-Bold&ts=14&tc=fff&hp=6&vp=8&c=5&bgt=gradient&bgc=783f04&ebgc=e69138"/></a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>
<div style='clear: both;'/> 


Warning:

Bila anda ingin meng-Copy kode-kode html seperti di atas lebih baik Copy lalu Paste-kan dulu di Notepad ataupun Microsoft Word.

4#. Selesai. Silahkan cek blog anda untuk melihat hasilnya.

Demikianlah untuk cara mempersingkat tulisan artikel secara otomatis pada menu utama blog dengan menambahkan read more.

Cara Mempersingkat Tulisan Artikel Pada Halaman Blog Dengan Cara Manual

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

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

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

4#. Finish. anda bisa mengecek hasilnya dengan melihat blog anda . anda 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 anda inginkan lalu jangan lupa untuk disave.

Note:

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 template blogger.com.

Demikianlah cara mempersingkat tulisan dengan menambahkan read more pada halaman blog yang semoga hal ini dapat membantu rekan-rekan blogger untuk tambah kreatif.

Sekian dan Terimakasih.