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 != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<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='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSnippet("summary<data:post.id/>");</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>
<b:if cond='data:blog.pageType != "static_page"'>
<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='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSnippet("summary<data:post.id/>");</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>
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 Membuat Auto Readmore Responsive dan Unik Dengan Javascript yang bisa saya bagikan. Semoga trik ini dapat membantu temen-temen yang sedang berusaha membuat template sendiri.
0 komentar :
Posting Komentar