Neueste Beiträge Gadget

Hier eine kurze Anleitung, wie man ein Gadget für Blogger machen kann, das eine Slideshow der neusten Beiträge zeigt. Mein Gadget basiert auf Code aus dieser Quelle.

Das Gadget basiert auf Javascript und benutzt die jQuery-Library und den darauf basierenden jQuery Slider2. Deshalb müssen diese Scripte erst einmal in das Blog eingebunden werden. Das ist recht einfach:

Den jQuery Slider2 runterladen.

Die beiden darin enthaltenen Dateien müssen nun irgendwo gehostet werden. Leider kann man nicht direkt auf Blogger hosten, also muss irgendein anderer Dienst dafür benutzt werden. Einfach bei einem Anbieter hochladen und die Links zu den beiden Dateien speichern.

Auf der Bloggerseite auf Design gehen und dort auf den Unterpunk “HTML bearbeiten”. Dort mittles strg-f nach folgendem suchen: </head>. Direkt darüber nun folgendes eingeben:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
<script src='Adresse zu: jquery.slider.min.js' type='text/javascript'/>
<link href='Adresse zu: jquery.slider.css' rel='stylesheet' type='text/css'/>

Wobei der gelb hervorgehobene Text durch den Link zu den jeweiligen Dateien ersetzt wird.

Nun zum Gadget selbst: Wieder auf Design und dort ein Gadget hinzufügen. Als Gadget-Typ dann “HTML/JavaScript” wählen. Dort dann das folgende einfügen:

<style type="text/css">
div.sliderecent
  {
  width:640px;
  height:360px;
  border:thin solid black; 
  text-align:center;
  }
div.imagerecent
  {
  }
div.transboxrecent
  {
  height:75px;
  position:absolute; 
  bottom:0px; 
  left:0px;
  width:100%;
  text-align:justify;
  background-color:#000000;
  border:1px solid black;
  /* for IE */
  filter:alpha(opacity=60);
  /* CSS3 standard */
  opacity:0.6;
  }
div.transboxrecent a
  {
  margin: 5px 5px;
  color:#ffffff;
  font-size: large;
  }
div.transboxrecent p
  {
  margin: 5px 5px;
  color:#ffffff;
  font-size: small;
  }
</style>


<script type='text/javascript'>
function showgalleryposts(json) {
    var numPosts = json.feed.openSearch$totalResults.$t;
    var indexPosts = new Array();
    document.write('<div id="sliderrecent">');
    for (var i = 0; i < numPosts; ++i) {
        indexPosts[i] = i;
    }
    if (random_posts == true){
    indexPosts.sort(function() {return 0.5 - Math.random()});
    }
    if (numposts_gal > numPosts) {
        numposts_gal = numPosts;
    }
    for (i = 0; i < numposts_gal; ++i) {
        var entry_gal = json.feed.entry[indexPosts[i]];
        var posttitle_gal =  entry_gal.title.$t;
        for (var k = 0; k <  entry_gal.link.length; k++) {
            if ( entry_gal.link[k].rel == 'alternate') {
                posturl_gal =  entry_gal.link[k].href;
                break;
            }
        }
        if ("content" in entry_gal) {
            var postcontent_gal = entry_gal.content.$t
        }
        s = postcontent_gal;
        a = s.indexOf("<img");
        b = s.indexOf("src=\"", a);
        c = s.indexOf("\"", b + 5);
        d = s.substr(b + 5, c - b - 5);
        if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {
            var thumburl_gal = d
        } else var thumburl_gal = no_thumbs_url;
        document.write('<div class="sliderecent">');
        document.write('<div class="imagerecent">');
        document.write('<a href="' + posturl_gal + '"><img src="' + thumburl_gal + '" width="100%" height="100%" /></a></div>');
        document.write('<div class="transboxrecent">');
        document.write('<a href="' + posturl_gal + '">' + posttitle_gal + '</a>');
        var re = /<\S[^>]*>/g;
        postcontent_gal = postcontent_gal.replace(re, "");
        if (showpostsummary_gal == true) {
            if (postcontent_gal.length < numchars_gal) {
                document.write('<p>');
                document.write(postcontent_gal);
                document.write('</p>')
            } else {
                postcontent_gal = postcontent_gal.substring(0, numchars_gal);
                var quoteEnd_gal = postcontent_gal.lastIndexOf(" ");
                postcontent_gal = postcontent_gal.substring(0, quoteEnd_gal);
                document.write('<p>');
                document.write(postcontent_gal + '...');
                document.write('</p>')
            }
        }
        document.write('</div></div>');
    }
    document.write('</div>');
    
}
</script>


<script style="text/javascript">
    var showpostthumbnails_gal  = true;
    var showpostsummary_gal      = true;
    var random_posts               = false;
    var numchars_gal            = 200;
    var numposts_gal            = 7;
    var no_thumbs_url            = "your_url_to_image";
</script>

<script src="http://YourBlogName.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>

<script type="text/javascript">
    $('#sliderrecent').slider({
        width: 645,
        height: 365,
        showControls: false,
        showProgress: false,
        wait: 4000
    });
</script>

Hier muss nun noch ein wenig eingestellt werden. Zwischen den <style>-Tags befinden sich die Angaben zum Layout. Wer etwas CSS/HTML beherrscht, kann hier das Aussehen ganz nach seinen Wünschen anpassen. “sliderecent” bestimmt das allgemeine Aussehen, “imagerecent” wie das Bild dargestellt wird und “transboxrecent” wie die Textbox und der Text dargestellt wird.
Wer nichts weiter am Aussehen einstellen will, sollte hier nur den rot hinterlegten Bereich ändern: Einfach die Breite und die Höhe  angeben, die das Gadget haben soll.

Der Rest der Einstellungen wird ganz am Ende des Scripts vorgenommen. Im gelb hinterlegten Bereich kann man Einstellungen machen, was alles angezeigt wird. Was man dort eingeben sollte, ist eine url zu einem Bild, welches gezeigt wird, wenn sich im Beitrag kein Bild befindet (no_thumbs_url).
Dann noch den grünen Bereich zu dem Namen des Blogs ändern.
Zu guter Letzt muss man im orangen Bereich nochmal die Größe des Gadgets eingeben. Am besten jeweils 5 Pixel mehr als oben, damit der Rand angezeigt wird.

Das wars!