Cara Pasang Read More Animasi

Setelah beberapa bulan ini vakum ngeblog,blog-triks akhirnya bisa kembali menghirup segarnya udara dunia blog.Dan kali ini,sesuai dengan judulnya, blog-triks akan membahas tentang Bagaimana caranya membuat readmore animasi (kaya punyaku ini,hehe ).Aku tulis trik ini cos banyak temen-temen blogger yang menanyakannya lewat komentar dan shoutbox.Tak ingin mengecewakan sobat-sobat blogger aku,akhirnya lounching juga nih tutorial.Mau tau caranya?Ini dia caranya..CEKIDOT

Caranya gampang kok
1.Bagi teman-teman yang blognya belum pake readmore,buat readmore dulu disini

2.Dihalaman Edit HTML, ganti tulisan read more ato lainya yang sobat pake buat link baca selanjutnya dengan kode berikut <img src="link gambar kamu"/>
Yang sudah pake read more langsung langkah 2 aja ya.
3.Langkah terakhir dan terpenting adalah Save Template

Kalo sobat belum punya gambar ini aku sediakan:

http://i496.photobucket.com/albums/rr329/grandisyf/th_button-green-f.gif


http://i496.photobucket.com/albums/rr329/grandisyf/th_arrow-readmore.gif


http://i496.photobucket.com/albums/rr329/grandisyf/th_more.gif


http://i496.photobucket.com/albums/rr329/grandisyf/Read-more-3_grandis.gif


http://i496.photobucket.com/albums/rr329/grandisyf/th_Readmore3.gif

Uda dulu ya,happy blogging..

Cara Memasang Read More Otomatis [UPDATE]

Nah sekarang kalau sahabat sudah mempelajari Cara Memasang Read More Otomatis pada artikel sebelumnya, sekarang kita akan mencoba mengatasi permasalahan yang timbul pada halaman statis tersebut.

Cara Memasang Read More Otomatis ini mungkin agak sedikit ribet oleh karena itu sahabat harus teliti dan hati hati untuk Memasang Read More Otomatis ini supaya tidak terjadi eror pada template.

Baiklah sekarang kita akan mencoba mengatasi masalah Read More Otomatis pada halaman statis, silahkan sahabat baca langkah langkah dibawah ini :

1. Login ke Blogger

2. Pilih Rancangan

3. Pilih Edit HTML

4. Jangan lupa centang Expand Widget Template, dan download terlebih dahulu template sahabat, supaya apabila terjadi eror template asli bisa dikembalikan.

5. Apabila sahabat sebelumnya sudah memasang Read More otomatis, maka silahkan sahabat hapus terlebih dahulu, untuk panduannya sahabat bisa membaca artikel Cara Memasang Read More Otomatis Disini. dan setelah itu hapus terlebih dahulu kode Read More Otomatis tersebut.

6. Selanjutnya silahkan sahabat cari kode </head> dan letakan kode dibawah ini tepat dibawah kode </head>

<!-- Read More Otomatis script -http://www.sundaboy.com -Start-->
<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot;; //yes-dengan gambar,no-tanpa gambar
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 150;
img_thumb_width = 150;
</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 = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
        summ = summary_img;
    }
    }
    var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
    div.innerHTML = summary;
}
//]]>
</script>
<!-- Read More Otomatis script -http://www.sundaboy.com -End-->

NB : Sahabat dapat mengganti tulisan yang berwarna biru sesuai dengan keinginan sahabat

7. Selanutnya silahkan sahabat cari kode <data:post.body/> kalau sudah ketemu silahkan sahabat ganti kode tersebut dengan kode dibawah ini :

<!-- Read More Otomatis script -http://www.sundaboy.com -Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<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>
<a class='more' expr:href='data:post.url'>Read More...</a>
</b:if>
</b:if>
<!-- Read More Otomatis script -http://www.sundaboy.com -End-->

8. Sekarang silahkan sahabat simpan template dan lihatlah hasilnya

Nah itulah Cara Memasang Read More Otomatis, untuk mengatasi masalah pada Cara Memasang Read More Otomatis sebelumnya. mungkin itu dulu yang dapat  share mohon maaf bila ada kekurangan. sekian dan terimakasih.