Cara Membuat Auto Readmore Template Bawaan Blogger
Untuk membuat fitur auto readmore pada blog, perlu sedikit mengedit kode html dan menambahkan kode untuk membuat auto readmore pada blog. jika sobat memasang auto readmore pada blog, mungkin akan ada kekurangan yaitu terletak kata-kata yang awalnya panjang kini menjadi lebih diperkecil atau dipersingkat kata-katanya.
Baca Juga :
cara membuat bingkai quote pada blog
cara menghilangkan insert jump break pada blog
Bagian tampilan auto readmore akan tampak lebih responsive dibandingkan sebelumnya itu karena template bawaan blogger belum dikatakan template yang responsive, perlu tindakan atau meng-edit template bawaan blogger tersebut agar nampak lebih responsive. salah satu contoh sobat bisa memulai untuk meng-edit pada bagian readmore agar artikel nampak lebih teratur dan rapi dan serta tidak terlalu kepanjangan.
Perlu diketahui sebelum sobat melakukan hal ini, artikel dalam blog harus memiliki gambar, jika tidak memiliki gambar maka akan terlihat kosong. usahakan sebelum mengedit auto readmore ini lebih dahulu cek artikel sobat apakah sudah menyisipkan gambar pada artikelnya, jika sudah bisa memulai edit html.
LANGKAH-LANGKAH MEMBUAT AUTO READMORE
Langkah-langkah membuat auto readmore pada template bawaan blogger, silahkan ikuti langkah-langkah di bawah ini :
LANGKAH PERTAMA
Login ke blogger, klik Login
Pilih blog yang akan di edit.
Masuk pada MENU TEMA, Kemudian Klik EDIT HTML.
Cari kode </head>, untuk mempersingkat waktu silahkan menggunakan CTRL + F.
Jika sudah ketemu silahkan copy kode dibawah ini dan diletakkan di ATAS </head>
KETERANGAN :
<!--membuat auto readmore awal-->
<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 -dengan gambar, no -tanpa gambar
summary_noimg = 300; //banyaknya huruf jika tidak ada gambar
summary_img = 250; //banyaknya huruf jika 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>
<!--membuat auto readmore Akhir-->
WARNA MERAH : Diatas ada warna merah untuk mengatur tinggi dan lebar sebuah gambar pada artikel.
WARNA HIJAU : Warna hijau diatas berfungsi untuk mengatur banyak kosa-kata yang akan ditampilkan pada halaman depan blog.
LANGKAH KEDUA
Pada langkah kedua ini sobat harus menyisipkan kode html terakhir, agar semua langkah selesai dan bisa diterapkan, langkah-langkahnya bisa sobat lihat dibawah ini:
Hal terakhir, sobat perlu meletakkan kode css pada bagian menu EDIT HTML.
Cari kode <data:post.body/>, untuk mempersingkat waktu silahkan tekan CTRL + F.
Jika sobat menemukan <data:post.body/>, cari yang nomor dua bukan yang pertama, dengan cara tekan enter pada keybord.
Lalu Hapus kode <data:post.body/> yang kedua atau bisa dengan menambahkan <!-- -->, maka akan seperti ini <!--<data:post.body/>-->, ini bertujuan jika sobat tidak ingin menghapus kode tersebut tinggal di non-aktifkan saja.
Kemudian copy kode dibawah ini dan letakkan pada bagian kode yang dihapus atau di non-aktifkan.
<!-- Membuat auto readmore Mulai -->
<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>
<!-- Membuat auto readmore Akhir -->
KETERANGAN
UNTUK WARNA KUNING : Pada bagian script kode html yang ditandai warna kuning sobat bisa menghapus atau tidak menghapusnya.
UNTUK WARNA MERAH : Pada bagian script kode html yang ditandai warna merah, "Baca Selengkapnya " bisa sobat ganti sesuai keinginan sobat.
Sebelum disimpan lakukan Pratinjau terlebih dahulu apakah kode diatas berfungsi dengan baik atau tidak, untuk template bawaan blogger kode diatas berfungsi secara normal dan tidak ada masalah sama sekali. Jika sobat mengalami atau menemukan kode <data:post.body/> lebih dari dua maka sobat perlu tes satu persatu pada bagian <data:post.body/> pada no dua dan tiga, tidak perlu dihapus kode <data:post.body/> cukup di nonaktifkan saja.
Terima kasih sudah berkunjung, semoga bisa bermanfaat dan membantu.