Auf Wunsch habe ich ein zweites Responsives Design gebastelt. Ich hatte nicht viel Zeit dafür, aber ich hoffe, es gefällt euch auch. :)
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. :)
[Gastbeitrag] No Copycats
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
[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
Und hier findet ihr weitere Layouts von uns: http://tenzmeeloves.blogspot.de/search/label/Design
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.
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 :)
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 :)
[Gastbeitrag] Guten Content schreiben: Diese drei Tools helfen dir dabei
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.
Abonnieren
Posts (Atom)
