Cara DESAIN BLOG Membuat Auto Read More Dengan Gambar Di Blog

Cara Membuat Auto Read More Dengan Gambar Di Blog

Oke saya rasa tidak perlu panjang lebar, ayo di mulai...

Seperti biasa, langkah pertama yang harus kamu lakukan adalah masuk dahulu ke blogger.com menggunakan akun kamu, kemudian.

Ikutilah langkah-langkah di bawah ini :

Ingat : Sebelum kamu mengedit HTML, sebaiknya BACKUP dulu template blog kamu.

1. Klik Template.
2. Klik Edit HTML.
3. Pilih Format Template.
4. Cari Kode (agar lebih mudah mencari kode di kotak template kamu, gunakan tombol ctrl+f » tunggu sebentar » jika berhasil maka akan terlihat Di Dalam Kotak Template Kamu).

» Cari kode : </head>
» Setelah kode tersebut sudah ditemukan, silahkan pasang kode di bawah ini tepat di bawahya.

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

Keterangan :

• summary_noimg = 430; adalah jumlah karakter tanpa gambar, silahkan kamu ganti dengan selera yang kamu mau.
• summary_img = 340; adalah jumlah karakter dengan gambar, silahkan kamu ganti dengan selera yang kamu mau.
• img_thumb_height = 150; adalah ukuran tinggi gambar (dalam pixel), silahkan kamu ganti dengan selera yang kamu mau.
• img_thumb_width = 150; adalah ukuran lebar gambar (dalam pixel), silahkan kamu ganti dengan selera yang kamu mau.

» Cari kode : <data:post.body/> pada template saya ada dua kode tersebut dan saya pilih kode yang kedua.
» Setelah kode tersebut sudah ditemukan, silahkan ganti kode tersebut dengan kode di bawah ini.

<!-- Auto read more -http://enoparnoabiezz.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'>[Baca Selengkapnya]</a>
</b:if>
</b:if>
<!-- Auto read more -http://enoparnoabiezz.blogspot.com- End -->
<small><a href="http://enoparnoabiezz.blogspot.com/2013/06/cara-membuat-auto-read-more-dengan.html" target="_blank">Cara Membuat Auto Read More Dengan Gambar Di Blog</a></small>

Keterangan :

• Warna merah adalah teks, silahkan kamu ganti dengan selera yang kamu mau

» Atau jika kamu ingin menggantinya dengan gambar, ganti warna merah di atas dengan kode di bawah ini :

<img border='0' src='http://1.bp.blogspot.com/-0EFHTLuHtME/Ubsm34G7EaI/AAAAAAAABfU/O1XGh3nuwIw/s1600/read_more.gif'/>

Keterangan :

• Warna ungu adalah URL gambar, silahkan kamu ganti dengan selera yang kamu mau.

Rekomendasi Untuk Kamu :

• ...

Bagaimana cara agar tampilan teks di Post Summary - Auto Readmore Bisa Rata Kiri Kanan (Justified)?

Lihat kode di atas (kotak script no 2), cari kode yang saya beri warna orange. tambahkan style css ini style='text-align:justify;' ke dalam  kode yang saya beri warna orange tersebut

» Maka hasilnya akan seperti seperti ini :
<div style='text-align:justify;' expr:id='&quot;summary&quot; + data:post.id'>

5. Sebelum Kamu Klik Simpan Template, sebaiknya kamu klik Pratinjau Template terlebih dahulu untuk memeriksanya.
6. Jika Sudah Oke » Klik Simpan Template.

Selamat Mencoba, Semoga Berhasil & Mudah-Mudahan Bermanfaat :)