HTML: Einfache Image Gallerie für das Java/HTML Widget

Als ich mit dem Blog vor 2 Jahren anfing, war es einer meiner Ziele, die "Tools of Trades" des Internets zu lernen. Dazu gehört natürlich auch ein paar Grundkenntnisse von HTML. Daher wird das Motto meines heutigen Beitrags lauten: "Wie verschönere ich meinen Blog möglichst schmerzfrei mit geringen HTML Kenntnissen!"  Und ich bin sogar verführt, sozusagen eine kleine Reihe von Beiträgen daraus zu machen. Hmm, "Blogger Tips&Tricks"? Mal sehen... Wie der geneigte Leser vielleicht schon bemerkt hat, befindet sich auf der rechten Seite des Blogs eine neues kleines Gadget, mit dem ich ein paar meiner Lieblingsbeiträge mit Icons und Bilder verlinkt habe:

Shiny new toy!

Das Schöne daran ist, dass es wirklich einfach mit Blogger zu verwirklich ist, darum gleich mit einem Kopfsprung in die Materie. Und das ist der Löwenanteil an HTML Code, den Ihr dafür braucht:

<a href=""><img src="" width="" height="" title="" ></a>

Sieht nicht sehr beeindruckend aus, oder? So muss es sein, wir wiederholen das Mantra unseres kleinen Blogs: "Schmerzfrei und mit geringen Kenntnissen zu verwirklichen!".

<a href=""> die URL der Seite, auf die man kommt, wenn man auf das Bild klickt
<img src=""> die URL des Bildes oder Icons
<width="" height="" title=""> Breite und Höhe der Bilder, sowie der Titel des Bildes, der beim Mouse Over erscheint

Alle benötigten Daten fügt Ihr zwischen die Anführungsstrichen ein.

<a href="http://HIER-DIE-URL-DER-ZIELSEITE"><img src="https://lh3.googleusercontent.com/DEIN-JPG-BILD" width="80" height="80" title="Mein erster Beitrag im Blog!"></a>

Wenn Ihr also 4 Bilder habt, die Ihr verlinken wollt, wiederholt die erste Befehlszeile dementsprechend:

<a href=""><img src="" width="" height="" title="" ></a>
<a href=""><img src="" width="" height="" title="" ></a>
<a href=""><img src="" width="" height="" title="" ></a>
<a href=""><img src="" width="" height="" title="" ></a>

Nun, das sieht schon einmal ganz gut aus. Was fehlt ist lediglich ein kleiner Befehl: <div class="">.  Dieser definiert praktisch eine digitale Ramschkiste in eurem HTML Code, in dem alle Elemente wie Links, Bilder, Daten untergebracht sind, die für die Darstellung benötigt wird. Der Abschluss ist der Befehl </div>, damit auch klar ist, wo der Ramsch beginnt und aufhört. Zwischen die Anführungsstriche bei <div class=""> setzt Ihr einen sinnigen Namen ein und ich erwähne das nicht umsonst. Ich habe den Code in einem Online-HTML-Editor zusammengebastelt, in dem man auch gleich die Ergebnisse sieht. Passt, wunderbar und im Überschwang sofort CSS angefügt. Natürlich sah es sehr bescheiden aus und als ich es löschen wollte:  Ein länger existierenden Bug hat das Löschen über die CSS Funktion im Blogger verhindert. Ergo: Man muss im ganzen HTML Code des Blogs die betreffenden Befehlszeilen manuell suchen und löschen. 

 <div class="der-name-meiner-galerie">
<a href=""><img src="" width="" height="" title="" ></a>
<a href=""><img src="" width="" height="" title="" ></a>
<a href=""><img src="" width="" height="" title="" ></a>
<a href=""><img src="" width="" height="" title="" ></a>
</div>

Nun, nachdem dieser Code mit all den Links und Angaben der Daten gefüllt ist, einfach in das Layout gehen und dort über "Gadget hinzufügen" das HTML/JavaScript Gadget auswählen, der ganzen Sache eine Namen geben, speichern und das Experimentieren anfangen.

Je nachdem, wo ihr das HTML/JavaScript Gadget einfügt, erscheint die Liste mit den 4 Bilder waagrecht oder senkrecht.

Wir bauen eine Zweierreihe! CSS mit inbegriffen

---

Nun, bei mehr als 4 Bildern zieht unsere brandneue Image Gallery den Blog ganz schön in die Länge. Daher sagen wir unserem Blog via CSS (Cascading Style Sheets), dass diese in einer schönen Zweierreihe gelistet werden sollen:

.der-name-meiner-galerie { width: hier-steht-die-Zahl; }

Zwischen Doppelpunkt und Strichpunkt muss die Breite der ganzen Zweierreihe angegeben werden, wenn die Bilder 50px / 50px groß sind, dann sollte die Mindestweite 2x die Breite der Icons + 10 betragen.

.der-name-meiner-galerie { width: 110px; }

Im "Blogger --> Template --> Advance --> Add CSS" einfach den Code in die große Box kopieren und gut ist. Damit es nicht nur einfach eine Zweierreihe ist, sondern unregelmäßig und lebendiger aussieht, kann man mit verschiedenen Höhen und Weiten der einzelnen Icons experimentieren.

WICHTIG: Bevor ihr irgendwelche Änderung via CSS vornimmt oder im HTML eurer Seite wild Sachen ändert, speichert euer Template vom Blog und ladet es auf den Rechner runter! WICHTIG!

Das Speichern sinnreicher Sachzwänge...

Und da ich ein Spielkind bin, habe ich mir folgenden Code von irgendeiner Seite "gestohlen" und diesen auf meine eigenen Bedürfnisse angepasst. Das gleiche Prinzip: Wir geben zuerst den Namen der digitalen Ramschkiste an, und dann was damit passieren soll. "img:hover", wohin und wieviel es rotieren muss und wie durchsichtig es wird, wenn wir mit dem Mauszeiger darüber gehen:

.der-name-meiner-galerie img:hover {
  -webkit-transform: rotate(-5deg);
  -moz-transform: rotate(-5deg);
  -ms-transform: rotate(-5deg);
  transform: rotate(-5deg);
  opacity: .8;
 }

Wer sich tiefergehend damit beschäftigen will, hat mit dieser Seite einen guten Startpunkt:

Was mit gut an dieser Seite gefällt ist, dass eine Editor mit dabei ist, in dem man sich mit dem Code spielen kann und sofort in einem zweiten Fenster das Ergebnis sieht. Das wars. Bitte keine tiefergehenden Fragen, ich habe lediglich Halbwissen aufzuweisen :)