Friday, May 12, 2017
Optimizing Blogspot with Thumbnail Readmore Summary
Optimizing Blogspot with Thumbnail Readmore Summary
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 dont 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!
Available link for download
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment