Easy Ways Make Automatic Read More in the Blo
Easy Ways Make Automatic Read More in the Blog
many bloggers are still confused to make readmore automatically in their blogs, although many articles that mebahas how to make readmore automatically. This is because the number of articles that Copas when the blog owner himself does not understand the way. Here I will explain how to make readmore automatically in detail so that even a novice blogger can make.
By the way maybe beginner or newbie bloggers are still confused as to what it readmore ?. Read more in an article is a fragment, usually only displays a few sentences only and are usually marked with the word "READ MORE", "READ MORE", "CONTINUE READING", etc..
Benefits readmore also to shorten or trim a long article, so post your article will be organized with just a picture and a few sentences.
For a demo please click the link below.
EXAMPLE READ MORE
How to make readmore automatically with images
Please open your template. Select: >> EDIT TEMPLATE.
Find code </ head>.
Copy and paste the following code just above the </ head>
<! - Readmore http: //collectionswordsin.blogspot.com-->
<b: if cond = 'data: blog.pageType! = & quot; static_page & quot;'>
<b: if cond = 'data: blog.pageType! = & quot; items & quot;'>
<style>
.post-body {text-align: justify;}
.post-body img {max-width: none; width: auto;}
.read-more {float: left; padding-top: 10px;}
.read-more a {color: #fff! important; text-shadow: 0 1px 0 RGBA (0,0,0,0.5); background: # 0457A9; text-decoration: none; font: bold 13px Arial; padding: 5px;}
.read-more a: hover {text-decoration: none; background: # 666;}
.pic {border: 10px solid #fff; float: left; height: 165px; width: 250px; margin-right: 20px; margin-bottom: 10px; overflow: hidden; box-shadow: 5px 5px 5px # 111;}
.grow img {height: 165px; width: 250px; transition: all 2s ease;}
.grow img: hover {width: 400px; height: 250px;}
</ style>
<script type = 'text / javascript'>
thumbnail_mode var = & quot; yes & quot;; // yes-with a picture, no picture-without
summary_noimg = 300; // many letters if there is no image
summary_img = 250; // many letters if there is a picture
img_thumb_height = 165;
img_thumb_width = 250;
</ script>
<script type = 'text / javascript'> // <! [CDATA [
removeHtmlTag function (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); imgtag var = ""; var img = div.getElementsByTagName ("img"); var summ = summary_noimg; if (thumbnail_mode == "yes") {if (img.length> = 1) {imgtag = '<div class = "grow pic"> <img src = "' + img [0] .src + '" width = "'+ img_thumb_width + "px" height = "' + img_thumb_height +" px "/> </ div> '; summ = summary_img;}} var summary = imgtag +' <div> '+ removeHtmlTag (div.innerHTML, summ) +' </ div> '; div.innerHTML = summary;}
//]]> </ script>
</ b: if>
</ b: if>
<! - End Auto Read More ->
Save your Template.
Then scroll down the template you're looking for code like the following:
After clicking the small arrow in the display will be a bleak picture below
Find the code marked with a black box. 'POST' VAR = 'POST' ".
Once found click the arrow straight to the code.
The next code will open another code.
sliding or scrol down and look for the code
<data: post.body />
Having met delete and replace the above code with the code below:
<! - Auto read more Start ->
<b: if cond = 'data: blog.pageType == & quot; items & quot;'>
<data: post.body />
<b: else />
<b: if cond = 'data: blog.pageType == & quot; static_page & quot;'>
<data: post.body />
<b: else />
<div expr: id = '& quot; summary & quot; + Data: post.id '> <data: post.body /> </ div>
<script type = 'text / javascript'> createSummaryAndThumb (& quot; summary <data: post.id /> & quot;);
</ script>
<div class = 'read-more'>
<a expr:href='data:post.url'> Read More »</a>
</ div>
</ b: if>
</ b: if>
<! - Auto read more End ->
Click SAVE / SAVE and see the results.
Looks like a tough but if while in practice because it certainly could have been very detailed, if I may explain briefly beginner bloggers would not understand or make trouble.
so first my sari to how to make readmore may be useful and if there are those who do not understand you are welcome to ask directly.
here's an article entitled Easy Ways Make Automatic Read More in the Blo
Hopefully can provide benefits to all of you . Okay , so the posting of our Health - Recipes Care- this time.