Κυριακή, 1 Μαΐου 2011

READ MORE BUTTON (ΜΕ ΕΙΚΟΝΑ!) ΑΝΤΙ ΓΙΑ ΚΕΙΜΕΝΟ Πηγή www.bloggertips.gr

Καλησπέρα στους φίλους-αναγνώστες!

Μετά από δεκάδες ερωτήσεις που δέχτηκα για αυτό το θέμα αποφάσισα να γράψω τη σημερινή ανάρτηση.

Όλοι ξέρουμε τώρα πια (με τη βοήθεια βεβαίως του bloggertips.gr) πως θα βάζουμε το Read More στις αναρτήσεις μας, ώστε να μην φαίνονται ολόκληρες στην αρχική μας σελίδα. Σχετικά με αυτό έχω συγγράψει στο παρελθόν δύο τρόπους προσθήκης του: την απλή (http://www.bloggertips.gr/2009/07/read-more-blog.html) και την αυτόματη (http://www.bloggertips.gr/2010/03/automatic-read-more-function-in-blogger.html).

Σήμερα θα σας πω, πως και στις δύο περιπτώσεις θα βάλουμε αντί για κείμενο ένα read more button, όπως έχω εγώ.

Αν έχετε το απλό read more:

Στο βήμα 11 σας λέω να βάλετε τον παρακάτω κωδικό:

<b:if cond='data:blog.pageType != "item"'>
<span style="font-weight:bold;"><span ><a expr:href='data:post.url' target='_blank'>Διαβάστε περισσότερα...</a></span></span>
</b:if>

Απλά αντικαθιστάτε το Διαβάστε περισσότερα... με τον παρακάτω κωδικό:

<img src="url_of_image" border="0" />

Στο url_of_image βάζετε το url του read more button σας.

Στο αυτόματο read more:

Εκεί που λέω να αντικαταστήστε το <data:post.body/> με τον παρακάτω κωδικό:

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary-" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary-<data:post.id/>");</script>
<a class='readmore' expr:href='data:post.url'>Read more »</a>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

Εκεί που λέει Read more » το αντικαθιστάτε με το:

<img src="url_of_image" border="0" />

Στο url_of_image βάζετε το url του read more button σας.