Alternative zum LinkWithin: Simples "Related Posts" ♥

LinkWithin ist an sich eine schöne Idee, um Leser auf andere ähnliche Posts aufmerksam zu machen. Persönlich finde ich jedoch die großen Thumbnails störend, vor allem wenn man gar nicht so viele Bilder bloggt. Darüber hinaus ist es nicht gerade dezent und subtil, weswegen LinkWithin für uns nicht erdenkbar war. Zum Glück haben wir eine tolle, simple und vor allem dezente Alternative gefunden, die nur auf der Postseite erscheint, und das Einbauen ist gar nicht so schwer!

Und so geht's:

1. Öffne den HTML-Editor unter Vorlage.

2. Suche die Zeile </head>. (Ihr findet es nicht? Dann lest euch das hier durch.)

3. Fügt folgendes direkt darüberein:

<!--Related Posts 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;
margin-top: 20px;
background: #eee;
}
#related-posts .widget{
padding-left:6px;
margin-bottom:10px;
}
#related-posts .widget h2, #related-posts h2{
font-weight: normal;
margin-bottom: 0.75em;
padding-top: 0em;
}
#related-posts a{
font-size:16px;
color: #e6a48f;
font-variant:small-caps;
}
#related-posts a:hover{
text-decoration: none;
color: #feb49c;
}
#related-posts ul{
list-style-type:none;
margin:0 0 0px 0;
padding:0px;
text-decoration:none;
text-color:#000000
}
#related-posts ul li{
list-style-type: none;
border-left: 2px solid #ddd;
border-bottom: 1px dotted #ddd;
margin-bottom: 3px;
padding-left: 30px;
padding-top:0px;
}
#related-posts ul li:hover{
background-color: #efefef;
border-left: 2px solid #ddd;
border-bottom: 1px dotted #ddd;
}
img.bhacksmly {
    vertical-align: middle !important;
    margin:0 5px 0 15px;
}
</style>
<script type='text/javascript'>
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src='http://helplogger.googlecode.com/svn/trunk/related_posts.js' type='text/javascript'/>
<!--Remove--></b:if>
<!--Related Posts Scripts and Styles End-->

Dieser Code entspricht der Erscheinung auf CopyPasteLove, d.h. wer den Code eins zu eins übernimmt, bekommt das gleiche Ergebnis wie hier unter diesem Post. Ändert das rote um, um die Farbe der Überschrift zu ändern. Ändert das orangene um, um die Farbe zu ändern, wenn man mit der Maus über die Punkte geht.

4. Jetzt sucht ihr diese Zeile: <div class='post-footer'> und fügt folgendes direkt darunter ein:

<!-- Related Posts 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> <b:if cond='data:blog.pageType == &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> var maxresults=5; removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;); </script> </div> <!--Remove--></b:if> <!-- Related Posts Code End-->

Ändert bei  maxresults=5; die Zahl 5 um, um die Anzahl der Vorschläge zu bestimmen.

5. Speichern!

Ich wünsche euch viel Spaß damit :)