Δευτέρα, 29 Απριλίου 2013

Πώς θα προσθέσω το gadget "Σχετικές αναρτήσεις", κάτω από τις αναρτήσεις μου;

Κοινοποιήστε Share to Facebook Share to Twitter Email This

Το συναντάτε σε πολλά blogs, όλο λέτε να το βάλετε, αλλά το ξεχνάτε στην πορεία, ή σας φαίνονται δύσκολες οι οδηγίες που βρίσκετε στο ίντερνετ...
Υπάρχουν αρκετές υπηρεσίες που το προσφέρουν έτοιμο, όπως το Linkwithin. Δοκίμασα το συγκεκριμένο και δεν έμεινα ιδιαίτερα ικανοποιημένη, για ποικίλους λόγους. Οπότε έψαξα και βρήκα άλλο τρόπο και πρόσφατα -όπως θα είδατε- τον υιοθέτησα κι εγώ στο Χωρίς Ειρμό.
(Αν σας φανεί δύσκολο, δείτε την επόμενη ανάρτηση, όπου σας δείχνω πώς να κάνετε το ίδιο πράγμα με τη βοήθεια του linkwithin, το οποίο είναι δημοφιλές και δωρεάν, αλλά  εγώ δεν το πολυσυμπαθώ).
Τα βήματα που πρέπει να ακολουθήσετε είναι τα εξής:

1. Δημιουργούμε ένα αντίγραφο ασφαλείας του προτύπου μας.



2 . Πάμε Πρότυπο>Επεξεργασία HTML. Όπως θα δείτε, πρόσφατα άλλαξε ο επεξεργαστής του κώδικα του blogger. Υποτίθεται ότι είναι πιο βολικό τώρα με τις αριθμημένες γραμμές, αλλά έχει κάποια κολλήματα... Για παράδειγμα, εγώ πολλές φορές, αλλού βάζω τον κέρσορα και αλλού γράφει! Γι' αυτό προσέξτε διπλά!

3. Βρίσκουμε τον κώδικα </head>, με τη μέθοδο CTRL+F. (Προσοχή, να έχετε κάνει κλικ μέσα στο πεδίο του κώδικα και μετά ctrl+f). Ακριβώς επάνω από αυτό,  κάνουμε επικόλληση τον παρακάτω κώδικα.

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 18px;
letter-spacing: 2px;
font-weight: bold;
text-transform: none;
color: #5D5D5D;
font-family: Arial Narrow;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
border-right: 1px dotted #DDDDDD;
color:#5D5D5D;
}
#related-posts a:hover{
color:black;
background-color:#EDEDEF;
}
</style>
<script type='text/javascript'>
var defaultnoimage=&quot;http://3.bp.blogspot.com/-PpjfsStySz0/UF91FE7rxfI/AAAAAAAACl8/092MmUHSFQ0/s1600/no_image.jpg&quot;;
var maxresults=5;
var splittercolor=&quot;#DDDDDD&quot;;
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src='http://helplogger.googlecode.com/svn/trunk/related-posts-with-big-thumbnails.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

Τώρα, ψάχνουμε πάλι με CTRL+F τον εξής κώδικα:
<div class='post-footer'>

Ακριβώς πριν από αυτό, κάνουμε επικόλληση τον εξής κώδικα:

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=5&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://helplogger.blogspot.com'><img alt='Blogger Tricks' src='http://3.bp.blogspot.com/-K65p5zLLKQk/T3ObCINoP7I/AAAAAAAABmI/dF84-alnOu4/s1600/best+blogger+tips.png'/></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

Σημειώσεις:

  • Αν θέλετε το gadget να εμφανίζεται και στην αρχική σας σελίδα, αφαιρέστε τα κομμάτια του κώδικα που έχουν πράσινο χρώμα.
  • Με το συγκεκριμένο κώδικα θα σας βγάζει 5 σχετικές αναρτήσεις. Αν θέλετε να αλλάξετε τον αριθμό, στη θέση του "5" που είναι γραμμένο με κόκκινο χρώμα (και στους δύο κώδικες), βάλτε τον αριθμό που θέλετε.
  • Για να αλλάξετε τον τίτλο του gadget, πληκτρολογήστε το κείμενο που θέλετε, στη θέση του Related Posts, που είναι γραμμένο με κόκκινο.
  • Αν οι εικόνες των σχετικών αναρτήσεων σαν φαίνονται πολύ μεγάλες, μπορείτε να αντικαταστήσετε το τμήμα του παραπάνω κώδικα που είναι σε μπλε χρώμα με το εξής:

    http://helplogger.googlecode.com/svn/trunk/related-posts-with-thumbnails-for-blogger3.js

  • To <div class='post-footer'> εμφανίζεται πάνω από μία φορά στον κώδικα του προτύπου σας. Δοκιμάστε το πριν από καθένα από αυτά και ελέγξτε σε ποιο δουλεύει. Μην το βάλετε σε όλα.

  • Τέλος, αν ξέρετε μερικά πράγματα από css, μπορείτε να παίξετε με την εμφάνιση του gadget, πειράζοντας το πρώτο τμήμα του κώδικα.
Αν αυτός ο τρόπος σας φάνηκε δύσκολος, δείτε την επόμενη ανάρτηση, όπου σας δείχνω πώς θα έχετε σχεδόν το ίδιο αποτέλεσμα, με το Linkwithin, που τα κάνει όλα αυτόματα.

* Τον κώδικα τον βρήκα στο ξένο blog "helpblogger".

4 σχόλια:

  1. Πολύ χρήσιμο. Και εγώ δεν το συμπαθώ το linkwithin, αλλά είναι εύκολο για να μπει.
    Σε ευχαριστούμε!

    ΑπάντησηΔιαγραφή
  2. Αυτό δεν το ήξερα και θα το δοκιμάσω σίγουρα. Σου είχα στείλει και ανάλογο μήνυμα........μήπως ξέρεις να μου πεις (τώρα πο υάλλαξε ο επεξεργαστής)πως γίνεται να σβήσουμε εντελώς το "πρότυπο"στην επεξεργασία html και να επικολλήσουμε κάποιο άλλο;;; Ευχαριστώ εκ των προτέρων

    ΑπάντησηΔιαγραφή
  3. Ευχαριστώ πολύ Λίνα μου...
    Υπέροχο το gadgetάκι που μας έδειξες...
    Το έβαλα στο σπιτάκι μου.. μου αρέσει πολύ...
    Σε φιλώ γλυκά..

    ΑπάντησηΔιαγραφή
  4. όταν έφτασα στο σημείο αυτό "Todiv....εμφανίζεται πάνω από μία φορά στον κώδικα του προτύπου σας. Δοκιμάστε το πριν από καθένα από αυτά και ελέγξτε σε ποιο δουλεύει. Μην το βάλετε σε όλα." μπερδεύτηκα....αρχάρια εδώ!!! δεν κατάλαβα τι έπρεπε να σβήσω γι'αυτό και δεν το πείραξα καθόλου και προφανώς γι'αυτό δεν μου εμφανίστηκε....τι κάνουμε τώρα?
    το blog μου είναι αυτό forhappymoments.blogspot.gr και το email pap.evagelia@gmail.com θέλω βοήθεια!! ευχαριστώ!

    ΑπάντησηΔιαγραφή