Ketika Anda membuat sebuah blog ataupun website tentunya anda ingin memiliki blog dengan halaman yang rapih dan juga menarik supaya pengunjung akan nyaman dan betah ketika mengunjungi website anda.
Akan tetapi ketika anda memasang beberapa template atau tema terutama tema bawaan terkadang pada bagian home isi konten terlihat semua sehingga tampilanya menampilkan seluruh isi dari setiap postingan. Tentunya hal ini akan membuat tidak nyaman pengunjung karena pengujug akan kesulitan ketika harus mencari postingan lainnya.
Oleh karenanya untuk mengatasi hal tersebut Anda harus memasang read more otomatis karena read more otomatis bukan hanya untuk merapihkan tampilan blog saja, melainkan juga untuk mempercantik tampilan blog dan juga dapat mengurangi data loading home page blog sehingga akan semakin cepat akses ke halaman homepage anda.
Karena jika kita tidak memasang readmore otomatis maka pada halaman homepage akan megkases setiap isi dari postingan yang menyebabkan halaman homepage akan seakin berat. Oleh karena itulah read more otomatis ini berperan dalam memangkas ataupun memotong isi dari postingan Anda, yang nantinya hanya menampilkan sedikit cuplikan dari artikel tersebut pada halaman home page blog anda.
Daftar Isi
Penjelasan Mengenai read more otomatis
- Akses menju halaman homepage blog akan menjadi lebih cepat karena ketika mengkases halaman homepage akan ringan, hal ini disebebkan oleh hanya sedikitnya tulisan yang ditampilkan pada halaman tersebut .
- Meningkatkan visibilitas postingan pada halaman blog anda, dimana memudahkan bagi pengunjung untuk melihat postingan lainnya di halaman homepage blog anda.
- Dapat meningkatkan page view posting blog, karena pengujung akan dengan mudah menemukan postingan lainnya di halaman homepage blog anda.
- Mengurangi bounce rate karena ketika pengunjung membaca satu artikel maka akan dengan mudah mencari artikel lainnya yang menarik melalui halaman hompage blog anda.
Cara Pasang read more otomatis di blogger
Untuk memasang read more otomatis pada blogger terdapat dua cara yang dapat Anda terapkan, yakni dengan cara manual yaitu dengan membuat satu persatu read more pada setiap artikel yang di posting dan secara otomatis yaitu dengan memasukan script atau kode di html template blog anda yang nantinya seluruh artikel yang telah diposting akan otomatis menjadi read more pada halaman home page.
Pada artikel kali ini saya hanya membahas mengenai pemasangan secara otomatis. Adapun untuk langkah penerapan pada blog anda sebagai berikut :
1. Login terlebih dahulu ke halaman dasboard blogger.
2. Klik Tema dan jangan lupa terlebih klik backup/restore, yang ada di kanan atas menu .
3. Klik edit HTML, kemudian cari kode <head>, untuk mepermudah maka dapat dengan mengetikkan “control+F”, lalu masukan kode <head> pada kolom pencarian .
4. Jika sudah ketemu maka salin kode berikut ini, kemudian tempelkan di atas kode <head>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<style>
.post-body{text-align:justify;}
.post-body img{max-width:none;width:auto;}
.read-more{float:left; padding-top: 10px;}
.read-more a{ color: #fff!important;text-shadow:0 1px 0 rgba(0,0,0,0.5);background:#0457A9; text-decoration:none;font:bold 13px Arial;padding:5px;}
.read-more a:hover{text-decoration:none;background:#666;}
.pic{border: 10px solid #fff;float:left;height:165px;width:280px;margin-right: 20px;margin-bottom:10px;overflow:hidden;box-shadow: 5px 5px 5px #111;}
.grow img{height:165px;width:280px;transition: all 2s ease;}
.grow img:hover{width:400px;height:250px;}
</style>
<script type='text/javascript'>
var thumbnail_mode = "yes"; //yes maka dengan menggunakan gambar, no maka tanpa gambar
summary_noimg = 300; //banyaknya huruf apabila tidak ada gambar
summary_img = 250; //banyaknya huruf apabila ada gambar
img_thumb_height = 165;
img_thumb_width = 280;
</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>
5. Selanjutnya cari kode <data:post.body/> . Kemudian ganti kode tersebut dengan kode dibawah ini
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>");
</script>
<div class='read-more'>
<a expr:href='data:post.url'>Baca Selengkapnya </a>
</div>
</b:if>
</b:if>
Keterangan:
- Untuk keterangan “Baca Selengkapnya” bisa diganti dengan bacaan “Read More” ataupun lainnya sesuai dengan selera anda
- jika pada tema yang anda gunakan sudah terdapat fitur read more otomatis sebelumnya, maka terlebih dahulu harus dihapus dulu, karena bisa error atau tidak berfungsi.
6. Klik simpan dan terapkan. jika berhasil maka pada halaman homepage anda setiap postingan akanter dapat fitur read more.
Mungkin cukup sekian pembahasan kali ini apabila ada yang ingin ditanyakan dapat melalui kolom koentar dibawah
