Tutorial Blogger Cara membuat Auto Readmore dengan Gambar yang di Crop

RahmanCyber.NET | Blogger - Fungsi Auto Readmore sebenarnya adalah untuk memotong artikel pada halaman utama blogger, kenapa harus dipotong? agar tidak kepanjangan...  

 

{getToc} $title={Table of Contents}

 

memang sih defaultnya blog itu semua rtikel tampil, kelemahannya adalah kalo artikelnya banyak kata katanya, maka akan panjang banget.. sehingga itulah fungsi dari readmore, yaitu memotong .

Pada tutorial blogger kali ini, kita akan bahaskan untuk kawan kawan, membuat auto readmore.. jadi akan secara otomatis motong, sehingga kita enggak memotongnya secara manual satu persatu.

Fungsi Auto Readmore

 

Untuk memangkas artikel di halaman depat blog secara otomati.. jadi kita enggak repot repot motong satu persatu.

Fungsi Crop Image pada Auto Readmore

 

Jadi fungsinya sebenarnya untuk merapikan gambar yang nampak di halaman depan. Sehingga halaman depannya menjadi lebih rapi. Contohnya : SkylightBasic.Blogspot.com

cara inilah yang saya terapkan di Template Skylight Basic.

Kelemahan Crop Image

 

Kelemahannya sih lebih ke penggunaan Javascript yang berpotensi membuat pagespeed berkurang...

Apakah bisa kalo tanpa Crop Image

 

Ya bisa dong, lha wong tanpa image aja bisa kok.. tetapi jika tanpa di crop, tampilannya jadi berantakan alias enggak teratur karena menyesuaikan gambar sesuai dengan skala dimensi aslinya.

Cara membuat Auto Readmore dengan Gambar yang di Crop 

 

Kita langsung bahas caranya saja ya, jadi pertama tama, silahkan kalian lihat tampilan dari Auto Readmore yang saya terapkan di Template Blogger SKYLIGHT BASIC v1.

 

Seperti itulah hasil final dari tutorial Blogger kali ini.

Setelah kalian liat gambarannya diatas itu.... yuk ikuti langkah saya... 

Silahkan Login dulu ke Blogger jika belum login -> pilih bagian theme atau tema -> klik tanda panah kebawah -> lalu kalian pilih Edit HTML 

 

Carilah 

]]></b:skin> 

, kalian bisa menggunakan fasilitas search dengan menekan Ctrl+F pada keyboard, lalu ketiklah ]]></b:skin>

 

setelah itu gantilah ]]></b:skin> itu dengan kode dibawah ini :

 

 

 

.skylightcrop-containr{float:left;width:160px;height:120px;border:1px solid #ddd; background:#f3f3f3; margin:0px 10px 1px 0; padding:3px;}
.skylightcrop{overflow:hidden;width:160px;height:120px;border:0px solid #eaeaea;}
.skylightcrop img{margin-top:-6px;margin-left:-6px;opacity:1;}
.skylightcrop img:hover{opacity:.7;}

]]></b:skin>

    <script type='text/javascript'>
    var thumbnail_mode = &quot;float&quot; ;
    summary_noimg = 400;
    summary_img = 300;
    img_thumb_height = &quot;&quot;;
    img_thumb_width = 190;
    </script>

    <script type='text/javascript'>
    //<![CDATA[
    /******************************************
    Auto-readmore - https://rahmancyber.net
    ********************************************/
    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(img.length>=1) {
    imgtag = '<span style="float:left; padding:0px 0px 0px 0px;"><div class="skylightcrop-containr"><div class="skylightcrop"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></div></div></span>';
    summ = summary_img;
    }

    var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ)+ '...' + '</div>';
    div.innerHTML = summary;
    }
    //]]>
    </script>

Tenang, kode diatas itu udah ada ]]></b:skin> nya kok...  jadi enggak ilang.. karena kalo ]]></b:skin> ilang, entar error.

setelah itu, silahkan cari 

<data:post.body/> 

, kalian bisa menggunakan fasilitas search dengan menekan Ctrl+F pada keyboard, lalu ketiklah <data:post.body/>

 

 

 

 
<!-- START Auto READMORE -->
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:right; margin-top:20px; display:inline'>
<a expr:href='data:post.url' style='padding:5px; background-color:#eee;-webkit-border-top-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-bottomright: 5px; border-top-left-radius: 5px; border-bottom-right-radius: 5px;'>Read More</a>
</span>
</b:if>
</b:if>

<b:if cond='data:blog.pageType == "item"'> 
<data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
</b:if>
<!-- END Auto READMORE -->

silahkan diganti semua ya untuk <data:post.body/> , karena biasanya ada 3. atau kurang.. jadi ganti semua aja &<data:post.body/> dengan kode diata..

tenang, untuk <data:post.body/> tidak hilang kok, jadi udah ada pada kode diatas, cuman ditambai aja.

 

Setelah itu kalian lakukan SAVE... dan kasus selesai, jadi itulah tutorial  Tutorial Blogger Cara membuat Auto Readmore dengan Gambar yang di Crop  .

Sekian, moga ada manfaatnya... jika tidak, saya mohon maaf., kalian bisa kok liat materi blog yang telah kita buat lainnya di https://www.rahmancyber.net/p/tutorial-pembelajaran-blogger-terbaru.html  lebih terstuktur.

Salam

F.N.A - Red