Cara Buat Auto Read More dengan Thumbnail di Blogger

Kali ini Blog Gado Gado akan menampilkan artikel berjudul Cara Buat Auto Read More dengan Thumbnail di Blogger. Dengan artikel Cara Buat Auto Read More dengan Thumbnail di Blogger ini kami berharap dapat menjadi sebuah rujukan dan bahan penambah wawasan kita terkait dengan judul tersebut. Artikel ini adalah hasil pencarian di google dengan kata kunci Cara Buat Auto Read More dengan Thumbnail di Blogger kemudian saya kumpulkan dan saya sajikan buat anda di Blog Gado Gado ini. Semoga kehadiran artikel ini bermanfaat bagi kita semua.anda juga dapat melihat artikel sebelumnya atau artikel berikutnya. Ok, langsung saja berikut adalah artikel Cara Buat Auto Read More dengan Thumbnail di Blogger selengkapnya:

D-Copy Blog's | Expandable post atau lebih dikenal dengan "Read More" adalah fitur yang membuat blog Anda menunjukkan hanya sebagian dari posting Anda pada halaman indeks yaitu rumah, label dan halaman arsip. Pada akhir pratinjau setiap akan ada sebuah link ke halaman posting, biasanya menempel pada frase "Read More".

Auto membaca lebih banyak fungsi otomatis mempersingkat posting Anda dan membuat thumbnail dari gambar yang ada di pos. Hal ini juga membantu untuk memuat halaman lebih cepat. Hal ini juga menunjukkan dan thumbnail gambar yang membantu untuk menarik pembaca. Saya juga menambahkan auto read more ke blog saya. Otomatis read more untuk blogger dengan posting thumbnail dapat dilakukan dengan memasukkan beberapa kode ke dalam template blog Anda.

Cara Tambah Auto Read More With Thumbnail Untuk Blogger?

1. Buka akun Blogger Anda
2. Pergi ke Blogger Dashboard> Template> Edit HTML.
3. Periksa "Expand Template Widget".
4. Cari (Ctrl + F) </ head> tag
5. Copy dan paste kode di bawah ini sebelum/di atas </head>:

<!-- DC Auto Read More Script Start -->
<script type='text/javascript'>
var thumbnail_mode = "yes"; //yes -with thumbnail, no -no thumbnail
summary_noimg = 430; //summary length when no image
summary_img = 340; //summary length when with image
img_thumb_height = 200;
img_thumb_width = 200;
</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>
<!-- DC Auto Read More Script End -->

Keterangan :

Anda dapat menyesuaikan read more dengan mengubah nilai-nilai dari variabel-variabel berikut:

• thumbnail_mode – set ke "yes" jika Anda ingin menampilkan thumbnail dengan ringkasan teks
• summary_img – specify jumlah karakter (termasuk spasi) yang ingin ditampilkan dalam ringkasan, dengan thumbnail.
• summary_noimg – specify jumlah karakter (termasuk spasi) yang ingin ditampilkan dalam ringkasan, bila ada thumbnail ada.
• img_thumb_height and img_thumb_width -specify adalah tinggi dan lebar thumbnail (dalam piksel).

     6.  Sekarang cari kode <data:post.body/> dan ganti kode tersebut dengan kode dibawah ini :

<!-- DC Auto Read More 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>
<!-- DC Auto Read More End --> 

Nah, sobat Blog Gado Gado.. Anda telah membaca seluruh artikel berjudul Cara Buat Auto Read More dengan Thumbnail di Blogger dengan keword yang masuk Blogger Hack . Anda dapat memberikan komentar ditempat yang telah tersedia. Terima kasih kunjungan Anda.