Tutorial Membuat Read More dengan Gambar Otomatis di Blog

Tutorial Membuat Read More dengan Gambar Otomatis di Blog
Tutorial Membuat Read more Bergambar Otomatis - Tidak semua template mempunyai fitur readmore bergambar yang otomatis. Atau template yang telah memiliki readmore otomatis namun bila postingan kita tidak ada gambarnya, template secara otomatis akan menampilkan gambar "no image". Yang menurut saya hal ini cukup menggangu.

Pada Tutorial kali ini, saya akan mencoba untuk memberikan informasi bagaimana cara membuat readmore bergambar otomatis, artinya hanya postingan 300 kata pertama atau 200 kata pertama saja yang tampil, tergantung setingan sobat. Dan apabil postingan memiliki gambar, maka akan ditampilkan juga di homepage, namun bila tidak ada gambar, maka tidak akan ditampilkan.

Bagaimana sob? Ingin mencoba Tutorial Membuat Readmore Bergambar Otomatis ? Silahkan ikuti step by step dibawah ini, semoga dapat membantu  :
Langkah-Langkah :

    Lakukan Intro (login blogger --> edit HTML)
    Click ctrl + F untuk mencari code <head>
    Letakkan script dibawah ini tepat dibawah code <head>

    <script type='text/javascript'>
    (function() {
    var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
    po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
    var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
    })();
    </script>
    <script type='text/javascript'>
    var thumbnail_mode = &quot;yes&quot;; //yes-dengan gambar,no-tanpa gambar
    summary_noimg = 300;
    summary_img = 255;
    img_thumb_height = 100;
    img_thumb_width = 125;
    </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>


    Cari code <data:post.body/>, biasanya setiap template ada lebih dari satu code tersebut, coba satu per satu atau coba pada <data:post.body/> yang ada pada code di bawah ini :
    <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
    Ganti code tersebut (<data:post.body/>) dengan code dibawah ini:

    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <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>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>
    </b:if>

Keterangan :
300 = jumlah karakter read more artikel tanpa gambar.
255 = jumlah karakter read more artikel dengan gambar.
100 = tinggi gambar artikel yang ingin ditampilkan pada read more.
125 = lebar gambar artikel yang ingin ditampilkan pada read more.

Sumber

Cara Cepat Hamil

Tidak ada komentar:

Posting Komentar

Selamat Datang di sukangenet, Terima kasih sudah berkunjung.

sebelum berkomentar, baca dulu peraturan berkomentar di blog ini:

-Gunakan bahasa yang sopan
-Dilarang spam, flood, junk, iklan, sara, sex
-Dilarang OOT / Out of Topic
-Silahkan gunakan OpenID untuk mempermudah blogwalking
-Dilarang menaruh live link
*Terkecuali penting

Maaf jika komentarnya lama saya balas / tidak saya balas, jika mempunyai pertanyaan silahkan kontak saya di http://fb.com/aditiajuga.novit1