Iklan

Cara Membuat Auto Read More OTOMATIS dengan Gambar Thumbnail

Cara Membuat Auto Read More OTOMATIS dengan Gambar Thumbnail

Salam Blogging, Kali BLOGGINGPASURUAN akan memberikan Tips “Cara Membuat Auto Read More OTOMATIS dengan Gambar Thumbnail “. Cara ini sebenarnya ada di banyak default template template free download yang Anda bisa dapatkan gratis pada situs download template gratis, Kecuali template defaultnya Google umumnya tanpa Auto Read more.

Apa kegunaan Auto Read more ini ? Auto Readmore akan menampilkan sebagian dari isi posting ( tidak seluruhnya ) dan gambar – thumbnail, Dan akan lebih mempermudah pengunjung Blog dalam mencari konten menarik di Blog Andan, tentunya Blog Anda akan tampak lebih efisien space.


Berikut ini langkah langkahnya :

1. Masuk Ke Blogger
2. Masuk ke DASHBOARD  dan pilih EDIT HTML ( jangan lupa backup Template Anda dulu )

Cara Membuat Auto Read More OTOMATIS dengan Gambar Thumbnail


3. Cari kode </head> gunakan Ctrl + F untuk lebih cepat mencari kodenya.
4. Letakkan Kode dibawah ini diatas kode </head>

<script type='text/javascript'>
posts_no_thumb_sum = 490;
posts_thumb_sum = 400;
img_thumb_height = 160;
img_thumb_width = 180;
</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, pURL, pTITLE){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></a></span>';
summ = posts_thumb_sum;
}

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

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
.post-footer {display: none;}
.post {margin-bottom: 10px; border-bottom: 1px dotted #E6E6E6; padding-bottom: 20px;}
 .readmore a {text-decoration: none; }
</style>
</b:if>
</b:if>


Keterangan :
posts_no_thumb_sum = 490;  jumlah karakter ( huruf ) jika tampilan tanpa gambar
posts_thumb_sum = 400;  Jumlah karakte huruf menggunakan gambar
img_thumb_height = 160;  Tinggi dari gambar thumbnailnya
img_thumb_width = 180;  Lebar dari gambar thumbnailnya

Anda bisa merubahnya sesuai dengan selera.

5. Cari kode  <data:post.body/>
6. Letakkan script dibawah ini sebelum  <data:post.body/>


<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<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;,&quot;<data:post.url/>&quot;,&quot;<data:post.title/>&quot;);</script>
 <span class='readmore' style='float:right;'><a expr:href='data:post.url'>Read More &#187;</a></span></b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>



Catatan :
<data:post.body/> umumnya ada 3 kode yang sama, Jika Anda menempatkan script diatas pada kode <data:post.body/> yang pertama dan  tidak berhasil , maka letakkan pada <data:post.body/> yang kedua.

7. Save Template

Demikian tips Cara Membuat Posting Halaman Blog Menggunakan Auto Read More dengan Gambar Thumbnail dari BLOGGINGPASURUAN, jika ada pertanyaan mengenai Tips diatas silahkan tinggalkan komentarnya pada kotak komentar dibawah ini…. 



Next
Prev Post
Previous
Next Post

5 comments:

  1. biar selalu muncul gambar gimana caranya gan?

    ReplyDelete
  2. Maksudnya gimana nih Mas?
    Apa Img Thumbanail (gambarnya) gk bisa muncul ?

    mungkin bisa dijelas'in lebih detail lagi

    ReplyDelete