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!

Weiterlesen »

Suchfeld als Overlay

Hallo zusammen :)
Ich bin Myri aus dem KreaTief und darf euch heute wieder einen Gastpost präsentieren. Diesmal zeige ich euch, wie ihr ein Suchfeld in einem Overlay über dem Post platziert.

Aktuell könnt ihr euch das gerade auf meinem Blog ansehen, oder in einer vereinfachten Form im Demo, das ich geschrieben habe.

See the Pen Search Field Popup by Myri (@bekreatief) on CodePen.

Ein Suchfeld. Es darf vor allem auf einem vollen Blog nicht fehlen, aber oft braucht es so viel Platz. Das war der Grund, der mich dazu gebracht hat, mich auf die Suche zu begeben, nach einer Alternative zum Suchfeld irgendwo im Blog, wo man es auch nicht übersieht.
Im WWW habe ich ein paar coole Lösungen gefunden, wie etwas Suchfelder, die wachsen, sobald man sie anklickt, aber das war es noch nicht ganz. Diese Idee kam mir dann bei der Arbeit, als eines der Wordpress Themes, an denen ich arbeitete mit einem solchen Suchfeld ausgestattet war. Es war Liebe auf den ersten Klick.
Leider war das Script im Theme selbst nicht ganz so schön und voll mit Zeug, was ich nicht brauchen konnte. Also habe ich einfach eine einfache Version selbst geschrieben.

Folgend möchte ich euch zeigen, wie ihr eine Lupe in eurem Seitengadget platziert, die dann als Schalter für das Overlay dient.

1. Testblog

Ich empfehle immer einen Testblog, vor allem wenn ihr noch nicht so vertraut mit dem Code seid, solltet ihr das ganze zuerst in einem Testblog versuchen und erst wenn es dort geklappt hat, übernehmt ihr das für euren richtigen Post. Ich benutze im Beispiel mein Minima Responsive Template, aber das sollte mit jedem Template funktionieren. Falls ihr das Seiten-Gadget nicht verwendet, könnt ihr das ganze natürlich auch manuell machen, aber dazu gleich mehr. Startet also euren Testblog und wechselt dann in die HTML-Ansicht.

2. jQuery & Font Awesome

Für die Lupe verwenden wir eine Icon-Schrift. Mein Favorit ist Font Awesome, das lässt sich am einfachsten integrieren.

Ihr sucht nun nach

<b:skin>

und fügt oberhalb davon die aktuellste Version ein, in meinem Fall ist das 4.1.0

<!-- Font Awesome -->
<link href='//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css' rel='stylesheet'/>

Das javaScript läuft mit jQuery. Falls ihr das nicht schon in eurem Blog habt, müsst ihr das hinzufügen. Google hostet das netterweise für uns, wir müssen also nur noch einen Link platzieren.

Sucht in eurem Blog nach

</body>

und direkt obererhalb davon fügt ihr folgendes ein:

<!-- jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

3. JavaScript

Als nächstes kommen wir zum Javascript. Das ist ziemlich simpel und sagt im Grunde bloss, dass sich das Overlay öffnen soll, wenn wir die Lupe anklicken und wenn wir ausserhalb des suchfelds oder auf unser x klicken, soll sich das overlay wieder schliessen.

Das kopieren wir unter den jQuery-Link, den wir eben platziert haben.

<script>
$(document).ready(function(){
 $('a[href="#search"]').on('click', function(event) {                    
  $('#search').addClass('open');
  $('#search > form > input[type="search"]').focus();
 });            
 $('#search, #search button.close').on('click keyup', function(event) {
  if (event.target == this || event.target.className == 'close' || event.keyCode == 27) {
   $(this).removeClass('open');
  }
 });            
});
</script>

4. Markup

Okay, als nächstes kommt das Markup für unser Overlay. Das könnt ihr an beliebiger Stelle einfügen.
ich habe beschlossen es ans Ende des Blogs zu stellen, also einfach oberhalb des jQuery-Scripts.

In unserem Markup haben wir ein Suchfeld, mit einer Schliessen-Taste.
Ihr braucht darin nichts anzupassen, ausser ihr wollt z.B. den Text ändern, der angezeigt wird, bis man anfägt zu tippen. dafür ändert ihr was zwischen dem placeholder (placeholder="Platzhaltertext")steht.

<div id="search"> 
 <span class="close">X</span>
 <form role="search" id="searchform" action="/search" method="get">
  <input value="" name="q" type="search" placeholder="type to search"/>
 </form>
</div>

5. CSS hinzufügen

Okay, als nächstes kommt die CSS. Hier definieren wir wie das ganze aussehen soll.
Ich habe bei den wichtigsten Stellen kommentare hinzugefügt, die euch erklären sollen, was wir machen.

/* Search Style */ 
#search {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Hintergrundfarbe des Overlays */
    -webkit-transition: all 0.5s ease-in-out;
       -moz-transition: all 0.5s ease-in-out;
        -ms-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
            transition: all 0.5s ease-in-out;
    -webkit-transform: translate(0px, -100%) scale(0, 0);
      -moz-transform: translate(0px, -100%) scale(0, 0);
       -ms-transform: translate(0px, -100%) scale(0, 0);
         -o-transform: translate(0px, -100%) scale(0, 0);
           transform: translate(0px, -100%) scale(0, 0);    
    opacity: 0;
    display: none;
}

#search.open {
    -webkit-transform: translate(0px, 0px) scale(1, 1);
       -moz-transform: translate(0px, 0px) scale(1, 1);
       -ms-transform: translate(0px, 0px) scale(1, 1);
        -o-transform: translate(0px, 0px) scale(1, 1);
            transform: translate(0px, 0px) scale(1, 1); 
    opacity: 1;
    z-index: 106;
    display: block;
}

/* Suchfeld Style */
#search input[type="search"] {
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -51px;
    width: 60%;
    margin-left: 20%;
    color: rgb(255, 255, 255); /* Schriftfarbe */
   background: transparent;
   border-top: 1px solid rgba(255, 255, 255, .8); /* Rand oben */ 
   border-bottom: 2px solid rgba(255, 255, 255, .5); /* Rand unten */
   border-left: 0px solid transparent;
   border-right: 0px solid transparent;
    font-size: 40px; /* Schriftgrösse */
   font-family: Josefin Sans; /* Schriftart */
    text-align: center; /* Textausrichtung */
    outline: none;
   padding: 10px;
}
  
/* x-Link */
#search .close {
    position: fixed;
    top: 15px;
    right: 15px;
    opacity: 1;
    font-size: 27px;
   color: #fff;
}

#search .close:hover{
  cursor: pointer;
}

Und das fügt ihr oberhalb von ]]></b:skin> ein, oder im Vorlagendesigner bei CSS hinzufügen (oder in einem HTML-Gadget, dann aber die Style-Tags nicht vergessen).

Und speichern.

6. Link setzen

Nun, im Grunde ist das einzige Kriterium für den Suchlink, dass er nach #search führt. Ihr könnt also irgendwo einen Link platzieren, der das als Linkziel hat.
Wie gesagt, ich platziere ihn im Seitengadget, weil wahrscheinlich die meisten von euch das benutzen.
Das HTML von meinem Link, würde allerdings so aussehen. Font-Aweseome Icons werden in i-Tags platziert.

<a href="#search">
  <i class="fa fa-search"></i>
</a>

Okay, geht zu Layout und öffnet euer Linkgadget.



Dort wählt ihr externen Link hinzufügen und fügt folgendes ein:

Fertig!

Und dann seid ihr fertig!

Fragen, Probleme?

Wie immer stehe ich bei Fragen oder Problemen zur Verfügung. Schreibt über die Kommentare oder über das Kontaktformular auf meinem Blog.

Ich hoffe euch gefällt das Ergebnis und vielleicht finde ich ja demnächst ein paar Blogs mit einem Suchfeld-Overlay :)

Weiterlesen »

Guide to Blogger Visitenkarten

Ob ein Blogger Visitenkarten braucht oder nicht, ist eines der vielen Sachen in dieser Welt, bei der sich die Gemüter spalten. Die einen finden es unnötig, die anderen können ohne gar nicht leben. Ob man es braucht, sollte jeder für sich entscheiden. Wer sich dafür entscheidet, sollte beim gestalten ein paar Dinge beachten, denn Visitenkarten gestalten ist nicht so einfach wie es scheint. Ist auch verständlich, wenn man bedenkt, dass man die wichtigsten Infos (hier fängt die Diskussion "Was ist wichtig?" an) auf knapp 47 cm² Pappe quetschen und es dazu noch einprägsam und persönlich gestalten soll. Doch was sollte man nun dabei beachten?

Weiterlesen »

Adventskalender Tür #7 | Christmas Fonts #1

Heute werde ich euch 12 weihnachtliche Fonts vorstellen. Ihr könnt die gesamten Fonts als .zip-Datei herunterladen. Wenn euch nur eine Schrift interessiert, so klickt auf den Fontnamen.

Weiterlesen »

Freebies: 15 kostenlose Fonts

Hallo, ihr Lieben! Wie Mira bereits verkündet hat, bin ich neu im CPL-Team und werde euch von Zeit und Zeit mit ein bisschen Lesestoff oder ein paar Freebies füttern. :)

Mein Name ist Nadine, ich bin 21 Jahre, arbeite als Informatikerin und schreibe nebenbei für meinen Blog WASTED HEART. Schon seit vielen Jahren ist Photoshop ein wirklich guter Freund von mir. Ich experimentiere gerne damit herum. Eine riesige Leidenschaft von mir sind Schriftarten. Mit Schriftarten kann man so viele Dinge verschönern, verändern und anpassen. Das Beste ist: es gibt so viele verschiedene Schriftarten, dass sie einem nie langweilig werden! 15 Stück habe ich euch mitgebracht, welche ich in den Weiten des Internets gefunden habe. :)

Weiterlesen »

[Tipp] iversity.org

Heute stelle ich euch mal wieder eine Seite vor, die euch nützlich sein kann. Entdeckt habe ich iversity.org schon vor ein paar Wochen, als ich meine erste Uni-Woche hatte.

Mit ein bisschen Fantasie kann man erkennen, dass der Name sich von "University" ableitet - dabei handelt es sich auch um eine Online-"Uni" mit verschiedenen Kursen aus der ganzen Welt. Der Schlüsselbegriff dahinter nennt sich "MOOC" - oder auch Massive Open Online Course.

Weiterlesen »

Grafiken (zB. Social Icons) einbinden

Hallo Ihr Lieben,

heute kommt mal wieder ein längeres Tutorial von mir, indem ich euch zeige, wie man allgemein Grafiken, die man irgendwo heruntergeladen hat, auf seinem Blog einbinden kann.

Weiterlesen »

[Freebie] Social Icon Set "Augustina"

Heute gibt es wieder ein Social Icon Pack für euch! Auf Facebook habe ich euch letzte Woche nach euren Wunschfarben gefragt und habe diese hier aufgegriffen. Diesmal habe ich ganz schön lange an den Sets gesessen und habe versucht, alle wichtigen Plattformen zu berücksichtigen.

Weiterlesen »

[Tipp] Shabby Blogs

Ich glaube, die meisten kennen Shabby Blogs. Ich kenne diese Seite schon ziemlich lange und fand sie als Bloggerneuling total toll. Vielleicht liest ja der eine oder andere Bloggeranfänger und kann mit diesen Tipp etwas anfangen :)

Weiterlesen »

[Freebie] Social Icon Set "Shabby Media"

Heute gibt es zwei kleine Freebie Sets mit Social Icons. Die Farben gefallen mir total und der Stil ist für die extravaganten unter euch ;). Die Icons sind in der Größe 48*48px.

Weiterlesen »

[Freebie] Social Icon Set "Smooth Colours"

Ich hatte mal wieder Lust, etwas zu basteln. Herausgekommen sind diesmal keine Bilder, sondern Socials Media Icons für euch! Sie beinhalten alles, was ein (deutscher) Blogger braucht:

Weiterlesen »

Datum unter Posttitel ♥

Heute zeige ich euch eine ganz simple Methode, wie ihr das Datum unter den Postitel und neben andere Punkte wie Autor, Kommentare und Labels bringt. Dafür braucht man nicht mal HTML-Grundwissen! Hier könnt ihr euch ein Beispiel ansehen.

Weiterlesen »

Wie erstelle ich ein Menü - Vertikales "Drop Down" (Teil 9)

Hallöchen, ich bin's wiedermal.
Diesmal mit einem neuen Menü. Im Gegensatz zu den letzten acht aber nicht gewohnt horizontal, sondern vertikal.

Weiterlesen »

Back to Top - Version 2 ♥♥

Hallo ihr Lieben,

willkommen zu einem neuen Post auf Copy Paste Love. Heute werde ich euch zeigen, wie man einen Back-to-Top Button zu seinem Blog einfügt. Es taucht erst auf, wenn man ein wenig gescrollt hat, hat einen schicken Hover-Effekt und scrollt sanft hoch. Der Code ist von Matt Varone, hier könnt ihr es euch anschauen. Dieses Tutorial wurde so geschrieben, dass ihr es in Blogger einfügen könnt.

Weiterlesen »

[Tipp] StyleVault

Wisst ihr, was für design-orientierte Menschen eine Todesfalle ist? Eine Seite, auf der die besten Webdesigner der Welt ihre Arbeiten zeigen und damit angeben. Wer was von sich hält, zeigt sein Werk auf StyleVault.

Weiterlesen »

[Tipp] Design Seeds

Eine wirklich interessante Seite ist Design Seeds. Für manche ist es vielleicht eine Seite mit Bildern und Farben, aber für andere ist es eine Inspiration. Ich stehe selbst oft vor dem Problem, dass ich ein Blogdesign farbig gestalten und nicht nur die Töne weiß & grau haben möchte. Natürlich ist weiß ideal, um Bilder in den Vordergrund zu stellen, schöner ist es aber doch, wenn man schöne, miteinander harmonierenden Farben nimmt, die den Bloginhalt untermalen (statt untergraben!).

Weiterlesen »

[Tipp] The Design Inspiration

Kennt ihr das auch? Euer Blogdesign geht euch auf die Nerven, alle Bilder, die ihr macht, sehen so unkreativ aus oder ihr möchtet eure ersten Visitenkarten gestalten und habt überhaupt keine Idee, wie ihr diese gestalten solltet? Dann kann The Design Inspiration euch weiterhelfen.

Weiterlesen »

Guide: Der erste Blog

Meinen ersten Blog fing ich wahrscheinlich vor 4 Jahren an. Damals war es eine gute Freundin, die mir ihren Blog zeigte. Sie war 14 und schrieb in Englisch so schöne, tiefgründige Texte über Dinge, die sie beschäftigte. Der Blog hatte zwar nur einen Standard-Template, doch damals hatte ich noch keinen Sinn für Designs und ich war sofort fasziniert.

Weiterlesen »

Header mit Mouseover ♥♥

Heute zeige ich euch, wie man einen Header hinkriegt wie hier: mit Mouseover.

So schwierig wie es aussieht ist es gar nicht, aber jeder Informatiker wird mit mir schimpfen, da es schon in die Kategorie "Bad Coding" (dt.: schlechtes Programmieren) fällt. Es geht auch richtig, dauert aber etwas länger und hat den gleichen Effekt. Also, Hauptsache es funktioniert, nicht?

Weiterlesen »

Design Makeover mit einfachen Hilfsmitteln (Photoshop)

Hi there, mein Name ist Nadine und ich blogge auf meinem Blog we were wasted regelmässig über Lifestyle-Themen, Fashion, Inspiration und vieles mehr. Heute aber gebe ich euch ein paar Tipps und Ratschläge rund um das Thema Post-Stil und Blogdesign.

Weiterlesen »