Tutorial: Gadget - Zufällige Posts

Samstag, 2. November 2013

Howdie!
In diesem Tutorial geht es um ein Gadget das Posts zufällig anzeigt.

Ihr geht auf euren Blog -> Layout -> Gadget hinzufügen -> HTML/JavaScript
Dort kopiert ihr dann folgenes hinein:

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

Wenn ihr das nur so einfügt sieht es so aus:

Zur Erklärung:
Wenn ihr den Rahmen weghaben wollt dann müsst ihr das blaue weglöschen.
Wenn ihr einfach eine andere Ramenfarbe haben wollt müsst ihr das "eee" und das "FFF" in eure Wunschfarbe umändern, die ihr hier ermittel könnt. (Der Farbcode der eingesetzt werden muss wird dann über dem Farbfeld angezeigt)
Wenn ihr dort das Wort "Comments" durch "Kommentare" (oder was auch immer ihr wollt) eintauschen wollt, müsst ihr das rot makierte einfach ändern.
Wenn ihr die Bilder abgerundet haben wollt müsst ihr zwischen dem grünen und dem gelben das hier einfügen:
border-radius:20px;
Die Zahl 20 könnt ihr nach belieben umändern :)

Wenn hr die Schriftgröße ändern wöllt müsst ihr die Orangene Zahl anpassen.

Wenn ihr die Bilder größer oder kleiner haben wollt müsst ihr die lila Zahlen umändern.

Wenn ihr mehr als 5 Posts angezeigt haben wollt, müsst ihr die grellgrüne Zahl einfach ändern.

Zum No-Image-Bild:
Wenn ihr bei manchen Posts kein Bild habt wird beim Gadget das Bildchen angezeigt:
Wenn ihr das hässlich findet (so wie ich ^^) dann könnt ihr es umändern.
Unten findet ihr ein Bild von mir für euch das ihr benutzen könnt :)

Ihr könnt euch aber auch einfach das Bild (siehe hier) abspeichern und selbst gestalten.
Danach einfach hier hochladen und den Direktlink des Bildes benutzen. Dazu einfach das grellpinke löschen und euren Direktlink vom Bild einfügen.

http://abload.de/img/keinbild1nipip.jpg

 Wenn euch das Bild gefällt und ihr es benutzen wollt müsst ihr den Link einfach kopieren und den grellpinken Link mit diesem Link ersetzen :)


Thats all
Ich hoffe ich konnte helfen! :)

Kommentare:

  1. Vielen Dank für das tolle Tutorial!
    Sehr verständlich und es klappt bei mir :)

    Liebe Grüße
    Anett

    AntwortenLöschen
  2. könntest du mal zeigen wie manm mitten im text dieses "hier klicken um weiter zulesen"macht

    AntwortenLöschen
    Antworten
    1. Klar dazu schreibe ich auch noch ein Tutorial :)

      Löschen
  3. Ach du machst so schöne Sachen! Und vorallem gute! Was willst du denn mal machen?? Und bringst du dir das alles selber bei? :)

    Liebste Grüße <3

    AntwortenLöschen
    Antworten
    1. Später Mediengestalter werden, haha :D
      Nein, vieles lerne ich auf anderen Blogs. Das Grundtutorial habe ich von Copypastelove.de aber da gab es echt wenig dazu und ich habe dann anderes aus anderen Tutorials was ich mit der Zeit gelernt habe einfach dazugeschrieben :) Mit der Zeit lernt man die ganzen Dinge einfach und braucht keine Tutorials mehr ^-^

      Löschen
  4. Sag mal, wenn Du so tolle Tutorials schreibst, bekommst Du das vielleicht hin, mir verständlich zu erklären, wie ich oben die Seiten als DropDown hinbekomme?????
    Ich hatte schon mal eins gehabt, aber irgendwie hab ich das nicht hinbekommen, keine Ahnung, was ich falsch gemacht habe!?
    Liebe Grüße
    Anett

    AntwortenLöschen
    Antworten
    1. Ich kanns mal versuchen. Ich hatte selbst nie eins desswegen muss ich mir das selbst erstmal erklären :)

      Löschen
    2. brauchst du gar nicht! hier: http://www.5202.de/2012/10/blogger-drop-down-neue-version.html gibt es eine super einfache version, funktioniert super! und man kann alles individuell bearbeiten!

      Löschen
  5. ich verstehe einfach nicht wieso bei vielen Posts, no image gezeigt wird, ich habe doch in jedem Post Bilder vorhanden.

    AntwortenLöschen
    Antworten
    1. Das ist komisch, leider habe ich keine Ahnung wie man das ändern kann. Manchmal werden ja auch bei einigen Posts beim Dashboard das letzte Bild oder so angezeigt, woran es liegt kann ich dir leider nicht sagen :/

      Löschen