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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiya2eKnpuvbv8vI6vyQDrqGHZfZrkHwYSw0Z-3-OhL3hTt2_3p4dCANH1D-oqacoWS86Mhiu46qXcNYDE9PkfokR8b3BZRxOe1h5hDH2yT75Zm-LGvZG-H6a4JqTTuEZhyQjhlfnZ1gM/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!

Ähnliche Tutorials:

• Alternative zum LinkWithin: Simples "Related Posts" ♥
• LinkWithin nur auf Postseiten ♥♥♥
• "Das könnte Sie auch interessieren" einrichten (Link Within) ♥