Translate

Mittwoch, 18. Februar 2015

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

Shortly

Im zweiten Teil geht es um das Laden des Logos für die mobile Ansicht und  ein neues Kommentar Management System.

Logo für mobile Version

Im ersten Teil, habe ich erklärt wie man das eigene Logo an die gewünschte Position setzt. Jedoch ist das Logo für den mobilen Bereich unter Umständen zu groß und sollte deswegen für die mobilen Plattformen ausgetauscht werden. Im mobilen Bereich ist neben Einfachheit (Anzeige) auch die Dateigröße entscheidend. Kein User wird es verzeihen, wenn das Bild zu lange lädt oder zu viel Kosten durch das Laden entstehen. Viele haben auch eingestellt, dass Bilder nur auf Klick geladen werden, damit der Verbrauch sinkt. Somit sollte man sich auch beim Gestalten des Blogs oder der Webseite mit der mobilen Ansicht beschäftigen. Am besten die Größe des Logos proportional verkleinern und separat abspeichern.

Sicherung

Bevor man etwas im Blogger Code ändert, sollte man eine Sicherung erstellen. Dies wird im Dashboard unter "Vorlage" gemacht. Hier gibt es rechts oben einen Button "Sichern/Wiederherstellen". Mit diesem Button kann  man, sollte etwas ordentlich schief gegangen sein, die Sicherung wieder einspielen und alles auf den Zustand vor der Änderung zurücksetzen.

Sicherung des Blog-Layouts

Laden des Logos

Am Einfachsten man fragt ab, ob die mobile Version geladen ist. Dafür bietet Blogger eigene Elemente mit einem IF/ELSE Konzept an. Dies ist schneller als das Laden über Javascript oder JQuery. Im Dashboard geht man auf "Vorlage" und  "HTML bearbeiten". Dort klickt man irgendwo in den Text und drückt "STRG" + "F" auf der Tastatur damit sich das Suchfeld öffnet. Dort gibt man dann folgendes ein
class='descriptionwrapper'
Wer den Code aus dem ersten Teil übernommen hat, kann auch nach folgendem Suchen:
class='logo'
Hat man den Code gefunden, muss man unter dem .descriptionwrapper folgendes einfügen:
<div class='logo' id='logo'>
   <b:if cond='data:blog.isMobile'> 
     <img src='MOBILE_LOGO'/>
   <b:else/>
     <img src='LOGO'/>
   </b:if>

</div>
In diesem Code muss dann nur mehr "MOBILE_LOGO" mit dem Link eures mobilen Logos ersetzt werden, genauso wie "LOGO" mit dem Link des normal großen Logos.
In Blogger sieht es dann folgender Maßen aus

Blogger Code im Dashboard

Damit auch die Anzeige wieder passt, fehlt noch das entsprechende CSS. Im Dashboard bei "Vorlage" unter "Anpassen" muss man auf "Erweitert" klicken und bei der Liste bis zum Ende gehen und auf "CSS hinzufügen". Dort fügt man den CSS Code für das normale als auch das mobile Logo ein.  Das CSS für das normale Logo lautet wie folgt
.logo { 
   float: right;
   margin-top: -3.5rem;
   height: 157px;
   width: 150px;
}

.descriptionwrapper {
   float: left;  
   width: 40rem;
}
Das CSS für die mobile Version sieht so aus:
.mobile .logo{
  float: none;
  margin: 0px;
  height: inherit;
  width: inherit;
  text-align: center;
}

.mobile .descriptionwrapper {
   float: none;
   width: 90%;
}

Kommentare und Management

Blogger bietet zwei Kommentarsysteme an, jedoch finde ich, das weder das eine noch das andere gut zu nutzen ist.

Google+ Kommentare

Verwendet man die Google+ Kommentare, so kann nur jemand einen Kommentar hinterlassen, der ein g+ Konto hat. Somit könnten viele gute Kommentare oder Diskussionen gar nicht erst stattfinden, da die betreffende Person nicht bei g+ ist und sich auch nicht anmelden möchte.

Blogger Kommentare

Blogger hat auch noch ein Kommentarsystem, wofür man keinen g+ Account braucht. Man kann auch anonyme Kommentare zulassen, also braucht sich niemand bei einem anderen System anmelden. Das Problem ist, dass dieses Kommentarsystem nicht gerade chic aussieht. Außerdem fehlen auch ein paar Einstellungen, die man erwartet.
Die Kritikpunkte lassen sich wie folgt zusammenfassen:
  • Bild für anonyme Kommentare.
    Es lässt sich kein Standard-Bild für anonyme Kommentare einstellen. Das wirkt bei vielen anonymen Kommentaren eher langweilig und trostlos.
  • E-Mail Adresse hinterlegen.
    Für anonyme Kommentare lässt sich außerdem - wenn gewünscht - keine E-Mail Adresse hinterlegen, um über neue Kommentare oder Antworten informiert zu werden.
  • Vorgegebene Login-Accounts.
    Man kann sich nur mit bestimmte Accounts anmelden, welche ich nicht mehr up-to-date finde. Während zwar viele Blogger Wordpress verwenden, sehe ich bei TypePad, AIM und OpenID nicht gerade die vielen Nutzer. Google+ ist zwar aktuell, aber nicht jeder nutzt es.
  • Optik.
    Optisch ist das System nicht sehr ansprechend und entspricht nicht mehr der heutigen Zeit.

Anonymer Kommentar - Standardsystem

Alternative Kommentarsysteme

Es gibt aber auch ein paar alternative Kommentarsysteme auf dem Markt:
  • Facebook Kommentare.
    Persönlich nutze ich kaum Facebook, da ich lieber auf g+ unterwegs bin. Auch nach ein bisschen Recherche habe ich zu den Facebook Kommentaren nicht viel gefunden und es scheint so, dass auch nur registrierte Facebook User einen Kommentar abgeben können, weshalb es das gleiche Problem wie mit den g+ Kommentaren gibt. Und nach den AGB Änderungen kann man nicht sicher sein, ob Leser einen dieses System nicht übel nehmen.
  • LiveFyre.
    LiveFyre bietet eine gute Integration von Facebook und Twitter und bietet ein Live-Feature bei den Kommentaren die einem Chat sehr ähnelt. Mancher berichtete allerdings von Spam-Kommentaren, weshalb sie dieses Live-Feature wieder abgestellt haben, da ansonsten die Moderation nicht mehr zu bewältigen war.
  • Disqus.
    Ist ein Kommentarsystem, dass alle oben genannten Kritikpunkte beseitigt. Weiters hat sich bei der Recherche zu LiveFyre und Disqus gezeigt, dass viele Blogs Disqus verwenden. Auch Blogs die ich zuvor schon besucht habe verwenden es, was auf eine große Community schließen lässt.

Disqus

Ich habe mich für Disqus entschieden und finde es ist wirklich ein gutes Kommentarsystem und die Installation ging wirklich fix. In einer Minute hatte ich Disqus auf meinem Blog. Alles was man tun muss, ist auf diese Seite gehen und die 3 Schritte nacheinander ausführen. Fertig. Wichtig hierbei ist, dass man das Blogger Kommentarsystem aktiviert haben muss, damit Disqus funktioniert. Kommentare aus dem Blogger System können einfach importiert werden, Google+ Kommentare leider nicht.
Anfangs dachte ich, dass die Installation nicht richtig funktioniert hatte, da auf manchen meiner Seiten noch das alte Blogger Kommentarsystem angezeigt wurde. Eine kurze Suche hat allerdings ergeben, dass Disqus nur für Posts automatisch installiert wird. Will man Disqus auch auf den statischen Seiten von Blogger anzeigen, muss man den Code von Disqus ändern. Um das zu ändern bietet Disqus eine sehr gute Anleitung auf ihrer Hilfeseite an: Disqus für statische Blogger Seiten. Da diese Anleitung wirklich ausführlich und einfach ist, werde ich dies hier nicht mehr weiter erläutern.
Das einzige das mir derzeit negativ aufgefallen ist, ist dass die Suche auf der Hilfeseite von Disqus selber eher schlecht ist. Sucht man nach einem gewissen Thema, so findet man sehr viele Einträge, aber nicht den, den man bräuchte. Deshalb ist es sinnvoller eine Google Suche zu starten, die dann meist den richtigen Treffer auf der Disqus Hilfeseite liefert.

Einstellungen
Disqus bietet sehr viele Einstellungsmöglichkeiten und eliminiert alle oben genannten Kritikpunkte am Blogger System. Neben der Einstellung eines Bildes für anonyme Kommentare, verfügt Disqus über ein Bewertungssystem der Kommentare. Wird ein Kommentar zu oft negativ bewertet, so wird er automatisch an einen Moderator zur Überprüfung weitergeleitet. Wie oft ein Kommentar negativ bewertet werden soll, bevor er überprüft werden muss, kann eingestellt werden. 
Weiters kann man einstellen, dass die Kommentare zurück ins Blogger System gesynct werden, das wenn man ein anderes System einstellen möchte, sicher von Vorteil ist.
Hat man also nun alle Einstellungen fertig, sieht der Kommentarbereich im Blog nun so aus:

Kommentarbereich mit Disqus

Ich finde den Kommentarbereich nun viel übersichtlicher und optisch auch ansprechender. Die Vorteile von Disqus haben mich überzeugt und es macht Spaß damit zu arbeiten. Weiters konnte ich schon auf verschiedenen Blogs mit meinem Disqus Account einen Kommentar absetzen, was auch ein Vorteil ist.

Anything Else...?

Neben Standardelementen von Blogger gibt es auch Drittanbieter Elemente mit denen man den Blog verschönern kann. Da man meist zwischen mehreren auswählen kann, ist es wichtig abzuwägen, welcher Drittanbieter die eigenen Anforderungen abdeckt.
In Teil 3 geht es um das Anzeigen von Verwandten Themen (Related Posts) unter einem Beitrag, um dem Leser mehr Möglichkeiten zum Weiterlesen anzubieten.

Links

LiveFyre: http://web.livefyre.com/
Disqus: https://disqus.com/