Membuat Read More Automatis di Blogger

Banyak cara untuk membuat tampilan blog kita lebih menarik dan rapi sehingga pengunjung juga merasa nyaman dan menyenangkan. Salah satu cara untuk membuat blog kita menjadi lebih terorganisir adalah dengan cara membuat read more automatis di blog yang kita kelola saat ini, hal ini akan memberi banyak keuntungan bagi blog kita, dimana para pengunjung dapat dengan mudah menemukan artikel yang mereka inginkan.

Sebagai admin sebuah blog, hal utama yang harus kita perhatikan adalah kepuasan hati para pengunjung, ini adalah kunci utama untuk meraih kesuksesan dimasa mendatang, jika para pengunjung merasa puas dan menyenangkan berada di blog kita maka tidak akan tertutup kemungkinan sewaktu-waktu mereka akan mengunjungi blog kita lagi dan bahkan mungkin mereka akan menyimpan alamat url blog kita sebagai daftar blog favorit mereka, hal ini dikarenakan mereka menganggap bahwa blog kita menyajikan artikel dengan sangat rapi dan terorganisir serta mudah dipahami.

Sekarang ini masih banyak para blogger yang masih kebingungan untuk membuat read more secara otomatis di blog mereka, apalagi dengan menggunakan template bawaan blogger, walaupun diluar sana banyak sekali artikel-artikel yang mebahas tentang bagaimana cara membuat read more otomatis, namun masih juga terdapat kekurangan dan mengakibatkan gagal dalam menerapkannya pada blog kita. Hal ini disebabkan karena banyaknya artikel yang copas padahal si pemilik blog sendiri tidak faham dengan caranya, apalagi orang lain. Disini saya akan menjelaskan bagaimana cara membuat read more otomatis di blogspot secara detail sehingga blogger pemula sekalipun bisa membuatnya.

Manfaat read more adalah untuk mempersingkat atau merapikan artikel yang panjang, jadi postingan artikel anda akan tersusun rapi dengan hanya menampilkan gambar dan beberapa kalimat saja.
Untuk meluruskan topik pembicaan kita saya merasa perlu menjelaskan apa itu read more? Mungkin blogger pemula atau newbie masih bingung dan merasa asing tentang istilah tersebut. Read more adalah penggalan dalam sebuah artikel, biasanya hanya menampilkan beberapa kalimat saja dan biasanya di tandai dengan kata “Read More”, “Baca Selengkapnya”, ” Lanjutkan Membaca”, dan sejenisnya di akhir kalimat dalam sebuah postingan pada halaman pertama, atau dapat kita artikan sebagai sambungan dari sebuah artikel yang sedang kita baca. sampai di sini saya harap anda sudah mengerti apa itu read more.


Untuk melihat contoh atau demo read more yang akan saya jelaskan cara membuatnya klik di sini


Membuat Read More Automatis di Blogger
Untuk menambahkannya memerlukan waktu dan usaha beberapa menit saja. Automatis Read More di halaman depan Blog ini memiliki beberapa versi, dan berbagai macam bentuk. Yang akan kita praktekkkan sekarang adalah membuat Automatis read more yang sangat simpel dan sangat ringan untuk loading blog. dan Auto Read more ini dapat di modifikasi sesuai kebutuhan, diuraikan di dalam keterangan.Berikut langkah-langkah Cara Membuat Auto Read More Otomatis di Blog pada template bawaan blogger.

Note: bagi anda yang sudah pernah memasang read more otomatis di blog sebelumnya maka anda harus menghapusnya terlebih dahulu karena jika tidak di hapus maka tidak akan berhasil menerapkan Tutorial SEO Blog ini sama sekali.

Langkah-Langkah Membuat Read More Automatis Tahap Pertama
  • Login Ke Blogger anda, caranya lihat di sini
  • Clik Template, Backup/Unduh template dan simpan untuk berjaga-jaga bila terjadi kesalahan, atau langkah berikut bisa di uji coba menggunakan Blog percobaan yang lain.
  • Selanjutnya clik Edit HTML dan tunggu sampai loading selesai sampai anda benar-benar melihat tampilan halaman seperti gambar di bawah ini.

  • Sekarang mari kita berselancar menelusuri semua kode tesebut dengan cara melakukan clik pada setiap tanda panah yang berada disebelah kiri seperti yang telah saya lingkari pada gambar diatas, pastikan bahwa anda sudah meng clik semua tanda panahnya sampai ke bawah (lihat gambar diatas ada tanda panah disebelah kanan dan tarik kursor tersebut untuk melihat kode sampai habis)
  • Jika anda sudah melakukan semua saran saya di atas sekarang silahkan Tekan  Ctrl + F pada keyboar Computer anda (Supaya mempercepat pencarian kode) dan anda akan melihat tampilan seperti gambar di bawah ini.

  • Pada gambar di atas telah saya tandai dan lingkari dengan nomor 2 yaitu kotak pencarian yang sebelumnya tidak ada dan setelah anda menekan Ctrl + F pada keyboar Computer anda, kotak tersebut berfungsi untuk mempermudah pencarian kode. Sekarang Copy kode ini </head> dan masukkan atau pastekan ke dalam kotak tersebut lalu tekan enter pada keyboar Computer anda dan anda akan melihat hasil seperti yang telah saya lingkari pada nomor 3 dalam gambar diatas.
  • Pada gambar diatas tepatnya dalam lingkaran nomor 3 telah saya buat 2 buah tanda panah sekarang letakkan kursor tepat di awal kode </head>  agar kita bisa memasukkan kode read more di atas kode </head> tersebut, atau anda bisa melihat gambar di bawah ini.
  • Sekarang masukkan kode di bawah ini di atas kode </head> (sebelum kode </head>)
<!--MBA Auto Read More Stars-->

<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: 15px;}
.read-more a{ color: #fff!important;text-shadow:0 1px 0 rgba(0,0,0,0.5);background:#bf0404;  text-decoration:none;font:bold 13px Arial;padding:5px;}
.read-more a:hover{text-decoration:none;background:#666;}
.pic{border: 0px solid #fff;float:left;height:130px;width:230px;margin-right: 20px;margin-bottom:10px;overflow:hidden;box-shadow: 5px 5px 5px #111;}
.grow img{height:130px;width:230px;transition: all 2s ease;}
.grow img:hover{width:300px;height:200px;}
</style>
<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot;; //yes -dengan gambar, no -tanpa gambar
summary_noimg = 250; //banyaknya huruf jika tidak ada gambar
summary_img = 210; //banyaknya huruf jika ada gambar
img_thumb_height = 130;
img_thumb_width = 230;
</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>

<!--MBA Auto Read More End-->

  • Lihat gambar dibawah ini
  • Gambar diatas terlihat bahwa saya telah meletakkan kode tersebut tepat di atas kode </head> dan sampai disini anda telah menyelesaikan tahap pertama. Mari kita lanjutkan.....

Langkah-Langkah Membuat Read More Automatis Tahap Kedua
  • Sekarang mari kita lanjutkan dengan pencarian kode <data:post.body/> lakukan pencarian seperti yang pernah kita lakukan sebelumnya di atas yaitu dengan cara Copy kode ini <data:post.body/> masukkan atau pastekan ke dalam kotak pencarian tersebut lalu tekan enter pada keyboar Computer anda dan anda akan melihat hasil seperti terlihat pada gambar di bawah ini.

  • Gambar diatas menunjukkan bahwa kita baru menemukan 1 kode  <data:post.body/>  dan jangan lakukan apa-apa dulu karena masih ada 2 kode yang sama berada di bawah yang harus kita cari maka teruslah melihat sampai ke bawah sampai anda menemukannya, lihat gambar ini di bawah ini.

  • Pada gambar diatas kita telah menemukan kode <data:post.body/> yang berada dibawah sehingga jumlah semua kode tersebut adalah 3 buah kode yang sama. Ingat bahwa ketiga kode tersebutlah yang akan kita ganti dengan kode lain, sekarang mari kita hapus kode <data:post.body/> yang pertama dan menggantikannya dengan kode di bawah ini.
<!-- MBA Auto Read More Stars -->
<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'>Read More &#187;</a>
      </div>
</b:if>
</b:if>
<!-- MBA Auto Read More End -->

  • Lihat gambar dibawah ini dan praktekkan sesuai dengan panduan yang telah saya tuliskan diatas tanpa melewati sepatah kata pun agar tutorial seo blog ini benar-benar berhasil anda terapkan di blog yang anda kelola saat ini
  • Gambar diatas menunjukkan bahwa saya telah menghapus kode <data:post.body/> yang pertama dan menggantikannya dengan kode yang baru, dan hasilnya lebih kurang seperti gambar diatas, sekarang tugas anda untuk menghapus dua buah kode <data:post.body/> lagi yang berada di bawah dan ganti juga dengan kode sama seperti diatas, pastikan anda telah mengganti ke tiga kode tersebut dan saya yakin anda akan berhasil.
  • Melihat gambar diatas, anda pasti ingin menanyakan satu hal yaitu kenapa setelah menghapus 1 kode <data:post.body/> dan menggantikannya dengan kode baru yang saya berikan diatas malah timbul 3 buah kode <data:post.body/> lagi? Itu jawabannya ada dalam kode yang saya berikan diatas, dimana dalam kode tersebut juga ada 3 kode <data:post.body/> tersebut, dan anda hanya harus fokus pada ke 3 kode yang kita temukan sebelum kita menggantinya. Jika anda sudah melakukan semua tahapan diatas maka sekarang simpan template anda dan lihat hasilnya.
Sampai disini saya kira anda sudah mengerti dan sudah berhasil menerapkannya pada blog anda, dan jangan ragu untuk bertanya jika ada masalah dalam penerapan membuat Automatis Read More di blog anda, silahkan masukkan pertanyaan dan komentar anda di bawah, dan penulis menguacapkan terima kasih kepada anda karena sudah meluangkan waktu untuk membaca tulisan ini, mohon maaf jika terdapat kekeliruan dan kejangggalan dalam tulisan ini.. Salam damai dan semoga sukses. 

1 comment: