Posts mit dem Label ♥♥♥ werden angezeigt. Alle Posts anzeigen
Posts mit dem Label ♥♥♥ werden angezeigt. Alle Posts anzeigen

Kommentare auftrennen ♥♥♥



Hey ihr Lieben,
Leider hat Laura, die ursprünglich diesen Post geschrieben hat, ihr Blog und somit auch die Bilder von hier gelöscht. Da das Tutorial somit unbrauchbar wurde, kommt heute mein Update. Der Code ist anders, da die ursprüngliche Version ohne Bilder unverständlich war. Ich zeige euch, wie man die Kommentaranzahl und den Kommentarlink auseinander bekommt.

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 »

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 »

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 »

Wie erstelle ich ein Menu: Responsives 1-Level-Menu (Teil 10) ♥♥♥

Hallo zusammen :)
Hier ist mal wieder Myri und ich möchte euch heute ein einfaches responsives Menü vorstellen. Und damit ihr sehen könnt, wie das Ergebnis aussieht, habe ich ein klitzekleines (tonloses) Video für euch, was euch das Ergebnis gleich mal demonstriert.



Weiterlesen »

Kommentare als Bubbles anzeigen ♥♥♥♥

Hallo :D
Hier ist mal wieder Myri, frisch aus dem KreaTief, mit einem neuen Tutorial im Gepäck.
Ich hab ja vor einer Weile hier auf CPL ein Tutorial zur Datumsanzeige geschrieben (hier) und wurde dort auch immer wieder mal gefragt, wie ich denn die Kommentaranzeige mit den Bubbles gemacht habe, die man auf meinem Vorschaubild sehen konnte.

Weiterlesen »

Templates Schreiben ♥♥♥♥♥



Hallo zusammen
Vielleicht erinnert sich noch wer an mich, ich bin Myri, die mit dem Datum im Kreis :D
Heute machen wir aber mehr als nur das. Heute schreiben wir ein Template "from scratch" wie man so schön sagt. Wir schreiben das ganze Markup selbst und fügen dann nur noch ein paar Gadgets ein.
Ich hab vor einer Weile auf meinem eigenen Blog ein Tutorial geschrieben, wie ein responsives Template entsteht (hier). Da dieses Tutorial allerdings extrem ausführlich ist, dachte ich, ich schreibe noch eine etwas "kürzere" Version und lege das Tutorial nicht nur darauf aus, dass es responsiv wird. Ich möchte euch viel eher zeigen, wie man beim Schreiben eines eigenen Templates so vorgeht. Am einfachsten funktioniert das meistens mit einem Beispiel, also habe ich für euch den Prozess meines neusten Templates dokumentiert.
Die responsiven Sachen habe ich besonders gekennzeichnet.

Weiterlesen »

Zeile unter Posttitel stylen ♥♥♥



Hallo Ihr Lieben,

dieser Post zeigt euch, wie ihr die Zeile unter eurem Posttitel verschönern und anpassen könnt. Wer wissen will, wie das Datum da hin kommt, sollte sich diesen Post "Datum unter Posttitel" mal durchlesen.

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 »

Eine Startseite für den Blog ♥♥♥♥


Im heutigen Sonntagstutorial wollte ich euch Möglichkeiten vorstellen, wie man eine Startseite für Blogger einstellen kann. Eine Startseite ist eine statische Seite ohne Posts und mit einem Willkommenstext o.ä.
Weiterlesen »

Schlichtes Design erstellen (Version 2) ♥♥♥

Das Design ist von Mira erstellt und zeigt nur, wie das Endergebnis dieses Tutorials aussehen könnte.
Hallo liebe Leser von CPL, ich bin die Lara, Bloggerin von My heart feels. Ich erstelle gerne und öfter Designs und nun werde ich immer mehr gefragt, ob ich nicht mal ein Tutorial schreiben kann, bezüglich HTML. Um genau zu sein versuche ich Euch heute zu erklären, wie man selbst und leicht ein einfaches Design erstellen kann.
Vorab: Im HTML Fenster könnt Ihr nach Begriffen suchen indem Ihr auf STRG und F drückt.


Weiterlesen »

Portraitretusche in Photoshop: Frequenztrennung ♥♥♥♥♥



Hallo zusammen!
Hier möchte ich eine Technik vorstellen, die ich selbst erst neu entdeckt habe. Es geht um die Frequenztrennung.

Vorweg: Ich habe dieses Tutorial mit Absicht mit fünf Herzen, also höchster Schwierigkeitsstufe, ausgezeichnet, da es hier Vorwissen zu Photoshop bedarf. Frequenztrennung ist auch nur eine Technik, was ihr draus macht, ist eure Sache. Es ist kein eigenständiges Tutorial zu Portraitretusche.

Weiterlesen »

Sidebar gestalten mit Minima: Teil 1 - Sidebartitel ♥♥♥♥


Heute fange ich eine kleine Serie an, indem ich erkläre, wie man die Sidebar gestaltet. Im ersten Teil geht es darum, wie man die Titel ändert. Dieses Tutorial ist nach der Minima Vorlage ausgerichtet. Bevor ihr euch die Minima Vorlage hochlädt, speichert euren jetzigen Design sicherheitshalber ab!
Weiterlesen »

Postabstand verändern (mit Chrome Dev Tools) ♥♥♥♥


Heute gibt es ein komplizierteres Tutorial, wobei ich euch schon jetzt sagen kann: Es ist nicht so schwer wie es aussieht und wenn ihr alles Schritt für Schritt nachmacht, ist liegt Wahrscheinlichkeit, dass ihr Erfolg habt, bei neunundachtzigkommaperiodesiebenprozent!
Weiterlesen »

Weiterlesen im Magazine-Look ♥♥♥♥


Heute zeige ich euch, wie man wie bei uns den Post als Vorschau im Magazine-Look anzeigen lassen kann. Es sieht auf informativen Blogs sehr schick aus, lädt nicht zu viel Text & Bilder und ist deswegen auch schneller zum laden. Wir haben vor längerer Zeit gezeigt, wie man mit Blogger die "Weiterlesen"-Funktion einstellt (zum Tutorial) und das hier ist sozusagen die Erweiterung. Aber worin unterscheiden sich die zwei Arten?

Weiterlesen »

Wie erstelle ich ein Menü (Teil 6) ♥♥♥♥


Es gibt viele verschiedene Wege ein Menü zu erstellen und ebenso viele verschiedene Arten es zu gestalten. Eine eigentlich relativ einfache Art werde ich euch im Folgenden zeigen.Wie das ganze fertig aussieht könnt ihr euch auf meinem Blog anschauen.

Weiterlesen »

WIE ERSTELLE ICH EIN MENÜ (TEIL 4) ♥♥♥♥


Das letzte Mal haben wir euch gezeigt, wie man ein Menü wie im Bild erstellt. Nun zeige ich euch, wie man so etwas gestaltet. Falls ihr allgemein googeln wollt, wie man dies und jenes gestaltet, benutzt am besten den  Begriff "Style", denn so nennt man das unter den Fachmenschen.

Weiterlesen »

analoge Schwarzweißbilder simulieren (Photoshop) ♥♥♥♥



Hi zusammen!

Letztens haben wir gelernt, wie man einfache SW-Bilder in Photoscape ein wenig "aufpeppt".
Mit Photoshop haben wir noch viel viel mehr Möglichkeiten, und einen kleinen Weg zeige ich euch heute.

Weiterlesen »

Bokeh-Pinsel erstellen in Photoshop ♥♥♥♥


Hallöchen!

Heute erkläre ich euch, wie ihr in Photoshop* eine eigene Pinselvorgabe für Bokeh zaubern könnt.
*(ich nutze CS3 und kann leider nicht bei anderen Photoshopversionen helfen, falls die Bezeichnungen anders sind)

Dazu erstellen wir eine neue Datei mit den Abmessungen 900px x 900px. Nun fügt ihr eine neue Ebene hinzu (rechts unten im Bild), zieht einen Kreis mit dem Auswahlwerkzeug (links oben) und füllt ihn schwarz (links).



Mit einem Doppelklick auf unsere neue Ebene  können wir verschiedene Ebenenstile verändern. Hier nehmen wir folgende Einstellungen vor:







Nun bestätigen wir mit "Ok" :)

Damit wir diesen Kreis nun auch als Pinsel verwenden können, speichern wir ihn mit
Bearbeiten → Pinselvorgabe festlegen..
ab.



Und was nun? Fertig?
Ja, aber ich zeige euch noch, wie man diesen Pinsel nun anwendet.

Dafür brauchen wir ein Bild, auf dem wir unser Bokeh anwenden wollen.
Ich habe mir dafür ein nettes Katzenbild von Flickr gesucht, welches ich benutzen darf.


Wir öffnen nun also unser Bild in Photoshop, (ich habs noch gerade gerichtet ;) ) und legen wieder eine neue Ebene an. Außerdem wählen wir das Pinselwerkzeug und unseren neuen Bokehpinsel. Als Farbe wählen wie weiß.



Je nach Bildgröße verändern wir nun unsere Pinselgröße - bei mir passen 300px ziemlich gut. Die Deckkraft wird runtergesetzt und als nächstes klicken wir auf das Symbol rechts, um den Pinsel weiter anzupassen.



Hier öffnet sich ein Fenster und wir nehmen folgenden Einstellungen vor:







Als nächstes malen wir fröhlich auf unserem Bild rum! Ach halt nein, natürlich auf der neuen Ebene, die wir vorhin angelegt haben :) 



Das ist schonmal nicht schlecht, aber es geht besser. Mit einem Doppelklick auf die Ebene kommen wir wieder zu deren Einstellungen:





Fertig! Dies ist unser Ergebnis:



Natürlich ist es keinesfalls ein natürlicher Effekt, ich persönlich bevorzuge auch eher "echte" Bokehkreise. Aber man kann schön damit rumspielen :)

Grüße,
Jenny
Weiterlesen »

Schwebende Social-Media Buttons ♥♥♥♥


Hi zusammen :)

Ich habe jetzt schon mehrmals die Frage erhalten, wie ich denn die schwebenden Buttons auf meinem Blog gemacht habe.
Heute möchte ich euch das erklären :)

Man kann die fertigen Buttons runterladen oder selbstmachen, dafür habe ich die Schriftart JustVector runtergeladen und installiert. Hier eine Übersicht über alle Logos in dieser Schrift:



Fertige Buttons findet man überall im Web, hier ein netter Link:

JustVector beinhaltet leider kein Symbol für 500px, aber da gibts auch Abhilfe: 500px - Icons for Social Media

Soweit so gut, als erstes erstelle ich die einzelnen Bilder in meinem Bildbearbeitungsprogramm in einer Größe von 40x40px. Natürlich ist es egal, welche Größe eure Buttons haben, aber ihr müsst die Größe wissen :)



Wer möchte, erstellt alle Buttons nochmal in einer anderen Farbe:



Die sind dazu da, dass sich die Farbe der Buttons verändert, wenn man mit der Maus darüber geht. Daraus resultiert aber auch mein langer komplizierter selbstgebastelter Code - Anfänger wollen sich also vielleicht erstmal an der einfachen, einfarbigen Variante probieren ;)

Zuerst müssen alle einzelnen Buttons irgendwo hochgeladen werden, damit wir sie verlinken können. Am besten erstellt man dort auch einen Account, damit man immer auf die Bilder zugreifen kann. Ich kenne da tinypic und photobucket, aber ihr kennt bestimmt noch mehr :)
Nachdem wir nun alle Bilder hochgeladen haben, erstellen wir ein neues Widget "Html/Java" und fangen an zu coden ;)

Variante I : einfarbige Buttons
Unser Code besteht aus 2 Teilen: Dem css / style - Abschnitt und dem html - Abschnitt. Komplett sieht der Code für 7 Buttons wie folgt aus:

<style>
#floatbubble {position:fixed; left: 10px; bottom: 30px; width:40px; z-index:999;}
#floatbubble a {display:block; width:40px; height:40px; background-position: center; background-repeat: no-repeat; white-space: nowrap;}

#facebook a:link {background-image:url(LINK ZUM BILD); }
#px a:link {background-image:url(LINK ZUM BILD); }
#flickr a:link {background-image:url(LINK ZUM BILD); }
#da a:link {background-image:url(LINK ZUM BILD); }
#vimeo a:link {background-image:url(LINK ZUM BILD); }
#formspring a:link {background-image:url(LINK ZUM BILD); }
#rss a:link {background-image:url(LINK ZUM BILD); }
</style>

<div id='floatbubble'>
<div id='facebook'><a href="LINK" target="_blank"></a></div>
<div id='px'><a href="LINK" target="_blank"></a></div>
<div id='flickr'><a href="LINK" target="_blank"></a></div>
<div id='da'><a href="LINK" target="_blank"></a></div>
<div id='vimeo'><a href="LINK" target="_blank"></a></div>
<div id='formspring'><a href="LINK" target="_blank"></a></div>
<div id='rss'><a href="LINK" target="_blank"></a></div>
</div>

Wer jetzt absolut keine Ahnung von html/css hat, wird kaum etwas verstehen. Ich kann leider auch nicht auf alles eingehen. In den oberen beiden Absätzen, die durch <style> und </style> abgesetzt werden, wird das Design des ganzen definiert.
#floatbubble ist der "Container", der die ganzen Buttons beinhaltet und ist an der linken Seite fixiert, mit einem Abstand von 10px nach links und 40px nach unten. Das könnt ihr natürlich nach Belieben ändern. width richtet sich nach der Breite eurer Buttons.
#floatbubble a beschreibt die Links, die im Container floatbubble sind. Hierbei muss die Breite und Höhe der Buttons angegeben werden, damit dieser Platz für sie "reserviert" wird.
An den Stellen LINK ZUM BILD müsst ihr nun die Links einsetzen, die ihr von eurem Bildhoster bekommt. Anstatt dem blauen LINK kommt hier euer "Ziel" hin, also z.B. eure Homepage, euer Flickr-Account, etc. pp :)
target="_blank" ist übrigens sehr praktisch: Somit werden die Links in einem neuen Tab geöffnet, und euer Blog bleibt immernoch zu sehen :)

Variante II : farbwechselnde Buttons
Soo, dann widmen wir uns nun dem etwas komplizierterem und mehr zusammengebasteltem Teil zu :)
Wir erweitern den Code um folgende Zeilen:

Innerhalb von <style> und </style>:
#facebook a:hover {background-image:url(LINK ZUM ANDEREN BILD); }
#px a:hover {background-image:url(LINK ZUM ANDEREN BILD); }
#flickr a:hover {background-image:url(LINK ZUM ANDEREN BILD); }
#da a:hover {background-image:url(LINK ZUM ANDEREN BILD); }
#vimeo a:hover {background-image:url(LINK ZUM ANDEREN BILD); }
#formspring a:hover {background-image:url(LINK ZUM ANDEREN BILD); }
#rss a:hover {background-image:url(LINK ZUM ANDEREN BILD); }

Anstatt von LINK ZUM ANDEREN BILD fügen wir hier nun eben die Bilderlinks mit den anderen Farben ein :)

Probiert man das ganze nun aus, kann es sein, dass es ziemlich lange dauert, bis das Hover-Bild erscheint und in der Zwischenzeit kein Button zu sehen ist. Das ist natürlich nicht toll, und hier kommt meine Bastellösung. Ganz am Ende fügen wir (nicht im style-Bereich) folgenden Abschnitt ein:

<img src="LINK ZUM ANDEREN BILD" style="visibility:hidden" />
<img src="LINK ZUM ANDEREN BILD" style="visibility:hidden" />
<img src="LINK ZUM ANDEREN BILD" style="visibility:hidden" />
<img src="LINK ZUM ANDEREN BILD" style="visibility:hidden" />
<img src="LINK ZUM ANDEREN BILD" style="visibility:hidden" />
<img src="LINK ZUM ANDEREN BILD" style="visibility:hidden" />
<img src="LINK ZUM ANDEREN BILD" style="visibility:hidden" />

Auf diese Weise werden alle Bilder schonmal "vorgeladen", aber durch visibility:hidden komplett unsichtbar gehalten.

Dann wünsche ich euch mal viel Spaß beim nachbasteln :)

Grüße,
Jennifer
Weiterlesen »
 
Lass dir dein Blogdesign von mir gestalten!