Cara Tampilkan Ringkasan Artikel Dengan Thumbnail Di Homepage Blogspot
Blogger.com-Tutorial hari ini akan menawarkan cara menciptakan ringkasan posting dengan thumbnail di halaman utama blog Anda. Anda sanggup melaksanakan ini dengan menambahkan link-jump secara manual dikala menulis posting, tetapi ini ialah cara untuk secara otomatis menambahkan tombol "Read more" ke setiap posting di blog Anda. Ini sanggup menciptakan beranda Anda tampil lebih rapi, memuat lebih cepat dan sanggup membantu pembaca dengan gampang memindai melalui beberapa pos dan melihat apa yang menarik perhatian mereka.
2. Sekarang cari <data:post.body/>, lewati yang pertama yang untuk seluler dan lanjutkan ke yang berikutnya. Anda akan melihat sesuatu yang menyerupai dengan ini
Untuk mengubah tautan teks Read more, Anda perlu mengedit bab instruksi di atas yang terlihat menyerupai itu
5. Untuk mengubah tinggi dan lebar gambar mini Anda sanggup mengubah angka di bab instruksi ini
6. Anda sanggup menciptakan beberapa adaptasi pada tutorial untuk mengubah gaya atau tata letak (ukuran gambar, posisi gambar, gaya tombol Read more, dll.).
GANTI POST LAYOUT - TAMPILKAN POST EXCERPT / SUMMERY DENGAN GAMBAR FITUR
1. Buka Tema > Edit HTML dan temukan </head>, tempelkan instruksi berikut sempurna 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 menyerupai dengan ini
<b:if cond='data:blog.metaDescription == ""'>Ganti <data:post.body/> dengan instruksi di bawah ini. Jika Anda mempunyai dua <data:post.body/> dalam template Anda dalam bab ini, Anda mungkin perlu mengganti keduanya.
<!-- Then use the post body as the schema.org description,
for good G+/FB snippeting. -->
<div class='post-body entry-content' expr:id='"post-body-" + 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='"post-body-" + 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 + "#more"' expr:title='data:post.title'>
<data:post.jumpText/>
</a>
</div>
</b:if>
<div class='post-footer'>
<b:if cond='data:blog.pageType == "static_page"'><br/>3. Gambar dibungkus dengan class xopostimg dan teks dibungkus dengan class xopostsummary. Anda sanggup memakai class itu untuk menata bab itu lebih lanjut di CSS.
<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>
/* Style Post Excerpt - XOMISSE */4. Untuk memberi gaya pada tombol baca lebih banyak semoga sesuai dengan desain blog Anda, buka Tema > Edit HTML dan temukan ]]></b:skin>. Tambahkan instruksi berikut di atas ]]></b:skin>
.xopostimg { /* Style Post Excerpt Image - ADD CSS BELOW */
}
.xopostsummary { /* Style Post Excerpt Text - ADD CSS BELOW */
}
/* Style Read More Link - XOMISSE */Tambahkan style Anda di antara tanda kurung. Lihat tautan ini untuk lebih banyak cara untuk menyesuaikan readmore / jump-link lebih lanjut.
.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 */
}
Untuk mengubah tautan teks Read more, Anda perlu mengedit bab instruksi di atas yang terlihat menyerupai 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 memakai gambar alih-alih teks - ganti Read more "<data:post.title/>" dengan instruksi gambar menyerupai yang ditunjukkan dalam tutorial ini.
5. Untuk mengubah tinggi dan lebar gambar mini Anda sanggup mengubah angka di bab instruksi ini
img_thumb_height = 200;Jika gambar thumbnail Anda terlihat sedikit tersumbat, ubah nilainya di bawah
img_thumb_width = 300;
summary_noimg = 300;untuk mengubah tinggi dan lebar ringkasan & gambar. Anda juga sanggup menciptakan gambar lebar penuh dan ketinggian otomatis.
summary_img = 350;
img_thumb_height = 200;
img_thumb_width = 300;
6. Anda sanggup menciptakan beberapa adaptasi pada tutorial untuk mengubah gaya atau tata letak (ukuran gambar, posisi gambar, gaya tombol Read more, dll.).
