Fixierte Grafik

6 Kommentare


Eine Grafik in einer Ecke des Blogs anzuzeigen, die auch beim scrollen immer ihren Platz behält, ist in manchen Fällen sehr nützlich. Zum einen kann man so auf Aktuelles, Aktionen oder andere wichtige Dinge hinweisen. Zum anderen kann man aber auch einfach dauerhaft sein Logo oder eine andere Grafik dort einbinden, z.B. einen "Home-Button", durch den man via Klick automatisch wieder zur Startseite gelangt o.Ä.



In diesem Tutorial verwende ich meinen "hello SPRING"-Button um zu zeigen, wie es funktioniert. Die Grafik bleibt immer in der oberen linken Ecke - ganz egal auf welcher Seite im Blog man sich befindet oder wo man gerade hinscrollt. Probiert es einfach mal - ihr landet immer wieder hier ;)



  BLOGTUTORIAL


Als erstes benötigst du eine Grafik. Hier in der Anleitung verwendest du automatisch meinen "hello SPRING"-Button. Wie du deine eigene Grafik und sogar einen eigenen Link einbinden kannst, erkläre ich dir weiter unten.


1. Öffne dein Dashboard, klicke auf Vorlage und dann auf Anpassen, damit sich der Vorlagendesigner öffnet.





2. Klicke im Vorlagendesigner auf Erweitert und dann auf CSS hinzufügen.





3. Gib dort in dem weißen Feld nun den Text aus diesem Kästchen ein (einfach komplett markieren und kopieren):






4. Nach dem letzten Zeichen, also dieser Klammer hier: } drückst du auf Enter (Eingabetaste), dann oben rechts auf "Auf Blog anwenden" und dann auf "Zurück zu Blogger".



In deinem Blog hat sich jetzt visuell noch nichts verändert. Mit Eingabe dieses Codes hast du ihm aber schon gesagt, was er mit der Grafik, die du als nächstes einfügst, machen soll ;)




5. Klicke dafür auf Layout, dann in deiner Sidebar auf Gadget hinzufügen und wähle in dem Fenster HTML/JavaScript aus.





6. Im leeren HTML-Gadget lässt du bitte die Überschrift weg und gibst im weißen Feld darunter den Text aus diesem unteren Kästchen ein (wieder alles markieren und kopieren):







7. Klicke im HTML-Gadget und anschließend auch im Layout auf Speichern. Öffne ein neues Fenster und schau dir deinen Blog an. Nun muss der blaue "hello SPRING"-Button in der linken oberen Ecke fixiert sein.


 

 

Wie kann ich meine eigene Grafik verwenden?

Das ist ganz einfach. Du musst deine Grafik als erstes hochladen. Das kannst du bei Photobucket, Flickr o.Ä. machen oder aber ganz bequem hier bei Blogger, indem du einen neuen Post anlegst, dein Bild hochlädst und veröffentlichst. Öffne dann ganz normal deine Seite, mach einen Rechtsklick auf die Grafik und kopiere den Bildlink in der oberen Adresszeile.  Den Post kannst du nun wieder löschen oder zurück auf "Entwurf" setzen.

Der kopierte Link ist deine Grafikadresse. Gehe wieder in dein HTML-Gadget (bearbeiten) und ersetze den folgenden Text mit deinem kopierten Link:


Wichtig ist hierbei, dass du unbedingt die davor und danach stehenden Anführungszeichen stehen lässt! Klicke anschließend auf speichern und sieh dir das Ergebnis im Blog an.





Wie kann ich auf eine eigene Seite  verweisen?

Auch ganz einfach. Kopiere den Link der Seite, zu welcher du verweisen möchtest. Öffne wieder dein HTML-Gadget (bearbeiten) und ersetze den folgenden Text mit deinem Link:


Wichtig ist hierbei, dass du unbedingt die davor und danach stehenden Anführungszeichen stehen lässt! Klicke anschließend auf speichern und sieh dir das Ergebnis im Blog an.



Kann ich hello-SPRING auch in der Sidebar nutzen?

Klar! Dafür musst du nicht den Code ins CSS kopieren, Schritte 1 - 4 fallen also weg. Du gehst ins Layout, klickst in der Sidebar auf Gadget hinzufügen und wählst HTML/JavaScript aus. Dort gibst du dann folgenden Text ein:




Blauer Button ohne Hintergrund (transparent):


Blauer Button mit weißem Hintergrund


-------------------------------------------------------------------



Rosa Button ohne Hintergrund (transparent)



Rosa Button mit weißem Hintergrund


Viel Spaß!


 
 


6 Kommentare

  1. Hej,
    ein schönes Tutorial. :)
    Nur ein paar kleine Anmerkungen: durch die Angabe target="_blank" öffnet sich jedesmal ein neues Browserfenster. Wenn du den Code einsetzt, damit deine Leser wieder auf die Startseite deines Blogs gelangen, lässt du das target-Attribut besser einfach weg, denn man will je nicht jedesmal eine neue Seite öffnen.

    Im a-Tag kannst du die Angabe border="0" weglassen und stattdessen im CSS schreiben: a img { border: 0; }. Das border-Attribut gilt als veraltet, somit hast du dann einen saubereren Code. Und das img-Tag möchte ein alt-Attribut haben, in dem eine kurze Beschreibung des Bilds steht: < img src="..." alt="Logo von Blog xyz" > :)


    Liebe Grüße
    neontrauma

    AntwortenLöschen
    Antworten
    1. Richtig. Dankeschön für den Hinweis ;)
      Ich hab's dann mal aktualisiert.

      Die border-Attribute stehen extra im html, weil ich sie dort für ein weiteres Tutorial brauche ;)
      (Warum veraltet? Die funktionieren doch wunderbar)

      Liebe Grüße!

      Löschen
    2. Mh, HTML wird ja weiterentwickelt, und in der aktuellen Version HTML5 gelten einige Attribute und Tags als veraltet, weil es mittlerweile elegantere Wege gibt, ihre Funktion umzusetzen. D.h. aktuell werden sie im Browser noch unterstützt, in einiger Zeit in den neueren Browserversionen aber möglicherweise nicht mehr.

      Guck mal zum Beispiel hier: http://www.staff.hs-mittweida.de/~pwill/deprecated.html

      Liebe Grüße

      Löschen
  2. Vielen, vielen Dank! Das werde ich auf jeden Fall mal ausprobieren!
    Liebe Grüße, Katharina

    AntwortenLöschen
  3. Vielen lieben Dank für dein Tutorial, werde öfters mal vorbei schauen. Noch ne Frage, bei dir steht immer "weiterlesen", wie geht das? lg jana

    AntwortenLöschen
  4. Hallöchen,
    deine Tutorials sind echt super und einfach erklärt. Habe auch eine kleine Frage.
    Gibt es die Möglichkeit trotz des Drop-down Menüs (von welchem du hier auch ein Tutorial hast)auch diese fixierte Grafik einzubauen, da diese ja dann an genau die selbe stelle kommen würde. Oder kann man die Grafik einfach über das Menü setzen und wenn ja wie funktioniert das?

    Liebe Grüße
    Jenny

    AntwortenLöschen

Danke für deine Nachricht!

Das könnte dich auch interessieren

Copyright

Der Inhalt dieser Seiten ist mein Eigentum und unterliegt dem deutschen Urheberrecht. Die Kopie, Vervielfältigung, Bearbeitung, Verbreitung und jede Art der Verwertung außerhalb der Grenzen des Urheberrechtes bedürfen vorab meiner schriftlichen Zustimmung.
© www.misses-cherry.de 2009-2017

Kontakt

Name

E-Mail *

Nachricht *