Preferensi: Cara Mudah Pasang Read More Otomatis di Template Bawaan Dengan Ponsel

Cara Mudah Pasang Read More Otomatis di Template Bawaan Dengan Ponsel

Berikut ini adalah cara pemasangan skrip Read more otomatis di template bawaan blog dengan ponsel android, sehingga ketika menulis artikel dengan aplikasi Blogger tidak perlu harus kerja dua kali hanya untuk memasang Read more, atau dalam blog bahasa indonesia sering menjumpai artikel terpotong dan di bawahnya ada link Baca selengkapnya untuk membaca artikel secara keseluruhan.
 








Kelebihan dan kekurangan memasang skrip Read more otomatis

*. Dari segi kelebihannya yaitu penulis tidak perlu susah payah menambahkan skrip Read more ketika menulis. Serta penulis yang menggunakan aplikasi Blogger untuk menulis di ponsel android tidak perlu mengedit lagi dengan cara membuka browser hanya untuk menambahkan Read more, karena skrip tersebut akan otomatis terpasang setelah artikel di terbitkan.

*. Dari segi kekurangan yaitu teks yang terpotong tidak teratur, sehingga terkesan berantakan karena penempatan kode tersebut sesuai jumlah huruf yang sudah ditentukan.

Jika ingin memasangnya langsung saja buka blogger.com dari aplikasi browser Chrome dan masuk dengan akun blog yang ingin dipasang Read more otomatis. Dari menu Dasbor > pilih Template > kemudian pilih Edit HTML. Geser ke bawah dan cari kode </head> kemudian salin dan tempelkan kode di bawah ini tepat di atas kode </head> tersebut.

    <script type='text/javascript'>
    var thumbnail_mode = &quot;float&quot; ;
    summary_noimg = 500;
    summary_img = 400;
    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>

Catatan: Untuk summary_noimg = 500; menandakan jumlah huruf yang akan tampil sebelum link Raed more, sedangkan summary_img = 400; jumlah huruf yang akan tampil dengan gambar ilustrasi artikel. Silahkan ganti angka tersebut sesuai keinginan. Kemudian kode img_thumb_height = 80; menandakan ukuran tinggi gambar dan kode img_thumb_width = 120; menandakan ukuran lebar gambar dalam satuan pixel, silahkan ganti angka tersebut sesuai ukuran yang di inginkan.

Langkah selanjutnya cari kode skrip <data:post.body/> yang biasanya tersembunyi di dalam skrip <b:includable id='post' var='post'> kemudian hapus <data:post.body/> dan tempelkan kode skrip 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; </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>

Untuk tulisan Read more bisa di ganti dengan Baca selengkapnya atau dengan kata yang lain sesuai bahasa tampilan blog.
Selanjutnya pilih Simpan Template dan lihat hasilnya.