 |
| Bild gefunden auf: http://mobiles-internet.buemo.net |
Hallo an alle Hobby-Blogger! Bevor ihr beim anpassen eures Blogs, wie der Kerl auf dem Bild endet heute einmal keine Fotoserie, sondern ein paar Tipps, wie ihr Euren Blog bei Blogger aufpeppen könnt. Seit ein paar Wochen "betreibe" ich ja nun meinen Fotoblog und habe schon einiges ausprobiert, um ihn zu verbessern. Besonders für diejenigen unter Euch, die viele Fotos posten, könnte das interessant sein. Denn mich hat von Anfang an gestört, dass sich Bilder immer direkt im gleichen Browserfenser geöffnet haben. Von anderen Fotoblogs kenne ich es, dass sich eine sog. "Lightbox" öffnet. Diese liegt dann mit abgedunkeltem Hintergrund vor dem Blog und zeigt die Bilder sehr schön. Das wollte ich natürlich auch haben.
Lightbox hinzufügen
Ich habe also im Internet gegoogelt und habe mehrere Möglichkeiten gefunden. Am besten hat mir diese Variante gefallen, da ich hier die notwendigen Javascripte nicht selbst hosten muss, sondern einfach die URLs in meinen Code einfügen kann. Noch besser ist es, dass es ein Script ist, das meine Seite nach den Bildern scannt und diese automatisch zur Lightbox hinzufügt. Bei allen anderen Varianten, musste man die Bilder manuell im <img> Tag zur Lightbox hinzufügen. Diese Möglichkeit hier ist einfach super bequem.
- Gehe zu Deinem Blogger Dashboard, dann auf Design > HTML bearbeiten
- Suche nach </head> im HTML Code und füge davor die folgenden Zeilen ein:
<script src='http://dl.dropbox.com/u/1881429/Javascripts/prototype.js' type='text/javascript'/>
<script src='http://dl.dropbox.com/u/1881429/Javascripts/scriptaculous.js' type='text/javascript'/>
<script src='http://dl.dropbox.com/u/1881429/Javascripts/lightbox.js' type='text/javascript'/>
<link href='http://dl.dropbox.com/u/1881429/Javascripts/lightbox.css' media='screen' rel='stylesheet' type='text/css'/>
- Um ein Bild von der Lightbox auszuschließen, einfach im <img> Tag das Attribut class="nolightbox" setzen
Noch ein Tipp zur Größe der Bilder. Ihr solltet diese fürs Web optimieren, so dass sie nicht zu groß sind. Ich verwende maximal eine Auflösung von 960, damit die Bilder in der Lightbox möglichst komplett angezeigt werden. Scrollen bei Bildern macht einfach keinen Spaß. Hier zwei Beispielbilder unserer Katze Faye, als sie noch ganz klein war.
Ihr seht, es ist ganz einfach. Klickt in meinen Posts einfach auf ein Bild, dann seht ihr wie es aussieht. Ich finde es echt klasse. Wenn ihr auf ein Bild in der Lightbox links oder rechts klickt, wird das vorige oder nächste Bild geladen. Wenn ihr mehr Details zu der Technik wollt, lest ober im gelinkten Originalartikel nach.
Post-Zusammenfassung erstellen
Ein weiterer Punkt, der schnell nervt, sind lange Posts auf der Startseite. Ich finde es viel übersichtlicher, wenn auf der Blog Startseite eine Übersicht über die Posts ist, mit einem (mehr oder weniger) kurzem Teaser. Wer dann wirklich weiterlesen möchte, klick auf einen Link zum weiterlesen. Das ist prinzipiell einfach zu bewerkstelligen:
- Geht in Euren Texteditor des Posts (ich glaube ihr müsst den neuen Editor aktiviert haben)
- Dann in der Bearbeitungsleiste oben den Button für "Jump Break einfügen" einfügen klicken - markiert natürlich vorher die Stelle, wo er sein soll ;)
- Wer eine stark angepasste Vorlage verwendet, bei dem diese oben beschriebene Funktion nicht klappt, kann hier lesen, wie man erweiterbare Post-Zusammenfassungen manuell erstellen kann
Jetzt noch ein Tipp, wie ihr den Jump Break formatieren könnt. Mich hat gestört, dass er immer linksbündig ausgerichtet ist. Im Texteditor des Posts, kann man das leider nicht ändern. Dazu müsst ihr ein eigenes CSS hinzufügen:
- Geht dazu auf Design > Vorlagen Designer, dann auf Erweitert > CSS hinzufügen
- Fügt dort den folgenden Code ein:
- .jump-link {
text-align: right;}
.jump-link a {
font-size:14px;}
Mit dem ersten CSS könnt ihr die Ausrichtung anpassen (left, center oder right). Mit dem zweiten CSS die Textgröße in pixel angeben. Im Vorlagen-Designer könnt ihr direkt das Ergebnis sehen und so einfach anpassen, bis es Euch gefällt.
So... hoffe es hat Euch was gebracht. Viele Grüße und bis bald!
Keine Kommentare:
Kommentar veröffentlichen