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.
Favicon einfuegen
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.
[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?
Zitatbox gestalten
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.
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
- Ihr wollt wissen, wie ihr mit Photoshop das bestmögliche aus euren Bildern holen könnt? Dann schaut bei Sabrina vorbei, denn sie hat dort Tipps für Bildbearbeitung in Photoshop bereitgestellt!
- Wem die Cookie-Leiste stört, die nun immer oben auftaucht, sobald ein neuer Leser auf dem Blog kommt, darf sich Janas Post durchlesen. Hier zeigt sie, wie ihr den Cookie-Hinweis gestalten könnt!
- Achtung: Sarkasmus! Ami Coco zeigt in ihrem Post How to create a perfect blog post wie man einen Blogpost gestalten kann... oder auch nicht.
- Clarabour hat ein paar Presets für Lightroom für euch gesammelt, die euch einiges an Arbeit und Zeit beim Bilder bearbeiten ersparen.
- Janneke erklärt, wie und warum man als Blogger andere Blogger promoten sollte und welche Vorteile das haben kann!
- Aileen von Mademoiselle Moment gibt euch Tipps für das Blogdesign.
- Anne von BlogChick erklärt, warum es wichtig ist, euren Bilder richtige Namen zu geben...
- ...und gibt auch gleich Tipps, wie man seine Facebookseite erfolgreicher machen kann.
3. Woche
- Isabelle gibt auf ihrem Blog Tipps und Antworten zu der Frage, wie man einen Blog startet.
- Auf Himmelsblau.org hat Missi ihre drei liebsten Schrift-Kombis gezeigt und verrät, wo ihr sie kostenlos herunterladen könnt!
- Tenzi von Tenzmeeloves zeigt, wie bei ihr hinter den Kulissen ein Blogpost entsteht.
4. Woche
- Natalie von The Inspiring Life schreibt Tipps, wie ihr euren Schmuck besser fotografieren könnt!
- Tenzi von Tenzmeeloves hat sich gefragt, wo die Persönlichkeit bei Blogs geblieben ist und hat einige Kollegen dazu befragt.
- Außerdem teilt sie mit uns ihre aktuellen Lieblings-Fonts.
- Marie von wandelbar zeigt euch, wie sie in Photoshop eine Hautretusche in 5 Minuten schafft. Die Tipps funktionieren auch in GIMP!
- Sabine von Ferngeweht gibt Tipps für gelungene Nachtaufnahmen.
PS: Wer im September's Monthly Links dabei sein möchte, darf seinen Link(s) hier lassen!
[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?
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.
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!
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.
Abonnieren
Posts (Atom)
