About Tutorialübersicht Labels Header Goodies Tutorialwünsche

Dein Bloggerlayout - Part 2: Die Feinheiten

Sonntag, 17. Februar 2013

Hier kommt ihr zu Teil 1.
Ich möchte euch zeigen, was man noch alles an seinem Layout ändern und verbessern kann :)
Übrigens - nun könnt ihr in der Sidebar die Minima Vorlage herunterladen! :)


Die Links

Bei den Links kann man den Link wie er aussieht, den besuchten Link und den Mouseover Link einstellen.




Also sucht nach
a:link {
Das bestimmt das Aussehen des normalen Links. Ihr seht das dort bereits color:$linkcolor; steht. Das heißt, das der Link die Farbe hat, die ihr im Vorlagendesigner gewählt habt. Natürlich könnt ihr es auch mit color:#abcdef; ersetzen.
a:hover {
Bestimmt das Aussehen des Links, wenn ihr mit der Maus drauffahrt.
a:visited {
Bestimmt das Aussehen eines bereits besuchten Links.

Und jetzt könnt ihr alles nach euren Wünschen anpassen - hier einige Beispiele:

  • Hintergrund  - background-color:#abcdef;
  • Schriftart - font-style:Verdana; | Wenn ihr eine Schriftart nehmen wollt, die nicht bei Blogger registriert ist, schaut euch dieses Tutorial an :)
  • Schriftgröße - font-size:*px; Auch hier könnt ihr die Zahl beliebig verändern :)
  • Rahmen: - border:1px solid/dashed/dotted #FARBE
    • border:.; - alle vier Seiten haben einen Rahmen
      border-left:.; / border-right:.; - nur links/rechts ist ein Rahmen
      border-top:.; / border-bottom:.; - nur oben/unten ist ein Rahmen
    • *px; - bestimmt die Dicke der Linie, die Zahl kann beliebig verändert werden
    • solid - ______ / dashed - _ _ _ _ / dotted - .........
    • und die Farbe könnt ihr auch bestimmen. Hier könnt ihr sie euch aussuchen.
  • alles großgeschrieben/kleingeschrieben/"Kapitälchen- text-transform:uppercase/lowercase/capitalize;
Und noch viel mehr. Hier ist eine Übersicht :)

Pattern/Hintergrundbild

Was sind Pattern?
Schaut es euch auf meinem stillgelegtem Blog an: Klick. Der Hintergrund, dass er sich wiederholt.
Damit das funktioniert, braucht ihr natürlich ersteinmal Pattern. Zum Beispiel hier oder hier.

Dann sucht bei Minima Lefty nach
body, .body-fauxcolumn-outer {
Und bei Minima nach
body {
darunter findet ihr den Code
background:$bgcolor; 
Diesen ersetzen wir nun durch
background:url(URL) fixed repeat
URL - Bild URL
fixed - heißt, dass es sich nicht mitbewegt, sondern fest ist. Wollt ihr, das der Hintergrund fest ist, lasst es einfach weg
repeat - heißt, dass es sich wiederholt. Bei Pattern unbedingt nötig! Wenn ihr das nicht wollt, und einfach nur ein Hintergrundbild, fügt no-repeat ein.

Bilder werden 'weißlich' beim Mouseover

Sehen könnt ihr das hier.
Jetzt gibt es zwei Möglichkeiten: Entweder setzt ihr es in euren HTML Code, oder im Vorlagedesigner unter 'CSS hinzufügen'

Und das ist unser Code:
.post-body img {
-webkit-transition:opacity 0.8s ease-in-out;
-moz-transition:opacity 8ease-in-out;
-o-transition:opacity 0.8s ease-in-out;
transition:opacity 0.8s ease-in-out;
opacity: 1.0;
}
.post-body img:hover {
-webkit-transition:opacity 0.8s ease-in-out;
-moz-transition:opacity 0.8s ease-in-out;
-o-transition:opacity 0.8s ease-in-out;
transition:opacity 0.8s ease-in-out;
opacity: 0.5;
}
Das lilane ist die Zeit, in der es transparent wird, also das es nicht mit einem Schlag weißlich ist, sondern das es hin 'fadet' ;-) Die 's' Zahl könnt ihr beliebig verändern, auch auf 9999, aber das wären dann 166 Minuten.

Opacity bedeutet übersetzt 'Deckkraft'. opacity:1.0; bedeutet das es ganz frei, also normal ist, bei opacity:0.1; sieht man dann kaum noch was auf dem Bild. Ich habe 0.5 als Wert genommen,

hover bestimmt das Aussehen des Bildes wenn ihr mit der Maus darüber fahrt.


Aber es gibt noch viel mehr...


Sonst sucht doch einfach mal auf CopyPasteLoveTime to steal ideas oder einfach hier! :)

Soviel war das jetzt nicht, aber das wichtigste ist dabei! :-)
Im nächstem Teil geht es dann um die Extras, also das Menü, eine Leiste.. vielleicht fällt mir ja noch was ein!:D



Kommentare:

  1. Könnt ihr mir bei dem Problem vielleicht weiter helfen? :)
    http://lifeisajoke-perfecttwo.blogspot.de/2013/02/sweetheart-wichtig.html

    AntwortenLöschen
  2. Ich bin mit meinem Layout auch total unzufrieden und freue mich immer über solche Turtorial-Posts!! Obwohl ich die meist auch nicht richtig anwenden kann. :-D LG Kristina

    http://fashion-beauty-by-kristina.blogspot.de/

    AntwortenLöschen
  3. Vielen Dank für die tollen Tipps. Ich werde auch immer etwas mutiger - diesmal habe ich mich an das "Unendliche Scrollen" getraut!
    Der Rest vom Layout braucht noch ... ich bin froh, dass Du immer so viele und vor allem gut aufbereitete Informationen teilst!

    Liebe Grüße,
    Isabella

    AntwortenLöschen
  4. Danke, Danke, Danke! Alles super einfach und verständlich erklärt. Ich hatte bzw. habe wenig Ahnung von html, aber dank euch habe ich jetzt auch mein eigenes Layout :-)
    http://blue-hideout.blogspot.de/

    AntwortenLöschen
  5. Ich habe eine Frage zum Layout. Und zwar habt ihr ja auch einen Blog mit mehreren Autoren. wie kann man das Menü so machen, wie ihr es habt das man eure Profilbilder sieht? Weil bei uns sind das nur diese hässlichen Bloggerzeichen..
    Liebe Grüße!

    AntwortenLöschen
  6. Noch eine Frage von mir :) Also wie kann man den rahmen um die bilder entfernen? das sieht echt nicht schön aus :(

    AntwortenLöschen