TutorialBlog: Show Post with Thumbnail Description

Assalamualaikum dan salam sejahtera,

demo boleh klik SINI

Ok, ikut je step ni:

Ikut cara biasa, Dashboard > Template > Edit HTML

Step 1:

Ctrl+F serentak, cari kod <data:post.body/>

Padam! ganti dengan kod ni:



<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'> <data:post.numComments/></a>
</b:if>
</b:if>
</span>
<div expr:id='"summary" + data:post.id'>
<data:post.body/></div>
<script type='text/javascript'>
createSummaryAndThumb("summary<data:post.id/>
");</script>
<span class='readmorebutton' style='float:right'>
<a expr:href='data:post.url'>Baca Lagi »</a>
</span>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
</b:if>


merah - boleh tukar dengan kata yang sesuai.

'baca selanjutnya' 'show more' 'read more' 'baca selengkapnya' dll.

 kod tadi tak hilang terus, 'terminate' je.

Step 2:

Ctrl+F serentak, cari kod <b:include data='post' name='post'/>

Padam! ganti dengan kod ni:



<b:if cond='data:post.isFirstPost'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<div id='first'>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
<div class='first-body'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"summary1" + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
createSummaryAndThumb1("summary1<data:post.id/>");</script>
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:post.numComments/></a>
</b:if>
</b:if>
</span>
<span class='readmorebutton' style='float:right'>
<a expr:href='data:post.url'>Baca Lagi »</a></span>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/></b:if>
</div>
</div>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>


merah - boleh tukar dengan kata yang sesuai.

'baca selanjutnya' 'show more' 'read more' 'baca selengkapnya' dll.
 kod tadi tak hilang terus, 'terminate' je.

Step 3:
Ctrl+F serentak, cari </head>
Paste kod, di atas.


<script type='text/javascript'>
posts_no_thumb_sum = 290;
posts_thumb_sum = 240;
img_thumb_height = 80;
img_thumb_width = 80;
first_no_thumb_sum = 580; //number of characters when no thumbnail
first_thumb_sum = 450; //number of characters without image
img_thumb_height1 = 145; //height of image
img_thumb_width1 = 165; //width of image
</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 = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = posts_thumb_sum;
}
var summary = imgtag + '<div class="summary">' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
function createSummaryAndThumb1(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = first_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="first-post-thumb" style="float:left;"><img src="'+img[0].src+'" width="'+img_thumb_width1+'px" height="'+img_thumb_height1+'px"/></span>';
summ = first_thumb_sum;
}
var summary1 = imgtag + '<div class="summary">' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary1;
}
//]]>
</script>


Step 4:
For CSS, tambah kod ni, di bawah kod part I tadi:


<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>
.first-post-thumb {
margin-right: 10px;
}
.summary {
height: 100%;
}
#first { /* Styles for the First Post Container */
width: auto;
height: 250px;
float: left;
margin-bottom: 10px;
background-color: #F4F4F4; /* background color for the first post */
border: 1px solid #E5E5E5; /* border for the first post */
}
.first-body { /* Style for the First Post summary */
color: #545454;
font-size: 13px;
text-align: justify;
padding: 5px 10px;
line-height: 1.5em;
}
#first h3 a, #first h3 a:visited { /* Style for the First Post Title*/
border-bottom: 2px solid #DFDFDF;
color: #515151;
font-size: 20px;
display: block;
margin: 10px auto;
width: 95%;
font-size: 20px;
padding: 0px 0px 4px 0px;
font-weight: bold;
text-align: left;
line-height: 1.4em;
background: none;
}
#first h3 a:hover { /* Color on mouseover for the First Post Title */
color: #1061A1;
}
.post { /* Styles for the small posts container */
float: left;
margin: 0px 6px 2% 5px;
width: 46%;
height: 230px;
padding: 0px 5px 5px 5px;
background: #FCFCFC; /* background color for the small posts */
border: 1px solid #E5E5E5; /* border for the small posts */
overflow: hidden;
}
.posts-thumb { /* Style for the small posts thumbnails */
margin-right: 10px;
}
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img {
background: none;
border: none;
box-shadow: none;
padding: 0;
}
h3.post-title a{ /* Style for the small posts titles */
font-size: 14px;
color: #747474;
text-transform: uppercase;
}
h2.date-header { /* Hide the post date */
display: none;
}
.post-footer {
display: none;
}
h3.post-title {
margin: 0px;
}
.readmorebutton {
margin-top: 5px;
}
.readmorebutton a { /* Styles for the Read More link */
color: #767676;
border: 1px solid #E1E1E1;
background: #EAEAEA; /* Background color for the Read More link */
text-decoration: none;
padding: 3px 5px;
font-weight: bold;
font-size: 11px;
float: right;
position: relative;
}
.post-comment-link { /* Style for the comment bubble of posts below */
position: absolute;
top: -35px;
right: -10px;
display: block;
border: 1px solid #E1E1E1; /* border for the comment bubble */
background: #EAEAEA; /* background color for the comment bubble */
font-size: 11px;
position: absolute;
}
#first .post-comment-link { /* Style for the comment bubble of first post */
position: absolute;
top: 10px;
right: 0px;
}
.post-comment-link a { /* Link color for the comments bubble*/
padding: 10px;
color: #6A6A6A;
text-decoration: none;
font-weight: bold;
}
#blog-pager {
clear: both;
}
</style>
</b:if>
</b:if>


ubah kod merah, jika perlu. dan kod ni >>

<script type='text/javascript'>
posts_no_thumb_sum = 290;
posts_thumb_sum = 240;
img_thumb_height = 80;
img_thumb_width = 80;
first_no_thumb_sum = 580; //number of characters when no thumbnail
first_thumb_sum = 450; //number of characters without image
img_thumb_height1 = 145; //height of image
img_thumb_width1 = 165; //width of image
</script>

Entri Lain: Auto ReadMore

demo boleh klik SINI

credit: helpblogger

Terima kasih baca, sudi-sudilah komen :) .