Tipps & Tutorials, tutorial

Zufällige Posts als Widget einfügen

Diesen Sonntag zeige ich euch, wie man in einem Widget zufällige Posts anzeigen lassen kann. Ganz praktisch, um einfach nur ältere eventuelle interessante Posts auf der Startseite zu zeigen.
1. Geht auf Layout und fügt ein neues Widget ein. Wählt den HTML/Javascript Widget!
2. Fügt folgenden Code ein:
<style>
#random-posts {
font-size:11px;
}
#random-posts img{
float:left;
margin-right:20px;
border:1px solid #eee;
background:#FFF;
width:36px;
height:36px;
padding:3px;
}
</style>
<ul id='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=5;
var rdp_snippet_length=150;
var rdp_info='yes';
var rdp_comment='Comments';
var rdp_disable='Comments Disabled';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts"></script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script type='text/javaScript'>
function random_posts(json){for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="http://2.bp.blogspot.com/-XQt2v4x5dl8/T1zdpFh392I/AAAAAAAABUU/xMJZDedw38k/s1600/default.jpg"}}};document.write('<li>');document.write('<img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts"></script>')};
</script>
</ul>

3. Personalisieren:
font-size:11px – ändere diese Zahl ab um die Größe der Schrift zu ändern.
margin-right:20px; – ändere diese Zahl ab um den Abstand zwischen Bild und Text zu ändern.
height:36px; width:36px; – ändere beide Zahlen ab, um die Größe des Bildes zu verändern.
var rdp_numposts=5; – ändere die Zahl ab, um die Anzahl der angezeigten Posts zu ändern.
Bildlink – ändere diese ab, um das Bild für Posts ohne Bilder (“No Image”) zu ersetzen.

4. Speichern.


Die nächste Woche werde ich auf einem Seminar sein, deshalb wird am nächsten Sonntag den zweitplatzierten Tutorialvorschlag umgesetzt: Seitennavigation mit Zahlen ersetzen! Bis dann!

35 Comments

  1. Delivia Erikli

    3. March 2013 at 17:30

    Vielen Dank :*

    deliviabrownie.blogspot.de

  2. lovely

    3. March 2013 at 17:31

    Danke :))
    Ich hab es sofort ausprobiert!
    LG <3

  3. Anonym

    3. March 2013 at 18:11

    Vielen Dank, hat geklappt!

    LG
    Elke

  4. Tina Hoffmann

    3. March 2013 at 18:30

    Super – danke für das Tutorial 🙂
    Grüße Tina

  5. MissXoxolat

    3. March 2013 at 18:47

    Danke, funktioniert super!

  6. Benjamin

    3. March 2013 at 20:43

    ich freu mich auf nächste woche *_*

  7. eliza

    3. March 2013 at 20:54

    wow, echt gut 🙂

  8. kurzundknapp

    4. March 2013 at 6:38

    Ich lauer immer schon förmlich auf einen neuen Artikel. Ich habe schon soo viel anwenden können und bin Euch echt dankbar. Dieses Widget hier ist absolut genial. Vielen lieben Dank!

  9. Lela

    4. March 2013 at 10:12

    Cool, schaut gut aus. Vielen Dank!

  10. Mareike Höckendorff

    4. March 2013 at 12:10

    Das ist wirklich ein tolles neues Widget! Kann man es auch so personalisieren, dass man z.B. immer 3 Posts vertikal in einer Reihe hat statt alle untereinander?
    Liebe Grüße,
    Mareike

  11. Mya Brown

    4. March 2013 at 15:42

    Super Tipp – wie immer! 🙂 Habs gleich ausprobiert und funktioniert einwandfrei!

    Viiiiielen Dank!

    lg

    Mya

  12. nata

    4. March 2013 at 15:44

    Super Idee 🙂 Danke!

    my blog xx

  13. Tina´s PicStory

    4. March 2013 at 18:02

    vielen dank!!! war genau das, was ich gesucht hab 🙂

  14. Dornröschen

    4. March 2013 at 21:01

    Habt ihr so auch diese Related Posts gemacht – also nach diesem Prinzip? Mit gefällt euer 'Related Posts' Widget nämlich total, aber ich trau mich an den Code nicht dran, da ich Angst habe irgendwas kaputt zu machen. 🙁

  15. Katja Brackelmann

    5. March 2013 at 17:12

    Klappt super aber wie bekomme ich die Aufzählungszeichen weg?

  16. Ines Caranaubahx

    10. March 2013 at 20:57

    Bmir funktioniert es nicht. Da steht dann nur der Gadgettitel und dadrunter ist eine Zeile frei und dann kommt schon mein nächstes Gadget… schade…

  17. Annika

    11. March 2013 at 10:10

    Soweit habe ich das alles verstanden. Gibt es eine Möglichkeit das dort bestimmte Posts angezeigt werden? z.B. die 3 aktuellsten mit dem Label "XY"

    LG
    Annika

    PS: Danke für diesen tollen Blog! Hier finde ich eigentlich immer alles, was ich suche, wenn mal wieder Blogbasteln ansteht!

  18. creat.ING[dh]

    13. March 2013 at 13:49

    Super Widget. Habe ich gleich auf meinem Blog gespeichert. Ich habe versucht, die Angabe über die Kommetare ruas zu löschen, leider bekomme ich das nicht zusammen. Könnt ihr mir bitte weiterhelfen, was ich im HTML verändern muss, dass es mir den Hinweis über die Kommentare nicht mehr anzeigt?
    Danke
    lg dodo

  19. Isis Unveiled

    25. March 2013 at 17:51

    Hab sowas lange gesucht und hier endlich gefunden! Danke!!!

  20. Anita Müller

    19. April 2013 at 11:19

    Huhu super Teil funktioniert klasse…

    1. Anita Müller

      19. April 2013 at 11:23

      Ach, eine Frage hätte ich noch, kann man die Kommentare irgendwie ausblenden?

  21. Buntpapierfabrik

    27. April 2013 at 9:10

    Toll, was für gute Tipps man hier auf diesem Blog findet, erstmal vielen Dank.
    Zu diesem Widget habe ich die gleiche Frage wie Anite vor mir:
    Was muss ich tun/löschen, damit weder DATUM noch COMMENTS erscheinen? Nur ein Bild und der Posttitel würde mir genügen.
    Herzlichen Dank für eine Antwort
    Christine

  22. Bella

    28. April 2013 at 18:03

    super, perfekt funktioniert. danke

    bella

    Mein herzensüßer Blog

  23. Sonja Cremer

    15. June 2013 at 20:56

    Das ist wieder eine ganz klasse Idee von Euch.
    Es hat auch wunderbar funktioniert.
    Nur sieht es bei mir anders aus als auf Eurem Beispiel oben.
    Aufzählungzeichen sind da, die zufälligen Posts sind eingerückt und der Rahmen ist dick und weiß.
    Es ist der Rahmen, der mich etwas stört. Ich fände so einen wie bei Eurem Beispiel viel schöner.
    Habt Ihr da vielleicht einen Tipp für mich?
    Das wäre echt klasse!

    Liebe Grüße
    Sonja

  24. nyiloveyou

    8. August 2013 at 19:17

    Kann es sein, dass nur Bilder angezeigt werden, wenn man die direkt bei blogger hochlädt? gibt es eine Lösung dafür?
    super arbeit!

  25. Micha Klann

    26. August 2013 at 14:41

    Danke für diese großartige Hilfe!
    Nachdem Linkwithin bei mir nicht mehr funktioniert hat, bin ich sehr glücklich diesen Ersatz gefunden zu haben.
    Mit freundlichem Gruß,
    Micha

  26. Silva

    10. September 2013 at 14:13

    Das habe ich direkt ausprobiert und es sieht klasse aus!
    http://lieblingssofa.blogspot.de/

    Wie kann ich denn die Anzahl mit den Kommentare eine Zeile tiefer anzeigen lassen als das Datum?
    Alles Liebe!

  27. Marion ...

    14. October 2013 at 10:33

    Hallo, ich hab das Widget auch ausprobiert. Vielen Dank!
    Mir hat das mit den Kommentaren und dem Datum auch nicht gefallen und ich habs geschafft, dass die nicht angezeigt werden.

    Da ich mich mit html nicht wirklich auskenne, übernehme ich keine Garantie dafür ob das eine ordentliche oder schöne Lösung ist, aber bei mir funktioniert sie jedenfalls.

    Hier ist mein Code:

    < style >
    #random-posts {
    font-size:90%;
    }
    #random-posts img{
    float:left;
    margin-right:10px;
    margin-top:3.5px;
    margin-bottom:3.5px;
    border:1px solid #eee;
    background:#FFF;
    width:60px;
    height:60px;
    padding:2px;
    outline: solid 0.7px #B57D93;
    }
    < /style > 
    < ul id='random-posts' >
    < script type='text/javaScript' >
    var rdp_numposts=5;
    var rdp_snippet_length=150;
    var rdp_info='yes';
    var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('< script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts" >< /script >');function getvalue(){for(var i=0;i
    < script type='text/javaScript' >
    function random_posts(json){for(var i=0;i]*>/g,"");if(rdp_get_snippet.length');
    document.write('< img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/ >');
    document.write('< div >< a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'" >'+rdp_posttitle+'< /a >< /div >');
    if(rdp_info=='yes')
    document.write('< div style="clear:both" >< /div >< /li >')}};
    getvalue();
    for(var i=0;i< /script >')};
    < / script >
    < / ul >

    Ich hab unter anderem noch ein paar andere Dinge geändert. Die Schriftgröße hab ich mit 90% angegeben, weil das in meiner Sidebar im html so hinterlegt ist und ich hab eine Kontur eingefügt die zu meinem Blog passt. Das ist diese Stelle: outline: solid 0.7px #B57D93; (durchgezogene Linie, Stärke, Farbe). Falls ihr die Kontur nicht wollt oder ihr eine andere Stärke/Farbe geben wollt.

    Vielleicht hilft es ja dem ein oder anderen. Damit ich den Code hier posten kann, musste ich Leerzeigen bei den < und > Klammern einfügen.

    Und hier seht ihr das Ergebnis auf meinem Blog:
    http://marionsgenusskueche.blogspot.de/

    1. Sin

      21. July 2015 at 11:02

      Bei mir hat dieser Code leider nicht funktioniert, aber ich habe einen anderen Weg gefunden, damit weder Kommentare noch das Datum angezeigt werden: bei
      var rdp_info='yes';
      no statt yes eingeben.
      Die Stelle befindet sich zwei Zeilen unter der Zeile mit der Anzahl der Posts, anschauen kann man das ebenfalls auf meinem Blog: schoensin.blogspot.de

      LG, Sin

  28. Sali

    16. February 2014 at 15:37

    Vielen Dank für den tollen Tipp! So etwas habe ich schon lange gesucht und es hat sofort problemlos funktioniert!
    Der Blog ist eine tolle Idee!
    Liebe Grüße
    Sali

  29. Prisha S.

    8. March 2014 at 12:18

    Gibt es eine Möglichkeit, dieses Widget anstatt Linkwithin unter die Posts zu setzen?

  30. Anonym

    28. March 2014 at 21:34

    Ich muss ja sagen, dass ich diesen Blog einfach liebe 🙂 Jedes Tutorial ist einfach genial – vielen lieben Dank!

  31. Sandy K.

    30. January 2015 at 15:02

    Super Tutorial!!! Gibt es eine Möglichkeit, die Bilder nebeneinander statt untereinander zu platzieren?
    http://sandyskitchendreams1.blogspot.de/

  32. nelasworld

    2. July 2015 at 1:07

    Ich wollte mal kurz ein großes Komplimet zu eurem tollen Blog dalassen. Dank copypastelove habe ich vieles endlich verstanden und dazugelernt. Ganz toll aufbereitet und sehr verständlich geschrieben. Vielen Dank für eure Mühe und die Möglichkeit, die ihr weniger Informatik – Begabten bietet, auch den eigenen Blog etwas netter zu gestalten:) Hab fast jeden Artikel von euch gelesen. Sehr spannend:)

Leave a Reply