Πως να εμφανίσω σχετικά άρθρα στο blogger κάτω από κάθε άρθρο;

related-posts-bloggerΓια όσους φίλους bloggers τους αρέσει το blogspot και θέλουν να εμφανίσουν σχετικά άρθρα με φωτογραφία κάτω από κάθε άρθρο, αναδημοσιεύω τον κωδικό από εδώ. Το αποτέλεσμα είναι να εμφανίζονται σχετικά άρθρα με φωτογραφία κάτω από κάθε άρθρο μας.

Βήμα 1 Ανοίγουμε το Dashboard >> Template >> Edit HTML και μαρκάρουμε το Expand widgets template.

Βήμα 2 Κάνουμε αναζήτηση χρησιμοποιώντας αυτόν τον συνδυασμό (CTRL + F)  για το </head>. Πριν από το /head κάνουμε copy/paste τον παρακάτω κωδικό:

<!–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–>

– Για να αλλάξουμε την φωτογραφία αντικαθιστούμε το URL με δικό μας.
– Αν θέλουμε να εμφανίσουμε περισσότερα από 5 σχετικά άρθρα, στην θέση του 5 βάζουμε άλλον αριθμό “var maxresults=5;”
– Αν θέλουμε τα σχετικά άρθρα να εμφανίζονται και στην πρώτη σελίδα μας πρέπει να αφαιρέσουμε τον κόκκινο κωδικό. Αν τον αφήσουμε τότε στην πρώτη σελίδα μας ΔΕΝ θα εμφανίζονται σχετικά άρθρα, αλλά μόνο σε όλες της επόμενες σελίδες μας.
Βήμα 3 Ψάξτε για αυτό το κομμάτι <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=6&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–>

– Αλλάξτεc τον αριθμό 6 με τον αριθμό των άρθρων που θέλετε να εμφανίζονται max-results=6.
– Αν θέλειτε τα σχετικά άρθρα να εμφανίζονται στην πρώτη σελίδα αφαιρέστε τον κωδικό που είναι με κόκκινο χρώμα.

Βήμα 4 Κάντε save και δείτε της αλλαγές.

Drop Your Comment

Proudly powered by WordPress. Theme by Infigo Software.