2009-04-01

Image

Make a Post Summary (add Read more Function to your blogger post)

If you are a beginner, possible you'd feel to surprise when seeing the articles in my blog presenting only shares first paragrap or second paragrap, and to read for full article, you must click Read more... link. Alright.. please don't feel surprise, i will discuss about this now.
The function like that called Post Summary. You can make a post summary function with add a little code to your template code. But this code is for new blogger template (beta) and does not work at classic template.
Please follow the steps below :
Step #1 :

  1. Login to blogger with your ID
  2. In the dashboard page , click Layout.
  3. Then click edit HTML tab.
  4. Click the Download full template link. Save your template (very important)
  5. Please mark the little box beside Expand Widget Templates. Wait for a moment.
    expand-widget.png
  6. Go to your template code, and find the code like this :

    <p><data:post.body/></p>

  7. Delete the above code and change with this code :

    <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/> <a expr:href='data:post.url'><strong>Read more...</strong></a></p> </b:if>

  8. Click Save Template button
  9. Step #1 is done.

Step #2 :
  1. Click Setting tab.
  2. Click formatting tab.
  3. Go to lower side. you will find a blank text are beside Post Template. Fill that blank text area with this code :

    <span class="fullpost"> </span>

  4. Click Save settings button.
  5. Step #2 is done.

How to post your article?
When you post your article, choose photo-posting_03.gif tab. and you will see the code below :
<span class="fullpost">
</span>

Place the first paragraps above of :
<span class="fullpost">

and place the rest of paragrap under of :
<span class="fullpost">

and above of :
</span>

and then publish your post. Done.
If you still feel confuse, this is the example how to place your article:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet. (this will show in front of your blog)
<span class="fullpost">

Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum. . (this will show if visitor click read more)
</span>
At front page of your blog, will show just like this :
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet. Read more...
The last, if you try this hack and you not succes, don't be panic. upload your backup template, and it's will be back to template code before you do edit.
Technorati Tags: ,,


0 التعليقات:

Total Pageviews