Cara Membuat ReadMore Di Blog !

CARA MEMBUAT READMORE DI BLOG


Banyak dari para blogger ingin memakai readmore untuk memperapih tampilan blognya,yah jujur saja memakai readmore dapat membuat pengunjung blog kita tidak ribet membaca artikel-artikel kita. Nah,to the point aja ya, saya akan memberitahu cara membuat readmore untuk para blogger yang masih "Newbie" kalo udah merasa master,mohon artikel saya ini direview aja deh  ^^V
sebenarnya ada dua cara nih buat bikin readmore di blog,nah disini saya kasih dua cara yang satu untuk yang sudah mengerti edit Javascript dan yang satu bagi yang belum bisa edit javascript langsung aja deh ya,


cara pertama kita edit sedikit javascript blog kita ,pertama,login ke blog kalian,langsung ke design dan edit html, oke sudah ?

Nah kamu cari kode </head> Untuk pengguna RubahApi dan GoogleChrome anda tekan F3  lihat pada bagian bawah browser kalian (untuk firefox) ada kotah find,isikan kede </head> tadi,kalo untuk googlechrome ada dibagian kanan atas ,udah ? gak ketemu ? ,pastikan anda menchecklist Expand Widget Templates nah jika sudah copykan kode dibawah ini tepat setelah kode </head>


 <!-- Auto read more script -http://beritahunik.blogspot.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>
<!-- Auto read more script -http://beritahunik.blogspot.com- End -->

udah belom ? kalo udah saya beritahu Yang berwarna merah adalah jumlah dan ukuran tampilan, summary_noimg=jumlah karakter tanpa gambar,summary_img=jumlah karakter dengan gambar, sedangkan img_thumb_heightdan img_thumb_width adalah ukuran gambar (dalam pixel). Ubahlah sesuai dengan keinginan.

belom selesai sob,kita lanjut aja ye, lalu cari <data:post.body/> (gunakan Ctrl+F), dan GANTI dengan:

<!-- Auto read more -http://beritahunik.blogspot.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>
<!-- Auto read more -http://beritahunik.blogspot.com- End -->


Udah belom ? nah itu kode kan ada tulisan Read More >> kamu bisa ganti dengan kata-kata lain atau gambar dengan merubah tulisan merah itumenjadi

 <img border='0' src='url (direct link) gambar readmore'/>

ganti  url (direct link) gambar readmore dengan url gambar disalah satu file hosting kesayangan anda.


Nah,cara kedua dengan merubah tamplate bawaan anda, dengan cara :

cari template kesukaan kalian di : -Dhetemplate.com
                                                   -btamplate.com
                                                   - Sisanya cari di mbah gugel dengan keyword "url penyedia template blog"

kalo sudah ikuti cara akang endangkusman :

1. Buka blog anda dan login dengan akun anda,
2. Masuk Dashboard
3. Pilih Layout,
4. Pilih Edit HTML,  … lihat gambar :

5. Centang —-> Expand Widget Templates

6. Lakukan  —–> Upload File template tadi  dari komputer anda,
7. Klik —–> KEEP WIDGETS
8. Klik ——>  View Blogs
9. Selesai, template blog anda sudah jadi ….gampang khan ?
SELAMAT MENCOBA…. !

Namanya belajar iyakan ? pasti ada yang bingung,nah kalo bingung gak usah panik dan gegabah,comment aja di postingan ini saya siap membantu anda,oce ??
oke saya akhiri dulu ya artikel ini,salam blogger !!

sumber : http://indo-voice.com/