Cara Membuat Auto Read More Dengan Gambar Di Blog

Melalui Edit HTML :

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. Klik Di Dalam Kotak Template Kamu.

4. Cari Kode (agar lebih mudah mencari kode di kotak template kamu, gunakan tombol ctrl+f  » 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://tutorial-blog-eno.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://tutorial-blog-eno.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, silahkan kamu ganti dengan selera yang kamu mau.
• img_thumb_width = 150; adalah ukuran lebar gambar, silahkan kamu ganti dengan selera yang kamu mau.

» Cari kode : <data:post.body/> pada template saya ada TIGA 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://tutorial-blog-eno.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 style='text-align:justify;' 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://tutorial-blog-eno.blogspot.com- End -->
<small><a href="http://tutorial-blog-eno.blogspot.com/2014/10/cara-membuat-auto-read-more-dengan-gambar-di-blog.html" target="_blank">Cara Membuat Auto Read More Dengan Gambar Di Blog</a></small>

Keterangan :

• style='text-align:justify;' adalah kode agar tampilan teks di Post Summary - Auto Readmore bisa rata kiri dan kanan (Justified). jika kamu tidak ingin menggunakannya, kode style='text-align:justify;' tersebut bisa dihapus saja.
• Warna red adalah teks link, 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwgU4j4_C-uuMXz0CxT5bIE1xR6hj-6N-FeI1L5VS0q_WmNcWFO2W1INUu8cSOsJ5YsuWerEheHiIYNjZ33WzbhVnwdzqKfXc0H1We-cMgin2PAtV2yo6yOH0rX9PcbWXYeQG4TT_MC8I/s1600/Cara+Membuat+Auto+Read+More+Dengan+Gambar+Di+Blog.gif'/>

Keterangan :

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

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

Rekomendasi Untuk Kamu :

• Kumpulan Gambar Auto Read More

Selamat Mencoba, Semoga Berhasil & Mudah-Mudahan Bermanfaat.

█████████████████████████████████████████████████████████████████

Jangan Lupa Like, Comment & Share Artikel Ini Ya » Terima Kasih Atas Kunjungannya » Salam : Eno Sutrisno

BACA JUGA ARTIKEL TERKAIT DI BAWAH INI :

Di Sini Adalah Inspirasi Untuk Sobat Blogger Semua.

Ditulis Oleh : Tutorial Blog Eno » Di Sini Adalah Inspirasi Untuk Sobat Blogger Semua.

Saat ini kamu sedang membaca artikel tentang Cara Membuat Auto Read More Dengan Gambar Di Blog. silahkan kamu Copy-Paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link di bawah ini sebagai sumbernya. INGAT : saling menghargai kreatifitas sesama sobat blogger oke. <a href="http://tutorial-blog-eno.blogspot.com/2014/10/cara-membuat-auto-read-more-dengan-gambar-di-blog.html" target="_blank">Cara Membuat Auto Read More Dengan Gambar Di Blog</a>

[Mau Seperti Ini?]