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 :)

35 Kommentare

  1. Wieso kann ich die zweite Zeile nicht finden? :o

    AntwortenLöschen
    Antworten
    1. Hast du von oben nach unten gesucht? Es ist auf jeden Fall in deinem Code drin.

      Löschen
    2. Ich musste bei mir erst folgendes öffnen ( mit dem kleinen schwarzen Pfeil):


      Dort befand sich dann auch die gesuchte Stelle!

      VLG
      Anke

      Löschen
  2. ich finde den 2. Code gar nicht :(

    AntwortenLöschen
    Antworten
    1. Den gibt's aber bei jeder Vorlage! Ist ganz unten im Code!

      Löschen
    2. sry find ich trotzdem iwi nicht :(

      Löschen
  3. Komisch. Habe eigentlich alles so gemacht, wie beschrieben, aber es wird bei mir trotzdem nicht angezeigt-.-
    Liebe Güße
    Isy von sea-of-daydreams.blogspot.com

    AntwortenLöschen
    Antworten
    1. Auf der Startseite wirds bei mir auch nicht angezeigt, find ich auch nicht wichtig- denn wenn man die einzelnen Posts anklickt ist es unten da!
      :)

      VLG
      Anke

      Löschen
  4. Das ist ja cool :) Danke für den Post!

    AntwortenLöschen
  5. Ich hätte gerne etwas anderes anstatt Linkwithin, aber wenn man es erstmal installiert geht es nicht so schnell weg, jedenfalls bei mir nicht!
    Wenn ich das Widget lösche ist es immer noch da :(

    Hat da jemand einen Tipp?

    AntwortenLöschen
  6. bei linkwithin hab ich das problem, dass neue posts nicht reingenommen werden. jetzt kommen immer nur posts, die ich geschrieben hatte, bevor ich linkwithin hatte. das nervt mich und jetzt wollte ich fragen, wie das bei deinem ist ? xx

    AntwortenLöschen
  7. Hab es genau so gemacht wie beschrieben, aber es wird trotzdem nicht angezeigt. Find das irgendwie komisch, weil man ja eigentlich nichts falsch machen kann. :D Wird das erst später angezeigt?
    LG Linda

    AntwortenLöschen
  8. Liebe Mira, ich habe hier schon so viele tolle Tipps und Kniffe bekommen, deswegen habe ich mich jetzt auch endlich mal als regelmäßige Leserin eingetragen. Mach weiter so!

    Liebste Grüße,
    Julia

    AntwortenLöschen
  9. Ich habe dir geantwortet und herzlichen Glückwunsch zu den 5000! :)

    AntwortenLöschen
  10. Vielen Dank für diese Anleitung!

    Ich habe es genauso gemacht wie es in deiner Anleitung steht, aber es hat leider nicht hingehauen. Mal gucken was ich falsch gemacht habe. Ich finds schon noch raus.
    Weder auf der Startseite noch beim Anklicken der Posts sehe ich ein Ergebnis.

    Grüße

    Lia

    AntwortenLöschen
  11. Ich habe das mal anstatt Text nur mit Bildern gesehen.. Das würde ich auch gern machen, aber habe es bis jetzt nicht hinbekommen :D

    AntwortenLöschen
  12. Bei mir tut sich leider auch nichts. :(

    AntwortenLöschen
  13. es tut sich leider rein garnichts.
    es ist doch richtig dass ich den ersten part auch gleich unter der Head zeile einfüge?

    AntwortenLöschen
    Antworten
    1. Es steht "darüber" im Text und nicht darunter.

      Löschen
  14. Bei mir dasselbe. Alles gemacht und wird aber nirgends angezeigt.

    AntwortenLöschen
  15. Leute! Bei mir ging es anfangs auch nicht, allerdings hab ich bei mir im Code 2x den div class-Code der sich auf den Post-Footer bezieht. Setzt den zweiten Code von Mira einfach unter beide div class's, dann geht das schon. Von mir ein ganz großes Lob an dich Mira ;)

    Alles Liebe,
    Sandra

    AntwortenLöschen
  16. Bei mir geht es auch nicht, wird nirgends angezeigt, auch wenn ich es mache, wie Sandra sagt. Hilfe? :P

    AntwortenLöschen
  17. Habe das Tutorial nun bei meinem Blog angewendet. Wie kriege ich nun den Abstand zwischen Überschrift und dem ersten Link kleiner? Finde es nicht... Unterstreichen würd ich die Überschrift evtl auch gerne.

    Schonmal danke fürs schauen :)

    Mein Blog: http://www.carrysbeautyblog.de

    AntwortenLöschen
  18. Guten Morgen, bei mir hats leider auch nicht geklappt.
    Habe Schritt 4 bei nach und nach bei beiden gefundenen Codes ausprobiert.

    Liebe Grüße
    Anja

    AntwortenLöschen
  19. Hey, bei allen, bei denen es nicht geklappt hat, meldet euch bei nrelate an - das hat die gleiche Funktion und man kann auch einstellen dass man keine Bilder angezeigt bekommen möchte. Ist aber viel einfacher in der Einrichtung und man muss nicht im HTML rummachen. Hat bei meinem Blog super funktioniert und war ganz einfach - schaut mal vorbei, Link im Profil. Die "Related Posts" werden aber nur angezeigt, wenn man einen einzelnen Post anklickt, und nicht auf der Startseite. Hier ist der Link für die Anmeldung https://partners.nrelate.com/registration/

    AntwortenLöschen
  20. Dieser Kommentar wurde vom Autor entfernt.

    AntwortenLöschen
  21. Das mit dem "nicht hinbekommen" hat sich erledigt. Ich würde nur gerne wissen wie man das "Related Posts" um benennen kann und wie man das Ganze zentriert.

    Bitte um schnelle Antwort. Dankeschön :)

    AntwortenLöschen
    Antworten
    1. mein Bloglink
      http://shiro-madness.blogspot.de/

      Löschen
  22. Hallo Mira, bei mir hat der Code einwandfrei funktioniert! Es sieht toll aus, danke!

    AntwortenLöschen
  23. Ich habe bei Codes eingefügt und bei mir ist gar nichts passiert... :/
    Hätte mich so gefreut!

    AntwortenLöschen
  24. Also, bei mir klappt es auch nicht. Mein Blog: http://www.camping-checker.de - allerdings sehe ich auch hier unter diesem Post keine "Related Posts". Kann es auch an der Browser-Einstellung liegen? Oder mache ich etwas falsch? Rätsel....

    AntwortenLöschen
    Antworten
    1. Hoppla, jetzt geht es auf einmal doch... nachdem ich dreimal aktualisiert und den Cache geleert habe. DANKE!!!

      Löschen

Danke für dein Kommentar! Bitte beachte, dass Beleidigungen & Spam ohne Vorwarnung gelöscht werden. Bitte hab Verständnis dafür, dass wir nicht alle Kommentare beantworten können!

Falls ein Tutorial nicht funktioniert hat, dann schreibe bitte in deinem Kommentar genau, was nicht funktioniert & deinen Bloglink. So kann dir besser geholfen werden!

Du möchtest dich direkt an Mira wenden, um ein Problem zu lösen oder ein Design erstellen zu lassen? Dann schaue doch hier vorbei und melde dich!

 
Lass dir dein Blogdesign von mir gestalten!