Anything Else...?: Blog anpassen - ein paar Tipps für Blogger. Teil 3

Shortly

In diesem Beitrag erkläre ich wie man verwandte Themen (Related Posts) unter einen Blog-Eintrag bekommt - sowohl für die normale als auch die mobile Version des Blogs inklusive eines kurzen JQuery Crashkurses.

JQuery: Crash-Kurs

JQuery ist nichts anderes als abstrahiertes Javascript. Es bietet alle Funktionen die es in Javascript gibt und auch mehr, da es für JQuery Plugins gibt, die man hinzufügen kann, die dann zusätzliche Funktionalität bieten. Jeder JQuery Aufruf wird mit einem $ signalisiert.

Selektoren

$('tagName')
Selektiert HTML Elemente über den Tag-Namen, zum Beipsiel div => $('div')
$('#id')
Selektiert ein HTML Element über die ID, zum Beispiel $('#logo')
$('.className')
Selektiert HTML Elemente mit der angegebenen Klasse, zum Beipsiel $('.logo')

Hilfreiche Methoden

.attr('attributeName') oder .attr('attributeName', 'value')
Holen des Eigenschaftwerts mittels des Namens der Eigenschaft (attributeName). Verwendet man auch ein value, so setzt man den Wert für die Eigenschaft neu.
.inArray(value, array)
gleicht der Javascript Methode indexOf und gibt den Index zurück an dem der value im array gefunden wurde, wobei der Typ (Zahle, Text...) egal ist. Gibt -1 zurück, wenn der value nicht gefunden wurde.
.children('selector')
Selektiert alle Kind-Elemente eines Elementes, wahlweise auch mit Selektor, der entweder ein Tag Name, eine ID oder eine Klasse sein kann.

Selektiert man HTML Objekte, so sind diese in einem JQuery Objekt gekapselt. Damit man auf des eigentliche HTML DOM Element Zugriff erhält, muss man entweder .get(0) verwenden oder die kürzere und schnellere Variante .[0] wie hier beschrieben.
Am besten ist aber, man macht sich mit einem Tutorial oder "Beginners Guide" vertraut wie diesem hier. Auf der offiziellen Homepage findet man auch eine API Dokumentation.

JQuery in Blogger

Damit man JQuery in Blogger verwenden kann, muss man dieses noch in dem <head> Tag von Blogger einfügen. Durch das Einfügen im <head> ist JQuery dann überall im Blogger-Code verwendbar. Dazu öffnet man das Blogger Dashboard, geht auf "Vorlage" und dort auf "HTML bearbeiten". Dort drückt man dann "STRG" + "F" um das Suchfenster zu öffnen und nach "<head>" zu suchen. Hat man das <head> Tag gefunden, dann fügt man nach diesem folgendes ein:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

JQuery in <head>

Welche Versionen von Google gehostet werden kann man auf der Developer-Seite nachsehen. Es empfiehlt sich also von Zeit zu Zeit, einen Blick auf diese Seite zu werfen, um immer die aktuellste Version zu verwenden. Früher war es möglich auch direkt auf die letzte Version bei JQuery zu verweisen, jedoch unterstützen sie diese Möglichkeit nicht mehr. Den Grund findet ihr hier: JQuery-Blog.

Verwandte Themen - Related Posts

Verwandte Themen bzw. Related Posts sind all jene Einträge in einem Blog die man kategorisch zusammenfassen kann. Man kann unter "Layout" im Blogger Dashboard zum Beispiel ein Gadget für eine Übersicht einblenden lassen, welche Themen es auf diesem Blog gibt und wie viele Beiträge zu einem Thema verfasst wurden.

Themen gruppiert bei Labels

Labels

Diese oben gezeigte Themen-Übersicht erzeugt man, in dem man Beiträgen so genannte Labels zuweist. Man kann pro Blog bis zu 2000 Labels erstellen und jedem Beitrag bis zu 20 zuweisen. Die Einteilung in Labels kann man nicht nur für eine Übersicht seitlich im Blog verwenden (siehe Bild oben), sondern auch, um unter einem Post, andere Beiträge zu diesem Thema anzuzeigen. Dafür gibt es zwar kein Gadget aber, genügend Code-Beisiele im Internet. Ich habe anfangs den Code von "Code It Pretty" verwendet. Allerdings wird hier zufällig ein Label ausgewählt und zu diesem dann andere Beiträge angezeigt. Ich wollte aber keine Zufalls-Anzeige, sondern zu einer gewissen Anzahl an Labels, andere Beiträge angezeigt bekommen. Somit habe ich den Code als Ausgangsbasis genommen und an meine Bedürfnisse angepasst. Herausgekommen ist folgender Code:

 <!-- check for mobile view -->  
 <b:if cond='data:blog.isMobile == &quot;false&quot;'>  
 <!-- check if post-->  
 <b:if cond='data:blog.pageType == &quot;item&quot;'>  
 <script type='text/javascript'>  
 // CDATA to prevent Blogger from changing special characters to unicode (better for reading and editing)  
 //<![CDATA[  
 $(document).ready(function() {  
   
   //CODE OPTIONS  
   
   //maximum number of labels used    
   var maxLabels = 3;  
   // maximum posts loaded per label  
   var maxSearched = 5;  
   // if labels should be randomly mixed - only used when number of labels on post is bigger than the maxLabels number  
   // if false the order of labels of post will be used (normal order is alphabetically)  
   var mixLabels = false;  
   // image size  
   var imageSize = 100;  
   // if image should be displayed in a circle  
   var roundImages = false;  
   //use related text as a header before the related post section  
   var relatedTitle = true;  
   //use the label as part of the related title text  
   var labelInTitle = true;  
   //text used as header  
   var relatedTitleText = "mehr zum Thema: ";  
   //set a default if no image is found in the feed entry  
   var defaultImage = "LINK_TO_IMAGE";  
   //always use the default image instead of feed image  
   var useDefaultImageOnly = true;  
   //use google analytics  
   var campaignTracking = false;  
   //utm_source  
   var campaignSource = "RelatedPost";  
   //utm_medium  
   var campaignMedium = "related-posts";  
   //utm_campaign  
   var campaignName = "Related%20Posts";  
   //insert related posts before this element  
   var insertBefore = $('.post-footer');  
   //how a related post should be opened: new => new tab, own => same tab  
   var target = 'same';  
   //enter your homepage url here  
   //use http:// at the beginning and do not use a backslash at the end  
   //example: http://any-thing-else.blogspot.com  
   var homepage = "YOUR_URL_HERE";  
   
 //END CODE OPTIONS - DO NOT EDIT BELOW THIS LINE  
   
 // array for used labels  
   var labels = [];  
     
   // retreive labels of current post  
   var postLabels = $(".post-labels a");  
   
   // loop to fetch labels into array  
   $(postLabels).each(function () {  
    labels.push($(this).text().trim());  
   });  
   
   // continue when there are labels  
   if (labels.length > 0) {  
    // randomly choose labels if mixLabels is true  
    if (mixLabels === true && maxLabels < labels.length) {  
    var tmpLabels = [];  
   
      // loop as long maxLabels is not reached  
      while (tmpLabels.length < maxLabels) {  
       var tmpLabel = labels[Math.floor(labels.length * Math.random())];  
       // only fetch labels which are not already in the array  
       if ($.inArray(tmpLabel,tmpLabels) < 0) {  
         tmpLabels.push(tmpLabel);  
       }  
      }  
      // assign randomly chosen labels as array  
      labels = tmpLabels;  
    }  
     
    // if there are more labels than should be used  
    if (labels.length > maxLabels){  
      var tmpLabels = [];  
      for (var i = 0; i < maxLabels; i++){  
       tmpLabels[i] = labels[i];  
      }       
      labels = tmpLabels;  
    }    
     
    // create target for links  
    var linkTarget;  
    if (target === 'same') {  
      linkTarget = 'target="_self"';  
    } else {  
      linkTarget = 'target="_blank"';  
    }  
   
    // insert own div element to which the related posts should belong  
    insertBefore.before('<div id="parentRelatedPosts" class="parent-related-posts"></div>');  
   
    // loop over labels and retrieve feeds by label  
    for (var l = 0; l < labels.length; l++) {  
      var url = homepage + "/feeds/posts/summary/-/" + labels[l];  
      // current title  
      var title = $(".entry-title").text().trim();  
      // callback function for each feed by label  
      $.ajax({url: encodeURI(url), data: {"max-results": maxSearched+1, alt: "json-in-script"}, dataType: "jsonp", success: function (e) {  
         // array for feed elements which do not match the tilte of the current post  
         var matches = [];  
           
         // loop over each feed entry  
         for (var i = 0; i < e.feed.entry.length; i++) {  
          // loop to find out the feed label  
          var feedLabel;  
          for (var cnt = 0; cnt < e.feed.link.length; cnt++) {  
            if (e.feed.link[cnt].rel === "alternate") {  
             var s = e.feed.link[cnt].href;  
             var tempString = s.substring(s.lastIndexOf("/") + 1);  
             var feedLabel = unescape(tempString);  
            }  
          }           
            
          // get link to the feed entry  
          var tmpLink;  
          for (var cnt = 0; cnt < e.feed.entry[i].link.length; cnt++) {  
            if (e.feed.entry[i].link[cnt].rel === "alternate") {  
   
             tmpLink = e.feed.entry[i].link[cnt];  
   
            }  
          }  
   
          // if the feed title is not the same as the post title  
          if (tmpLink.title !== title) {  
            var element;  
            var image;  
            if (useDefaultImageOnly === false) {  
             if (e.feed.entry[i].media$thumbnail !== undefined) {  
               image = e.feed.entry[i].media$thumbnail.url.split(/s72-c/).join("s" + imageSize + "-c");  
             } else {  
               image = defaultImage;  
             }  
            } else {  
             image = defaultImage;  
            }  
              
            // analytics activated  
            if (campaignTracking === false) {  
             var element = '<li><a href="' + tmpLink.href + '" ' + linkTarget + '><img src="' + image + '" alt="' + tmpLink.title.trim() + '" nopin="nopin">' + tmpLink.title + "</a></li>";  
            } else if (matches.length < maxSearched && campaignTracking === true) {  
             element = '<li><a href="' + tmpLink.href + "?utm_source=" + campaignSource + "&utm_medium=" + campaignMedium + "&utm_campaign=" + campaignName + ' ' + linkTarget + '><img src="' + image + '" alt="' + tmpLink.title.trim() + '" nopin="nopin">' + tmpLink.title + "</a></li>";  
            }  
            // fetch new created element to matches  
            if ($.inArray(element, matches) < 0){  
             matches.push(element);  
            }  
          }  
         }  
   
         // when there are elements for related posts  
         if (matches.length > 0) {  
          // use index of label for creating id's  
          var labelIndex = labels.indexOf(feedLabel.trim());  
            
          // create headers if set  
          if (relatedTitle === true && labelInTitle === true) {  
            $("#parentRelatedPosts").append('<div class="related-posts" id="related-posts_' + labelIndex + '"><h5>' + relatedTitleText + ' ' + labels[labelIndex] + '</h5><ul id="ul_' + labelIndex + '"></ul></div>');  
          } else if (relatedTitle === true && labelInTitle === false) {  
            $("#parentRelatedPosts").append('<div id="related-posts_' + labelIndex + '"><h5>' + relatedTitleText + '</h5><ul id="ul_' + labelIndex + '"></ul></div>');  
          } else {  
            $("#parentRelatedPosts").append('<div class="related-posts" id="related-posts_' + labelIndex + '"><ul id="ul_' + labelIndex + '"></ul></div>');  
          }  
            
          // add elements to the ul with according id  
          var id = "#ul_" + labelIndex;  
          for (var i = 0; i < matches.length; i++) {  
            $(id).append(matches[i]);  
          }  
         }  
   
         // use CSS for styling  
         $("#ul_" + labelIndex).css("clear", "both");  
         $("#ul_" + labelIndex + " li").css({"max-width": imageSize, float: "left"});  
         $("#ul_" + labelIndex + " li a:link").css({"max-width": imageSize, float: "left", "text-align": "center"});  
         $("#ul_" + labelIndex + " li img").css({"max-width": imageSize, height: imageSize, float: "left", "margin-bottom": "10px"});  
         $(".related-posts").css({"display": "inline-table", "width": "100%", "margin-bottom": "30px"});  
         if (relatedTitle === false && labelInTitle === false) {  
          $(".related-posts").css({"display": "inline-table", "width": "100%", "margin-bottom": "30px", "margin-top": "50px"});  
         }  
           
         // if round images should be used  
         if (roundImages === true) {  
          $("#ul_" + labelIndex + " li img").css("border-radius", "50%");  
         }  
       }});  
    }  
   }  
 });  
 //]]>  
 </script>  
 </b:if>  
 </b:if>

Diesen Code gibt auch zum downloaden: related_posts.js.

Code verwenden

Damit der Code funktioniert, geht ihr im Blogger Dashboard auf "Vorlage". Dort wählt ihr "HTML bearbeiten aus". Dort öffnet sich dann ein Fenster mit viel Code. Klickt irgendwo in den Code und drückt "STRG + F". Das Suchfenster befindet sich dann rechts oben. Dort könnt ihr dann nach "</body>" suchen. Den Code fügt ihr oberhalb des Body-Tags ein. Danach müsst ihr noch die unten stehenden Einstellungen konfigurieren.

HTML bearbeiten

Code-Einstellungen

Für den Code kann man diverse Einstellungen vornehmen. Diese sind unter "Code Options" zu finden. Da beim Programmieren eigentlich immer alles in Englisch programmiert wird, werde ich hier die einzelnen Optionen auf Deutsch erklären:

maxLabels
Maximale Anzahl der Labels, die angezeigt werden sollen.
maxSearched
Maximale Anzahl von Beiträge die pro Label angezeigt werden sollen.
mixLabels
Hat der Beitrag mehr Labels als die maximale anzuzeigende Anzahl, kann man aus diesen Labels zufällig welche auswählen lassen. Ist dies deaktiviert so wird die alphabetische Reihenfolge von Blogger verwendet. "true" => aktiviert, "false" deaktiviert.
imageSize
Größe des Vorschaubildes.
roundImages
Runde Vorschaubilder. "true" => aktiviert, "false" => deaktiviert.
relatedTitle
Eigenen Text als Überschrift verwenden. "true" => aktiviert, "false" => deaktiviert.
relatedTitleText
Text der als Überschrift dienen soll.
lableInTitle
Label-Name in Titel verwenden. Das Label wird neben der Überschrift angezeigt. "true" => aktiviert, "false" => deaktiviert.
defaultImage
Basis-Bild, falls kein Vorschaubild zur Verfügung steht. Link-Adresse erforderlich.
useDefaultImageOnly
Nur das Basis-Bild als Vorschaubild verwenden. "true" => aktiviert, "false" => deaktivert.
campaignTracking
Aktivieren des Trackings durch Google Analytics. "true" => aktiviert, "false" => deaktiviert.
campaignSource
utm_source von Google Analytics.
campaignMedium
utm_medium von Google Analytics.
campaignName
utm_campaign von Google Analytics.
insertBefore
Element vor dem die Related Posts angezeigt werden sollen. Hier ist die Klasse des Elements erforderlich oder die ID. Nur die Zeichen innerhalb der Anführungszeichen ändern. Klassen beginnen mit "." und ID's mit "#".
target
Ob der Link zum Thema im gleichen oder in einem neuen Tab geöffnet werden soll. "new" => neuer Tab, "same" => gleicher Tab.
homepage
Die Adresse eures Blogs, beginnend mit "http://" und am Ende keinen "/".
Beispiel: http://any-thing-else.blogspot.com

Die Optionen "relatedTitleText" und "labelInTitel" sind aus dem Code von "Code It Pretty" übernommen. Ich würde empfehlen dies zu verwenden, da es ansonsten keinen Sinn macht mehrere Labels anzuzeigen, wenn dann keine Unterteilung vorgenommen wird.

Für mobile Ansicht

Wie im letzten Post schon erwähnt, sollte man bei der mobilen Ansicht nicht zu viel Schnick-Schnack machen, weshalb es für die mobile Ansicht, keine Vorschaubilder gibt, sondern nur den Titel als Link-Beschreibung. Standardmäßig sind die Labels für die mobile Version deaktiviert, weshalb der Code nicht funktioniert, wenn man diese nicht einblendet. Deshalb muss man dies im Blogger Dashboard unter "Vorlage" in "HTML bearbeiten" und mit "STRG" + "F" nach folgendem Text suchen:

showMobileShare

Hat man diesen Text gefunden, so fügt man oberhalb (damit es ähnlich zur normalen Version ist) nun folgenden Code ein:

<b:if cond='data:post.labels'>
<div class='mobileLabels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
    <a expr:href='data:label.url' rel='tag'>
          <data:label.name/>
      </a>
    <b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</div>
</b:if>


Labels in mobiler Ansicht anzeigen

Über CSS habe ich noch ein wenig den Abstand angepasst, damit die nachfolgenden Zeilen nicht zu sehr an den Labels "kleben". Dafür klickt man im Blogger Dashboard unter "Vorlage" auf "Erweitert" und sucht in der rechten Liste nach "CSS hinzufügen". Dort kopiert man dann folgendes hinein:

.mobileLabels {
margin-bottom: 30px;
}

Bevor man weiter macht, sollte man kontrollieren, ob die Labels in der mobilen Ansicht auch wirklich angezeigt werden. Dafür einen Beitrag mit Labels im Blog öffnen und hinter der URL in der Adressleiste ?m=1 anfügen, um die mobile Version aufzurufen. Hat alles funktioniert sollte man nun folgendes sehen:


Labels in der mobilen Ansicht

Der Code für die mobile Ansicht unterscheidet sich nur minimal von jener für die normale Version:

 <!--check for mobile view -->  
 <b:if cond='data:blog.isMobile == &quot;true&quot;'>  
 <!-- check if post -->  
 <b:if cond='data:blog.pageType == &quot;item&quot;'>  
 <!-- RELATED POSTS MOBILE -->  
 <script type='text/javascript'>  
 // CDATA to prevent Blogger from changing special characters to unicode (better for reading and editing)  
 //<![CDATA[  
 $(document).ready(function() {  
   //CODE OPTIONS  
   
   // maximum number of labels used  
   var maxLabels = 3;  
   // maximum posts loaded per label  
   var maxSearched = 5;  
   // if labels should be randomly mixed - only used when number of labels on post is bigger than the maxLabels number  
   // if false the order of labels of post will be used (normal order is alphabetically)  
   var mixLabels = false;  
   // use related text as a header before the related post section  
   var relatedTitle = true;  
   // use the label as part of the related title text  
   var labelInTitle = true;  
   // text used as header  
   var relatedTitleText = "mehr zum Thema: ";  
   // use google analytics  
   var campaignTracking = false;  
   // utm_source  
   var campaignSource = "RelatedPost";  
   // utm_medium  
   var campaignMedium = "related-posts";  
   // utm_campaign  
   var campaignName = "Related%20Posts";  
   // insert related posts before this element  
   var insertBefore = $('.post-footer');  
   // how a related post should be opened: new => new tab, own => same tab  
   var target = "same";  
   //enter your homepage url here  
   //use http:// at the beginning and do not use a backslash at the end  
   //example: http://any-thing-else.blogspot.com  
   var homepage = "YOUR_URL_HERE";  
   
 //END CODE OPTIONS - DO NOT EDIT BELOW THIS LINE  
   
    // array for used labels  
   var labels = [];  
   // retreive labels of current post  
   var postLabels = $(".mobileLabels a");  
   
   // loop to fetch labels into array  
   $(postLabels).each(function () {  
    labels.push($(this).text().trim());  
   });    
   
   // continue when there are labels  
   if (labels.length > 0) {  
    // randomly choose labels if mixLabels is true  
    if (mixLabels === true && maxLabels < labels.length) {  
      var tmpLabels = [];  
   
      // loop as long maxLabels is not reached  
      while (tmpLabels.length < maxLabels) {  
       var tmpLabel = labels[Math.floor(labels.length * Math.random())];  
       // only fetch labels which are not already in the array  
       if ($.inArray(tmpLabel, tmpLabels) < 0) {  
         tmpLabels.push(tmpLabel);  
       }  
      }  
      // assign randomly chosen labels as array  
      labels = tmpLabels;  
    }  
     
     // if there are more labels than should be used  
     if (labels.length > maxLabels){  
       var tmpLabels = [];  
       for (var i = 0; i < maxLabels; i++){  
        tmpLabels[i] = labels[i];  
       }  
       labels = tmpLabels;  
     }  
      
    // create target for links  
    var linkTarget;  
    if (target === 'same') {  
      linkTarget = 'target="_self"';  
    } else {  
      linkTarget = 'target="_blank"';  
    }  
   
    // insert own div element to which the related posts should belong  
    insertBefore.before('<div id="parentRelatedPosts" class="parent-related-posts"></div>');  
   
    // loop over labels and retrieve feeds by label  
    for (var l = 0; l < labels.length; l++) {  
      var url = homepage + "/feeds/posts/summary/-/" + labels[l];  
      // current title  
      var title = $(".entry-title").text().trim();  
      // callback function for each feed by label  
      $.ajax({url: encodeURI(url), data: {"max-results": maxSearched+1, alt: "json-in-script"}, dataType: "jsonp", success: function (e) {  
       // array for feed elements which do not match the tilte of the current post  
       var matches = [];  
       // loop over each feed entry  
       for (var i = 0; i < e.feed.entry.length; i++) {          
   
         // loop to find out the feed label  
         var feedLabel;  
         for (var cnt = 0; cnt < e.feed.link.length; cnt++) {  
          if (e.feed.link[cnt].rel === "alternate") {  
            var s = e.feed.link[cnt].href;             
            var tempString = s.substring(s.lastIndexOf("/") + 1);  
            var feedLabel = unescape(tempString);  
          }  
         }  
   
         // get link to the feed entry  
         var tmpLink;  
         for (var cnt = 0; cnt < e.feed.entry[i].link.length; cnt++) {  
          if (e.feed.entry[i].link[cnt].rel === "alternate") {  
            tmpLink = e.feed.entry[i].link[cnt];  
          }  
         }  
   
         // if the feed title is not the same as the post title  
         if (tmpLink.title !== title) {  
          var element;  
   
         // analytics activated  
         if (campaignTracking === false) {  
          var element = '<li><a href="' + tmpLink.href + '" ' + linkTarget + '>' + tmpLink.title + "</a></li>";  
         } else if (matches.length < maxSearched && campaignTracking === true) {  
          element = '<li><a href="' + tmpLink.href + "?utm_source=" + campaignSource + "&utm_medium=" + campaignMedium + "&utm_campaign=" + campaignName + ' ' + linkTarget + '>' + tmpLink.title + "</a></li>";  
         }  
         // fetch new created element to matches  
         if ($.inArray(element, matches) < 0){  
          matches.push(element);  
         };  
         }  
       }  
   
       // when there are elements for related posts  
       if (matches.length > 0) {  
         // use index of label for creating id's  
         var labelIndex = labels.indexOf(feedLabel.trim());  
           
         // create headers if set  
         if (relatedTitle === true && labelInTitle === true) {  
          $("#parentRelatedPosts").append('<div class="mobile-related-posts" id="related-posts_' + labelIndex + '"><h5>' + relatedTitleText + ' ' + labels[labelIndex] + '</h5><ul id="ul_' + labelIndex + '"></ul></div>');  
         } else if (relatedTitle === true && labelInTitle === false) {  
          $("#parentRelatedPosts").append('<div id="related-posts_' + labelIndex + '"><h5>' + relatedTitleText + '</h5><ul id="ul_' + labelIndex + '"></ul></div>');  
         } else {  
          $("#parentRelatedPosts").append('<div class="mobile-related-posts" id="related-posts_' + labelIndex + '"><ul id="ul_' + labelIndex + '"></ul></div>');  
         }  
           
         var id = "#ul_" + labelIndex;       
         // add elements to the ul with according id  
         for (var i = 0; i < matches.length; i++) {  
          $(id).append(matches[i]);  
         }  
       }  
      }});  
    }  
   }  
 });  
   
 //]]>  
 </script>  
 </b:if>  
 </b:if>

Auch diesen Code gibt es zum downloaden: related_posts_mobile.js.

Code verwenden

Code Einstellungen für die mobile Version

Wie vorhin schon erwähnt, gibt es bei der mobilen Version keine Bilder, damit das Laden schneller geht. Die anderen Einstellungen sind aber die gleichen.

maxLabels
Maximale Anzahl der Labels, die angezeigt werden sollen.
maxSearched
Maximale Anzahl von Beiträge die pro Label angezeigt werden sollen.
mixLabels
Hat der Beitrag mehr Labels als die maximale anzuzeigende Anzahl, kann man aus diesen Labels zufällig welche auswählen lassen. Ist dies deaktiviert so wird die alphabetische Reihenfolge von Blogger verwendet. "true" => aktiviert, "false" deaktiviert.
relatedTitle
Eigenen Text als Überschrift verwenden. "true" => aktiviert, "false" => deaktiviert.
relatedTitleText
Text der als Überschrift dienen soll.
lableInTitle
Label-Name in Titel verwenden. Das Label wird neben der Überschrift angezeigt. "true" => aktiviert, "false" => deaktiviert.
campaignTracking
Aktivieren des Trackings durch Google Analytics. "true" => aktiviert, "false" => deaktiviert.
campaignSource
utm_source von Google Analytics.
campaignMedium
utm_medium von Google Analytics.
campaignName
utm_campaign von Google Analytics.
insertBefore
Element vor dem die Related Posts angezeigt werden sollen. Hier ist die Klasse des Elements erforderlich oder die ID. Nur die Zeichen innerhalb der Anführungszeichen ändern. Klassen beginnen mit "." und ID's mit "#".
target
Ob der Link zum Thema im gleichen oder in einem neuen Tab geöffnet werden soll. "new" => neuer Tab, "same" => gleicher Tab.
homepage
Die Adresse eures Blogs, beginnend mit "http://" und am Ende keinen "/".
Beispiel: http://any-thing-else.blogspot.com

Das Ergebnis dieser beiden Code-Varianten kann sich jeder unter diesem Beitrag ansehen.Die mobile Webseite kann man aufrufen, in dem man hinter der URL in der Adressleiste ein ?m=1 anhängt.

Für statische Seiten

Für statische Seiten gibt es keine eigenen Labels, weshalb dieser Code nicht funktioniert. Möchte man allerdings zu einem bestimmten Thema (Label) dennoch Beiträge anzeigen, so kann man dies auch machen. Ich habe dafür den Code von BlogSentral verwendet. Jedoch wird hier ein eigenes Gadget verwendet, wodurch das Gadget immer im Blog angezeigt würde, jedoch nicht in der mobilen Ansicht. Deshalb habe ich diesen Code leicht adaptiert und in der Seite selbst eingefügt.
Was ich geändert habe, ist, dass ich nur dann etwas anzeige, wenn auch wirklich etwas vorhanden ist. Der Grund dafür ist, dass ich wie ich dies erstellt habe, in manchen Labels noch keine Einträge hatte, jedoch geplante Beiträge. Somit habe ich den Code schon eingefügt, damit ich es nicht vergesse.
Um den Code zu verwenden, geht man im Blogger Dashboard unter "Seiten". Dort wählt man die entsprechende Seite aus. In der Entwurfsansicht der Seite muss man nun auf die HTML-Ansicht wechseln, in dem man Links oben "HTML" auswählt.


HTML Ansicht

In der HTML Ansicht geht man ganz nach unten und fügt nun folgenden Code ein:

 <!-- Recent Posts by Label Start -->  
 <!-- code by BloggerSentral.com -->  
 <script type="text/javascript">  
 function recentpostslist(json) {  
  if (json.feed.entry.length > 0){  
   document.write('<h4>TITLE-TEXT</h4>');  
   document.write('<div class="recentPosts">');  
   document.write('<ul id="postList">');  
   for (var i = 0; i < json.feed.entry.length; i++)  
   {  
     for (var j = 0; j < json.feed.entry[i].link.length; j++) {  
      if (json.feed.entry[i].link[j].rel == 'alternate') {  
       break;  
     }  
   }  
   var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs  
   var entryTitle = json.feed.entry[i].title.$t;  
   var item = "<li>" + "<a href="+ entryUrl + '" target="_self">' + entryTitle + "</a> </li>";  
   document.write(item);  
   }  
   document.write('</ul>');  
   document.write('</div>');  
  }  
  document.write('<span style="font-size: 80%; float:right;"> <a href="http://www.bloggersentral.com/2010/04/list-recent-posts-by-label.html" target="_blank">Source code</a></span>');  
 }  
 </script>  
 <script src="BLOG-ADDRESS/feeds/posts/summary/-/LABEL?max-results=RESULTS&amp;alt=json-in-script&amp;callback=recentpostslist"></script>  
 <!-- Recent Posts by Label End -->

Bei diesem Code muss jeder noch ein paar Einstellungen vornehmen, damit der Code für den eigenen Blog funktioniert. Dazu kopiert man den Code in ein Text-Bearbeitungsprogramm der Wahl und sucht folgende Texte zum Ersetzen:

TITLE-TEXT
Text der als Überschrift dienen soll
BLOG-ADDRESS
die eigene Blog Adresse mit http! Für meinen Blog wäre dies
http://any-thing-else.blogspot.com
LABEL
welches Label angezeigt werden soll. Ist im Label ein Leerzeichen vorhanden, dieses Leerzeichen mit %20 ersetzen.
RESULTS
Wie viele Einträge angezeigt werden sollen.

Wichtig: Bearbeitet man nachträglich die Seite, so sollte man bevor man etwas ändert diesen Code kopieren und in einer temporären Datei zwischenspeichern und nach dem Bearbeiten wieder einfügen. Ändert man in der Entwurfsansicht den Text, kann es sein, dass versehentlich Zeilenumbrüche oder andere Zeichen in den Code eingefügt werden, wodurch er nicht mehr funktioniert.

Wenn man will kann man diese Liste noch mit CSS ein bisschen hübsch machen, indem man das entsprechende Element mit der ID "relatedPosts" verwendet. Ich habe den "list-style" der Liste ein bisschen angepasst, was dann so aussieht:

Liste der Blogeinträge mit eigenem Style

Für die mobile Ansicht habe ich das wieder zurückgesetzt, damit es schneller lädt.

Anyting Else...?

Dieser Beitrag war mit dem ganzen Code sehr technisch, aber ich denke doch hilfreich. Bei Fragen helfe ich gerne in den Kommentaren weiter.
Im nächsten Teil erkläre ich, wie man automatisch Beiträge in sozialen Netzwerken teilen kann und worauf man achten sollte.

Links

Ausgangs-Code für Related Posts von Code It Pretty
http://www.codeitpretty.com/2014/10/new-related-posts-gallery-for-blogger.html

Ausgangs-Code für Neueste Beiträge pro Label von BlogSentral
http://www.bloggersentral.com/2010/04/list-recent-posts-by-label.html

Mein Code für Related Posts
related_posts.js

Mein Code für Related Posts in der mobilen Ansicht
related_posts_mobile.js

Anything Else...?

Seiten

Translate

Samstag, 21. Februar 2015

Blog anpassen - ein paar Tipps für Blogger. Teil 3

Shortly

JQuery: Crash-Kurs

Selektoren

Hilfreiche Methoden

JQuery in Blogger

Verwandte Themen - Related Posts

Labels

Code verwenden

Code-Einstellungen

Für mobile Ansicht

Code verwenden

Code Einstellungen für die mobile Version

Für statische Seiten

Anyting Else...?

Links