Cara tampilkan ringkasan artikel dengan thumbnail di homepage blogspot

Blogger.com-Tutorial hari ini akan menunjukkan cara membuat ringkasan posting dengan thumbnail di halaman utama blog Anda. Anda dapat melakukan ini dengan menambahkan link-jump secara manual saat menulis posting, tetapi ini adalah cara untuk secara otomatis menambahkan tombol "Read more" ke setiap posting di blog Anda. Ini dapat membuat beranda Anda tampil lebih rapi, memuat lebih cepat dan dapat membantu pembaca dengan mudah memindai melalui beberapa pos dan melihat apa yang menarik perhatian mereka.

GANTI POST LAYOUT - TAMPILKAN POST EXCERPT / SUMMERY DENGAN GAMBAR FITUR

1. Buka Tema > Edit HTML dan temukan </head>, tempelkan kode berikut tepat di atasnya.

<script type='text/javascript'>
var thumbnail_mode = "yes";
summary_noimg = 300;
summary_img = 350;
img_thumb_height = 200;
img_thumb_width = 300;
</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(img.length>=1) {
imgtag = '<div class="xopostimg"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height +'px"/></div>';
summ = summary_img;
}
var summary = imgtag + '<div class="xopostsummary">' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

2. Sekarang cari <data:post.body/>, lewati yang pertama yang untuk seluler dan lanjutkan ke yang berikutnya. Anda akan melihat sesuatu yang mirip dengan ini

<b:if cond='data:blog.metaDescription == &quot;&quot;'>
 <!-- Then use the post body as the schema.org description,
for good G+/FB snippeting. -->
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'>
<data:post.body/>
<div style='clear: both;'/>
<!-- clear for photos floats -->
</div>
<b:else/>
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
<data:post.body/>
<div style='clear: both;'/>
<!-- clear for photos floats -->
</div>
</b:if>
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'>
<data:post.jumpText/>
</a>
</div>
</b:if>
<div class='post-footer'>

Ganti <data:post.body/> dengan kode di bawah ini. Jika Anda memiliki dua <data:post.body/> dalam template Anda dalam bagian ini, Anda mungkin perlu mengganti keduanya.

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> <div class='jump-link' ><a expr:href='data:post.url'>Read more "<data:post.title/>"</a></div>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
</b:if>

3. Gambar dibungkus dengan class xopostimg dan teks dibungkus dengan class xopostsummary. Anda dapat menggunakan class itu untuk menata bagian itu lebih lanjut di CSS.

/* Style Post Excerpt - XOMISSE */
.xopostimg { /* Style Post Excerpt Image - ADD CSS BELOW */
}
.xopostsummary { /* Style Post Excerpt Text - ADD CSS BELOW */
}

4. Untuk memberi gaya pada tombol baca lebih banyak agar sesuai dengan desain blog Anda, buka Tema > Edit HTML dan temukan ]]></b:skin>. Tambahkan kode berikut di atas ]]></b:skin>

/* Style Read More Link - XOMISSE */
.jump-link { /* Style Entire Jump Link - ADD CSS BELOW */
}
.jump-link a { /* Style Jump Link Text Link - ADD CSS BELOW */
}
.jump-link a:hover { /* Style Jump Link Text Link On Hover Over - ADD CSS BELOW */
}

Tambahkan style Anda di antara tanda kurung. Lihat tautan ini untuk lebih banyak cara untuk menyesuaikan readmore / jump-link lebih lanjut.

Untuk mengubah tautan teks Read more, Anda perlu mengedit bagian kode di atas yang terlihat seperti itu

<div class='jump-link' ><a expr:href='data:post.url'>Read more "<data:post.title/>" </a></div>

Lihat tutorial ini untuk menyesuaikan tautan read more di blogger. Untuk menggunakan gambar alih-alih teks - ganti Read more "<data:post.title/>" dengan kode gambar seperti yang ditunjukkan dalam tutorial ini.

5. Untuk mengubah tinggi dan lebar gambar mini Anda dapat mengubah angka di bagian kode ini

img_thumb_height = 200;
img_thumb_width = 300; 

Jika gambar thumbnail Anda terlihat sedikit tersumbat, ubah nilainya di bawah

summary_noimg = 300;
summary_img = 350;
img_thumb_height = 200;
img_thumb_width = 300; 

untuk mengubah tinggi dan lebar ringkasan & gambar. Anda juga dapat membuat gambar lebar penuh dan ketinggian otomatis.

6. Anda dapat membuat beberapa penyesuaian pada tutorial untuk mengubah gaya atau tata letak (ukuran gambar, posisi gambar, gaya tombol Read more, dll.).