It is not efficient to show a full view of the articles on the homepage, label and some kind like that into your blog. There is any choise by making readmore every time you write an article post, but making readmore manually it possible sometime left from your attention. while you have forgot to make it, your homepage will be very long. It could be a something less when we make readmore manually. For that we are going to make the style of summary articles with the image thumbnail so that your homepage looks more beautiful and arranged consistently.
This is going to be a method to display the summary of the blog content by limiting the number of words on the article and the image size so that the articles as the content blog can be displaying more effective and structured. Using thumbnail readmore summary will give the new style of your blog content, this make thing much easier to look by the user. Completed with image thumbnail this is make the homepage looks more elegant. This is going to be the part of the content navigation that support to the SEO blog.
Ok! let us begin how can you make thumbnail readmore summary into blog to make a change your blog looks more attractive.
1. You must Insert the javascript to the head of the blog template that you use. Login to dashboard then click Template>Edit Html. On the script code of your template press Ctrl+F and type </head> to find the end of the head template. Put the javascript code below just before this tag </head>
<script type='text/javascript'>
var summary_noimg = 540,
summary_img = 500,
img_thumb_height = 150,
img_thumb_width = 200;
</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 = '<span style="float:left;padding:0px 10px 5px 0px;"><img alt="" src="' + img[0].src.replace(/\/s(320|400|640|1600)/, "\/s" + img_thumb_width) + '" width="' + img_thumb_width + 'px" height="' + img_thumb_height + 'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML, summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
We are going to use two javascript. Look at the javascript above!
- summary_noimg : define the number of characters (letters) on the article if your article with no image inside, the character will be truncated after the word ended.
- summary_img : define the number of characters (letters) on the article if your article within any image inside, the character will be truncated after the word ended.
- img_thumb_height and img_thumb_width: define the height and width of thumbnail displaying
- imgtag = '<.... I suggest you don't change this, this is the script for the thumbnails optimizing so that the thumbnail will displayed no so weight. Sometime maybe any with the small size dimension but very weight, this is the optimal compression for thumbnail.
<b:if cond='data:blog.pageType == "item"'> <data:post.body/> <b:else/> <b:if cond='data:blog.pageType == "static_page"'> <data:post.body/> <b:else/> <div expr:id='"summary" + data:post.id'> <data:post.body/> </div> <script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>"); </script> <span class='jump-link' style='font-weight:bold;padding:5px;float:right;text-align:right;'><a class='art-button' expr:href='data:post.url + "#more"'><data:post.jumpText/></a></span> <div style='clear: both;'/> </b:if> </b:if>
<a class='art-button'.... is the css class for the button readmore style that will be defined on the next step. you can use the style button readmore if you already have the style button.
3. Defining the style button readmore with the class css, put into the skin of your template. Ctrl+F and type ]]></b:skin> Put the css class that i have already made just before this code ]]></b:skin>
.art-button
{
border: 0;
border-collapse: separate;
-webkit-background-origin: border !important;
-moz-background-origin: border !important;
background-origin: border-box !important;
background: #84633E;
background: linear-gradient(top, #B68F63 0, #AE8251 23%, #997348 50%, #61492E 50%, #876640 100%) no-repeat;
background: -webkit-linear-gradient(top, #B68F63 0, #AE8251 23%, #997348 50%, #61492E 50%, #876640 100%) no-repeat;
background: -moz-linear-gradient(top, #B68F63 0, #AE8251 23%, #997348 50%, #61492E 50%, #876640 100%) no-repeat;
background: -o-linear-gradient(top, #B68F63 0, #AE8251 23%, #997348 50%, #61492E 50%, #876640 100%) no-repeat;
background: -ms-linear-gradient(top, #B68F63 0, #AE8251 23%, #997348 50%, #61492E 50%, #876640 100%) no-repeat;
background: linear-gradient(top, #B68F63 0, #AE8251 23%, #997348 50%, #61492E 50%, #876640 100%) no-repeat;
-svg-background: linear-gradient(top, #B68F63 0, #AE8251 23%, #997348 50%, #61492E 50%, #876640 100%) no-repeat;
border-width: 0;
padding:0 15px;
margin:0 auto;
height:28px;
}
a.art-button,
a.art-button:link,
a:link.art-button:link,
body a.art-button:link,
a.art-button:visited,
body a.art-button:visited,
input.art-button,
button.art-button
{
text-decoration: none;
font-size: 12px;
font-family: Tahoma, Arial, Helvetica, Sans-Serif;
font-weight: normal;
font-style: normal;
position:relative;
display: inline-block;
vertical-align: middle;
white-space: nowrap;
text-align: center;
color: #FFFFFF;
margin: 0 5px 0 0 !important;
overflow: visible;
cursor: pointer;
text-indent: 0;
line-height: 28px;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.art-button img
{
margin: 0;
vertical-align: middle;
}
.firefox2 .art-button
{
display: block;
}
This is the class button style of the template that created by Artisteer, it looks good. If you have used the template by artisteer and you have designed it by yourself on Artisteer, the css class above should not be added again. The button style readmore will performed according like you have design on the artisteer. And if you are master css, i am sorry to explain this!
Related Articles
Very informative and well-written post! Quite an interesting and nice topic chosen for the post. Your need social service our many type service here please check https://cutesmm.com/buy-facebook-followers
ReplyDeleteNice article. Highly recommended. The thoughts are clear and well explained. Thankyou for sharing your work, truly worth reading. On the other hand, if you’re interested in your facebook more video https://cutesmm.com/buy-facebook-views
ReplyDeleteYou are very articulate and explain your ideas and opinions clearly leaving no room for miscommunication.
ReplyDeletePlease Kindly check My web: buy youtube comments
First of all, at all times I used the soccer teams themselves as a starting point.
ReplyDeleteสูตรแทงบอลสูงต่ำ
You are very articulate and explain your ideas and opinions clearly leaving no room for miscommunication.Please Kindly check My web:https://s3-sa-east-1.amazonaws.com/newposts/jordanshoescheap4sale/index.html
ReplyDeleteYou are very articulate and explain your ideas and opinions clearly leaving no room for miscommunication.Please Kindly check My web:"buy tiktok comments''
ReplyDelete