Allgemein, Tipps & Tutorials, tutorial

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>.
 
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 Comments

  1. Rosalie

    9. June 2013 at 16:11

    Wieso kann ich die zweite Zeile nicht finden? 😮

    1. Mira Ho

      9. June 2013 at 16:17

      Hast du von oben nach unten gesucht? Es ist auf jeden Fall in deinem Code drin.

    2. Buntspechte

      9. June 2013 at 16:56

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

      Dort befand sich dann auch die gesuchte Stelle!

      VLG
      Anke

  2. Janine

    9. June 2013 at 16:24

    ich finde den 2. Code gar nicht 🙁

    1. Mira Ho

      9. June 2013 at 16:34

      Den gibt's aber bei jeder Vorlage! Ist ganz unten im Code!

    2. Janine

      9. June 2013 at 17:11

      sry find ich trotzdem iwi nicht 🙁

  3. Isy

    9. June 2013 at 16:26

    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

    1. Buntspechte

      9. June 2013 at 16:58

      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

  4. strawberryred

    9. June 2013 at 17:12

    Das ist ja cool 🙂 Danke für den Post!

  5. Malin Rouge

    9. June 2013 at 17:20

    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?

  6. Randi VV

    9. June 2013 at 17:39

    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

  7. chocolat

    9. June 2013 at 18:08

    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. 😀 Wird das erst später angezeigt?
    LG Linda

  8. Achim Müller

    9. June 2013 at 19:06

    Bei mir passiert auch nicht…

  9. Julia

    9. June 2013 at 19:18

    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

  10. Anonym

    9. June 2013 at 19:22

    Ich habe dir geantwortet und herzlichen Glückwunsch zu den 5000! 🙂

  11. Anonym

    10. June 2013 at 15:25

    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

  12. Lea.

    10. June 2013 at 17:50

    Ich habe das mal anstatt Text nur mit Bildern gesehen.. Das würde ich auch gern machen, aber habe es bis jetzt nicht hinbekommen 😀

  13. Nici

    12. June 2013 at 9:55

    Bei mir tut sich leider auch nichts. 🙁

  14. Mrs. KK

    15. June 2013 at 10:21

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

    1. Anonym

      20. June 2013 at 13:23

      Es steht "darüber" im Text und nicht darunter.

  15. Andrea

    25. June 2013 at 6:57

    Bei mir dasselbe. Alles gemacht und wird aber nirgends angezeigt.

  16. Sandra PusteBlume.~

    4. July 2013 at 15:26

    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

  17. Sichtbar

    5. August 2013 at 13:43

    Bei mir geht es auch nicht, wird nirgends angezeigt, auch wenn ich es mache, wie Sandra sagt. Hilfe? 😛

  18. Carry S.

    5. January 2014 at 17:04

    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

  19. Schnubbeldupp

    14. January 2014 at 8:28

    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

  20. Anonym

    13. March 2014 at 13:57

    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/

  21. Shiro

    20. June 2014 at 15:48

    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 🙂

  22. Sandra PusteBlume.~

    19. August 2014 at 17:27

    Hallo Mira, bei mir hat der Code einwandfrei funktioniert! Es sieht toll aus, danke!

  23. Barbara

    5. September 2014 at 19:04

    Ich habe bei Codes eingefügt und bei mir ist gar nichts passiert… :/
    Hätte mich so gefreut!

  24. Sandra Westenhöfer-Grammeth

    9. June 2015 at 9:35

    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….

    1. Sandra Westenhöfer-Grammeth

      9. June 2015 at 9:55

      Hoppla, jetzt geht es auf einmal doch… nachdem ich dreimal aktualisiert und den Cache geleert habe. DANKE!!!

  25. min ziari

    12. December 2017 at 10:34

    Hallo,
    ich würde es auch so gerne in meinem Blog sehen, aber die Zeile mit dem post-footer gibt es nicht. Ich habe irgendwo gelesen, dass es bei Blogger seit einiger Zeit diesen Code nicht mehr gibt.
    Hast du vielleicht inzwischen eine Alternative dazu?
    Dein Blog hat mir schon vielfach geholfen und deine tollen Anleitungen hätte ich es wahrscheinlich nicht geschafft, meinen zu erstellen.
    Liebe Grüße
    Steffi

Leave a Reply to Mira Ho Cancel