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 "Read More"



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

Dieses Tutorial funktioniert am besten mit der Minima-Vorlage. Schreibt es, falls es nicht so sein sollte. :)

Wie funktioniert's?

1. Javascript einfügen.
Um das ganze möglich zu machen, brauchen wir Javascript. Geht auf eurem Dashboard zu Vorlage und öffnet dort das HTML. Sucht dort nach </head> und fügt darüber folgenden Javascript-Code ein:
<!-- Auto read more script Start -->
<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot;; //yes -mit Vorschaubild, no -ohne Vorschaubild
summary_noimg = 630; //Anzahl der Buchstaben im Vorschau ohne Bild
summary_img = 310; //Anzahl der Buchstaben im Vorschau mit Bild
img_thumb_width = 100;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
 if(strx.indexOf("<")!=-1)
 {
  var s = strx.split("<");
  for(var i=0;i<s.length;i++){
   if(s[i].indexOf(">")!=-1){
    s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
   }
  }
  strx =  s.join("");
 }
 chop = (chop < strx.length-1) ? chop : strx.length-2;
 while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
 strx = strx.substring(0,chop-1);
 return strx+'...';
}
function createSummaryAndThumb(pID){
 var div = document.getElementById(pID);
 var imgtag = "";
 var img = div.getElementsByTagName("img");
 var summ = summary_noimg;
        if(thumbnail_mode == "yes") {
 if(img.length>=1) {
   imgtag = '<span style="padding:0px 10px 5px 0px;margin:0 1em;"><img src="'+img[0].src+'" width="'+img_thumb_width+'%" /></span>';
  summ = summary_img;
 }
 }
 var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
 div.innerHTML = summary;
}
//]]>
</script>
<!-- Auto read more script End -->
Die markierten Zeilen könnt ihr im Nachhinein ändern. In der Erklärung steht, was diese Werte machen.

2. Im HTML abändern
Jetzt müssen wir im HTML noch etwas ändern, damit der Code oben etwas bewirken kann. Dafür sucht ihr "post-body entry-content" und beim zweiten Ergebnis solltet ihr eine Zeile darunter folgendes finden:

(Die Zahlen links und die erste Zeile können je nach Vorlage variieren.)

Ersetzt <data:post.body/> mit:
<!-- Auto read more Start -->
<!-- http://www.BloggerSentral.com -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<a class='more' expr:href='data:post.url'>Weiterlesen &#187;</a>
</b:if>
</b:if>
<!-- Auto read more End -->

3. Speichern und Blog neu laden. Und das war es auch schon. Am besten sieht das übrigens aus, wenn ihr die Bilder mindestens mit der gleichen Breite wie der Postbereich hochladet. Ich hoffe, dieses Tutorial kann euch helfen :)

Gutes Gelingen!

Ähnliche Posts


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

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 »

Individualität in Massen?

 


Heute lasse ich dem bitterbösen Sarkasmus, der gemeinen Ironie und den unnötigen Verallgemeinerungen mal freien Lauf - denn ich kann einfach nicht mehr.

Ich ertrage nicht mehr, dass selbsternannte Modegöttinnen jede Kombination aus Stiefeln & Rock nach sich selbst benennen.

Weiterlesen »

Datum aufspalten & gestalten ♥♥♥♥♥



***UPDATE***
Bitte beachtet die Änderungen, ich habe den ganzen Teil ab CSS angepasst!


Also, ich bin Myri und mittlerweile kennt ihr mich vielleicht, ich bin die, die immer wieder die Tutorials schreibt, die Leute zur Verzweiflung bringen... aber ich helf auch ganz gern bei Problemem aus ^^
In diesem Tutorial geht es darum das Datum spannender zu gestalten.
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 »

"Abonnieren Posts (Atom)" entfernen ♥



Hallo ihr Lieben :) Hier ist nach langer Zeit wieder Neele von vanillebrause.

Heute möchte ich euch zeigen, wie man den nervigen Schriftzug / Link "Abonnieren Posts (Atom)" unter eurem Blog entfernen kann. Das wurde schon mehrfach angefragt und ich finde auch, dass der Link nicht wirklich nützlich ist. Auf dem folgenden Foto seht ihr, was ich meine...

Weiterlesen »

[LinkWithin] "Das könnte Sie auch interessieren" einrichten ♥


Viele Blogs, die vor allem informativ bloggen (über neueste Trends, Beauty-Artikel etc.), also weniger persönliches zeigen, benutzen Link Within.
Link Within ist ein Widget, dass man auf dieser Seite erstellen kann. Sie hängen am Ende jedes Postes und zeigen weitere, ähnliche Posts, die ihr schon einmal veröffentlicht hat.
Weiterlesen »

Schriftart bei Posttitel ändern ♥♥♥♥



Hallo, meine Lieben und willkommen zu unserem ersten Tutorial.
Dies ist ein Relaunch (immer diese Anglizismen :D) unseres ersten Tutorials. Hier fehlten ziemlich lange zum 2. Mal die Bilder, weshalb ich dieses Tutorial überarbeitet und auf den neusten Stand gebracht habe.
Wir zeigen euch heute, wie Blogspot-Blogger und Bloggerinnen eine andere Schriftart beim Posttitel einbinden können, die man unter Vorlagendesigner nicht findet.


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 »

Beautiful Blog #5


Darf ich vorstellen? Das ist Lena und sie ist 18 Jahre alt. Auf ihrem Blog "dream the life away" zeigt sie ihre Bilder, die sie in ihrer Freizeit macht. Was mir besonders gut gefällt ist die Farbgebung von den Bildern, unten seht ihr meine Favoriten :)

Weiterlesen »

{Minima Basics #1} Breite und Größe anpassen


Heute zeige ich euch den ersten Teil der Minima-Basic-Tutorials. In diesem Tutorial wird nichts Blogger-spezifisches gezeigt, sondern nur, wie man mit CSS die Breite der Layout-Container an seine eigenen Wünsche anpasst.

Ein ähnliches Tutorial existiert schon, behandelt aber weit aus mehr als nur die Breite von Minima. Wer mit der Simple-Version arbeitet, kann die ältere Version bei Gelegenheit ja mal ausprobieren - ich bin mir nämlich nicht mehr sicher, ob sie noch funktioniert.

Weiterlesen »

Eine neue Minima-Vorlage: Re-Minima


Ich hoffe, ihr seid gut ins neue Jahr gestartet! Über das Wochenende habe ich an einer neuen Minima-Vorlage gearbeitet bzw. die alte aktualisiert. Leider funktionieren die Originale nicht mehr, die ich hier zum Download bereitgestellt habe. Da so gut wie alle Tutorials auf Copy Paste Love und viele andere im Internet darauf aufbauen, habe ich für euch meine Version parat:
Weiterlesen »

SEO 1mal1

Hallo ihr Lieben,
mein Name ist Suey von kinda-bookish.de und ich will euch heute einen Einblick in ein etwas trockeneres Thema geben: SEO! Oder auch länger Search Engine Optimization. 

Weiterlesen »
 
Lass dir dein Blogdesign von mir gestalten!