Readmore

In this post, I will try to collect a variety of readmore takes from several sources. I deliberately created a wealth of knowledge related to our efforts in optimizing our blog.

The steps are as follows:

1. Go to Dashboard | Template | Edit HTML | mark Expand Widget Templates.

2 Search code </ head>, with The Ctrl-F to make it easier to search. Once the code is met, enter the code below between ]]><</ b: skin> and </ head>

<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>
var fade = false;
function showFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName(&#39;span&#39;);
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == &quot;fullpost&quot;) {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Appear(spans[i]);
} else spans[i].style.display = &#39;inline&#39;;
}
if (spans[i].id == &quot;showlink&quot;)
spans[i].style.display = &#39;none&#39;;
if (spans[i].id == &quot;hidelink&quot;)
spans[i].style.display = &#39;inline&#39;;
}
}
function hideFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName(&#39;span&#39;);
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == &quot;fullpost&quot;) {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Fade(spans[i]);
} else spans[i].style.display = &#39;none&#39;;
}
if (spans[i].id == &quot;showlink&quot;)
spans[i].style.display = &#39;inline&#39;;
if (spans[i].id == &quot;hidelink&quot;)
spans[i].style.display = &#39;none&#39;;
}
post.scrollIntoView(true);
}
function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName(&#39;span&#39;);
var found = 0;
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == &quot;fullpost&quot;) {
spans[i].style.display = &#39;none&#39;;
found = 1;
}
if ((spans[i].id == &quot;showlink&quot;) &amp;&amp; (found == 0))
spans[i].style.display = &#39;none&#39;;
}
}
</script>
</b:if>


3. Then look for the code or code <data:post.body/> whole like this.

<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>


Replace the above code with the code below.

<div class='post-body' expr:id='"post-" + data:post.id' >
<b:if cond='data:blog.pageType == "item"'>
<style>#fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost{display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<a expr:href='data:post.url'>Read More......</a>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>


We can just change the words "Read More ..." with the icon / our favorite expressions.

4. Then save template. And open the Settings tab | format, enter the code below in the box to the right side of any posts Posting Template.

<span id="fullpost">
</ span>


then save the settings.

5. How to use readmore beheading in the article that we write is a practical article on the Edit HTML. When a new post, surely the code shown above. For beginners, please first delete the code. Then please type include all articles with the image, including providing the code align, font size and other.

Preview / pre-review your work, to estimate where the appropriate sentence fragment. Then install the new code is readmore. This step is to anticipate the installation of double auto.

Putting the code:



Hopefully useful.