Cara Menampilkan Thumbnail di Blog - Ensikology

Cara Menampilkan Thumbnail di Blog

Tutorial hari ini akan menunjukkan kepada Anda cara membuat ringkasan posting dengan thumbnail di halaman blog utama Anda. Anda dapat melakukan ini dengan menambahkan tautan lompat secara manual saat menulis posting, tetapi ini adalah cara untuk secara otomatis menambahkan tombol "baca lebih lanjut" ke setiap posting di blog Anda. Itu dapat membuat beranda Anda terlihat lebih rapi, memuat lebih cepat dan dapat membantu pembaca dengan mudah memindai beberapa posting dan melihat apa yang menarik perhatian mereka.
Menampilkan Thumbnail di Blog

Ubah Tata Letak Posting - Tampilkan Kutipan / Summery Posting dengan Gambar Unggulan

1. Buka Templat> Edit HTML dan temukan </head> , rekatkan yang 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 temukan <data:post.body/> , lewati yang pertama untuk seluler dan lanjut 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/> di template Anda di bagian ini, Anda mungkin perlu menggantinya 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 xopostimg dan teks dibungkus dengan kelas xopostsummary. Anda dapat menggunakan penyeleksi ini untuk menata bagian itu lebih jauh di CSS.
/* Style Post Excerpt - Ensikology */
.xopostimg { /* Style Post Excerpt Image - ADD CSS BELOW */ 
}
.xopostsummary { /* Style Post Excerpt Text - ADD CSS BELOW */ 
}

4. Untuk memberi style pada tombol read more agar sesuai dengan desain blog Anda, pergi ke Templat> Edit HTML dan temukan ]]> </b:skin> . Tambahkan kode berikut di atas ]]> </b:skin>
/* Style Read More Link - Ensikology */
.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 gaya Anda di antara tanda kurung. Lihatlah tautan ini untuk mengetahui lebih banyak cara untuk menyesuaikan tautan baca selengkapnya .

Untuk mengubah tautan baca selengkapnya, Anda harus mengedit bagian dari kode di atas yang terlihat.
<div class='jump-link' ><a expr:href='data:post.url'>Read more "<data:post.title/>" </a></div>

Lihatlah tutorial ini untuk mengkustomisasi tautan baca selengkapnya di blogger . Untuk menggunakan gambar daripada teks - ganti baca lebih lanjut "<data:post.title/>" dengan kode gambar seperti yang ditunjukkan dalam tutorial ini .

5. Untuk mengubah tinggi dan lebar thumbnail Anda dapat mengubah angka di bagian kode ini.
img_thumb_height = 200;
img_thumb_width = 300;
Jika gambar thumbnail Anda terlihat agak terjepit, ubah nilainya di bawah ini.
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 menjadi lebar penuh dan tinggi otomatis.

6. Anda dapat membuat beberapa penyesuaian pada tutorial untuk mengubah gaya atau tata letak (ukuran gambar, posisi gambar, baca lebih banyak gaya tombol, baca lebih banyak posisi tombol, dll.) Atau jika Anda tidak ingin melakukannya sendiri atau tidak tidak yakin apa yang harus diubah, lihat Layanan Pengodean Kustom kami untuk mendapatkan gaya ini, tata letak kiriman unggulan atau tata letak kisi gaya Pinterest diinstal.

Source : xomisse

1 Komentar untuk "Cara Menampilkan Thumbnail di Blog"

Urutan

Beri apresiasi terhadap thread ini Gan!