Cara Unik Membuat Read More pada Postingan Blog

Bagi para Blogger mendengar kata “Read More” atau “Baca Selanjutnya” sudah tidak asing lagi. Karena itu sering muncul pada tampilan postingan blog agar pengunjung yang tertarik membaca keseluruhan artikel akan mengklik Read More. Tujuan dibuatnya tutorial Read More agar tampilan home page blog kita terlihat rapih dan sama rata. Sebetulnya, cara membuat Read More bisa dibilang tidak terlalu sulit, akan tetapi bagi pemula tentunya ini akan menjadi hal yang membingungkan.

Apalagi bagi sobat yang baru pertama kali membuat blog dan tertarik membuat Read More karena melihat tampilan situs blog lain yang rapi dengan menggunakan Read More. Pada kesempatan kali ini, admin akan berbagi tips membuat Read More secara manual melalui post blog  dan juga cara otomatis dengan menambahkan kode HTML pada template blog. Gambar dibawah adalah contoh tampilan blog yang belum terpasangn Read More.

      

      A.      Cara Manual Membuat Read More di Postingan Blog

Cara manual ini sebenarnya memanfaatkan menu yang tersedia di antarmuka pembuatan postingan blog, yaitu Jump Break, dimana fungsinya untuk memotong isi atau konten postingan pada halman yang menampilkan daftar postingan blog (halaman index blog). Oke, berikut cara manual untuk membuat Read More di postingan blog dengan menu Jump Break :

1.    Silakan sobat buat postingan baru di Entri

2.   Setelah membuat postingan, Letakan kursor yang akan dijadikan batas untuk konten yang akan ditampilkan pada halaman index. Kemudian klik Jump Break.

3.  Akan tampil garis pemisah yang menandakan bahwa fitur jump break telah ditambahkan pada post.

4.    Selanjutnya Klik Publish dan silakan kunjungi homepage blog, maka sobat akan melihat kontek postingan blog hanya menampilkan sebatas posisi jump break yang telah ditentukan. Serta akan menemukan link “Read More”.

Catatan :

Sebelum klik Jump Break, disesuaikan terlebih dahulu seberapa banyak konten post blog yang akan sobat ingin tampilkan di Halaman index blog. Agar nantinya terlihat rapih dengan postingan blog lainnya.

Apabila tahapan tersebut sudah berhasil. Tapi sobat ingin mengganti link “Read More” dengan teks lainnya. Berikut tahapan cara mengganti teks tersebut :

1.       Silakan login ke akun Blogger. Kemudian Klik menu Layout atau Tata Letak

2.       Cari bagian Postingan Blog lalu klik edit.

3.    Maka akan muncul pop up baru untuk konfigurasi postingan blog. Silakan sobat ganti teks “Read More” dengan teks yang sobat inginkan. Misal diganti menjadi “Baca Selengkapnya” atau “Continue Reading”. Dan klik Save. 

      B.      Cara Mengganti Read More di Postingan Blog (Cara Manual) dengan Gambar

Untuk tutorial ini masih menyambung dengan tutorial diatas, hanya teks “Baca Selanjutnya” diganti dengan gambar unik, agar terlihat lebih menarik dan rapih. Oke, berikut tahapan untuk menggantinya:

1.    Login ke akun Blogger. Klik Template atau Theme. Lalu klik Edit HTML.

2.   Cari kode <data:post.jumpText/> dengan menggunakan CTRL + F. Setelah ketemu kode tersebut, silakan sobat ganti dengan kode <img src=”isi dengan URL gambar”/>. Contoh kode yang sudah ditambahkan URL gambar <img src=”https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8gNw5-pLXbM1MPM5-Mmv7e05uMh3-aSwtYGHAfaWtvfyk4frkAKxgvaaNABwXeCcJan_ye2VIWTEXjjxRFSyoDzcq1RFfB9Sk0fz3P-wMNijygD8KXFySuSCsc4WTi8axdrygbx2f3Z4K/s1600/read+more_1.png”/>

Catatan :

Silakan sobat ganti teks berwarna merah dengan URL gambar yang kalian minati. Untuk ukuran gambar min 150 x 42 pixel. Apabila sobat malas mencari gambar yang diminati, berikut admin lampirkan gambar Read More dengan URL gambar yang bisa sobat gunakan.

	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8gNw5-pLXbM1MPM5-Mmv7e05uMh3-aSwtYGHAfaWtvfyk4frkAKxgvaaNABwXeCcJan_ye2VIWTEXjjxRFSyoDzcq1RFfB9Sk0fz3P-wMNijygD8KXFySuSCsc4WTi8axdrygbx2f3Z4K/s1600/read+more_1.png
	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilz7qbA1_uGoNPe6iHVqMSR0D7n3h3sP4fcoei94gn8f65aExbECUvcJXMA4lHbm6V8slh1gGEdkKEsTGe2S8oOwW5NIEdr07tqdUd3TZIHW0tyzqXITo0SKaSrcZyNKF95IrYQfYNrfCJ/s1600/read+more_2.png
	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig7xWQP4v9kKMIjJd9El-VZR6Q4ONe70-Rc-_YfUuAOMkzktyOo5Hm2yDQrVnWCFPAOucVc6tFdwryIRVRgf85F0uIsWk1h4YhJtsFWMpjahOdEP1lhmMfMzeJtPbKHIFsMRRKtl1zO9_W/s1600/read+more_3.png
	https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8orZ6I8zb5-3jQhqTQaEYJpqMVeQUlUaB8IGJhj3S62AjxFsrwRBFIH9Fq5wkg4N7j87FQJbdf-wlk_RMTGx052uB7BYEmEmmT8e35fCK3WgqLsLRZtpxM94kp8co3OSzsYt5J8QDqvsp/s1600/read+more_4.png

3.   Untuk merubah posisi Read More, sobat bisa mengganti kode <div class='jump-link'> dengan kode <div class=’jump-link’ style =’text-align: right;’>

Catatan :

Silakan ganti teks berwarna merah dengan posisi gambar yang sesuai dengan keinginan sobat. Misal Center atau Left.

4.    Jika sudah diganti, lalu klik Save theme. Silakan sobat lihat hasilnya

      

      C.      Cara Otomatis Membuat Read More di Postingan Blog

Berikut tahapan-tahapan untuk membuat Read More di postingan blog secara otomatis :

1.   Silakan login ke akun Blogger. Klik menu Theme > Edit HTML.

2.   Cari Kode </head> dengan menggunakan CTRL + F. Kemudian copy paste kode dibawah ini diatas kode </head> :

      <script type='text/javascript'>
no_thumb_sum = 300;
thumb_sum = 200;
thumb_h = 220;
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>

 

3.  Lalu cari kode <data:post.body/> dengan menggunakan CTRL + F. Biasanya kode tersebut ada 2-3 kode yang sama, silakan sobat ganti kode yang kedua dengan kode dibawah ini :

      <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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6Gld_b3PIf-CpYuefkTPZEYvQfFGrlnoZzw-tkyLrezBULzHEOR_iee6Ydxx73T4mK0CKxofV_HG3bDbS_aT0UOHNRCchnQZTnQkFUgOAV1zkV1SuaBIk3z2_E1AIq1K7HymnSnbghPc/s1600/read-more-by-tulisanwortel1.png"/></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 -->

Catatan :

Silakan sobat ganti kata berwarna merah dengan URL gambar yang kalian sukai. Apabila males, silakan copy saja dari URL gambar Read More diatas tadi.

4.    Silakan klik Save Theme dan lihat hasil homepage blognya

Itu tadi tutorial lengkap tentang bagaimana Cara Unik Membuat Read More pada Postingan Blog mulai dari cara manual sampai otomatis. Sebagai catatan admin, apabila sobat akan menggunakan cara otomatis, usahakan tidak digabungkan dengan cara manual ke 1 & 2. Karena akan terjadi double Read More pada postingan blog. Semua tutorial ini akan bekerja, apabia sobat mengikuti setiap tahapannya. Semoga bermanfaat dan Happy Enjoy,,,,Guys.