[Blogger Hilfe] Rezensionsübersicht (Sidebar Code)

Heute habe ich wieder ein kleines Tutorial für euch. Thema ist diesmal die Anzeige meiner letzten paar Rezensionen in der Sidebar.

Rezensionsanzeige

Im Grunde genommen ist meine Anzeige gar nicht so kompliziert. Ich will allerdings nicht ausschließen, dass es da von anderen (Buch-)Seiten oder Communities bereits vorgefertigte Gadgets gibt, wo man bequem Buchcover aus einem Katalog hinzufügen kann. Da kenne ich mich jedoch nicht aus und vor allem schätze ich die Designfreiheit, die ich mit einem eigenen Code habe.


1. Zunächst erstellt ihr ein neues HTML/JavaScript Gadget, dass ihr an der gewünschten Stelle positionieren könnt. (Könnt ihr *hier* auch genauer nachlesen)

2. Die Anzeige besteht im Prinzip nur aus einem sich wiederholendem Code-Teil, nämlich diesem hier:

<a href="Link zur Rezension" title="angezeigter Text"><img src="BildURL" style="border-radius:5px; height:125px; width:80px" /></a>


Erklärung Bild anzeigen:

Link zur Rezension: Da kommt euer Link rein, z.B. http://wort-gewalt.blogspot.de/2014/02/rezension-stephen-king-carrie.html

angezeigter Text: nach title könnt ihr einen Text hinzufügen, der angzeigt wird, wenn man mit der Maus über das Bild fährt. Kann besonders bei kleinen Bildern hilfreich sein. (Siehe Bild oben "Stephen King - Carrie"). Wollt ihr nichts anzeigen, könnt ihr title="angezeigter Text" komplett weglassen.


BildURL: nach img src steht eure Grafikadresse (Rechtsklick auf ein Bild -> Grafikadresse kopieren), z.B. in der Form http://2.bp.blogspot.com/-rqzYGLWfEh8/UwrtFAi7ZaI/AAAAAAAAEVc/3uS8ylaq4GU/s1600/king_Carrie.jpg

Erklärung Bilddesign:

Anschließend folgen Formatierungen für das Design.

border-radius:5px gibt an, dass die Ecken abgerundet sein sollen mit einem Radius von 5px. Wollt ihr nicht abrunden, lasst diesen Teil einfach weg.

Mit height:125px; width:80px könnt ihr die Bildgröße ändern, wie es euch passt. Einfach an den Zahlen ein bisschen rumprobieren. Im Prinzip könnt ihr auch alle Bilder mit einem Bildbearbeitungsprogramm auf eine gleiche Größe bringen. Da mir das aber zu doof ist, habe ich mich hier für eine Skalierung entschieden, mit der meine Bilder alle gleich groß dargestellt werden und sich an den originalen Seitenverhältnissen der meisten Bilder orientieren.


3. Bilder nebeneinander und untereinander anzeigen

um Bilder nebeneinander anzuzeigen, müsst ihr nur den obenstehenden Code aneinanderreihen. div align="center" zentriert den Code. Ohne diese Klammern werden die Bilder linksbündig angezeigt.


<div align="center">

<a href="Link zur Rezension" title="angezeigter Text"><img src="BildURL" style="border-radius:5px; height:125px; width:80px" /></a>

<a href="Link zur Rezension" title="angezeigter Text"><img src="BildURL" style="border-radius:5px; height:125px; width:80px" /></a>

<a href="Link zur Rezension" title="angezeigter Text"><img src="BildURL" style="border-radius:5px; height:125px; width:80px" /></a>

<a href="Link zur Rezension" title="angezeigter Text"><img src="BildURL" style="border-radius:5px; height:125px; width:80px" /></a>

</div>


Im Prinzip kann man hier einen einfachen Trick anwenden. Die Bilder werden automatisch umgebrochen (in einer neuen Zeile angezeigt), wenn mehrere Bilder breiter sind als die Gesamtbreite eurer Sidebar. Wenn z.B. eure Sidebar 100 px breit ist und ihr zwei Bilder nebeneinander anzeigen wollt, die je 60 px breit sind, geht das nicht. Weil 2 * 60 = 120 größer ist als 100, wird das zweite Bild automatisch in die nächste Zeile gerückt, da es schlichtweg keinen Platz hat. Allerdings kann es auch bei Bildern Problemen geben, die genau die Sidebarbreite erreichen. Z.B. genau 100 in unserem Beispiel, da oft automatisch ein kleiner Abstand zwischen die Bilder eingefügt wird, sodass man dann noch einen kleinen Aufschlag hat. (Die Sidebar-Breite könnt ihr nachschauen oder ändern, wenn ich auf dem Blogger-Dashboard euren Blog anklickt -> Vorlage -> Anpassen -> Breite anpassen -> rechte/linke Sidebar)


Einen Zeilenbruch erzwingen könnt ihr aber auch mit dem Befehl <br/>. <br/> könnt ihr nach dem Bild schreiben, nach dem eine neue Zeile angefangen werden soll. Wollt ihr im Beispiel oben z.B. immer zwei Bilder nebeneinader haben, müsstet ihr den br-Tag nach dem zweiten Bild-Code-Block (nur der kleine Teil von Punkt 2.) einfügen. Auch mit dieser Methode könnt ihr keine Bilder aneinanderreihen, die zusammen größer sind als die Sidebar!





Wenn noch Fragen offen sind, ab damit in die Kommentare ;)

Kommentare:

  1. Guten Morgen!
    Ich kenns zwar schon, aber super, dass du das so schön erklärst - man wird ja doch öfters mal wieder danach gefragt :)
    Den Code fürs zentrieren wusste ich jetzt so z. B. noch gar nicht ...

    Vielen Dank!
    Aleshanee

    AntwortenLöschen
  2. Hallo =)
    Das ist ja toll *.* ... Das werde ich mir später mal genauer anschauen. Sowas suche ich nämlich auch schon eine Weile =) Vielen Dank !!!
    LG Sunny

    AntwortenLöschen
  3. Vielen Dank für das Tutorial :) Ich habe so sehr darauf gewartet... Schön das du meinen Wunsch so schnell umsetzen konntest :) ... ich freue mich auf mehr
    GLG Nadine

    AntwortenLöschen
  4. danke für den tipp :) suche nach so einem tipp schon einige tage ^^ hehe

    lg july

    AntwortenLöschen
  5. Das finde ich toll =). Das werde ich auf jeden Fall mal ausprobieren!

    LG
    Anja

    AntwortenLöschen
  6. Interessanterweise hat das mir für meine Seitenleiste mehr geholfen als das Tutorial das extra dafür gemacht ist... aber danke, es ist wirklich hilfreich :)

    AntwortenLöschen
  7. Juhuuuuuu, da hat auch wundervoll funktioniert, vielen Dank :)

    AntwortenLöschen
  8. Nach so einem Tutorial habe ich gesucht.
    Und es hat wunderbar geklappt. Vielen dank, dass du es erklärst. ^^

    Grüße Lilly

    AntwortenLöschen
  9. Hy!

    Danke für diese Erklärung. Das werde ich mir mal genauer ansehen.

    lg backmausi81

    AntwortenLöschen

Kommentare sind erwünscht! :) aber bitte freundlich bleiben