Thumbnail Auto Read More Untuk Blogger / Blogspot Posts

Thumbnail auto read more

 

Bagaimana Membuat Posting di Homepage ( halaman utama)  Blog Yang Akan ditampilkan Dengan  Tombol "Read More" dan Thumbnail   

Untuk lebih spesifik,kali ini akan menampilkan judul posting, maka ringkasnya singkat otomatis dengan jumlah karakter dan gambar kecil, yang akan menjadi thumbnail dari gambar pertama yang diunggah di dalam pos. Setelah thumbnail dan ringkasan posting, akan ada "Read More" link yang ketika Anda klik di atasnya, akan membawa Anda ke pos yang sebenarnya.

Automatic Read More script ini akan merangkum isi dan ringkasan posting akan ditampilkan hanya pada halaman utama blog (homepage), halaman kategori, dan halaman arsip.

Thumbnail auto read more

 

Menggunakan Fitur Auto Read  di Blogger Posts

Langkah 1. Dari dashboard BloggerAnda , pergi ke Template dan klik pada tombol Edit HTML:

Dashboard bloger

Langkah 2. Klik di mana saja di dalam area kode, lalu tekan tombol CTRL + F dan cari kode ini:

<data:post.body/>

Catatan: setelah Masuk, Anda akan menemukan kode ini lebih dari sekali tetapi Anda perlu berhenti di sepertiga.

Langkah 3. Ganti kode di atas dengan yang satu ini:

<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: jika Anda tidak melihat perubahan setelah melalui semua langkah, coba untuk mengganti kedua <data: post.body /> juga.

Langkah 4. Sekarang cari tag berikut: 

</head>

Langkah 5. Tepat di atas </ head> tag, tambahkan kode berikut:

Klik Untuk Melihat Code

<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>

Catatan                                                                                                                                  

- Untuk mengubah ukuran yang ditampilkan ketika tidak ada thumbnail, mengubah nilai warna biru 490.     Untuk jumlah karakter yang ditampilkan ingin lebih kecil ketika sebuah tulisan memiliki thumbnail, mengubah nilai 400.

- Jika Anda ingin thumbnail lebih besar, memodifikasi 160 (tinggi) dan 180 (lebar) nilai-nilai merah.

Langkah 6. Klik tombol Template ,Save untuk menyimpan perubahan.

Itu itu, nikmatilah!