Heute ein Tutorial, das an der von ShabbyBlogs angelehnt ist. Das Tutorial von ShabbyBlogs gibt es schon länger, dazu folgt hier nun die deutsche Version. Dazu zeige ich euch noch, wie ihr einen einfachen Postdivider ohne Grafik einbauen könnt!
Der Code:
Wir suchen erstmal im "HTML bearbeiten" nach dem Bereich ".post" - das kann je nach Vorlage variieren, mit dem Dev-Tool könnt ihr es für eure Vorlage heraussuchen (Anleitung).
Der Postdivider:
Schöne Postdivider findet ihr auch auf ShabbyBlogs. Die müsstet ihr eurer Postbereichbreite anpassen. Dafür benutzt ihr einfach Photoscape, Photoshop, sogar mit dem neuen Paint funktioniert das!
Alternativ könnt ihr auch einen eigenen erstellen, dazu eignen sich gut Photoshop, Gimp o.ä., diese müsstet ihr nur noch hochladen (via Photobucket, Flickr, etc.).
Der Code:
Stelle gefunden und passenden Divider gefunden? Here's your Code:
background: url(http://DIVIDERADDRESS.jpg);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
border-bottom:0px dotted $bordercolor;
padding-bottom:5.5em;
Fügt diesen ein, sodass es so aussieht:
Natürlich noch den Link des Bildes ergänzen und speichern. Schon habt ihr es!
Alternativ: einfache Trennlinie
Im gleichem HTML-Bereich gebt ihr diesen Code ein:
border-bottom: 1px solid #dddddd;1px könnt ihr mit einer beliebigen anderen Zahl austauschen, die die Dicke der Trennlinie bestimmt, solid steht für eine durchgehende Linie, kann durch dotted (gepunktet) oder dashed (gestrichelt) ersetzt werden und #dddddd ist der Hexcode für ein sanftes Grau, welches ihr mit einer x-beliebigen Farbcode austauschen könnt. Weitere Farben könnt ihr hier aussuchen. Danach dann speichern und fertig ist es :)
Liebe Grüße,
Mira
Irgendwie tut sich bei mir gar nichts.
AntwortenLöschenalso ich sehe gar keine veränderung wenn ich auf "vorschau" klicke :(
ich komm nicht auf deinen blog, sonst würde ich mal nachschauen :(
Löschentolles Tutorial
AntwortenLöschenWundervoll... vielen lieben Dank.. dank euch krieg ich meine BlogSeite doch noch etwas ansprechender und schöner gestaltet...
AntwortenLöschenGLG
Ich finde .post nicht also bei mir steht das da:
AntwortenLöschenUnd wenn ich das da drunter schreibe/kopiere und speicher, dann geht das nicht, man sieht das dann nicht. :(
Oke, den HTML code kann man hier nicht hinschreiben. :/ Also in das Kommentar.
AntwortenLöschenVersuch doch, es mit dem Dev Tool herauszufinden. Steht auch im Post + Link zur Anleitung.
LöschenWenn ich das mache, dann kommt immer das:"
AntwortenLöschenInvalid variable declaration in page skin: Variable is used but not defined. Input: bordercolor"
Da stimmt dann wohl etwas nicht mit dem border, hast du den Farbcode falsch geschrieben? Der darf maximal nur 6 Zeichen haben!
Löschenhi kannst du auch mal tutorials machen, wie man header erstellt?
AntwortenLöschenIch komm damit gar nicht klar Oo
AntwortenLöschenich will einen neuen bzw einen 2ten Blog erstellen, nur diesmal in hübsch.
Aber ich komm damit absolut nicht zurecht :/
kann mir jmd helfen?
Löschengenau das habe ich gesucht, aber bei mir finde ich .post und des mit margin ... nicht :((
AntwortenLöschenInvalid variable declaration in page skin: Variable is used but not defined. Input: bordercolor
AntwortenLöschendas kommt bei mir in rot, wenn ich die Änderungen speichern will. Dabei habe ich alles genauso gemacht, wie beschrieben...
huhu(:
AntwortenLöschenich finde das Tutorial echt toll, aber ich habe alles eingegeben wie beschrieben und es erscheint aber nix :(
was mach ich falsch ?
Bei mir steht folgendes, wenn ich auf "Vorschau" klicke:
AntwortenLöschenUngültige Variablenangabe in Seitendesign: Variable wird verwendet, ist aber nicht definiert. Eingabe: bordercolor
Error 500
Unter .post kann man es auch nicht finden, weil es ganz oben auch noch sowas gibt. Ihr müsst
.post {
eingeben, dann kommt ihr genau an die Stelle.
Dieser Kommentar wurde vom Autor entfernt.
AntwortenLöschen(falscher Account xD)
LöschenWenn das .post { nicht vorhanden ist im Code, einfach selber einfügen, aber vorsicht } nicht vergessen. Dann den Code für den Divider einfügen zwischen die geschwungenen Klammern und url für das bild einfügen. Zu letzt dann noch $bordercolor löschen, aber ohne den ; sonst gibts Fehler. Dann müsste es funktioneren. :)
Liebe Grüße
fairytale ♥
Bei mir geht das nicht.Die stelle wo es eingefügt werden soll gibt es nicht ?!
AntwortenLöschenIch habe mit Strg und F gesucht.
Ich hab gesucht, irgendwas gefunden und den Code da eingesetzt- jetzt habe ich das Bild unter dem Posttitel, wie ein Unterstrich, und es gefällt mir noch besser :D Danke!
AntwortenLöschenIch würde das voll gerne machen, aber ich habe mein Template selbst geschrieben und da gibt es den Post. Teil auch nicht, Kennst du eine alternative?
AntwortenLöschenLG,
Franzi