Cara Membuat Read More di Blog Blogspot dengan Mudah

Pada postingan kali ini Saya kembali membahas tutorial tentang menerapkan atau mengoprek template blog. Seperti yang banyak blogger tanyakan adalah “bagaimana cara membuat tulisan baca selengkapnya” pada postingan di homepage blog. Untuk menjawab pertanyaan seperti itu Saya berhasil menemukan tiga cara yang sangat mudah untuk dilakukan.

Read More
Salah satu alasan mengapa banyak orang yang mencari tutorial ini adalah untuk membuat tampilan pada beranda atau homepage blog menjadi lebih ringan dan rapih. Selain itu, ini juga dapat membuat postingan di homepage atau beranda pada blog Anda tidak tampil sepenuh nya, jadi pengunjung harus mengklik tulisan atau tombol read more (baca selengkapnya) terlebih dahulu. Nah, untuk Anda yang menginginkan hal seperti itu silahkan simak artikel ini sampai habis.

Cara Membuat Tulisan ‘Read More’ Manual

Pada cara ini, Anda akan diajarkan bagaimana cara membuat tulisan baca selengkapnya secara manual yang dilakukan pada saat Anda membuat postingan atau artikel terbaru pada blog Anda. Tidak hanya saat membuat postingan, sebenarnya postingan yang sudah dibuat juga bisa kok, Anda cukup mengedit sedikit saja postingan yang sudah dibuat, tutorial lengkapnya berikut ini:

  1. Buka postingan Anda, lalu klik edit
  2. Tambahkan Insert Jump Break pada paragraf pertama
  3. Klik perbarui dan lihat hasilnya pada beranda blog Anda


Untuk mengganti tulisan ‘baca selengkapnya’ dengan yang lain seperti ‘read more’ dan sebagainya Anda bisa ikuti langkah-langkah di bawah ini.

  1. Masuk ke menu tata letak
  2. Klik edit pada gadget postingan blog
  3. Ubah teks ‘baca selengkapnya >>’ sesuai keinginan
  4. Simpan dan lihat hasil perubahan-nya di beranda 

Cara Membuat Tulisan ‘Read More’ Dengan Tombol/Gambar

Untuk tutorial yang satu ini dikhususkan untuk Anda yang ingin membuat tulisan baca selengkapnya atau read more menjadi lebih keren lagi. Anda bisa mengganti tulisan tersebut dengan tombol atau gambar yang bisa Anda sesuaikan sendiri, tutorial lengkapnya dibawah ini:

1. Langkah pertama, login ke blogger > buka menu tema > klik edit HTML
2. Cari kode <data:post.jumpText/> (gunakan CTRL + F) untuk mempermudah pencarian.
3. Ganti kode <data:post.jumpText/> dengan kode <img src=”Link Tombol/Gambar”/>

Ubah tulisan “Link Tombol/Gambar” pada kode di langkah ketiga dengan link gambar yang Anda inginkan. Untuk mempermudah Anda dalam mencari tombol/gambar Saya sudah lampirkan contohnya di bawah ini, Silahkan di klik kanan lalu klik “simpan alamat gambar” untuk mendapatkan link-nya.

Read More

https://1.bp.blogspot.com/-CyUOneshHF8/XNraWgNAB-I/AAAAAAAAAGI/Gep8WJdYKXsM1A7cH_jS8jK45H1dRRoMwCLcBGAs/s1600/readmore-red.png


4. Selanjutnya kita akan mengatur posisinya. Caranya cari kode <div class='jump-link'> dan ganti dengan kode <div class='jump-link' style='text-align: right;'> lalu klik simpan dan lihat hasilnya. Untuk mengatur posisi tombol atau gambar read more tersebut menjadi di kanan, kiri atau di tengah cukup ubah tulisan ‘right’ pada kode diatas dengan center untuk di tengah, untuk di kiri atau kanan silahkan ubah menjadi right atau left.

Cara Membuat Tulisan ‘Read more’ Otomatis

Jika tadi diatas adalah cara manual yang berpotensi membuang-buang waktu, maka Anda bisa terapkan cara membuat tulisan read more secara otomatis. Jadi Anda tidak perlu capek-capek mengubah satu persatu postingan yang telah Anda buat, caranya berikut ini:

1. Login ke blogger > pilih menu tema/template > klik edit HTML
2. Cari kode </head> dan letakkan kode dibawah ini tepat di atasnya

<script type='text/javascript'> var thumbnail_mode = &quot;float&quot; ; summary_noimg = 150; summary_img = 150; img_thumb_height = 80; img_thumb_width = 120; </script> <script type='text/javascript'> //<![CDATA[ function removeHtmlTag(b,a){if(b.indexOf("<")!=-1){var d=b.split("<");for(var c=0;c<d.length;c++){if(d[c].indexOf(">")!=-1){d[c]=d[c].substring(d[c].indexOf(">")+1,d[c].length)}}b=d.join("")}a=(a<b.length-1)?a:b.length-2;while(b.charAt(a-1)!=" "&&b.indexOf(" ",a)!=-1){a++}b=b.substring(0,a-1);return b+" [...]"}function createSummaryAndThumb(d){var f=document.getElementById(d);var a="";var b=f.getElementsByTagName("img");var e=summary_noimg;if(b.length>=1){a='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+b[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var c=a+"<div>"+removeHtmlTag(f.innerHTML,e)+"</div>";f.innerHTML=c}; //]]> </script>


3. Cari kode <data:post.body/> dan ganti kode tersebut dengan kode di bawah ini

<b:if cond='data:blog.pageType != &quot;item&quot;'> <b:if cond='data:blog.pageType != &quot;static_page&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;);</script> <span class='rmlink' style='float:left'> <a expr:href='data:post.url'><b>Read more</b> &#8594; <data:post.title/></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>


4. Kalo sudah tinggal klik simpan template dan lihat hasilnya.

Nah itu dia cara membuat read more di blog blogspot dari blog.sepokat.my.id yang bisa Anda lakukan sendiri pada template yang Anda sukai. Anda bisa pilih sendiri cara mana yang ingin diterapkan, bisa dengan manual dan otomatis, semoga bermanfaat.