Fremdes Design installieren


Hallo Ihr Lieben,

manchmal ist man nicht zufrieden mit dem eigenen Design und egal was man versucht, es funktioniert oder gefällt nicht. Die Lösung: ein Design von woanders her auf seinem Blog anwenden. Im Internet findet man sie überall, Blogdesigns für kleines Geld oder für lau. In diesem Post zeige ich euch, wie man sie richtig installiert und gebe euch Tipps beim aussuchen!

Wo finde ich Designs?

Für Blogger gibt es eine Menge Anbieter, hier sind meine Favoriten:
  • ThemeXpose - alle Designs sind kostenlos, für ein wenig Geld kann man die Credits entfernen.
  • MiraDesigns - Dort verkaufe ich meine Designs.
  • CopyPasteLove - Hier findet ihr auch einige kostenlose Designs.
  • Etsy - Dort findet ihr eine Menge Blogdesigns!
  • und noch viele andere Seiten!

Wie installiere ich ein Template?

1. Dafür sucht ihr euch ein Design aus und ladet es herunter.

Wenn ihr die Möglichkeit habt, eine Demo anzuschauen, dann tut das! Lieber erst anschauen und ausprobieren!

2. Entpackt die Datei.

In der Regel bekommt man beim Download nicht nur das Design, sondern noch eine ReadMe-Datei und eventuell noch eine Dokumentation, die euch beim Einrichten helfen soll. Um an diese Sachen heran zu kommen, müsst ihr die .zip-Datei entpacken.

3. Sucht nach der .XML-Datei.

Je nach dem, was für ein Design ihr gewählt habt und wie viele Variationen diese hat, findet ihr in dem entpackten Ordner eine oder mehrere .XML-Dateien. Diese beinhalten eure Designs.

4. Geht zu Blogger.com und öffnet die Vorlage-Seite. Rechts oben findet ihr BackUp/Wiederherstellung. Klickt darauf.


5. Macht zuerst ein BackUp, indem ihr auf "Vollständige Vorlage herunterladen" klickt.

Danach könnt ihr mit "Datei auswählen" die gewünschte .XML-Datei hochladen.

6. Lest euch die ReadMe-Datei und die Dokumentation durch.

Dort findet ihr weitere Hinweise, wie ihr das Design so einrichtet, damit sie alle Funktionen aus der Demo hat.


Darauf solltet ihr achten, wenn ihr ein fremdes Design benutzt:

  • Macht euch Gedanken, was ihr haben wollt! Die Auswahl an Designs ist riesig und manchmal verliert man sein Ziel aus den Augen. Brauche ich wirklich einen riesigen Slider? Ist eine Gallerie sinnvoll? Beachtet, dass je mehr Funktionen und Extras ein Template hat, desto länger wird er später brauchen um zu laden.
  • Ihr seid euch nicht sicher, ob ihr die Credits löschen dürft? Dann lest in der ReadMe-Datei oder fragt per Mail beim Designer nach. Kostenlose und günstige Designs setzen aber meistens voraus, dass ihr die Credits drin lasst.
  • Die Zukunft ist unterwegs online, also achtet darauf, dass eure Vorlage unter Responsive Design fällt. Ein Design, das responsive ist, reagiert auf die verschiedenen Ausgabegeräte, sodass sie auf dem Smartphone, Tablet und Desktop verschieden aussehen und trotzdem dem gleichen Design-Schema folgen.
Beispiel für Responsive Design

Weiterlesen »
Teile diesen Post:
16 Kommentare:

Favicon einfuegen


Für alle, die sich schon immer gefragt haben, wie dieses kleine, komische Bild heisst, das ihr in dem Bild oben sehen könnt: Das nennt sich Favorite Icon, oder ganz kurz Favicon. Diese Grafik taucht auf, wenn jemand eine Seite zu den Lesezeichen bzw. Bookmarks hinzufügt.

Da bei Blogger Blogs immer nur dieses hässliche "B" zu sehen ist, hattet ihr bestimmt schon öfters das Bedürfnis, dieses kleine Bild neben den Tab-Titel eures Blogs zu ändern.

Weiterlesen »
Weiterlesen & kommentieren ♥ »
Teile diesen Post:
89 Kommentare:

[Diskussion] Blog in der Bewerbung erwähnen?


Hallo Ihr Lieben,

letztens stieß ich durch meine Arbeit auf einen Beitrag von Caro (The Purple Frog), der mich zum Nachdenken gebracht hatte. Es ginge darum, ob man den Blog in einer Bewerbung erwähnen sollte.

Vor einigen Jahren versuchte ich eine Ausbildung zum Mediengestalter zu finden und damals entschied ich mich dafür, meinen Blog zu erwähnen. Da es zum Beruf passte, erstellte ich auch direkt ein Portfolio, in dem ich meine Blogdesigns Arbeiten zeigte.

Doch leider wurde ich nicht genommen. Eine genaue Erklärung habe ich von keiner Firma bekommen, die meisten schienen sich sogar vor der Absage zu drücken und konnten mir noch eine Woche vor dem (theoretischen) Ausbildungsbeginn nicht sagen, ob sie mich zumindest zu einem Vorstellungsgespräch einladen.

Nach dieser Zeit habe ich mein Medieninformatik-Studium angetreten und für mich ergab sich daraus, dass ich mit meinem Blog kein Vorteil bei der Bewerbung erzielen konnte.

Als ich gelesen habe, dass Caro mit der Erwähnung ihres Blogs Erfolg bei der Bewerbung hatte, wurde ich dann doch neugierig.

Habt ihr schon mal euren Blog in der Bewerbung erwähnt? Wurdet ihr darauf angesprochen? Habt ihr bemerkt, ob es eine Auswirkung auf eure Bewerbung hatte? Und was haltet ihr allgemein davon, den Blog zu erwähnen?

Weiterlesen »
Teile diesen Post:
25 Kommentare:

Zitatbox gestalten

Hallo Ihr Lieben,

heute zeige ich euch, wie man den Zitatbox schöner gestalten kann. Außerdem habe ich euch 6 Varianten vorbereitet, die ihr so übernehmen oder abgeändern könnt.

Sucht im "HTML bearbeiten" nach:

.post-body blockquote {

Darunter könnt ihr nun beliebige CSS-Codes einfügen, die eure Zitatbox zu etwas besonderem machen. Mögliche Eigenschaften für euer Zitatbox findet ihr im CSS-Katalog.

Variante 1:

Mit einem Strich links.
Ich bin eine hübsche Zitatbox <3
.post-body blockquote {
margin: 1em 0 1em 10px;
padding: 0 0 0 20px;
border-left: 2px solid #ea808b;
}

Variante 2: 

Mit einem Rahmen.
Ich bin eine hübsche Zitatbox <3
.post-body blockquote {
margin: 1em 0 1em 10px;
padding: 10px;
border: 1px solid #ea808b;
}

Variante 3:

Der erste Buchstabe ist anders als der Rest. Für diese Variante muss eure gewünschte Schriftart über </head> im HTML eingebaut sein (Wie das geht?). 
.post-body blockquote {
margin: 1em 0 1em 10px;
padding: 0 0 0 20px;
}
.post-body blockquote:first-letter {
font-family: 'Great Vibes';
font-size: 35px;
}

Variante 4:

Die Box ist mit einem Hintergrund versehen.
Ich bin eine hübsche Zitatbox <3
.post-body blockquote {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb1r1CMa2Fwh7Bg_gYOQDDZ3y08D56QctwdnLN9MY99OfV-FFqczhPyjagRMEHrksBnJQ-2SirCKqbfGwxbl2vAcOLyIXIG-Xpa92MIihR8mEy9keu5TdcaqvEaJ5UwTA52afDksRxuVL4/s320/squares4.jpg);
padding: 20px;
margin: 1em 0 1em 10px;
}

Variante 5:

Bei dieser Variante werden vor und nach dem eigentlichen Zitat Zeichen angehängt.
.post-body blockquote {
margin: 1em 0 1em 10px;
padding: 0 0 0 20px;
border-left: 2px solid #ea808b;
}
.post-body blockquote:before {
content: '" ';
}
.post-body blockquote:after {
content: ' "';
}

 Variante 6:

Hier wird gezielt ein Hintergrund gesetzt, sodass ein Anführungszeichen links oben auftaucht.
Ich bin eine hübsche Zitatbox <3
.post-body blockquote {
margin: 1em 0 1em 10px;
padding: 10px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdPa5eUlIcfmUbVFxllop0DlY2_tInFM0pmb7rpiUeps2BTeAMnVAWAPOg4D1XWN0p2sEP9_a0nWTyyOMtG05so_nBHErGPznmd1Ax2REBgFHvXU4grrcqUANuNQPQ9t5kC1ezMhr615B6/s1600/quote.png) no-repeat;
background-position-x: left;
background-position-y: top;
}

Wo kann ich eine Zitatbox machen? 

Im Posteditor, wo ihr euren Post schreibt, könnt ihr die Zitatbox einsetzen. Ihr markiert einfach eure gewünschte Textstelle und klickt auf die "-Anführungszeichen oben in der Werkzeugleiste.
Um den Stil auch in einem HTML/Javascript-Widget zu benutzen, fügt ihr ein <blockquote> vor und ein </blockquote> nach den als Zitat anzuzeigenen Text ein.
Weiterlesen »
Teile diesen Post:
18 Kommentare:

Monthly Links August 2015


Ich habe diesen Monat fleißig Links aus Facebooks Bloggergruppen gesammelt, die tolle Tipps, Tricks und Tutorials beinhalten. Alle Posts wurden im August 2015 geschrieben.

1. Woche

  • Sabrina hat ein neues Design für euch gemacht. Wer Lust auf etwas neues für seinen Blogger Blog hat, kann dort mal vorbeischauen!
  • Ihr wünscht euch hellere Fotos für euren Blog? Sabrina hat auch noch einen tollen Post mit Tipps für das Fotografieren geschrieben.
  • Diana hat sich sehr viel Mühe gegeben, um zu zeigen, wie man die Cookie Richtlinien im Blog umsetzt und viele weitere wissenswerte Infos zu Cookies auf ihrem Blog geschrieben.
  • Aileen beschäftigt sich für euch mit der Frage, wie man einen Blog starten kann und gibt euch dazu tolle Tipps und Denkanstöße.
  • Anne von Neontrauma spricht über den Trend Slow Blogging und klärt auf, was das überhaupt bedeutet.

2. Woche

3. Woche

4. Woche

PS: Wer im September's Monthly Links dabei sein möchte, darf seinen Link(s) hier lassen!
Weiterlesen »
Teile diesen Post:
8 Kommentare:

[Diskussion] Verschiedene Themen auf einem Blog?


Hallo Ihr Lieben,

als ich letztens an einem Design für eine Kundin gearbeitet habe, kam sie auf die Idee, noch einen zweiten Blog zu eröffnen, um dort über andere Dinge zu schreiben. Sie meinte, es wäre dann besser getrennt und die Themen auf den einzelnen Blogs wären nicht wie wild zusammen gewürfelt.

Eigentlich wollte ich ihr schreiben, dass ich es selbst nicht schlimm finde, wenn ein Blog mehr als nur ein oder zwei Themen hat. Aber dann dachte ich mir, es schadet ja nicht, getrennte Blogs zu schreiben. Ich denke, da ist jeder anders und hat da seinen eigenen Geschmack.

Was sagt ihr? Lest ihr lieber Blogs, die nur ein bestimmtes Thema bzw. Themengebiet abdecken oder ist das euch nicht so wichtig?

Persönlich finde ich es auch etwas schöner, wenn ein Blog nicht das wildeste Dschungel an Beiträgen anbietet, denn dann ist es einfacher das Design dazu passend zu gestalten, der Blog selbst wirkt auch geradliniger und man weiß sofort, was einem erwartet.

Andererseits bietet der Blog keinen großen Themenvielfalt und es kann (!) schnell langweilig werden. Wie schon gesagt: der Leser weiß eben, was ihn erwartet. Wer seine Blogs feinsäuberlich nach Themen trennt, hat gewiss auch mehr Arbeit - wenn er nicht will, dass seine Blogs einschlafen.

Die oben genannte Aspekte sind allerdings aus der Sicht des Bloggers, interessant finde ich aber vor allem, was die Leser eher bevorzugen.

Ein Blog mit vielen Themen und Themenbereiche oder lieber ein Blog mit nur wenigen Themen? Was findet ihr als Leser besser?

Weiterlesen »
Teile diesen Post:
14 Kommentare:

CSS-Bezeichnungen im Minima



Hallo ihr Lieben, 
Heute erkläre ich euch, was die einzelnen CSS-Bezeichnungen, die ihr beim „Layout gestalten“ seht genau bedeuten.

Welche Eigenschaften ihr in die jeweiligen Bezeichnungen (der korrekte Fachausdruck ist Selektor) verwenden könnt, seht ihr im CSS-Katalog.

Wenn ihr unter „Vorlage“ und „HTML bearbeiten“ euer Design verändern wollt, stößt man vorerst auf Begriffe, von denen man gar nicht genau weiß, was sie bedeuten. Natürlich kann man vieles übersetzen, jedoch bleibt oft die Frage „Was verändere ich damit denn eigentlich?“ im Kopf hängen. Um in Zukunft Bescheid zu wissen, zeige ich euch eine Definitionsliste, die ich nach persönlichen „Try & Fail“-Erfahrungen erstellt habe.

Die Selektoren sind aus der Minima-Vorlage entnommen, mit der die meisten Blog-Designer arbeiten. Die Vorlage ist nicht mehr direkt bei Blogger verfügbar, aber ihr könnt die Original-Version hier oder unsere bearbeitete Version hier herunterladen. Beachtet, dass ihr bei dieser Vorlage den Vorlagendesigner nicht mehr verwenden könnt!

Links seht ihr die Begriffe bzw. Selektoren, die ihr in eurer Minima-Vorlage findet und rechts die passenden Definitionen.




body {}
Grundlegende Eigenschaften des Blogs
a:link {}
Eigenschaften der Links
a:visited {}
Eigenschaften der bereits besuchten Links
a:hover {}
Eigenschaften der Links, wenn man mit der Maus darüberfährt
a img {}
Eigenschaften der Bilder, die sich im Blog befinden und eine Verlinkung aufweisen
/* Header
-----------------------------------------------*/
/* Oberer Teil
-----------------------------------------------*/
#header-wrapper {}
Eigenschaften des Header-Bereichs
#header-inner {}
Eigenschaften für die Dinge, die sich im Header befinden
#header {}
Grundlegende Eigenschaften des Headers
#header h1 {}
Eigenschaften für Blogtitel im Header
#header a {}
Eigenschaften aller Links im Header (inkl. Blogtitel)
#header a:hover {}
Eigenschaften aller Links im Header (inkl. Blogtitel), wenn man mit der Maus darüberfährt
#header .description {}
Eigenschaften für die Blogbeschreibung unter dem Header
#header img {}
Eigenschaften für das Headerbild
/* Outer-Wrapper
----------------------------------------------- */
/* Hauptteil
----------------------------------------------- */
#outer-wrapper {}
Eigenschaften für den Gesamten Bereich (Sidebar+Haupbereich)
#main-wrapper {}
Eigenschaften für den Hauptbereich (Postbereich)
#sidebar-wrapper {}
Eigenschaften für den Sidebar-Bereich
/* Headings
----------------------------------------------- */
/* Überschriften
----------------------------------------------- */
h2 {}
Eigenschaften für Sidebartitel, Datum und “Überschrift” im Postbereich
/* Posts
-----------------------------------------------*/
/* Postbereich
-----------------------------------------------*/
h2.date-header {}
Eigenschaften für das Datum
.post {}
Eigenschaften für den Postbereich
.post h3 {}
Eigenschaften für Posttitel & Seitentitel auf der Startseite und (vor allem) auf der Postseite/Seite
.post h3 a, .post h3 a:visited, .post h3 strong {}
Eigenschaften für den Posttitel auf der Startseite
.post h3 strong, .post h3 a:hover {}
Eigenschaften für den Posttitel auf der Startseite, wenn man mit der Maus darüber fährt
.post-body {}
Eigenschaften für den einzelnen Postbereich
.post-body blockquote {}
Eigenschaften für Zitate
.post-footer {}
Eigenschaften für den unteren Teil des Posts
.comment-link {}
Eigenschaften für den Link zu den Kommentaren
.post img, table.tr-caption-container {}
Eigenschaften für die Bilder im Postbereich
.tr-caption-container img {}
Keine Angabe*
.post blockquote {}
Eigenschaften für die Zitate
.post blockquote p {}
Eigenschaften für Absätze in den Zitaten
/* Comments
----------------------------------------------- */
/* Kommentare
----------------------------------------------- */
#comments h4 {}
Eigenschaften für die Überschrift oberhalb des Kommentarbereichs
#comments-block {}
veraltet - keine Funktion**
#comments-block .comment-author {}
veraltet - keine Funktion**
#comments-block .comment-body {}
veraltet - keine Funktion**
#comments-block .comment-footer {}
veraltet - keine Funktion**
#comments-block .comment-body p {}
veraltet - keine Funktion**
.deleted-comment {}
Eigenschaften der gelöschten, sichtbaren Kommentaren
.feed-links {}
Keine Angabe*
#blog-pager-newer-link {
Eigenschaften für den Link "Neuere Posts" am Ende des Blogs
#blog-pager-older-link {}
Eigenschaften für den Link "Ältere Posts" am Ende des Blogs
#blog-pager {}
Eigenschaften für den Link "Startseite" am Ende des Blogs
/* Sidebar Content
----------------------------------------------- */
/* Sidebar
----------------------------------------------- */
.sidebar {}
Grundlegende Eigenschaften für die Sidebar
.sidebar ul {}
Eigenschaften für alle ungeordneten Listen der Sidebar
.sidebar li {}
Eigenschaften für alle Punkte in den Listen der Sidebar
.sidebar .widget. .main .widget {}
Eigenschaften für alle Gadgets in der Sidebar und im Postbereich
.main .Blog {}
Eigenschaften für den Postbereich
/* Profile
----------------------------------------------- */
/* Profilgadget
----------------------------------------------- */
.profile-img {}
Eigenschaften für das Bild im Profilgadget
.profile-data {}
Eigenschaften für die Überschrift im Profilgadget
.profile-datablock {}
Eigenschaften für die Überschrift im Profilgadget
.profile-textblock {}
Eigenschaften für den Text im Profilgadget
.profile-link { }
Eigenschaften für die Links im Profilgadget
/* Footer
----------------------------------------------- */
/* Unterer Teil des Blogs
----------------------------------------------- */
#footer {}
Eigenschaften für den unteren Teil des Blogs




Zum Schluss ein kleiner Hinweis: Wenn ihr eine Minima-Vorlage verwendet findet ihr alle Begriffe. Benutzt ihr eine neue Vorlage, werdet ihr diese wahrscheinlich nicht alle so vorfinden, wie sie hier aufgelistet sind. Trotzdem dürfte die Liste eine hilfreiche und nützliche Sache beim Designen eures Blogs sein.


*Keine Angabe: bedeutet, dass ich für diesen Begriff keine Funktion herausgefunden habe. Wenn ihr mehr wisst, dürft ihr die Liste gerne ergänzen.

**veraltet - keine Funktion: bedeutet, dass diese Selektoren vermutlich nicht mehr gebraucht werden und wenn, dann sehr selten.
Weiterlesen »
Teile diesen Post:
17 Kommentare:

Textstellen hervorheben


Heute zeige ich euch eine einfache Methode, wie ihr euren Text aufpeppen und einige Textstellen hervorheben könnt.

Gestalten

Wir fügen im "HTML bearbeiten" über "]]></b:skin>" folgenden Code ein:
b{
...
}

i{
...
}

u{
...
}
Die ... könnt ihr nun durch beliebige CSS-Codes eintauschen. Im CSS-Katalog findet ihr passende Code-Schnipsel.

Noch kurz zur Erklärung:
  • b bedeutet fett
  • i bedeutet kursiv
  • u bedeutet unterstrichen

Verwendung

Im Post-Editor:

Wollt ihr die Gestaltung im Post verwenden, könnt ihr eure Textzeilen markieren und folgende Punkte im Post-Editor anklicken:
Im Editor selbst seht ihr eure Formatierung nicht, dafür aber in der Vorschau und im veröffentlichten Post.

In HTML/Javascript-Widget:

Fügt um euren gewünschten Textstellen, je nachdem was ihr gerne hättet, folgendes ein:
<b>Dein Text</b>
<u>Dein Text</u>
<i>Dein Text</i>
Ihr könnt das auch im Fließtext verwenden, in etwa so:
Der Text hier ist normal, aber ab <b>hier sieht es anders aus</b>. Jetzt ist es wieder normal.

Viel Spaß beim ausprobieren!

Weiterlesen »
Teile diesen Post:
1 Kommentar:

{Minima Basics #2} Bloghintergrund ändern


Es wurde gefragt, wie man einen eigenen Hintergrund einfügen kann. Bei den neuen Vorlagen kann man zwar ein Bild hochladen, aber die Größe ist der Datei ist begrenzt und außerdem kann man nicht bestimmen, wie der Hintergrund sich verhält.
Bei der Minima-Vorlage, mit der ich am liebsten arbeite, kann man kein Bild hochladen - hierfür auch das Tutorial.

Weiterlesen »
Weiterlesen & kommentieren ♥ »
Teile diesen Post:
49 Kommentare:

[Diskussion] Bannerwerbung auf Blogs?


Hallo Ihr Lieben,

für viele ist Bloggen wohl eher ein Hobby, aber wenn man dadurch ein wenig dazu verdienen kann, ist das gar nicht so schlecht. In letzter Zeit war viel die Rede von Sponsored Posts und viele hatten verschiedene Meinungen dazu gehabt. Doch was ist mit Banner-Werbung?

Bannerwerbung und Werbeblöcke auf Blogs? Was sagt ihr?

Im Gegensatz zu Sponsored Posts, die meistens eine einmalige Bezahlung einbringen, kann man mit Werbeblöcke dauerhaft verdienen. Hier wird nicht pro Link bezahlt, sondern pro Klick oder View (also wie oft es gesehen wurde). Vorteil dieser Einnahmequelle ist, dass die Posts selbst nicht betroffen sind und somit unabhängig bleiben. Dass heißt, man muss keinen Post nach den Wünschen eines Kunden schreiben und keine bestimmten Link einpflegen.

Ein großer Nachteil dieser Banner ist, dass sie nicht gut aussehen, sofern sie nicht stilistisch passend eingebunden worden sind. Außerdem ist der Verdienst deutlich geringer als bei Sponsored Posts - daran sind unter anderem auch AdBlocker schuld (meiner Meinung nach).

Auch ich benutze AdBlocker, doch wenn ich einen Blog finde, der mir gefällt, schalte ich ihn dauerhaft für diese Seite aus. Das mache ich noch nicht lange, aber seit ich es in einer Blogger Gruppe gelesen habe, halte ich das für einen guten Kompromiss. Immerhin will man ja seine Lieblingsblog unterstützen, auch wenn es nur ein bisschen ist :)

Wenn es um Bannerwerbung geht, gibt es nahezu unendlich Anbieter im Netz. Ich selbst kenne nur AdSense, Zanox und BlogFoster, aber vielleicht kennt jemand von euch noch mehr?

Was denkt ihr zum Thema Bannerwerbung auf Blogs? Schaltet ihr selbst Werbung auf eurem Blog?

Weiterlesen »
Teile diesen Post:
6 Kommentare:

Der CSS-Katalog


Da viele Tutorials Grundkenntnisse in CSS voraussetzen, habe ich hier ein CSS-Katalog erstellt, welches an sich kein eigenes Tutorial ist, sondern als Begleitmaterial für andere Tutorials dient.

Achtung: Dieser Post ist nicht dafür geeignet, CSS in seiner Gesamtheit zu erlernen.

Benutzen von CSS

CSS ist für das Aussehen jeder Webseite verantwortlich (nicht verwechseln mit dem Aufbau!). Im Prinzip ist die Sprache sehr einfach. Ihr braucht einen Selektor (Adressat), den ihr ansprecht und eine Anweisung bestehend aus Attribute und Werte zuweist. Im Grunde sieht ein CSS-Code so aus:
Selektor {
Attribut: Wert;
}
Dem angesprochenen Selektor kann man unendlich viele Anweisungen, also Attribute und Werte geben. Der Selektor ist abhängig vom HTML, denn CSS ist dafür da um HTML-Elemente zu gestalten.

Einfache Attribute von CSS

Je nach dem ob ihr ein Block-Element (div-Elemente, Bilder) oder ein Schrift-Element (a-Elemente, span-Elemente) gestalten wollt, gibt es verschiedene Attribute. Manche kann man auch bei beidem einsetzen. Im folgenden gehe ich auf einfache Attribute ein und welche Werte man jeweils einsetzen kann.

Höhe und Breite (nur Block)

width | height: [Zahlen-Wert mit Größeneinheit];

Erklärung der Größeneinheiten:

  • px = Pixel
  • em = Höhe der verwendeten Schrift
  • % = Prozentsatz - relativ zum Elternelement (Element, indem sich das bearbeitete Element befindet)
  • auto = wird ohne Maßangabe benutzt, damit sich das Attribut sich an das andere vorgegebene Attributwert anpasst (zB. width ist fest vorgegeben, dann kann mit height:auto; die Höhe sich anpassen, damit das Bild nicht verzerrt wird). Funktioniert nur bei Bilder.

Beispiele:

width: 50px;
height: 5em;
width: 100%;
height: auto;

Rahmen (Block, Schrift)

border-top | border-right | border-bottom | border-left: [Zahlen-Wert mit Größeneinheit] [Art des Rahmens (double, dashed, dotted, solid)] [Farbe];

Erklärung der Werte:

  • dashed = gestrichelt
  • dotted = gepunktet
  • double = doppelter durchgehender Strich
  • solid = durchgehender Strich

Beispiele:

border-top: 1px solid #000000;
border-left: 3px dashed rgb(174, 255, 7);
border-right: 5px dotted #ffffff;

Hintergrundfarbe (Block, Schrift)

background-color: [Farbe];

Beispiele:

background-color: #ffffff;
background-color: rgb(0, 0, 0);

Schrift-Attribute von CSS

Im folgenden werden CSS-Attribute gezeigt, die nur auf Schriften anwendbar sind (h1 bis h6, a und span Elemente).

Schriftgröße

font-size: [Zahlen-Wert mit Größeneinheit];

Beispiele:

font-size: 5em;
font-size: 15px;

Schriftfarbe

color: [Farbe];

Beispiel:

color: #ccdd66;

Textformatierung

text-align: [center, left, right oder justify];

Erklärung der Werte:

  • center = zentriert
  • left/right = links/rechts
  • justify = Blocksatz

Beispiel:

text-align: left;

Schriftformatierung

text-transform: [uppercase, lowercase, capitalize, none];

Erklärung der Werte:

  • uppercase = alles in Großbuchstaben
  • lowercase = alles in Kleinbuchstaben
  • capitalize = erster Buchstabe groß, Rest klein
  • none = keine Formatierung

Beispiel:

text-transform: uppercase;

Schriftart (nur Schrift)

font-family: [Schriftname], [alternative Schriftart];

Wie ihr eine Schrift einbindet, wird hier in den ersten 3 Schritten erklärt: http://www.copypastelove.de/2011/11/schriftart-bei-posttitel-andern.html

Beispiel:

font-family: 'Verdana', sans-serif;

Zeichenabstand (nur Schrift)

letter-spacing: [Zahlenwert mit Größeneinheit];

Erzeugt Abstand mit der angegebenen Größe.

Beispiel:

letter-spacing: 0.5em;
letter-spacing: 1px;

Diese Liste wird natürlich aktualisiert. Falls ihr etwas gerne wissen wollt, lasst es mich in den Kommentaren wissen!
Weiterlesen »
Teile diesen Post:
6 Kommentare:

Zähler für Kommentare & Posts


Wer von euch schon immer mal schnell sehen wollte, wie viele Posts und Kommentare sich denn eigentlich schon auf eurem Blog angesammelt haben, ist hier genau richtig. Diese kleine Statistik kann nämlich in Form eines Gadgets auf eurer Seite eingefügt werden.
Weiterlesen »
Weiterlesen & kommentieren ♥ »
Teile diesen Post:
39 Kommentare:

Landschafts- und Nahaufnahmen im Herbst


Die Abende werden kühler und die Tage kürzer und langsam beginnt sich auch die Natur draußen zu verändern. Das Laub wechselt seine Farben von Grün in herbstliche Braun und Rottöne. An den Sommer denkt man nun gar nicht mehr. Man macht sich bereit auf die nun folgenden kalten Monaten bis hin zum Winter. Aber so ganz ist der Winter ja noch nicht da. Denn nun haben wir erst den Herbst.

Weiterlesen »
Weiterlesen & kommentieren ♥ »
Teile diesen Post:
16 Kommentare:

[Diskussion] Lohnt sich eine eigene Domain?


Hallo Ihr Lieben,

nach langer Zeit melde ich mich wieder, im Gepäck ein neues Design, dass endlich auch funktioniert. Da trotzt Inaktivität meinerseits die Leserzahl hier weiterhin wächst, möchte ich hier ein wenig aktiver werden und euch dazu bringen, aktiver zu werden. Dafür werde ich hin und wieder ein paar Fragen rund zum Thema Bloggen und Blogdesigns hier in den Raum stellen und mir anhören, was ihr dazu zu sagen habt.

Meine erste Frage an euch ist;

Lohnt sich denn eigentlich eine eigene Domain?

Eine eigene Domain ist schon etwas schönes. Das blöde .blogspot.de hinten fällt weg und die URL ist kürzer und einfacher zu schreiben und zu merken.

Der Nachteil daran ist jedoch, dass man jährlich einen Beitrag ab 12€ (es sei denn, ihr seid Studenten, da geht das auch günstiger) zahlen muss und bei einer Domainänderung sich eine zweite kaufen muss, während die erstere noch im schlimmsten Fall weitere 12 Monate bezahlt werden muss, bis sie gelöscht wird.

Nach 2 Jahren bloggen habe ich mir meine ersten Domains gekauft, insgesamt habe ich schon sieben Domains gekauft, davon zwei im Laufe der Zeit abbestellt und eine werde ich noch kündigen. Leider muss ich bei letzteres noch ein Jahr warten, da ich es schlichtweg vergessen hatte. Viel Geld ist es nicht, aber ärgerlich ist es schon.

Findet ihr, dass eine eigene Domain nötig ist? Lässt sie einen wirklich professioneller wirken? Habt ihr auch eine eigene Adresse und wenn ja, wann habt ihr eure erste eigene gekauft?

Weiterlesen »
Teile diesen Post:
17 Kommentare:

Template für Blogger


Ich habe für euch ein altes Design aktualisiert!

Der Header sollte 1000px breit sein, Höhe ist egal. Punkte im Menü könnt ihr unter "Seiten" einfügen. Das Menü hängt über dem Header und nimmt etwa 35px des unteren Randes "weg". Schrift, Farben und Hintergrund sind natürlich frei veränderbar, erfordert aber ein paar CSS-Skills und/oder ein paar Tutorials von Copy Paste Love. Widgets dürft ihr natürlich auch hinzufügen oder löschen! Ansonsten bitte ich euch, unseren Copyright nicht zu entfernen.
Weiterlesen »
Weiterlesen & kommentieren ♥ »
Teile diesen Post:
47 Kommentare:

Kommentare auftrennen



Hey ihr Lieben,

Ich zeige euch, wie man die Kommentaranzahl und den Kommentarlink getrennt anzeigen lassen kann. Besonders schön sieht das aus, wenn unter den Postfooter nicht viel steht und die einfache Kommentaranzeige unterhalb des Posts optisch schnell verloren geht.

Weiterlesen »
Weiterlesen & kommentieren ♥ »
Teile diesen Post:
61 Kommentare:

Responsive Design "Midnight"


Auf Wunsch habe ich ein zweites Responsives Design gebastelt. Ich hatte nicht viel Zeit dafür, aber ich hoffe, es gefällt euch auch. :)
Weiterlesen »
Weiterlesen & kommentieren ♥ »
Teile diesen Post:
7 Kommentare:

[Gastbeitrag] No Copycats

Hallo, ich bin Tenzi von Tenzmeeloves.

Wir, Renesmee und ich, haben ein neues Projekt namens "No Copycats" ins Leben gerufen. Warum? Weil immer häufiger Bilder, Layouts oder auch ganze Texte kopiert und geklaut werden. Der Spaß hört spätestens da auf. Es kann ja nun nicht sein, dass man sich jedes Mal sorgen machen muss, das etwas geklaut werden kann. Wenn die eigenen Bilder oder Texte auf den eigenen Blog nicht mal mehr sicher sein können, wo dann? Ist es nicht schöner eigene Bilder zu schiessen oder eigene Texte zu schreiben? Durch das Klauen von Texten und Bilder sind schon viele tolle Blogs geschlossen worden. Leider kam es vor Kurzen vor, das auch ich Opfer einer Copycat wurde. Sie nahm mein Bild und bearbeitete es um. Ich finde sowas einfach nicht in Ordnung.
Daher möchten wir heute aufrufen, macht bei unserem Projekt mit. Tragt euch ein und zeigt der Welt das ihr gegen das Stehlen von Bildern, Grafiken und Texten seid. Ihr könnt unseren Banner gern auf euren Blog stellen, damit auch eure Leser sehen das ihr eigene Bilder und eigene Texte zur Verfügung stellt.

Mehr dazu findet ihr bei uns auf dem Blog: Tenzmeeloves
Weiterlesen »
Teile diesen Post:
5 Kommentare:

[Gastbeitrag] Kostenloses Design #1

Hallo ihr lieben - Wie versprochen gibt es heute ein neues kostenloses Design zum Download. Oben im Design findet ihr eine übersichliche Navigation, wo ihr eure Seiten / Links verlinken könnt. Die Kommentare sind mit einem schönen Hintergrundbild gestylt. Ich hoffe euch gefällt das neue Design. Demnächst kommen noch weitere Designs dazu. Seid also gespannt! ♥

Das Layout könnt ihr euch hier runterladen:
 
Weiterlesen »
Teile diesen Post:
5 Kommentare:
Abonnieren Posts (Atom)