Template für Blogger

Ich habe für euch ein altes Design aktualisiert!

Der Header sollte 1000px breit sein, Höhe ist egal. Punkte im Menü könnt ihr unter "Seiten" einfügen. Das Menü hängt über dem Header und nimmt etwa 35px des unteren Randes "weg". Schrift, Farben und Hintergrund sind natürlich frei veränderbar, erfordert aber ein paar CSS-Skills und/oder ein paar Tutorials von Copy Paste Love. Widgets dürft ihr natürlich auch hinzufügen oder löschen! Ansonsten bitte ich euch, unseren Copyright nicht zu entfernen.

Weiterlesen »

Kommentare auftrennen

Hey ihr Lieben,

Ich zeige euch, wie man die Kommentaranzahl und den Kommentarlink getrennt anzeigen lassen kann. Besonders schön sieht das aus, wenn unter den Postfooter nicht viel steht und die einfache Kommentaranzeige unterhalb des Posts optisch schnell verloren geht.

Weiterlesen »

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. :)

Weiterlesen »

[Gastbeitrag] No Copycats

Hallo, ich bin Tenzi von Tenzmeeloves.

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

Weiterlesen »

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