How to make Show/Hide full posts links in Artisteer templates
1. Log in to your dashboard--> Design- -> Edit HTML
2. Click on "Expand Widget Templates"
3. Search "Ctrl+F" and find the following code:
<div class='art-postcontent'>
replace it with:
<div class='art-postcontent' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>
4. Find:
<data:post.body/>
and right after it paste the next code:
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'> Show Full Post...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'> Hide Full Post...</a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>
5. For the next step find </head> and before it paste the next script:
<script type='text/javascript'>
//<![CDATA[
var fade = false;
function showFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Appear(spans[i]);
} else spans[i].style.display = 'inline';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'none';
if (spans[i].id == "hidelink")
spans[i].style.display = 'inline';
}
}
function hideFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Fade(spans[i]);
} else spans[i].style.display = 'none';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'inline';
if (spans[i].id == "hidelink")
spans[i].style.display = 'none';
}
post.scrollIntoView(true);
}
function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
spans[i].style.display = 'none';
found = 1;
}
if ((spans[i].id == "showlink") && (found == 0))
spans[i].style.display = 'none';
}
}
//]]>
</script>
6. Save your template.
7. Go to menu "Setting --> Formatting"
On the bottom page you will see a box beside text "Post Template". Copy the code below and paste in to the box.
<span id="fullpost">
</span>
Save your settings.
8. If you want to post an article place your part article above this code <span id="fullpost">. Then the rest or full post put between this code <span id="fullpost"> and this </span>.
IMPORTANT: When you write the post( article) use the HTML editor for the step 8.
DEMO
6 comments
I thank you very much, it is realy very usefull.
Great, great.
Glad I could help.
I try it so many times and every time on the second step I have this message:
Δεν ήταν δυνατή η ανάλυση του προτύπου σας, επειδή δεν είναι σωστά μορφοποιημένο. Βεβαιωθείτε ότι όλα τα στοιχεία XML είναι σωστά κλεισμένα.
Μήνυμα σφάλματος XML: The element type "div" must be terminated by the matching end-tag "/div".
What can I do here ?
Thanks for your tutorial...
@tigrisI see it works on your blog, so I guess you resolved the problem.
@ArtisTutor
At first, thanks for your answer.
Second, after I tried some times here
http://serneikaravi.blogspot.com/
was not able to do it, I came back on the actual blogg where I made some changes, for example on header, on background image and color and on few thinks more so you you have seen that it works on my old and actual blogg. There was able to do it on that time I saw it here on your tutorial some months ago. If you have any idea how to solve it on my probe blogg would be good...Thanks again.
@tigrisSend me your template to fix it.
artistutorials@gmail.com
Click to Add a New Comment
Leave your comment
- If you're asking a question click the Subscribe By Email link, below the comment form, to be notified of replies.
- Do NOT add links to the body of your comment as they will not be published.
- Only the comments posted in ENGLISH will be approved.
- If you have a problem check first the comments , maybe you will find the solution there.