Posts mit dem Label ♥♥ werden angezeigt. Alle Posts anzeigen
Posts mit dem Label ♥♥ werden angezeigt. Alle Posts anzeigen

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://3.bp.blogspot.com/-z17okhZHJX0/VeNHCJGXttI/AAAAAAAAJJg/PF7IYyJJw00/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://3.bp.blogspot.com/-lkaSq8Ynu4M/VeNKRBUSypI/AAAAAAAAJJ4/1saDDhCl8bY/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 »

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 »

[LinkWithin] Widget anpassen ♥♥♥


Heute zeige ich euch, wie ihr das LinkWithin anpassen könnt. Normalerweise kann man nur die Anzahl der vorgeschlagenen Posts und den Hintergrund (light oder dark) bestimmen. Mit diesem Tutorial könnt ihr den Satz "Das könnte Sie auch noch interessieren", die Position des Widgets und das Aussehen ändern.

Weiterlesen »

3 Widgets nebeneinander einfügen

Heute zeige ich euch, wie man in die Minima Vorlage 3 Widgets nebeneinander einfügen kann. Im Vorlagendesigner kann man zwar einen Footer mit 3 Spalten einfügen, für die, die lieber mit der Minima-Vorlage arbeiten haben diese Möglichkeit nicht.
Weiterlesen »

Eigene "Weiterblättern"-Links ♥♥♥


Hier ist endlich mal wieder Neele von vanillebrause :) Heute möchte ich euch zeigen, wie ihr eure "Weiterblättern"-Links selbst gestalten könnt.
Weiterlesen »

Link-Me Box selbst machen ♥♥


Diesmal gibt es eine Schritt-für-Schritt Anleitung, wie ihr sich eine Link-Me Box selbst machen könnt. :)

Wofür ist sie gut? So eine Box ist vielseitig, in der Bloggerwelt wird sie aber gerne dazu genutzt, um sich gegenseitig zu verlinken - wie zB. als Blogging Friends.
Weiterlesen »

Dateien zum Download bereitstellen ♥♥♥

Es gibt viele Gründe, warum man auf seinem Blog Dateien zum Download bereitstellen möchte. Ich als Autorin wollte beispielsweise für eine Aktion ein eBook kostenlos bereitstellen.

Weiterlesen »

Facebook-Kommentarfunktion einfügen ♥♥♥

"Wie binde ich die Facebook-Kommentarfunktion unter bestimmten Posts meines Blogbeitrags ein?"
Diese Frage möchte ich heute beantworten.
Die Einbindung selbst ist sehr einfach und erfordert kaum technisches Wissen, solange ihr brav meinen Anweisungen folgt ;)
Weiterlesen »

Transparentes Mouseover ♥♥♥

Nachdem ich schon erklärt habe, wie man fixierte Followerbuttons einfügt, möchte ich heute erklären, wie man Bilder so hinbekommt, dass sie transparent sind und erst bei Mouseover richtig kräftig werden (Beispiel HIER).

Weiterlesen »

Fixierte Followerbuttons ♥♥♥

Auf meinem Blog gibt es fixierte Follower-Buttons, also Buttons, welche "mitschweben", auch wenn der Besucher scrollt.
Das kann sehr praktisch sein, denn in meinem Fall stören sie dort nicht, sind aber für den Blogleser immer im Sichtfeld.
Weiterlesen »

Photoshop-Aktion "Coffee Cream" inkl. Tutorial


Hallöchen zusammen :)

Hier nun das versprochene Tutorial über einen Look, den ich jetzt einfach mal "Coffee Cream" genannt habe. Ich mag es, den Farben Namen zu geben.
Warum "Coffee Cream"?
Der Look hat unübersehbar eine braune Tönung, kalte Farben treten hier in den Hintergrund. Dadurch, dass auch helle Farben nicht mehr weiß, sondern eher cremefarben sind, bietet sich der Name "Coffee Cream" geradezu an.
Weiterlesen »

Bildabstand und -einschub entfernen ♥♥♥

Hallo liebe Copypastelove-Leser, 
mein Name ist Lena und ich darf euch heute erklären, wie ihr Bildrahmen, -abstand und –einschub auf eurem Blog entfernen könnt. Vielleicht kennt ihr das ja schon von den bekannteren Fotoblogs. Dort sieht alles, vor allem bei vielen Bildern und Text im Blocksatz schön einheitlich aus. 

Weiterlesen »

[LinkWithin] Nur auf Postseiten anzeigen ♥♥♥


Vor ein paar Wochen hat Mira geschrieben, wie man das "Diese Posts könnten sie auch interessieren"-Widget von Linkwithin in seinen Blog einbaut. Ich, Jan Plähn von Bildlich, möchte euch erzählen, wie man das Widget nur auf Postseiten einbaut.

Weiterlesen »

bewegte Fotos ♥♥♥


Hey!
Die meisten von euch kennen bestimmt diese kleinen Bildchen im Gif-Format, welche sich ganz subtil bewegen. Wenn man nach Tutorials sucht, findet man meist nur komplizierte Photoshop Anleitungen. Ich dachte mir aber, dass es da doch bestimmt etwas einfacheres gibt - und ich hatte Recht!
Ich bin der Meinung, dass mein Tutorial ziemlich einfach ist und mit ein bisschen Geduld von jedem zu meistern ist :)

Weiterlesen »

Wie erstelle ich ein Menü (Teil 5) ♥♥♥


Hey ihr da :) Ich bin Celina von La Fille Crue & heute schreibe ich mein erstes HTML Tutorial! Es könnte etwas wacklig sein & wenn ihr Fragen habt, beantworte ich sie euch gerne in den Kommentaren :)

Das Dropdown Menü

Weiterlesen »

Im Bild schweben (mit Photoshop) ♥♥♥


Diese wunderschönen Bilder habe ich aus WeHeartIt. Wer wissen will, woher die Bilder sind, klickt einfach auf das Bild.
Ich suche diese Bilder nicht einfach heraus um sie euch zu zeigen - sonst würde ich eine ganze Galerie von Anka Zhuravleva zeigen, die wunderschöne Schwebemotive hat - sondern um euch zu zeigen, wie das mit Photoshop funktioniert.

Weiterlesen »

BTemplates: Vorlage benutzen ♥♥♥


Im Internet gibt es viele viele Seiten, die kostenlose Templates für Blogger anbieten. Eins, das mir bisher immer sehr gut gefiel, ist Btemplates. Hier könnt ihr auch eure Drop-Down-Menüs herbekommen, natürlich nur zusammen mit dem Template.
Weiterlesen »

Transparenter Header im Scrapbook-Stil ♥♥♥

Hallo liebe CPL-Leser,
ich bin Carmen (von www.chamy.rockt.es) und darf euch heute ein Tutorial für einen transparenten Header präsentieren. Fast täglich erreichen mich Mails, wie ich meinen Header gemacht habe, sodass man noch meinen Background durchsieht und woher ich alle diese Elemente, die ich für den Header benutzt habe herbekomme.
Hier also ein paar Anregungen, Tipps und eine kleine Anleitung.
Es ist kein 1:1 Tutorial, da dies erstens viiiiiel zu lange dauern würde und es zweitens auch keinen Sinn macht, wenn dann jeden den haargenau gleichen Header hätte. Logisch, nicht?!
Es ist also nur eine Anleitung für den "technischen Teil", kreativ müsst ihr schon selbst sein. ;-)
Weiterlesen »

Bilder "verträumt" bearbeiten in Photoshop ♥♥♥



Hallo zusammen!

Verträumte, blasse, rosafarbene Bilder sind derzeit sehr beliebt, heute erkläre ich euch, wie man diesen Effekt in Photoshop erreichen kann. Wir arbeiten hier viel mit Ebenen, man kann den Effekt also jederzeit in seiner Intensität steuern und verändern.


Zuallererst brauchen wir ein Bild, welches wir bearbeiten möchten. Ich nutze wieder die Katze aus dem letzten Tutorial :)


Wer möchte, kann dem Bild erstmal ein paar Bokehkreise verpassen, die Anleitung habe ich euch ja schon gegeben :)


Bei den Ebenen findet ihr ein kleines Symbol, einen Kreis mit einer weißen und schwarzen Hälfte. Damit erstellt man eine Einstellungsebene.
Hiermit wollen wir eine Volltonebene erstellen:


Wir wählen eine violette Farbe aus, setzen den Ebenenmodus auf Negativ multiplizieren und verringern die Deckkraft:


Als nächstes erstellen wir noch eine Volltonebene in einem blassgelben Ton, Ebenenmodus Weiches Licht und verringerte Deckkraft:


Dies ist unser Zwischenergebnis:


MERKE
Einstellungsebenen sind toll, da man ALLES noch im Nachhinein ändern kann. Ein Doppelklick auf das Symbol der Ebene öffnet wieder das Einstellungsmenu.

Ich möchte noch ein wenig mehr rumspielen, und zwar mit Verläufen.
Hierbei klicken wir wieder auf das Symbol für die Einstellungsebenen und wählen den Verlauf aus. Mit einem Doppelklick auf den Verlauf können wir diesen bearbeiten:


Hierbei kann man zwischen verschiedenen Vorgaben wählen oder einen eigenen Verlauf kreiren. Mir gefällt der weiß-orange-Verlauf sehr gut, daher nehm ich ihn einfach.


Nun setzen wir auch hier den Ebenenmodus auf Weiches Licht und verringerter Deckkraft. Klicken wir nochmal auf das kleine Symbol für den Verlauf, so öffnet sich das Fenster erneut und wir können unseren Verlauf weiter verändern. Ich habe hier den ganzen Verlauf umgekehrt, damit orange unten ist. Außerdem habe ich den Winkel verändert.
Wenn man möchte, kann man auch die Farbe ändern etc.... Es ist also alles im Nachhinein änderbar!


Mir persönlich hat das Bild nun doch zu wenig Kontrast.
Es gibt natürlich tausende Wege den Kontrast zu erhöhen, ich bevorzuge hier den folgenden:
  • alle Ebenen mit Strg + Alt + Shift + E zu einer neuen Ebene zusammenfassen (ich LIEBE diese Tastenkombination!)
  • Ebenenmodus auf Multiplizieren
  • Deckkraft verringern


Und dies ist nun mein Ergebnis:



Ich wünsche euch viel Spaß beim Ausprobieren!

Grüße,
Jenny
Weiterlesen »

Datum unter Posttitel ♥♥♥


Hallöchen!
Oft gewünscht, nun ist es hier: Ein Tutorial, wie man das Datum unter den Posttitel packt.

Schauen wir uns einfach mal den html-Code an, vorher klicken wir aber auf Widget-Vorlagen komplett anzeigen.
Öffnet nun gleichzeitig den Editor, den werden wir gleich brauchen.

Kleiner Tipp: Ich nutze sehr gerne Notepad++ für solche Sachen. Man kann mehrere Dateien gleichzeitig offen haben und mit der Auswahl der Programmiersprache markiert das Programm die Codes bunt und erkennt teilweise, was zusammengehört. Und es hat eine Suchfunktion ;)


Wichtig ist - wie immer eigentlich - dass man sehr sauber arbeitet. Jede Zeile und jedes Zeichen haben eine Bedeutung und sind wichtig, damit alles funktioniert.

Wir suchen nun im Code nach dem folgenden Absatz:

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

Es könnte auch so aussehen, je nach Design:

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>

Ihr werdet noch andere, ähnliche Zeilen finden, doch nur diese hier sind die richtigen.
Kopiert nun diese Zeilen und fügt sie im Editor ein. Aus dem html-code könnt ihr sie nun löschen :)

Als nächstes suchen wir den Abschnitt, wo unser Datum hin soll.

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

Direkt nach diesem Abschnitt fügen wir unsere kopierten Zeilen von vorhin ein.

Das wars auch eigentlich schon :)

Passen jetzt die Abstände nicht mehr?
Zu groß? Zu klein?
Dann schaut nochmal weiter oben, bei .date-header { ... } und h3.post-title { ... }. Um hier die Abstände zu ändern, müssen margin-top vom Datum und/oder margin-bottom vom Titel geändert werden. Dafür gibt es aber (erstmal) keine Schritt-für-Schritt-Erklärung, vielleicht ein andermal :)

Grüße,
eure Jenny
Weiterlesen »
 
Lass dir dein Blogdesign von mir gestalten!