Webdesign | Tutorial - Bücherwand aus Covern

by - Sonntag, September 13, 2015


Heute soll es darum gehen, wie ihr eine Bücherwand aus Covern erstellen könnt, auf denen ihr auch eure Rezensionen verlinken könnt. Beispiele dafür findet ihr auf meiner Unterseite Bücher & Filme oder rechts in der Seitenleiste.

1. Schritt


Klick im Menü auf Vorlage und dann HTML bearbeiten. Es öffnet sich ein Fenster mit viel Code.

2. Schritt

Falls du nicht weißt, wie man die Suchfunktion nutzt, kannst du das hier in einem meiner Posts unter der Überschrift Suchfuntkion nochmal nachlesen.

Suche nach der Codezeile
]]></b:skin>
Darüber (!), also vor dem "]]" fügst du nun folgenden Code ein:

/* Buchwand aus Covern von http://secrets-of-nobody.blogspot.de/ */
.containerBuch{
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
}

.containerBuch img {
  width: 132px;
  height: 210px;
  padding: 2px;
}
Nun könnt ihr den Code noch nach euren Wünschen anpassen. Was ihr dabei könnt ihr in .containerBuch img verändern:
  • width: die gewünschte Breite eurer Cover
  • height: die gewünschte Höhe eurer Cover
  • padding: der Abstand der Cover zueinander ist das doppelte davon
Vielleicht müsst ihr einfach ausprobieren, welche Größen am besten passen.

Klicke auf Vorlage speichern. Es sollte ungefähr so aussehen:



3. Schritt

Nun geht es an die eigentliche Seite, auf der ihr eure Buchwand haben wollt.
Dort fügt ihr folgenden Code ein:
<div class="containerBuch">

</div>
Zwischen die div-Klammern fügt ihr eure Bilder mithilfe von
<img src="LinkZumBild" />
ein, sodass es so aussieht:


Das könnt ihr mit so vielen Büchern machen wie ihr wollt. Die Bücher, die ihr am Anfang haben wollt, fügt ihr oben ein & die Bücher, die ihr am Ende haben wollt, unten. Ihr könnt aber auch mittendrin Bücher einfügen, was der riesige Vorteil gegenüber anderen Methoden ist. Die Bücherwand passt ihr Layout ganz einfach von selbst an und ihr könnt die neusten Rezensionen direkt oben einfügen und müsst nichts verschieben.

4. Schritt

Möchtet ihr nun auch noch eure Rezensionen verlinken, müsst ihr um euer Bild noch einen Link setzen. Das macht ihr wie folgt:
<a href="LinkZuMeinerRezension"><img src="LinkZumBild" /></a> 

Ergebnis

Das Ergebnis sollte dann ungefähr so aussehen:


Falls ihr noch weitere Fragen habt oder genauere Anleitungen für einzelne Schritte braucht, fragt einfach! Ich helfen gern :)

Ich hoffe, das Tutorial hilft euch. Falls ja, hinterlasst mir doch einfach ein Kommentar, ich würde mich freuen!

You May Also Like

10 Kommentare

  1. Super interessantes Tutorial :-)

    Love Minnja - minnja.de

    AntwortenLöschen
  2. Danke für deine lieben Kommentare! :)
    Ich kann leider noch gar nicht sagen, wann genau ich auf der Buchmesse sein werde. Ich war ja selbst auch noch nie auf einer Buchmesse, kann mir aber vorstellen, dass es am Wochenende um einiges stressiger sein wird, wenn auch Privatbesucher kommen weil dann sicher riesig viel los ist! Andererseits wäre es natürlich auch schön die Möglichkeit zu haben, die Bücher gleich kaufen zu können :D Ich muss mir auch nochmal die Termine der verschiedenen Vorträge anschauen und hauptsächlich mache ich es natürlich von der Übernachtungsmöglichkeit abhängig.
    An die Idee mit Hotels etwas außerhalb hab ich noch gar nicht gedacht - vielen Dank! :) Eventuell komme ich aber auch bei Freundesfreunden unter - na ja wie das immer so ist hihi! Hauptsache kein Vermögen ausgegeben als Student ;-)
    Wenn ich was Genaueres weiß, dann melde ich mich auf jeden Fall bei dir und dann können wir ja was ausmachen! :) Und so ein türkises Band besorge ich mir natürlich auch noch :D (hast du schon eins?)

    Die Idee mit der Coverwall finde ich ziemlich gut - wäre eine geniale Übersicht für meine bisherigen Rezensionen, aber damit muss ich mich dann mal beschäftigen, wenn ich wieder mehr Sinn für Codes habe - da bleibt nach ganz viel Masterarbeit leider nicht mehr so viel davon übrig :D Aber ist auf jeden Fall gebookmarked! :) Hihi

    AntwortenLöschen
    Antworten
    1. Hey! Klar ist es toll, gleich die Bücher kaufen zu können, aber das geht eh nur am Sonntag und dann wird es richtig voll sein und die meisten Aussteller sind schon müde und nicht mehr so gesprächsfreudig wie an den Fachbesuchertagen :)
      Genau, als Student muss man immer gucken, wo man bleibt :D Zur Not gibt es auch in Darmstadt noch eine Jugendherberge, bei sowas kann man auch mal gucken, allerdings kenne ich mich da nicht aus.
      Gerne, melde dich einfach, wenn du mehr weißt! Ich freue mich :D
      Die liebe Bianca wollte mir ein türkises Band zuschicken :)

      Liebe Grüße!

      Löschen
  3. Super Tutorial!
    Ich hatte auch schon mal einen Bücherblog und
    hätte diesen Post sehr hilfreich gefunden!
    Grüße, May von Mayanamo

    AntwortenLöschen
  4. Hey :)

    Wow, vielen Dank für das Skript :). Aber eine Frage hätte ich dazu: Wie weiß es denn die richtige Breite? Bricht es nach einer bestimmten Menge Covern in einer Zeile automatisch um? Ich frage mal deswegen, da ich oft nur zwei oder drei Bücher nebeneinander hinstelle :).

    Liebe Grüße
    Ascari

    AntwortenLöschen
    Antworten
    1. Hey! Bitteschön :)
      Ganz einfach: ausprobieren :D Ja, der Umbruch erfolgt ganz automatisch und das nächste Bild rutscht in die nächste Zeile, sobald nicht mehr genug Platz ist. . Ich würde mit der Breite der Bücher und den Abständen also einfach etwas rumspielen (oder Rechnen, wenn du das lieber magst :D) bis es passt und es dir gefällt.

      Der automatische Umbruch ist für manche ein Vorteil und für andere ein Nachteil, aber es ist ganz einfach, wenn du nur zwei Bücher nebeneinander stellen möchtest: Mach den 3. Schritt für jede Zeile separat, sodass nur diese Bücher, die nebeneinander stehen sollen, in den div-Klammern enthalten sind.

      Ich hoffe, ich konnte dir helfen!
      Liebe Grüße



      Liebe Grüße :)

      Löschen
  5. Hey,
    ich würde das auch gerne auf meinem Blog einbauen, aber leider habe ich "]]>" nicht als Codzeile. Was machen ich da jetzt? :)

    AntwortenLöschen
    Antworten
    1. Hey, füge den Abschnitt einfach über --> < / style > (ohne die Leerzeichen) statt über ]] >< / b : skin > ein und es funktioniert genauso :)

      Löschen

Hey! Hinterlasse mir doch ein Kommentar :)