Translate

Freitag, 13. Februar 2015

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

Shortly

In Teil 1 beschreibe ich, wie ich meinen Blog mit standardisierten Blogger-Elementen und einfachem CSS Code aufpoliert habe.

Allgemeines

Zum Einen beschreibe ich hier CSS Methoden, die für alle Blog-Plattformen verwendet werden können. Wer mit CSS noch nicht so vertraut ist, der kann sich meinen Post zu den Grundlagen durchlesen. Zum Anderen beschreibe ich hier, welche Standard-Element Blogger bietet, da ich selbst diese Plattform verwende. Mit einer Internetsuche wird man aber sicher auch für andere Plattformen fündig.

Sicherung/Wiederherstellung

Bevor man etwas an seinem Blog ändert, sollte man eine Sicherung machen. Das macht man im Dashboard und wählt "Vorlage" aus. Rechts oben findet man dann einen Button "Backup/Wiederherstellung". Mit diesem Button kann man eine Sicherung der Vorlage herunterladen und sollte etwas schief gehen, diese wieder hochladen. Durch das Hochladen, werden alle Änderungen, die nach der Sicherung gemacht wurden wieder gelöscht.

Sichern und Wiederherstellen
Sicherung/Wiederherstellung

Logo

Blogger bietet zwar die Möglichkeit ein Bild im  "Header" (oberster Abschnitt einer Webseite) anzuzeigen, allerdings sind die Anzeigemöglichkeiten sehr begrenzt. So kann man nur das Logo anzeigen lassen, oder vor oder hinter dem Text was nicht gerade meinen Vorstellungen entsprach. Denn ich wollte neben dem Beschreibungstext das Logo angezeigt bekommen. Da das standardmäßig nicht funktioniert macht man es also kurzer Hand selbst.
Damit man weiß, welches Element dafür zuständig ist, kann man das Firefox Plugin Firebug verwenden. Mit dem Symbol das wie ein Mauszeiger aussieht, kann man auf jedes beliebige Element einer Webseite klicken und Firebug spuckt die nötigen Informationen, wie ID, Klasse und CSS aus. Wer noch nicht so vertraut mit CSS ist, kann sich hier meinen Post über die Grundlagen durchlesen.
Um nun selbst ein Logo hinzuzufügen, geht man im Dashboard auf "Vorlage" und "HTML bearbeiten".

HTML Bearbeiten
HTML bearbeiten

Danach klickt man irgendwo in den Text und drückt auf der Tastatur "STRG" und "F" gleichzeitig um das Suchfenster zu öffnen. Danach sucht man nach folgendem Begriff
class='descriptionwrapper'
Wird der Text gefunden so erscheint er gelb. Unter dem <div> Element des "descriptionwrapper" fügt man nun folgendes Element hinzu:
<div class='logo' id='logo'>
   <img src='LINK_TO_YOUR_LOGO'/>
</div>
Man ersetzt lediglich "LINK_TO_YOUR_LOGO" mit einem Link der zu eurem Logo führt. Ich verwende dafür Copy, aber es ist auch ein anderer Onlinespeicherplatz wie Dropbox möglich. Wichtig hierbei ist, dass man die öffentliche URL kopiert.

HTML Element hinzufügen
HTML Element hinzufügen

Damit aber auch alles schön formatiert wird, muss man nun auch noch ein paar Zeilen CSS hinzufügen. Dazu im Dashboard auf "Vorlage" und "Anpassen" klicken.

Vorlage anpassen
Vorlage anpassen

Danach wählt man "Erweiter" aus und scrollt in der rechten Liste die sich öffnet bis ganz nach unten und wählt "CSS hinzufügen" aus.

CSS hinzufügen
CSS hinzufügen

Den CSS Code den man hier hinzufügt, überschreibt bereits vorhandenen Standard-CSS Code, sollte die Elementeigenschaft bereits existieren.
Da man nun das Logo neben dem Text haben möchte, muss man die CSS Eigenschaft "float" verwenden, mit der man bestimmen kann, ob das jeweilige Element links oder rechts angezeigt werden soll. Dies muss man für den "descriptionwrapper" als auch für die "logo" Klasse einstellen. Wichtig ist auch, dass man dies für die mobile Ansicht wieder zurücksetzt, da diese Positionierung auf kleinen Bildschirmen zu einem sehr zusammengestauchten Text führt. Für die mobile Ansicht haben alle die Klasse ".mobile" vorangesetzt. Weiter unten findet ihr mehr Infos zur mobilen Ansicht.
.logo {
   float: right;
   margin-top: -3.5rem;
   height: 157px;
   width: 150px;
}

.descriptionwrapper {
   float: left;
   width: 40rem;
}

.mobile .logo{
  position: static;
  float: none;
  margin: 0px;
  height: inherit;
  width: inherit;
  text-align: center;
}

.mobile .descriptionwrapper {
   position: static;
   float: none;
   width: 90%;
}
Die Größe des Logos sollte sich an die Texthöhe in der Beschreibung richten. Das fertige Ergebnis sieht dann so aus:

Logo Position
Logo selbst positioniert

Transparentes Favicon

Das "Favicon" ist die Kurzbezeichnung für "Favorite Icon". Dieses Icon wird im Browser Tab angezeigt und dient auch als Identifizierung. Das Icon ist nicht besonders groß, weshalb man sich hier auf das Wesentliche konzentrieren soll und das eigene Logo wenn nötig noch abstrahieren sollte. Ich habe also mein Standard-Logo stark vereinfacht und den Text durch ein einfaches Fragezeichen ersetzt.

Logo und Favicon
Blog Logo zu Favicon


Hat man also sein eigenes Logo erstellt und will es als "Favicon" einstellen, ist dies ganz einfach möglich. Dazu loggt man sich im Dashboard von Blogger ein, geht auf "Layout" und klickt auf "Favicon" bearbeiten.

Favicon ändern
Favicon ändern

Das Problem ist allerdings, dass mit den Standard Bildformaten das Favicon nicht transparent ist. Selbst mit Formaten die Transparenz unterstützen (PNG und GIF) und mit transparentem Hintergrund, wird der Hintergrund weiß angezeigt. Nur mit dem Icon-Format wird der Hintergrund auch transparent angezeigt, jedoch können nur wenige Programme dieses Format speichern. Abhilfe schafft der online Favicon-Konverter. Dieser konvertiert das PNG oder GIF Bild in das Dateiformat ICO (Icon). Dieses wird dann auch im Browser-Tab transparent angezeigt. Der Favicon-Konverter verwendet Flash und kann das Favicon in verschiedenen Größen speichern. Weiters kann man auch mehrere Größen auf einmal auswählen, da diese Größen dann in einer Icon-Datei gespeichert werden. Für Blogger ist darauf zu achten, dass die Dateigröße des Icons 100 KB nicht überschreitet.
Hat man das Layout gespeichert, so sollte man die Cookies vom Blog und den Cache im Browser löschen, da ansonsten das alte Favicon geladen wird.

Neue Gadgets

Gadgets sind vorgefertigte Elemente, die man in seinen Blog aufnehmen und mit Bloginhalten individualisieren kann. Das ist sehr hilfreich, da die gängigsten Wünsche mit diesen Gadgets abgedeckt werden können, ohne dass man selbst viel programmieren muss.
Zum Hinzufügen loggt man sich zu aller Erst im Dashboard von Blogger ein. Danach geht man auf "Layout". Dort findet man folgende Übersicht:

Gadgets hinzufügen

Je nach Blogger Layout, kann man die Gadgets an verschiedenen Stellen hinzufügen. Mittels Drag-and-Drop (Ziehen mit der Maus) kann man diese nach eigenen Wünschen anordnen. Hat man das geänderte Layout gespeichert kann dies sofort live im Blog angesehen werden. Man kann sich eine Vorschau anzeigen lassen, jedoch funktioniert die Vorschau nicht mit dynamischen Inhalten, weshalb nicht immer die Änderungen in der Vorschau sichtbar sind.

Gadget CSS

Hat man ein neues Gadget hinzugefügt, so kann es sein, dass die voreingestellte Ansicht nicht mit dem ausgewählten Design zusammenpasst. Das Design wird durch CSS beschrieben und kann angepasst werden.  Vorher aber wieder eine Sicherung anlegen, wie oben beschrieben.
Will man also nun das CSS anpassen, klickt man unter "Vorlage" auf "Anpassen. Danach wählt man "Erweitert" aus und scrollt in der Liste bis nach unten, wo "CSS hinzufügen" steht.
Eigenes CSS zu Blogger hinzufügen

Das Positionieren von Elementen ist manchmal nicht ganz so einfach. Deshalb probiere ich die Möglichkeiten gerne im Firebug aus. Im Vorlagen-Designer von Blogger gibt es zwar auch eine Live-Ansicht, in der die Änderungen sofort gezeigt werden, jedoch nur für die Startseite. Will man also etwas in einem Blogeintrag ändern, bringt die Live-Ansicht nichts.

Beispiele

Social Media Buttons

Natürlich möchte man auch seine anderen Social Media Auftritte auf Blogger darstellen. Dazu habe ich mir ein gratis Icon Paket gesucht. Fündig wurde ich hier. Mir hat der Stil der Buttons sehr gut gefallen, da sie auch gut zu meinem Blog-Design passten. Einzig manche PNG Dateien haben Transparenz-Fehler, weshalb ich diese überarbeitet habe. Weiters habe ich noch ein Neues für 500px hinzugefügt. Da diese unter Creative Commons Lizenz laufen, sowohl für kommerzielle als auch private Nutzung, stelle ich die überarbeiteten Buttons, mit gleicher Lizenz, zum Download zur Verfügung. Es kann natürlich jeder andere Buttons verwenden, aber wichtig ist darauf zu achten, dass sie für private als auch kommerzielle Nutzung lizenziert sind, da man ja nicht weiß, ob man mit seinem Blog nicht doch ein mal Geld verdienen will und somit auf der sicheren Seite ist.
Damit man die Social Media Buttons auch auf dem Blog hat, kann man diese ganz leicht mit einem Gadget hinzufügen. Hierfür wählt man ein "HTML/Javascript" Gadget aus. In diesem Gadget fügt man dann folgende Zeile so oft wie man es braucht hinzu:
<a href="LINK_ZU_SOCIAL_MEDIA_SEITE">
   <img alt="NAME" title="TITEL" src="LINK_ZUM_BILD"
       width="44px"; height="44px;"/>

</a>
Man kann dies so oft in das "Content"-Feld kopieren wie man möchte, man muss lediglich folgende Werte anpassen:
  • LINK_ZU_SOCIAL_MEDA_SEITE
    Ist der Link, der einen auf das Soziale Netzwerk leitet.
  • NAME
    Diese Attribut ist im HTML-Standard für das <img> Tag Pflicht und wird angezeigt, wenn das Bild nicht geladen werden konnte.
  • TITLE
    Mit dem title Attribut, kann man einen Text vorgeben, der angezeigt wird, wenn man mit der Maus auf dem Bild bleibt, ohne zu klicken.
  • LINK_ZUM_BILD
    definiert den eigentlichen Link zum Bild.
Am Ende dieser Link-Liste kann man dann noch einen Referenz-Link einfügen, damit man die Arbeit des Künstlers wertschätzt. Hierfür empfehle ich diesen Code:
<div class="reflink">
   <a href="http://vampirejaku.deviantart.com/"
      id="reflink" target="_blank">image source
   </a>
</div>
Mit dem dazugehörigen CSS Code:
.reflink {
   float: right;
   margin-right: 45px;
   margin-top: 5px;
   margin-bottom: -10px;
}
#reflink{
   font-size: 9px;
}
Hat man dies hinzugefügt und alles gespeichert sieht es dann so aus:



Übersetzer

Ich habe das Google Translate Gadget zu meinem Blog hinzugefügt, da die Übersetzung für Englisch mittlerweile sehr gut ist. Leider aber kann man "Powered by" und "Übersetzer" kaum lesen, da es in grauer Schrift auf grauem Hintergrund liegt. Also habe ich das Firefox Plugin FireBug verwendet, um mir die HTML Elemente mit der entsprechenden ID zu suchen und die Farbe, mit diesem CSS-Code, umgestellt:

#google_translate_element div {
    color: white;
}
#google_translate_element a {
    color: white;
    text-decoration: underline;
}
Ich habe hier die Eigenschaften für das Text- und das Link-Element geändert, da ich Links generell unterstreiche. Weiters habe ich dann noch die Position geändert und einen Rahmen hinzugefügt.

#google_translate_element {
    text-align: center;
    padding-top: 3px;
    padding-bottom: 3px;
    margin-right: 150px;
    border: 1px solid #ce5f70;
    width:701px;
}

.Translate {
    margin-top:-1px;
}
Hier ist ein Vorher-Nacher-Vergleich:

Google Translate neues Layout

Beliebte Blog-Einträge

Blogger bietet die Möglichkeit, beliebte Beiträge anzuzeigen (Beiträge nach Aufrufe). Ich lasse diese am Ende der Startseite anzeigen. Wie zuvor klickt man auf "Gadget hinzufügen" im "Layout" des Dashboards. Dort wählt man dann "Beliebte Posts" aus. Dieses Gadget bietet viele verschiedene Einstellungen, wie zum Beispiel welcher Zeitraum herangezogen werden soll, für die Beliebtesten Posts.

Einstellungen für beliebte Posts

Ich habe dieses Gadget gleich zweimal zu meinem Blog hinzugefügt. Ein mal für die beliebtesten Posts aller Zeiten und einmal für die der letzen Woche. Leider passte auch hier die Standardformatierung nicht, da die Überschrift weiß auf transparent weißem Hintergrund steht. Dies lässt sich aber ganz leicht mit folgender Einstellung beheben:
.foot .widget h2{
   color: #7d181e;
}
Hier ist es allerdings wichtig die Klassenhierarchie abzubilden, da die Überschrift <h2> für die Gadgets im "Footer" (unterster Bereich einer Seite) geändert werden. Würde man nur <h2> ändern, würde es keinen Unterschied machen, da die Eigenschaften standardmäßig für die Hierarchie anders sind.

Zitate

Ist man in der Ansicht, in der man einen neuen Post erstellt, so gibt es dort die zwei Anführungszeichen, die einen Text als Zitat markieren.

als Zitat markieren

Die Anzeige für dieses Zitat, besteht darin, dass der markierte Text hereingerückt wird. Dies kann man aber auch selbst ein bisschen aufpolieren, wie man es vielleicht auch auf anderen Blogs gesehen hat. So lasse ich nun meine Zitate anzeigen:

Zitate in meinem Blog

Wie man sieht stehen links und recht jeweils Anführungszeichen und der Text ist blau, damit man es gut vom restlichen Text unterscheiden kann. Dies erreicht man ganz einfach mit dem Zusatz ":before" bzw. ":after" im CSS. Wichtig ist auch dass man die Eigenschaft "position" bei diesen Elementen auf "absolut" setzt, während man beim restlichen Zitat "relativ" einstellt.
blockquote:before {
    color: lightgrey;
    content: '"';
    display: block;
    font-family: Times New Roman;
    font-size: 5rem;
    font-weight: 400;
    left: -10px;
    position: absolute;
    top: -35px;
}

blockquote:after{
    color: lightgrey;
    content: '"';
    display: block;
    font-family: Times New Roman;
    font-size: 5rem;
    font-weight: 400;
    right: -15px;
    position: absolute;
    top: -35px;
}

blockquote {
    color: blue;
    font-size: 0.95rem;
    line-height: 1.65;
    margin: 20px;
    position: relative;
    text-align: left;
    padding-left: 50px;
    padding-right: 50px;
}

Mobile Ansicht

Blogger bietet auch eine mobile Ansicht, was mittlerweile vorausgesetzt wird. Damit man auch die mobile Seite mit Firebug am PC begutachten kann, muss man hinter der Adresse des Blogs ein ?m=1 hängen und man kommt auf die mobile Seite. Bei mir wäre es also somit
http://any-thing-else.blogspot.co.at?m=1

Generell wird für die mobile Ansicht die CSS Klasse .mobile verwendet und die CSS Eigenschaften gelten nur für die mobile Darstellung. Man sollte jedoch bei der mobilen Ansicht zu viel Schnick-Schnack vermeiden, denn hier gilt: Weniger ist mehr. Deshalb empfiehlt es sich in der mobile Ansicht lediglich die Abstände der einzelnen Elemente zu einander kontrollieren und gegebenfalls anpassen.

Diashow in Blogger

Gleich nach dem ich den Blog gestartet hatte und mein erster Beitrag online war, wollte ich eine Diashow mit meinen Fotos von Flickr in der rechten Infoleiste haben. Leider blieben alle meine Versuche mit dem Diashow-Element von Blogger ergebnislos und es war sehr frustierend. Auch eine Google-Suche brachte keine wirkliche Hilfe, da die Einträge dazu alle zu alt waren, da Flickr wohl seine API geändert hat. Doch nach langer Suche habe ich die Lösung in FlickrIt gefunden. Dort kann man einen Javascript-Code generieren lassen, den man in ein HTML/Javascript-Gadget von Blogger einfügt und fertig. Ich habe dazu einen eigenen Blogeintrag verfasst, den ihr hier findet.

Anything Else...?

Dies war ein mal ein kleiner Überblick, was man mit den von Blogger vorgegebenen Elementen und ein bisschen CSS Know-How alles machen kann. Natürlich gibt es noch viel mehr Elemente, welche jeder für sich entdecken und verwenden kann. Ich hoffe ich habe hier ein bisschen Praxisrelevanz zu meinem "Grundlagen HTML, CSS und Javascript" Post geben können. Im nächsten Teil geht es dann schon etwas ans Eingemachte mit Codebearbeitung und neuem Kommentar-Management, diesen findet ihr hier: Teil 2

Link-Liste

Mein Blog-Eintrag über Grundlagen HTML, CSS und Javascript:
http://any-thing-else.blogspot.co.at/2015/02/grundlagen-html-css-und-javascript.html

Blogeintrag über Diashow in Blogger:
http://any-thing-else.blogspot.co.at/2015/01/diashow-in-blogger.html

Favicon-Konverter:
http://converticon.com/

Social Media Button-Set:
http://pancake-ninja.blogspot.co.at/2013/02/bright-paint-social-icons.html

Firebug Plugin für Firefos
http://getfirebug.com/