Cara Membuat Auto Readmore Responsive Dengan Javascript

By HP Yitno

Auto Readmore saat ini justru banyak digunakan oleh para pembuat template responsive semenjak pihak google mengumumkan akan lebih memprioritaskan template mobile friendly dan responsive. Memang penggunaan javascript yang terlalu banyak sedikit banyak akan memberatkan loading blog. Namun karena ada penambahan script jquery yang mampu menyederhanakan kode javascript, hal ini tidak menjadi masalah yang berarti.

Readmore otomatis yang akan saya bagikan kali ini sangat berbeda dengan script yang sudah ada di internet. Script yang saya pakai disini sebenernya adalah kode Readmore Unik Tanpa Javascript yang saya kombinasikan dengan kode snippet yang bisa kita atur jumlah katanya. Ini merupakan hasil eksperimenku saat membuat Gandul Responsive Blogger Template.

Salah satu kelebihan dari auto readmore ini adalah anda bisa menghilangkan tulisan readmore jika memang tidak ingin menampilkannya. Sehingga yang tampak pada halaman utama atau homepage hanya judul postingan dan gambar thumbnail saja.

Berikut tutorial lengkap cara membuat autoreadmore terbaru 2015:
1. Login ke www.blogger.com
2. Klik template kemudian edit html
3. Cari kode ]]></b:skin> dengan bantuan CTRL + F
4. Pastekan kode dibawah ini tepat diatas kode tersebut

.post-thumbnail{float:left;margin-right:20px}

5. Cari kode <data:post.body/> dengan bantuan CTRL + F
6. Jika terdapat dua atau tiga kode, pilih yang kedua saja
7. Ganti kode tersebut dengan script dibawah ini

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div>
<b:if cond='data:post.thumbnailUrl'>
<img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
</b:if>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSnippet(&quot;summary<data:post.id/>&quot;);</script>
</div>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>

8. Cari kode </head> dengan bantuan CTRL + F
9. Pastekan kode dibawah ini tepat diatas kode tersebut

<script type='text/javascript'>
snippet_count = 300;

//<![CDATA[

function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var snippet = strx.split("<");
for(var i=0;i<snippet.length;i++){
if(snippet[i].indexOf(">")!=-1){
snippet[i] = snippet[i].substring(snippet[i].indexOf(">")+1,snippet[i].length);
}
}
strx = snippet.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 createSnippet(pID){
var div = document.getElementById(pID);
var summ = snippet_count;
var summary = '<div class="snippets">' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}

//]]>
</script>

10. Ganti angka 300 dengan angka yang anda sukai untuk mengatur jumlah kata yang muncul pada homepage.
11. Jika tidak ingin menggunakan kata readmore, hapus kode yang berwarna purple.
12. Simpan template dan lihatlah hasilnya

Demikianlah tutorial singkat cara bikin autoreadmore dengan javascript terbaru yang bisa saya bagikan. Semoga trik ini dapat membantu temen-temen yang sedang berusaha membuat template sendiri.

SHARE :