[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:

http://tenzmeeloves.blogspot.de/2015/01/design-1-kostenloses-design-fur-euch.html

Und hier findet ihr weitere Layouts von uns:  http://tenzmeeloves.blogspot.de/search/label/Design

 

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 »

Automatisches "Weiterlesen"

Oder auch "Auto Read More". Im Internet gibt es viele englischsprachige Tutorials, wie man das auf seinem Blogger-Blog einbinden kann. Leider sehen die meisten dann so aus: Links klein ein Vorschaubild und rechts Text. Um die Bilder normal groß und den Text darunter zu haben, musste man bisher in allen Post manuell einen Jumplink setzen. Ich habe vor einiger Zeit herausgefunden, wie man das ganze automatisch machen kann, und nutze es schon eine Weile auf meinem Blog. Dafür habe ich den Code von BloggerSentral etwas umgeschrieben :)

Weiterlesen »

[Gastbeitrag] Guten Content schreiben: Diese drei Tools helfen dir dabei

Dieser hilfreiche Post ist von unserem Gastautor Daniela von bloggerabc. Auf ihrem Blog findet ihr noch mehr tolle Tipps für euren Blog!

Ein guter Blogtext braucht Zeit. Wenn ich einen Artikel schreibe, dann benötige ich je nach Thema
zwischen 2 und 5 Stunden. In dieser Zeit recherchiere ich die Inhalte, notiere die ersten Fakten und
Gedanken und schreibe die erste Beitragsversion vor. Anschließend überarbeite ich den Text. Wenn
ich noch Bilder verwenden will wie bei meinem Text über das Plugin SI CAPTCHA Anti-Spam, geht
dann noch Zeit für Photoshop drauf. Zuletzt muss ich mir noch ein Headerbild suchen, das zu meinem
Beitrag passt und es kurz bearbeiten.

Im besten Fall arbeite ich durch. Aber viel zu oft lasse ich mich ablenken. Mal kurz auf Facebook
klicken, was es da Neues gibt. Oder sich von einem Webartikel zum nächsten lenken lassen, weil man
das ja noch eben überfliegen kann. Dauert ja nicht lange. Von wegen. So sind aus 2 bis 5 Stunden
Arbeit evtl. auch mal zwei Tage geworden, weil ich nicht konsequent an meinem Artikel geschrieben
habe.

Tools strukturieren deinen Schreibfluss 

Glücklicherweise gibt es Tools, die genau an diesem Problem ansetzten. Sie helfen sowohl dabei, sich
beim Schreiben zu fokussieren, als auch die eigene Schreibarbeit besser zu strukturieren.  Für meine
Gedanken und Ideen für neue Blogbeiträge nutze ich die App und das Programm Evernote. Ich kann
sowohl von meinem iPhone, als auch von meinem Laptop darauf zugreifen. So habe ich jederzeit
meine Notizen dabei und kann problemlos weiterarbeiten.

Um meinen Schreibfluss besser zu kontrollieren, nutze ich die Tools Tomatoes und StayFocusd.
Tomatoes dient meinem Zeitmanagement. Hier sind die Zeitabschnitte in 25 Minuten unterteilt.
Nach dem Ablauf ertönt ein Ton, der mitteilt, dass die 25 Minuten Arbeitszeit vorbei sind. Mir selbst
hilft das Tool sehr, weil diese knappe halbe Stunde mir hilft, wirklich durchgängig zu schreiben.
Danach kann ich eine Pause machen, den Text in Ruhe lesen und erste Fehler korrigieren.
Anschließend geht es weiter bis ich den Artikel fertig habe.

StayFocusd hilft mir während des Arbeitsprozesses nicht zu surfen. Ich kann angeben, welche
Webseiten für mich geschlossen sind und welche nicht, wenn ich sie anwähle.
 

Zusätzlich kann ich den Zeitraum einstellen, wie lange die von mir festgelegten Seiten, wie
beispielsweise Facebook oder spiegel.de,  nicht geöffnet werden können. Somit komme ich gar nicht
erst in Versuchung mich abzulenken.

Erfolgreiche Contentarbeit braucht Disziplin

Disziplin bei der Blogarbeit gehört für mich zu den obersten Geboten. Gute Texte entstehen nicht
zwischen Tür und Angel, sondern benötigen Zeit. Dieser Zeitanspruch kann mit unter ermüdend sein.
Lass dich davon nicht unterkriegen. Ein guter Blog ist arbeitsintensiv und entsteht nicht über Nacht.
Von daher habe ich mit den drei Tools Evernote, Tomatoes und StayFocusd gute Erfahrungen
gemacht. Mir hilft es erfolgreich meine Contentarbeit zu organisieren, denn ich zwinge mich bewusst
dazu fokussiert zu arbeiten. Durch die Zeitfestlegung von 25 Minuten mit Tomatoes  und den von mir
gesperrten Webseiten habe ich gar keine andere Wahl als mich ausschließlich mit meinem
Blogbeitrag zu beschäftigen.

Ich hoffe, meine Erfahrungen helfen euch bei der Blogarbeit weiter und wünsche euch weiterhin viel
Erfolg.

Weiterlesen »

[Gastbeitrag] Know your Rights - Urheberrecht

Es gibt Leute, die sich ihren Unterhalt verdienen, indem sie Menschen, die ein Urheberrecht verletzt haben, anzeigen. Ob die Verletzung bewusst oder unbewusst begangen wurde ist dabei egal, wenn man Pech hat winken saftige Geldstrafen.

Hallo Copy Paste Love Leser, ich bin die Fly von Flügelfrei und ich darf heute einen Gastpost schreiben.
Wenn ein Blog langsam wächst und sich seine Reichweite vergrößert, ist das ist natürlich wunderbar, bringt aber auch Verantwortung mit sich, was den Inhalt des Blogs betrifft.

Seit es Flügelfrei gibt setzte ich mich mit dem Urheberrecht auseinander, ich habe mich durchs Internet gewühlt und mit Menschen gesprochen. Aber in Deutschland ist die Rechtslage verdammt verzwickt, es gibt viele Graubereiche. Es ist schwer die Sache auf den Punkt zu bringen, aber ignorieren ist auch keine Lösung. Bis ich zu dem gekommen bin was ich heute weiß ist eine Menge Zeit vergangen. Die Angaben sind ohne Gewähr und es kann natürlich Ausnahmen geben.

Bilder

• Bilder darf man öffentlich teilen, wenn man die ausdrückliche Befugnis dazu hat. Bei den meisten Bilder ist das nicht der Fall. Um Bilder, die man teilen darf, zu finden, kann man z.B. Google unter "Erweiterte Suche" so einstellen, dass nur lizenzfreie Bilder gezeigt werden, die ihr dann also alle verwenden dürft. Oder man sieht sich auf einer Seite die Bilder sammelt um wie z.B. pixelio.de. Oft sind einzelne Bilder auch mithilfe der Organisation Creative Commons Lizenz gekennzeichnet. Die Kennzeichnung sind schlichte Buttons hier findet ihr eine Übersicht.

• Wenn ihr die Bilder von Klamotten aus Onlineshops benutzen wollt, ist dies meist kein Problem, solange ihr die Shops auch verlinkt, am besten direkt auf dem Bild. Aber geht lieber auf Nummer sicher und fragt bei dem Shop nach, wenn ihr freundlich seid, könnte es passieren, dass ihr nicht nur das Recht bekommt, die Bilder zu nutzen, sondern gleich die Möglichkeit zu Kooperation.

• Eure eigenen Bilder dürft ihr natürlich veröffentlichen, aber Vorsicht bei Zeitschriften und Buchcovern, an denen habt ihr keinerlei Rechte und dürft sie deshalb auch nicht publizieren. Viele Verlage bieten aber auf ihren Internetseiten einen Download der Buchcover an, Bedingung: ihr müsst auf die Website des Verlages verweisen.

Musik

• Die Musik gehört dem Künstler, wenn sie also ohne seine Zustimmung auf Youtube gestellt wird ist das illegal und wenn ihr sie dann verlinkt ist auch das illegal. Auch wenn ihr ein Lied kauft ist das nur für den Privatgebrauch. Um Lieder teilen zu dürfen muss dieses für das jeweilige Lied entweder eindeutig erlaubt sein oder ihr müsst euch eine spezielle Erlaubnis holen, wie Clubs und DJs sie haben. 

Filmtrailer

• Ähnlich wie bei der Musik sieht es auch mit Trailer oder sogar ganzen Filmen aus. Klar würde ich mein Filmreview gerne mit einem Trailer untermalen, aber das Bildmaterial gehört mir nicht. Also entweder bei der Produktionsfirma nachfragen oder es sein lassen.

So fertig. Na was denkt ihr? Habt ihr euch bisher Gedanken über so was wie Urheberrecht gemacht? Wie handhabt ihr das auf euerm Blog? Ich würde mich über eure Meinung freuen und vielleicht sehen wir uns ja mal auf Flügelfrei.

Weiterlesen »

Google Analytics in Blogger einbinden

Was ist Google Analytics?

Viele Firmen legen Wert auf eine Angabe von Eindeutigen Besuchern. Was sind eindeutige Besucher? Das ist die genaue Anzahl an Besucher, dabei wird jeder Besucher gezählt. Das heißt, diese Zahl lässt sich nicht manipulieren, indem einer fünfzig mal am Tag auf euren Blog geht, denn dann wird es nur einmal gezählt.

Anders ist es bei dem Begriff "Seitenaufrufe", den ihr bei Statistiken im Dashboard aufrufen könnt; da werden die anderen 49 Aufrufe mitgezählt.

Weiterlesen »