Seiten

20.02.2015

Tutorial: Letzte Rezensionen Widget


Hallo ihr Lieben, 

heute gibt es mein erstes Tutorial für euch! Des Öfteren werde ich gefragt, wie ich dies oder jenes gemacht habe. Selbstverständlich antworte ich auf solche E-Mail stets, jedoch dachte ich mir irgendwann, dass ich die Antworten doch für alle meine Leser bereitstellen könnte. 
Die meisten Tutorials, die ich in der nächsten Zeit so machen werde, sind eher Basics, also nichts schweres. Jeder sollte das schaffen können - viele haben es ja sogar schon auf ihren Blogs! Also keine Angst, das schaffen auch die, die sonst mit HTML-Codes nicht so viel am Hut haben ;)
Heute wende ich mich dem Letzte Rezensionen Widget zu!


Ich entschuldige mich jetzt schon einmal dafür, dass ich es vielleicht etwas zu genau erkläre. Ich halte euch nicht für doof, nur möchte ich von vornherein schon allerlei Missverständnisse oder Unklarheiten aus dem Weg räumen! Deshalb ist alles so ausführlich. Das, was ihr schon wisst, könnt ihr ja einfach überspringen!
Das Widget soll am Ende ungefähr so aussehen: 
Als reihen wir im Grunde nur ein paar Cover aneinander. Wie das geht, erkläre ich euch jetzt.

Der Code wird am Ende so aussehen (den könnt ihr euch am Ende auch aus dieser Box herauskopieren!):



Okay, betrachten wir den Code jetzt einmal Schritt für Schritt, damit ihr auch versteht, was da steht:

<center>
<a href="LINK DER REZENSION" target="_blank"><img height="93" src="BILD-URL" title="TITEL & AUTOR" width="58" / /></a> <a href="LINK DER REZENSION" target="_blank"><img height="93" src="BILD-URL" title="TITEL & AUTOR" width="58" / /></a> <a href="LINK DER REZENSION" target="_blank"><img height="93" src="BILD-URL" title="TITEL & AUTOR" width="58" / /></a> <a href="LINK DER REZENSION" target="_blank"><img height="93" src="BILD-URL" title="TITEL & AUTOR" width="58" / /></a> <a href="LINK DER REZENSION" target="_blank"><img height="93" src="BILD-URL" title="TITEL & AUTOR" width="58" / /></a>  <a href="LINK DER REZENSION" target="_blank"><img height="93" src="BILD-URL" title="TITEL & AUTOR" width="58" / /></a> <a href="LINK DER REZENSION" target="_blank"><img height="93" src="BILD-URL" title="TITEL & AUTOR" width="58" / /></a> <a href="LINK DER REZENSION" target="_blank"><img height="93" src="BILD-URL" title="TITEL & AUTOR" width="58" / /></a></center>

<center> und </center> ist dafür, dass die Bilder am Ende auch schön mittig angezeigt werden. 

<a href="LINK DER REZENSION"><img height="93" src="BILD-URL" title="TITEL & AUTOR" width="58" / /></a> 
Ein solcher Code steht für ein Buchcover am Ende. 

Bei <a href="LINK DER REZENSION"> fügt ihr bei dem grün geschriebenen Text den Link eurer Rezension ein. Achtete dabei darauf, dass die Anführungsstriche auch da bleiben, sonst fünktioniert der Code nicht.

img height="93" und width="58" geben die Größe eures Buchcovers an. Wenn ihr sie größer oder kleiner haben wollt, gebe ich euch den Tipp, bei Firefox (und das geht meines Wissens nur bei Firefox!) das Widget zu öffnen, auf das Cover zu klicken und dann es größer oder kleiner zu ziehen. Wenn man versucht, die Zahlen zu ändern, muss man ein bisschen rechnen, damit die Proportionen am Ende noch stimmen.

Bei src="BILD-URL" fügt ihr, wie es ja schon dasteht, die Bild-URL des Covers ein. Die findet ihr, wenn ihr z.B. bei eurer Rezension auf das Cover mit der rechten Maustaste klickt und dann kommt als etwas weiter unten als Auswahlmöglichkeit "Bild-URL kopieren". Da klickt ihr dann drauf und fügt sie anschließend im Code ein. Auch hier ist es wichtig, dass die Anführungsstriche stehen bleiben.

title="TITEL & AUTOR" fügst du einen beliebigen Text ein. Mein Vorschlag ist es nur, da z.B. den Buchtitel und den Namen des Autors einzufügen. Der Text erscheint dann, wenn du mit der Maus über das Cover fährst. Anführungsstriche auch hier bitte stehen lassen.

Falls ihr wollt, dass eure Rezension in einem neuen Tab geöffnet wird, lasst ihr diesen Code hier einfach stehen: target="_blank"
Falls ihr aber wollt, dass die Rezension auf der selben Seite geöffnet wird, auf der sich der Besucher gerade befindet (und so halte ich das auch), könnt ihr diesen Teil einfach herauslöschen!

Ihr müsst natürlich nicht genau acht Cover für eurer Widget verwenden. Wenn ihr weniger möchtet, löscht einfach einen solchen Code heraus, der für ein Cover steht. Wenn ihr mehr Buchcover anzeigen lassen möchtet, dann fügt genau solch einen noch mal hinzu. 

Den Code kann man übrigens nicht nur für dieses Widget benutzen. Auch bei "Ich lese gerade" (s. oben recht bei meinem Blog) oder wenn ihr in einem Post von euch mal einige Buchcover nebeneinander aufreihen wollt, funktioniert er super. HIER findet ihr ein Beispiel für solch einen Post!

Am Ende stellst sich natürlich noch die Frage, wo dieser HTML-Code nun eingefügt werden soll. Klickt bei eurem Blog (wenn ihr auf der Übersichtsseite seid, wo euch Seitenaufrufe, Kommentare etc. angezeigt werden) auf Layout, dann auf Gadget hinzufügen. Bei dem Fenster, das sich dann öffnet, scrollt ihr so weit runter, bis ihr folgende Option findet:
Dort klickt ihr dann drauf und fügt euren Code ein!


Ich hoffe, euch hat dieses Tutorial gefallen und dass ihr verstanden habt, was ich euch erklären wollte! Wenn ihr weitere Fragen dazu haben solltet, scheut euch nicht, diese in den Kommentaren zu fragen, Auch wenn bei euch mit dem Code etwas nicht hinhauen sollte, meldet euch einfach! Bei weiteren Fragen (selbstverständlich auch über dieses Tutorial hinaus!) stehe ich per Mail immer für euch zur Verfügung: emotional.books.blog@gmail.com

Wollt ihr in Zukunft mehr von solchen Tutorials? Wenn ja, gibt es irgendetwas, dass ihr gerne von mir erklärt haben wollt? Schreibt es doch einfach in die Kommentare, damit ich bescheid weiß!

Bis Bald
eure Maura ♥

Kommentare:

  1. Maura du bist ein Schatz! Wenn ich das mal so sagen darf :D :)
    Vor zwei Tagen erst habe ich nämlich genau das probiert und es alleine nicht hinbekommen. Da kommt dein Tutorial genau richtig :) und ich werde es gleich mal ausprobieren. Also vielen vielen Dank dafür! Und natürlich bin ich voll dafür, dass in Zukunft noch mehr solcher Tutorials kommen, finde das immer sehr hilfreich :)

    Liebste Grüße
    Juliana

    AntwortenLöschen
    Antworten
    1. Oh! Dankeschön!! ♥
      Dann kommt das Tutorial ja genau zur richtigen Zeit! :)
      Gern geschehen! Berichtest du mir dann, ob alles funktioniert hat?

      Löschen
  2. Oh, das Tutorial ist klasse! Ich werde es heute Abend mal ausprobieren! Für mich, die kein HTML beherrscht, ist das einfach genial. So kann ich vielleicht das ein oder andere einfügen, ohne mich abmühen zu müssen oder herumzufragen - ich fühle mich dann immer so doof, wenn ich etwas in die Richtung frage, weil ich es nicht weiss.
    Danke für das Tutorial :) Ich werde dich wissen lassen, ob es geklappt hat :)

    AntwortenLöschen
    Antworten
    1. Vielen Dank! ♥
      Dann hoffe ich das alles funktioniert! :D
      Ach, was, da muss man sich doch nicht doof vorkommen! Jeder fängt doch irgendwann mal von ganz von vorne an! Auch ich kenne mich auch nur ganz wenig mit HTML aus, gerade so viel, dass es für meinen Blog reicht. Also falls du Fragen haben solltest, scheue nicht, sie mir zu stellen. Gerne auch per Mail falls du es in den Kommentaren nicht machen wollten solltest!

      Löschen
    2. Hallo Maura :)

      Wenn ich in Zukunft Fragen habe, werde ich mich gerne an dich wenden :) Im Moment ist aber alles geklärt - und deine Anleitung hat super geklappt! Wieder etwas gelernt :)

      Liebe Grüsse
      Sabrina

      Löschen
  3. Tolle Idee! Ich frag ich auch oft bei manchen Tools, wie man die hinbekommt :D ;) Da ist so ein Tutorial einfach perfekt! Danke :)

    Liebe Grüße
    Doris

    AntwortenLöschen
    Antworten
    1. Das freut mich, dass das Tutorial hilfreich ist! Dann werden wohl mehr solcher in Zukunft entstehen ;)

      Löschen
  4. Danke, danke für das geile Tutorial :)
    Ich habe es geliebt und es war echt einfach :)
    Habe es schon mit einem anderen probiert, aber das hat i-wie nicht geklappt...
    Jetzt sieht alles super aus :)
    Und habe mir gleich von deiner Seite die Höhe und Breite für 5 nebeneinander geklaut :)

    Vielen lieben Dank :*

    Liebste Grüße Sine

    AntwortenLöschen
    Antworten
    1. Gern geschehen! :)
      Das freut mich zu hören, dass alles so leicht geklappt hat! Und das macht mich gerade auch ein wenig stolz, da es ja mein erstes Tutorial war und ich sowas vorher noch nie gemacht habe...

      Löschen
  5. Ich finds echt toll, wie du dir die Mühe machst, das Widget verständlich und nachvollziehbar zu beschreiben und zu erläutern. Meine Sidebar ist schon ziemlich voll, da wird es wohl bei "Popular Posts" mit den letzten Beiträgen bleiben ;P Aber für viele ist das sicherlich mehr als nur hilfreich!

    Liebe Grüße,
    Tina

    AntwortenLöschen
    Antworten
    1. Dankeschön! ♥
      Das hoffe ich wirklich sehr, dass es anderen helfen wird! :D

      Löschen
  6. Hey wow, danke. Jetzt wisst ihr alle, was ihr gleich auf meinem Blog finden werdet :D
    Liebst, Lara.

    AntwortenLöschen
    Antworten
    1. Haha, cool, dann hoffe ich, dass alles klappt so wie es soll ;)

      Löschen
  7. Aww, wie cool, das probier ich sicher mal aus, wenn ich wieder mehr Zeit hab! Gleich mal abgespeichert. :D Danke für deine Mühe! :)

    AntwortenLöschen
    Antworten
    1. Dann geb mir bescheid, wenn du es gemacht hast & ob es funktioniert hat!
      Ja, klar, gerne! :D

      Löschen
  8. ich finde es voll gut, dass du das so ausführlich gestaltest ;D

    bei manchen, die auch diese Tutorials anbieten, komme ich überhaupt nicht klar. Danke dir :D

    LG Mandy

    AntwortenLöschen
    Antworten
    1. Dankeschön!! &hearts:
      Ja, mir war es wichtig, dass es gut verständlich ist und ich bin froh, dass es mir auch so gelungen ist :D

      Löschen
  9. Hey,
    oh Gott ich danke dir ... Danke, Danke, Danke!!!
    Ich könnte heulen, ich kann gar nicht sagen wie lange ich danach gesucht habe ich bin fast wahnsinnig geworden. Tausend Dank.

    Ich hab es erst mal auf meinem Testblog umgesetzt und siehe da es klappt einfach wie am Schnürchen. Meine Frage ist, da ich nicht so eine breite rechte Gadget Leiste haben möchte, wie kann ich anstatt 4 Bilder nebeneinander z.B. nur 2 oder 3 und dann in der nächsten Reihe weitere 2-3 Bilder.
    Habe es mit einem Enter probiert aber das funzt nicht richtig. Ich wäre dir so dankbar wenn du mir das noch verraten könntest?

    Ganz liebe Grüße,
    Jenni

    AntwortenLöschen
    Antworten
    1. Das freut mich, dass ich dir weiterhelfen konnte!
      Also du kannst nach der jeweiligen Anzahl der Bilder ein Absatz setzen: <.br. /.>
      Der Code ist übrigens ohne die Punkte, jedoch würde er hier sonst nicht angezeigt werden das
      , was wieder zusammensteht. Hoffe, du verstehst, was ich meine. Damit sollte die Bilder in eine nächste Reihe herunterrutschen. Wenn du insgesamt weniger Bilder haben möchtest, dann löscht du einfach einen Code heraus ;)
      Aber eigentlich sollten sich die Bilder automatisch in eine nächste Reihe verschieben... Weiß nicht, warum es bei dir nicht funktioniert...

      Löschen
    2. Noch zu dem Absatz-Code (da hat irgendwas gerade nicht hingehört): das < und das br stehen zusammen, danach kommt ein Leerzeichen, danach ein /, und abschließend wieder ein >
      Alles eben ohne diese Punkte ;)

      Löschen
  10. Hi :)
    Ich hab schon sehr lange nach einem Tutorial dafür gesucht und bin fast schon verzweifel. haha
    Vielen Dank! Du hast das echt super erklärt. :D

    Liebe Grüße, Mell

    AntwortenLöschen
  11. Da stoße ich zufällig durch den Cover-Monday auf deinen Blog und entdecke dieses tolle Tutorial. Das werde ich demnächst gleich mal ausprobieren. Vielen Dank für deine Mühe, das hier einzustellen :)
    Einen schönen Montag
    Janine

    AntwortenLöschen
  12. Vielen lieben Dank für dieses supertolle Tutorial, damit hab ich auch das endlich verstanden und auf meine Seite einbauen können! ;)

    LG, Silke

    AntwortenLöschen
  13. Tolles Tutorial! Hat alles auf Anhieb geklappt und ich konnte endlich das Widget in mein Blog einbauen! ^^

    Ich würde mich über noch mehr Tutorials freuen!

    Liebe Grüße Sandra

    AntwortenLöschen
  14. Hallo Maura,
    vielen Dank für das tolle Tutorial. Das werde ich nachher direkt mal ausprobieren.
    Auch ich würde mich sehr über weitere Tutorials freuen! Da würde mich vor allem interessieren, wie man diese "Follow Me" (Instagram, Twitter, LB, GR etc.) Widget hinbekommt.

    Ganz liebe Grüße,
    Sandy von Sandy's Welt

    AntwortenLöschen
  15. Ich möchte Dir von Herzen für dieses tolle Tutorial danken. Du hast es super erklärt und so konnte ich meinen lang gehegten Wunsch meiner Reziliste umsetzen.

    1000 DANK

    ♥liche Grüße - Lenchen vom Testereiwahnsinn

    AntwortenLöschen

 
Design by Mira Dilemma.