Cara Membuat Auto Readmore Responsive Dengan Javascript - HP Yitno Cara Membuat Auto Readmore Responsive Dengan Javascript - HP Yitno

Bisnis Online I Affiliasi I Tutorial Blog I Tips & Trick I Motivation I SEO

Cara Membuat Auto Readmore Responsive Dengan Javascript

Cara Membuat Auto Readmore Dengan Javascript Terbaru
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 :

Iklan Lucu & Super Kreatif Di Dunia

Amazing..!!! - Kata itulah yang mungkin akan anda katakan tatkala melihat iklan paling kreatif & termahal di dunia berikut https://youtu.be/jYsx0nlGtJ4.
3 Komentar untuk "Cara Membuat Auto Readmore Responsive Dengan Javascript"

Dengan memanfaatkan script diatas, kita bisa membuat template responsive sesuai dengan yang kita inginkan.

Berkunjung mas, kebetulan template blogku Cangkir Kupi sudah responsif dan begitupun auto readmore nya. Salam.

1. Silakan buka Daftar Isi untuk melihat artikel menarik lainnya
2. Komentar sobat adalah investasi besar untuk meningkatkan jumlah pengunjung ke Blog Sobat

Back To Top