Dein Bloggerlayout - Part 2: Die Feinheiten

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...

Auswahl farbig gestalten

Scrollbalken anpassen

Unendliches Scrollen

Schrift formatieren (unterstrichen, fett, kursiv)

Online User Counter

Sonst sucht doch einfach mal auf CopyPasteLove, Time 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