Hier ein paar Hinweise, wie dieser Blog bzw. gewisse Elemente gestaltet wurden.
Inhalt:
1) Hintergrund fixieren
2) Kontaktformular im Reiter "Contacts"
3) "Connect with me..." Polaroid Buttons
4) Funktion "Weiter lesen..." einfügen und bearbeiten ( JumpLink )
1) Hintergrund fixieren
Um den Hintergrund eures Blogs zu fixieren, so dass sich nur der Text beim scrollen bewegt, muss eine Kleinigkeit im HTML-Code eures Blogs geändert werden.
Neues blogger-design:
Klickt bitte im Bereich "Vorlagen" (linke Seite des Blogger-Interface) auf "HTML bearbeiten". Bestätigen mit "Fortfahren".
Altes blogger-design
klickt auf "Design" und dann im oberen Bereich auf "HTML bearbeiten".
Nun müsstet ihr den HTML und CSS-Code Eures Blogs sehen. Sucht nach einem Bereich, der etwa den folgenden Code hat:
<Variable name="body.background" description="Body Background" type="background" color="$(body.background.color)" default="$(color) none repeat scroll top left" value="#ad966c url(t/image?id=1ZygE97_U_mmMOtoTGkMZll-JNbyfsqhAUw6zsMRGgk4ZzWbQsBOLV5GkQDV8YuZ0THk0) repeat scroll top center /* Credit: andynwt (http://www.istockphoto.com/googleimages.php?id=8047432&platform=blogger) */"/><Variable name="body.background.override" description="Body Background Override"type="string" default="" value=""/>
In diesem Bereich ersetzt einfach die Befehle "scroll" (oben gelb markiert) durch den Befehl "fixed"
Das war's! Nün müsste Euer Hintergrund fixiert sein und sich nur noch das Feld mit dem Text bewegen, wenn Ihr scrollt (also den Bildschirminhalt verschiebt).
2) Kontaktformular im Reiter "Contacts"
Es ist
grundsätzlich nicht zu empfehlen, auf einem öffentlichen Blog seine
persönliche Emailadresse anzugeben. Andernfalls sollte man früher oder
später mit unerwünschtem Spam rechnen. Das muss ja nicht sein.
Ich habe mich deshalb entschlossen, ein Kontaktformular einzurichten.
Wer das ebenfalls möchte, der kann so vorgehen:
Zunächst solltet ihr euch auf der Webseite www.emailmeform.com
registrieren. Das geht kostenlos. Und ich empfehle, mit irgendeiner
nicht so wichtigen Emailadresse von Euch. Vor dort aus könnt ihr die
Mails ja automatisch ein eine andere Adresse weiterleiten, die Ihr öfter
abruft. Auf emailmeform.com müsst Ihr dann nur den wirklich
simplen Bildschirmanweisungen folgen und ein Kontaktfurmular nach euren
Wünschen einrichten. Am Ende spuckt euch die Webseite einen HTML-Code
aus. Den müsst Ihr in eine Seite (Ich habe eben eine Neue Seite
"Contacts" eingerichtet) Eures Blogs eingeben. Speichern und voi lá -
Nun werden eingegebene Anfragen an die Emailadresse weitergeleitet, die
Ihr bei der Anmeldung auf emailmeform.com angegeben habt.
3) "Connect with me"...Polaroid-Buttons:
Ich habe einfach
ein paar Icons aus einem ganzen Set ausgewählt und sie dann etwas
verkleinert (43 x 55 pixel) auf meinem imageshack-Profil hochgeladen
(jedes Icon einzeln!). Dabei habe ich die Icons als .png gespeichert.
Hinterher habe ich in einem Widget mit HTML-Code aus den Bildern die
Buttons gemacht und sie mit dem Link zu meinem Profil auf der jeweiligen
Plattform (facebook, twitter, ...) verknüpft.
Der Code für die facebook-Verknüpfung lautet beispielsweise:
<a href="http://facebook.com/Dein.Profil" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="Link zu dem facebook Polaroid-Icon"/></a>
Bei der "Margin-"Angabe ist es klüger nicht "1em" sonder statt dessen "5px" zu wählen.
"Margin"
bezeichnet den Abstand der Icons rechts und links voneinander. Indem
man statt dem em-Befehl die Pixel-Zahl eingibt, kann man meiner Meinung
nach das Design besser an die eigenen Vorstellungen anpassen. Die Ziffer
"5" im Beispiel oben ist natürlich austauschbar. Einfach ein bißchen
ausprobieren, bis die Abstände passen.
Das ganze Set der Polaroid-Icons kann man hier finden und kostenlos downloaden.
Natürlich
könnt Ihr jedes beliebige andere Icon-Bild nehmen. Wichtig ist nur,
dass jedes eine Größe von etwa 40x50 Pixeln hat und irgendwo im Internet
unter einer Webadresse gefunden werden kann.
4) Funktion "Weiter lesen..." bearbeiten ( JumpLink )
Auf der Startseite des Blogs sind die jeweiligen Posts nicht komplett, sondern nur zu einem Teil zu sehen. Diese Funktion kann sehr einfach selbst eingefügt werden:
Wenn ihr euren Post verfasst, sieht man über dem Eingabefeld eine Leiste, mit der man den text bzgl. Schriftart, größe etc. bearbeiten kann:
Dort das siebte Icon von rechts ist die JumpLink-Funktion (sieht wie ein durchgerissenes Papier aus). Geht mit dem Cursor an irgend eine Stelle in eurem Text (am besten etwa nach der 5. Zeile) und setzt dort den JumpLink. Alle Zeilen davor werden nun auf der Startseite des Blog angezeigt. Die weiteren Inhalte kann man über den Link "Weitere Informationen..." sehen, der auf der Startseite eures Blogs automatisch dort erscheint, wo der JumpLink eingefügt wurde.
Den Text "Weitere Informationen" kann man leicht durch einen Anderen oder sogar eine Grafik ersetzen. Dazu wie folgt vorgehen.
1. Im Bereich "Vorlagen" auf "HTML bearbeiten" klicken
2. die folgenden Meldung mit "fortfahren" bestätigen
3. Im oberen Bereich des Fensters einen Haken bei "Widget-Vorlagen komplett anzeigen" setzen
4. Nun nach diesem Abschnitt z.B. per Suchfunktion (Strg + f) suchen:
<b:if cond='data:post.hasJumpLink'> <div class='jump-link'> <a expr:href='data:post.url + "#more"' expr:title='data:post.title'>
<data:post.jumpText/></a> </div> </b:if>
5. Den Teil <data:post.jumpText/>
durch den gewünschten Text (z.B. Mehr... oder Weiter lesen...) ersetzten. Dabei die Klammern < > weglassen.
Anstelle
eines Text kann auch ein Bild eingefügt werden, das irgendwo im
Internet unter einer Webadresse zu finden sein müss. In diesem Fall den
oben genannten Abschnitt ersetzen durch
<img src="http://Ihr-Foto.gif"/>
Weitere Hinweise, um den JumpLink-Text zu verändern, findet ihr auf englisch hier .
Keine Kommentare:
Kommentar veröffentlichen