Übersichtlicher Rezensionsindex [Tutorial]

18. August 2014 | 67 Kommentare

Index Beispiel

Dieser Code basiert auf einem Tutorial von It's Time to Steal Ideas und der Idee von einigen Bloggern. Ich selbst habe solche Basteleien immer bestaunt und so soll diese Möglichkeit auch niemandem vorenthalten werden! Falls ihr das Tutorial nutzt, gebt mir doch bitte eine kleine Reaktion, wenn ihr Fragen/Wünsche habt, schrrreibts in die Kommentare. Lest vor der Anwendung bitte erst den ganzen Post!
Achtung - Schwierigkeitsgrad: Aufwändig und nicht ganz einfach! (Aufgrund von Zeitgründen gestalte ich keine individuellen Codes mehr auf Anfrage.)

Speichert am besten vorher nochmal alles, was speichern geht, wie man das ja immer machen soll ;) Also unter VorlageBackup/Wiederherstellung (rechts oben) → Vollständige Vorlage herunterladen. Dann geht ihr von eurem Blogger-Dashboard zu eurer Rezensionsseite (oder legt eine neue Seite an) und klickt euch in den HTML-Modus. Alle bestehenden Rezensionslinks kopiert ihr einfach in Word oder eine andere temporäre Ablage rüber, damit sie nicht verloren gehen, und fügt stattdessen den folgenden Code ein. 
<style>
/* Wechselseiten ----------------------------------------------- */ 
ultab { 
display: block; 


tab { 
background: transparent; 
padding: 3px 5px 3px 5px; 


a.tab:link, a.tab:visited { 
font: normal 12px Georgia; // Schriftgröße, -art

</style>


<script type="text/javascript">
function wechselDich(nummer) {
 var anzahl = 27;
 for(i = 1; i <= anzahl; i++) document.getElementById('kasten' + i).style.display = "none";
 document.getElementById('kasten' + nummer).style.display = "block";
}
</script>


<center>
<ultab>
<tab><a class="tab" href="javascript:wechselDich('1')">#</a></tab>
<tab><a class="tab" href="javascript:wechselDich('2')">A</a></tab>
<tab><a class="tab" href="javascript:wechselDich('3')">B</a></tab>
<tab><a class="tab" href="javascript:wechselDich('4')">C</a></tab>
<tab><a class="tab" href="javascript:wechselDich('5')">D</a></tab>
<tab><a class="tab" href="javascript:wechselDich('6')">E</a></tab>
<tab><a class="tab" href="javascript:wechselDich('7')">F</a></tab>
<tab><a class="tab" href="javascript:wechselDich('8')">G</a></tab>
<tab><a class="tab" href="javascript:wechselDich('9')">H</a></tab>
<tab><a class="tab" href="javascript:wechselDich('10')">I</a></tab>
<tab><a class="tab" href="javascript:wechselDich('11')">J</a></tab>
<tab><a class="tab" href="javascript:wechselDich('12')">K</a></tab>
<tab><a class="tab" href="javascript:wechselDich('13')">L</a></tab>
<tab><a class="tab" href="javascript:wechselDich('14')">M</a></tab>
<tab><a class="tab" href="javascript:wechselDich('15')">N</a></tab>
<tab><a class="tab" href="javascript:wechselDich('16')">O</a></tab>
<tab><a class="tab" href="javascript:wechselDich('17')">P</a></tab>
<tab><a class="tab" href="javascript:wechselDich('18')">Q</a></tab>
<tab><a class="tab" href="javascript:wechselDich('19')">R</a></tab>
<tab><a class="tab" href="javascript:wechselDich('20')">S</a></tab>
<tab><a class="tab" href="javascript:wechselDich('21')">T</a></tab>
<tab><a class="tab" href="javascript:wechselDich('22')">U</a></tab>
<tab><a class="tab" href="javascript:wechselDich('23')">V</a></tab>
<tab><a class="tab" href="javascript:wechselDich('24')">W</a></tab>
<tab><a class="tab" href="javascript:wechselDich('25')">X</a></tab>
<tab><a class="tab" href="javascript:wechselDich('26')">Y</a></tab>
<tab><a class="tab" href="javascript:wechselDich('27')">Z</a></tab>
</ultab>
</center>
<div id="kasten1" style="display: block;">
<br /> 
Alle Rezensionen
</div>
<div id="kasten2" style="display: none;">
<br />
Rezensionen mit A
</div>
<div id="kasten3" style="display: none;">
<br />
Rezensionen mit B
</div>
<div id="kasten4" style="display: none;">
<br />
Rezensionen mit C
</div>
<div id="kasten5" style="display: none;">
<br />
Rezensionen mit D
</div>
<div id="kasten6" style="display: none;">
<br />
Rezensionen mit E
</div>
<div id="kasten7" style="display: none;">
<br />
Rezensionen mit F
</div>
<div id="kasten8" style="display: none;">
<br />
Rezensionen mit G
</div>
<div id="kasten9" style="display: none;">
<br />
Rezensionen mit H
</div>
<div id="kasten10" style="display: none;">
<br />
Rezensionen mit I
</div>
<div id="kasten11" style="display: none;">
<br />
Rezensionen mit J
</div>
<div id="kasten12" style="display: none;">
<br />
Rezensionen mit K
</div>
<div id="kasten13" style="display: none;">
<br />
Rezensionen mit L
</div>
<div id="kasten14" style="display: none;">
<br />
Rezensionen mit M
</div>
<div id="kasten15" style="display: none;">
<br />
Rezensionen mit N
</div>
<div id="kasten16" style="display: none;">
<br />
Rezensionen mit O
</div>
<div id="kasten17" style="display: none;">
<br />
Rezensionen mit P
</div>
<div id="kasten18" style="display: none;">
<br />
Rezensionen mit Q
</div>
<div id="kasten19" style="display: none;">
<br />
Rezensionen mit R
</div>
<div id="kasten20" style="display: none;">
<br />
Rezensionen mit S
</div>
<div id="kasten21" style="display: none;">
<br />
Rezensionen mit T
</div>
<div id="kasten22" style="display: none;">
<br />
Rezensionen mit U
</div>
<div id="kasten23" style="display: none;">
<br />
Rezensionen mit V
</div>
<div id="kasten24" style="display: none;">
<br />
Rezensionen mit W
</div>
<div id="kasten25" style="display: none;">
<br />
Rezensionen mit X
</div>
<div id="kasten26" style="display: none;">
<br />
Rezensionen mit Y
</div>
<div id="kasten27" style="display: none;">
<br />
Rezensionen mit Z
</div>
Diesen Code fügt ihr also im HTML-Modus dort ein, wo später der Index sein soll. Ein paar Tags habe ich farbig unterlegt, nur damit ihr den Aufbau ein wenig versteht. Alles, was annähernd wichtig für euch ist, ist fett unterlegt und das, was ihr anpassen müsst, erkläre ich euch jetzt. :) Der Code schaut im ersten Moment sehr lang aus, weil man einfach jeden Buchstaben einzeln definieren muss. Mehr ist es nicht, und abändern muss man auch nicht so viel. Die wirkliche Arbeit ist das Einfügen aller Rezensionen, aber das ist höchstens eintönig.

Jetzt fügen wir erst mal die Rezensionslinks wieder hinzu! Das Alle Rezensionen im Code könnt ihr löschen und fügt stattdessen alle eure Rezensionslinks (egal ob Text oder Bilder) in ihrer HTML-Form ein. Ja, das schaut wahrscheinlich ziemlich chaotisch aus! Das gehört so ^^ Unten ein Beispiel, wie es ca. aussehen könnte (zuerst mit Textlinks, dann mit Bildlinks).
Weiter gehts dann mit den einzelnen Buchstaben. Alle Rezensionen mit A, B, C ... werden genauso eingefügt, bis ihr alle Buchstaben durch habt. Jeder Rezensionslink befindet sich jetzt zweimal im Code (einmal bei allen Rezensionen und einmal beim spezifischen Buchstaben)! Wollt ihr das Ergebnis nicht zentriert, sondern linksbündig haben, löscht das <center> und </center> im Code raus.





Alles klar? Dann musst du ja nur noch die restlichen Buchstaben durcharbeiten und dann bist du fertig. Beispiele sind im Spoilerparadies und bei mir zu sehen - am Schluss müsstet ihr so einen Index wie ich haben, ohne Kästchen. Die sind zwar eine schicke Spielerei, haben aber später bei mir nicht mehr geklappt, deshalb will ich unter euch keinen Blödsinn verbreiten. Wer es trotzdem ausprobieren will, kann ja nach dem zusätzlichen Code fragen!
Achtung! Wenn du mit der Zeit immer neue Rezensionen hinzufügst, musst du den Link wieder zweimal reinkopieren (einmal bei allen, einmal beim Buchstaben).

Euch fällt ein Fehler auf? Bitte meldet es mir! Ansonsten gutes Gelingen.

67 Kommentare

  1. Das ist ja fantastisch! :D
    Das muss ich (meine HTML Expertin xD) mal ausprobieren! :)
    Danke für das Tutorial!^^
    LG Jan

    AntwortenLöschen
    Antworten
    1. Ja, das kann schon echt praktisch sein, vor allem, wenn man schon viele Rezensionen geschrieben hat und da leichter was finden möchte :)

      Löschen
  2. Hallo Sandra,
    das schaut echt toll aus und vielen lieben Dank für den Tipp.
    Aber ich glaube nicht, dass ich mich da drüber traue ...
    Lg, Nicole

    AntwortenLöschen
    Antworten
    1. Du kannst es ja auf einem Testblog probieren, wenn dir mal fad ist ;)

      Löschen
    2. Stimmt, so einen habe ich sogar. ;-)

      Löschen
  3. Oh meine Güte, du liebe Sandra! Ich bin hin und weg - sieht das fantastisch aus! Ich und Amina sind uns am Streiten, wie wir das Ganze machen solle, und du lieferst uns SCHWUPPS-DI-WUPPS die per-fek-te Idee! Das sieht hammertoll aus und scheint ganz machbar zu sein, ein kleines bisschen kenne ich mich mit HTML schon aus... ;D Ich habe den Code noch nicht 'durchgelesen' - ist das CSS zum Stylen dieser Buchstabenkästchen wie bei SPOILERPARADIES schon dabei, oder sieht es schlussendlich wie bei dir, bei PUSTEBLUME aus? :D

    Danke nochmals ganz ganz ganz herzlich für deine supertollen Geburtstagswünsche, ich bin wirklich 14 geworden und ein Päckchen beinhaltete IM FREIEN FALL... Nach deiner tollen Rezi freue ich mich nur noch mehr darauf!

    Also, ich geh das mal auf unserem hauseigenen Testblog ausprobieren und melde mich, falls ich eine Frage habe, ja? ;)

    Alles Liebe,
    Mara <3

    AntwortenLöschen
    Antworten
    1. Haha, wie ich mich über deinen Kommentar freue :') So wie im Tutorial ist es dann wie auf diesem Blog, ohne Rahmen/Kästchen. Aber den Code dazu hast du ja jetzt eh auch :)

      Im freien Fall ist so ein schönes Buch ... ich hoffe, es gefällt dir :D Gerne!

      Alles Liebe!

      Löschen
  4. Sandy, tut mir Leid, dass ich als "Testperson" gescheitert bin. v.v Jedenfalls sieht das Produkt echt klasse aus. Die HTML-Queen ist wieder mal voll in ihrem Element. 8D

    Falls ich wieder mit dem Bloggen beginne, wird das umgesetzt. (Oh Gott, ich hab immer noch Gewissensbisse wegen dem Tutorial. ._.) Und Memento ist ja auch ne Dystopie, oder? Vielleicht könnte ich es noch gegen Ende der Fertigung meiner VWA lesen und auch noch einbauen, höhö.

    AntwortenLöschen
    Antworten
    1. Ach, du hattest ja selbst danach gefragt :) Ann, Jessi und Hanna, die ich vorher gefragt hatte, waren dann alle im Urlaub D: ... Aber ist ja nicht schlimm, klappt ja sowieso ^^ "8D" haha.

      Jaaa, ist es! Und zwar SOOO eine gute! Alle Bücher die ich sehr sehr sehr gut finde findest du zwar nicht so gut haha, aber das Buch ist wirklich verdammt lesenswert und für mich die Verkörperung einer Dystopie!

      Löschen
    2. Ach so, ich hab mich so angesprochen gefühlt und dachte, ich müsste auch Bescheid sagen, obs funktioniert xD Ich glaub ja das Buch ist voll nach meinem Geschmack! Übrigens was laberst du? Ashes fand ich zB super :)

      Löschen
  5. Das sieht ja klasse aus! Gibt es auch irgendwie, irgendwo eien Anleitung für dieses Suchfeld wie bei Spoilerparadies?

    Liebe Grüße
    Babs

    AntwortenLöschen
    Antworten
    1. Da verweise ich mal auf hier http://www.copypastelove.de/2013/08/simple-suchfunktion.html bzw hier http://wonderful-ne-books.blogspot.ch/2014/06/tutorial-schicke-suchleiste.html :)

      Löschen
    2. Ah danke, und wie bekommt man es hin, das das Suchfeld nur in den Rezensionen sucht?

      Löschen
  6. Hah, danke :D Ist ja richtg praktisch ^^ !

    Liebe Grüße :)

    AntwortenLöschen
  7. Also ich finds ja wirklich klasse, aber mit über 200 Rezensionen eintragen... Puh... Bin mir auch nicht sicher, obs dann noch sooo übersichtlich ist. Im Moment kann man immerhin mit strg + F nach dem exakten Titel suchen, so muss man alle Bilder durchschauen. Ich lasse es mir noch einmal durch den Kopf gehen ;)

    AntwortenLöschen
    Antworten
    1. Ja, das muss man halt abwägen. Für mich ist es nicht schlimm, weil ich wenig Rezensionen schreibe. Im Spoilerparadies habe ich gleich darunter noch ein Suchfeld gepackt, falls man direkt etwas sucht. Aber man muss ja auch gar nicht Bilder nehmen - das ganze funktioniert ja auch ganz normal mit Textlinks ^^

      Löschen
    2. Ahhh, das wäre eine hervorragende Idee! Also wenn ich die Muße habe mit dem ewigen eintragen und auch irgendwie das mit dem Code hinbekomme... Ich probiers mal :D Zeit hab ich genug gerade^^ Danke dir für den Tipp mit den reinen Textlinks!

      Löschen
    3. Mein Bloglayout hasst mich -.- Hab dir eben eine E-Mail dazu geschrieben.

      Löschen
  8. Wow, Kompliment, ich finde, das sieht wirklich toll aus, aber für mich ist das Chinesisch.
    Habs gerade mal probiert und irgendwie ... naja, ich schiebs darauf, dass ich wordpress nutze, dass es nicht klappt XD

    AntwortenLöschen
    Antworten
    1. Oh, von Wordpress hab ich leider keinen blassen Dunst! Keine Ahnung, ob es dort funktionieren könnte :/ Wahrscheinlich schon, HTML ist ja normalerweise mit allem kompatibel ...

      Löschen
  9. Hallo Sandra,
    Danke für das schöne Tutorial und ich hab es auch direkt umgesetzt. Bei 57 Rezensionen ist so eine Idee goldwert!
    Nochmal ein ganz dickes Danke! Mach weiter so.

    Liebe Grüße
    Sonst stille Leserin Grinse

    AntwortenLöschen
    Antworten
    1. Deine Rückmeldung freut mich sehr! Danke für deinen Kommentar! :)

      Löschen
  10. Hei Sandra,

    vielen lieben Dank für deine tollen Tutorials - das hier ist schon das zweite, das ich umgesetzt habe - und eine Suchfunktion werde ich bei meiner Rezensionsseite ( http://dhiammara.blogspot.de/p/rezensionen.html falls du schauen magst :) ) auch noch einbauen.

    vielen lieben Dank für deine tollen, einfachen Erklärungen.

    Ganz liebe Grüße,
    Michelle

    AntwortenLöschen
  11. Oh Sandra ich könnte dich abknutschen! Ich habe schon die ganze Zeit versucht so etwas zu zaubern und bin immer kläglich gescheitert. Habe alles schon mal auf meinem Blog installiert und es noch ein bisschen auf mich angepasst und bin grade dabei alle Rezis zu übertragen. Zum Glück hatte ich alle schon mit HTML-Codes im Bildformat, was das ganze jetzt ein bisschen einfacher macht.

    Danke für den tollen Code! :)

    xoxo
    Jule von Miss Foxy reads

    AntwortenLöschen
    Antworten
    1. Haha, das hört man doch gern! Ich freu mich, dass ich dir so helfen konnte!

      Löschen
  12. Hm... Die Idee ist nicht schlecht, aber ich mag meine ganz schnöde Liste auch sehr gerne.. :) sonst mache ich alles mit Goodreads-Widgets (SUB, Wunschliste, Tauschbücher...) weil es super einfach ist und eigetnlich nie etwas hinzufügen muss! :D
    Ich habe auch schon überlegt, eine Liste mit Covern zu machen. Aber bei 260 Rezensionen ist das einfach zu viel.. :/

    Liebe Grüße
    Tabea
    Im Kopf eines Bookaholic

    AntwortenLöschen
    Antworten
    1. Ja, bei so vielen Rezensionen sind das wohl keine rosigen Aussichten :O Zum Glück bin ich schon relativ früh auf Bilder umgestiegen. Aber Text hat ja auch seine Vorteile, da findet man zum Beispiel den Titel oder den Autor leichter.

      Löschen
    2. 260 Rezensionen, Heilige Mutter Maria O.O

      Löschen
  13. Du verdammter, kleiner Genius, ich habe schon Wochenlang nachgedacht wie man das richtig hinbekommt und hier ist die Lösung :D Sieht voll easy peasy aus, das Tutorial das ich vorher hatte war extrem kompliziert aber das da oben ist ja echt einfach :D
    Dankedanke :) ♥

    AntwortenLöschen
    Antworten
    1. Haha, ist ja nicht so dass ich das selbst von einem Tutorial hab! Trotzdem gerne ^^

      Löschen
  14. Du hast mich verdammt glücklich gemacht! Ich suche schon ewig nach einer Möglichkeit meine Rezensionen genau so übersichtlich zu gestalten und dann kommst du mit diesem grandiosen Tutorial daher. :D ♥ Ich habe es sogleich ausprobiert und auch noch ein bisschen was geändert. Es hat mich meinen gesamten Sonntag gekostet meine gesamten (200) Rezensionen zu übertragen mit allem pipapo, aber es hat sich gelohnt. Es schaut jetzt wirklich sehr toll aus und ich bin echt dankbar, dass du diesen Post hier geschrieben hast.
    Danke!!! ☺
    GlG
    Kitty ♥

    AntwortenLöschen
    Antworten
    1. Das ist aber lieb von dir, danke! :) ♥ Es freut mich, dass du so glücklich damit bist!

      Löschen
  15. Hallo Sandra,

    vielen, vielen lieben Dank für dieses Tutorial ♥ Damit hast Du mich jetzt richtig angesteckt und ich arbeite grad daran, das auf meinem Blog zu installieren, was echt viel Arbeit macht, aber es lohnt sich wirklich total. Ich liebe es ja, wenn alles so schön geordnet ist ;) Also ein ganz dickes Dankeschön, dass Du Dein Wissen mit uns teilst :)

    Liebe Grüße,
    Moni

    AntwortenLöschen
  16. Vielen vielen Dank für das Tutorial. Ich habe das direkt auf meine Seite (http://zauberhaftebuecherwelt.blogspot.de/ ) eingebaut, weil ich das soo super fand. Ich hoffe das ist in Ordnung :)
    Liebe Grüße

    AntwortenLöschen
  17. Ohh das ist genial! ...und klingt schrecklich kompliziert x'D
    Jetzt werde ich es erstmal 3857648756-Mal durchlesen und probieren.
    Vielen Dank, dass du es als Toturial gemacht hast.
    Viele liebe Grüße
    Meike ^-^

    AntwortenLöschen
  18. Hallo :) Danke für das Tutorial, ich hab den Index/das Index (?) schon länger auf meinem Blog, habe allerdings ein Problem damit.
    Wenn ich alles einmal durchgeklickt habe (http://l0ve-life.blogspot.de/p/rezensionen-nach-bewertung.html), dann tauchen auf einmal entweder alle/die falschen/zu wenig Rezensionen in den passenden Kategorien auf. Ich kann dir gerne den Code einmal schicken - es wäre super, wenn du eine Ahnung hättest, wie das kommt ;)

    LG, Vivi

    AntwortenLöschen
    Antworten
    1. Zuerst hab ich nicht verstanden was du meinst, aber dann ... :D Also ja, das ist komisch. Du kannst mir ja den ganzen Code an sandrapusteblume@gmail.com schicken und ich kann versuchen, mir das mal anzugucken. Im Dezember hab ich leider noch ziemlich viel in der Schule zu tun, aber in den Ferien finde ich sicher Zeit.

      Löschen
  19. Hallo Sandra,
    Ich habe immer die Blogs Bewundert die sich die müßige Arbeit machen.
    Als ich nach etwas zu Tutorial gesucht habe bin ich auf deinen Blog gestoben „huhu“. „Wow“ ein Klick und du bringst mir die Lösung, ich war so überwältigt endlich ein Tutorial gefunden zu heben über so eine Rezension Übersieht. Und hab es gleich Mal ausprobiert.
    Nun ist bei mir das mit den Rezensionlinks misslungen bei meinen wenigen HTML-Code Kenntnissen hatte ich auch wenig Hoffnung das es auf Anhieb klappt. Ich hab gegrübelt bin aber nicht drauf gekommen wieso wen ich auf einen ausgewählten Buchstaben Klicke es nicht weitergeleitet wird.

    Erstmal danke für dein Fantastisches Tutorial, und Fleißige Muhe. Es wehre schön wen du mir bei meinen Problem helfen Könnest ich Glaube ich hab nicht ganz kapiert wo genau an welche stelle ich Bei den einzelnen die Buchstaben die Rezensionlinks in kommen.

    Ich Liebe Jetzt schon deinen Blog.

    AntwortenLöschen
    Antworten
    1. Hey Petra,

      Vielen Dank für dein Lob, das ist wirklich lieb von dir!
      Wenn du dich mit HTML nicht recht auskennst, kann der Code schon erschlagend sein. Wenn du willst, könntest du mir ja sagen, wie du was bei der Übersicht haben willst und ich erstelle ihn dir? Dazu müsstest du mich als Blogautor (an sandcookiereloaded@gmail.com - schau auf deinem Dashboard unter Einstellungen und dann auf Autoren hinzufügen) hinzufügen und nach der Annahme noch zum Admin machen.

      Löschen
  20. Hallöchen,
    ich habe jetzt ein bisschen gebraucht, bis ich's hinbekommen habe, aber ich habe es geschafft!
    Vielen, vielen Dank für dieses Tutorial, ich finde es wirklich so fantastisch und mir gefällt mein Blog jetzt noch besser, auch wenn ich erst ganz am Anfang bin :D
    Also vielen Dank!!
    Liebe Grüße,
    Kate

    AntwortenLöschen
    Antworten
    1. Das kenn ich - HTML geht leider nicht so "im Vorbeigehen" und dauert oft länger, als es einem lieb ist ^^ Aber freut mich sehr, dass du es doch geschafft hast und so zufrieden damit bist :)

      Löschen
  21. Ich mag mich auch ganz herzlich für dieses Tutorial bedanken!! ♥ Super gut strukturiert und man kann es super nachvollziehen und umsetzen! Ich habe gerade bei mir angefangen und kopiere jetzt fleißig die Links und es funktioniert alles super und sieht endlich übersichtlich aus, vielen vielen Dank, dass Du diese Hilfestellung gibst!! :)

    Liebe Grüße, Philly

    AntwortenLöschen
    Antworten
    1. Wie unheimlich lieb von dir, du weißt ja gar nicht wie mich solche lieben Kommentare immer freuen! Danke!

      Löschen
  22. Huhu, du hast nicht zufällig Lust, mitzuteilen, wie es funktioniert, ein BILD hovern zu lassen???? :D
    Mit Text kann ich das ja auch, aber mit einem Bild? Oh Gott, das ist SOOOO cool :O

    AntwortenLöschen
    Antworten
    1. Ja ich mags auch ganz gern :) Leider hab ich das Tutorial dazu jetzt nicht mehr gefunden. Grundsätzlich sollte es reichen, Folgendes im HTML-Code unter dem Punkt /* Posts einzufügen:

      .post-body:hover img:hover {
      opacity: 0.6;
      -webkit-transition:opacity 0.6s ease-in-out;
      -moz-transition:opacity 0.6s ease-in-out;
      -o-transition:opacity 0.6s ease-in-out;
      transition:opacity 0.6s ease-in-out;
      }


      Als Beispiel sind hier natürlich meine Werte ^^ Komischerweise hovert das Bild dann zwar bei Mouseover schön brav, aber wenn man wieder raus geht hovert's dann nicht mehr. Deshalb hab ich das ganze umstrukturiert, frag mich bitte nicht wieso, das ist schon so lang her :D So siehts aus: http://oi57.tinypic.com/2ustr1y.jpg

      Löschen
    2. Hach, für einen Anfänger ist das immer sehr schwer, ich hab mir gestern schon die Finger wund gesucht und nichts gefunden :D
      Im HTML der Seite einfügen? Und welchen Code benutze ich dann, um festzulegen, welches Bild hovern soll? :)

      Löschen
    3. Oh und nach dem übersichtlichen Index, da funktionieren die links nichts, also wenn ich auf a klicke, oder b, dann passiert nichts :(

      Löschen
    4. Genau, wenn du den Code unter /* Posts im HTML deines Blogs einfügst (vom Dashboard auf "Vorlage" und "HTML bearbeiten"), dann hovern alle Bilder im Postbereich (Bilder in der Sidebar, Profilbilder in den Kommentaren etc. meiner Erfahrung nach nicht).

      Möchtest du wirklich nur vereinzelt Bilder hovern lassen, kannst du es bei jedem Bild im HTML-Part des Posts folgend angeben:

      <img border="0" src="http://www.fischerverlage.de/media/fs/15/u1_978-3-8414-2142-5.jpg" imageanchor="1" style="
      -webkit-transition:opacity 0.6s ease-in-out;
      -moz-transition:opacity 0.6s ease-in-out;
      -o-transition:opacity 0.6s ease-in-out;
      transition:opacity 0.6s ease-in-out;

      margin-left: 1em; margin-right: 1em;"/>

      Löschen
    5. Und dein Problem mit dem Anklicken scheinst du gelöst zu haben. Bei mir funktioniert dein Index wunderbar. :)

      Löschen
  23. Das ist eine super Idee, nur leider bin ich zu blond. Irgendwie klappt das bei mir nicht. Ich werde einfach noch ein bisschen rumprobieren. Aber ich finde die Idee serh gut und du hast es auch sehr schön erklärt.

    AntwortenLöschen
  24. Hallo Sandra

    Ich finde deine Tutorials einfach nur GENIAL! Danke, Danke, Danke! Vorallem den Reziindex kann ich gut gebrauchen.

    Ich bin einwenig am formatieren, komme aber irgendwie nicht weiter und habe daher gedacht, ich frage einfach mal bei dir nach. Das Problem bei mir ist, dass ich die Bilder formatiere, damit sie die gleiche Grösse haben, sobald ich sie aber im Blogger einfüge, verändert sich die Grösse. Habe ich eine Möglichkeit, die Formatierung als HTML einzufügen?

    Gruss Andrea von lala-universe.blogspot.com

    AntwortenLöschen
    Antworten
    1. Hallo Andrea,

      Danke erstmal für das nette Lob! Ja, ich kenne einen Code, der alle Bilder auf 100% Postbreite bringt (http://www.5202.de/2014/06/bilder-mit-javascript-auf-postbreite.html), allerdings sind davon wirklich alle Bilder betroffen, und das finde ich nicht sehr vorteilhaft und auch nicht nötig.

      Also habe ich das richtig verstanden: Du bringst schon vor dem Einbinden die Bilder auf eine bestimmte Größe? Dann müsstest du eigentlich nur noch das Bild im Post anklicken und in der aufscheinenden Leiste darunter "Originalgröße" anklicken. Meinst du das?

      Alles Liebe!

      Löschen
    2. Hey Sandra,

      Danke für deine schnelle Antwort. Also ich habe die Bilder in ein Word Dokument eingefügt und dort die Grösse geändert (2.5 x 1.65) für jedes Bild. Danach habe ich das Bild als jpg gespeichert. Das Problem ist jetzt, wenn ich die Bilder im Blogger Post einfüge, haben sie wieder eine andere Grösse. Es erscheint aber automatisch mit Originalgrösse ich kann diese dann nicht noch anwählen.

      Ob ich es dann klein, mittel oder gross mache spielt auch keine Rolle. die Formatierung stimmt anscheinend einfach wieder nicht. Daher war meine Frage vielleicht eher: gibt es ein Programm, in welchem ich Bilder formatieren kann?

      Löschen
    3. Hm, ich verstehe dein Problem nicht so ganz, das ist mir noch nie passiert. Ich bearbeite meine Bilder immer ganz simpel unter www.picmonkey.com. Bild öffnen, unter "resize" kann man dann die Größe ändern.

      Löschen
  25. Hallo Sandra,

    vielen vielen Dank für dieses tolle Tutorial!
    Ich hatte anfangs - als HTML Amateur - ein wenig meine Schwierigkeiten, hab aber dann doch alles ganz gut hingekriegt.
    Jetzt hätte ich nur eine Frage: Was muss ich tun, damit bei Alle Rezensionen die Bilder nahtlos aneinander schließen wie bei Spoilerparadies?
    Bei macht es nämlich jeweils eine neue Zeile bei einem neuen Buchstaben.

    Lg Carla

    AntwortenLöschen
    Antworten
    1. Hey Carla,

      Bei dir wird jeder Rezensionslink von folgendem Code umschlossen: <div style="text-align: center;"> ... Link ... </div>
      Wenn du den öffnenden Befehl (also den ersten Teil, mit dem center) bloß am Anfang setzt, dann alle Rezensionslinks nacheinander einfügst und nur am Schluss </div> hinsetzt, ist es so wie im Spoilerparadies. Hoffentlich weißt du was ich meine :) Also jetzt gerade wird quasi jeder Link einzeln von einem Zentrier-Befehl umgeben, und so beansprucht jeder Link eine eigene Zeile.

      Löschen
  26. Daaaaaaaaaanke, dass ist sooo toll!
    War war ne Menge Arbeit, bei ca. 150 Rezi´s aber das Ergebnis ist fantastisch!

    http://marys-buecherwelten.blogspot.de/2014/05/rezensionen-nach-titeln.html

    Gibt es auch einen Code, wo oben die Buchstaben stehen und wenn man drauf klickt, scrollt es runter zu der Stelle?

    LG, Mary <3

    AntwortenLöschen
    Antworten
    1. Hey Mary, wenn es dir weiterhilft hab ich hier ein Tutorial. Manko ist bei den sogenannten "Pagejumps", dass nicht gescrollt wird, sondern gesprungen.
      http://time-to-steal-ideas.blogspot.co.at/2013/03/page-jumps.html

      Alles Liebe,
      Sandra

      Löschen
  27. Super Tutorial! Ich bin grad dabei, auf meinem Blog ein Verzeichnis mit allen Posts zu erstellen, das nimmt dann schon einige Zeit in Anspruch... aber klappt dank dir wunderbar! :)

    AntwortenLöschen
  28. Hallo

    Danke für das super Tutorial. Selbst ich habe mit ein bisschen Hilfe es geschafft.

    Danke

    Liebe Grüße Kaylie

    AntwortenLöschen
  29. Hallo,

    schönes Tutorial :)
    Ich habe es gleich einmal ausprobiert. Zum Glück habe ich noch nicht so viele Rezensionen gehabt, sonst hätte das wirklich Nerven gekostet xD

    Liebe Grüße
    Victoria

    AntwortenLöschen
  30. Hey Sandra,

    ich habe dir hierzu gerade eine Email gesendet. Ich hoffe, dass du mal reinschauen kannst. Habe nämlich ein kleines Problem damit.

    Liebe Grüße, Kathi. ♥
    http://kathisbuecherstapel.blogspot.de/

    AntwortenLöschen
  31. Hey Sandra,

    auch ich bin über dein Tutorial gestolpert und werde es vielleicht auf meinem Blog ausprobieren :) Vielen Dank dafür!

    Liebe Grüße, Sandy

    AntwortenLöschen

Ich schätze es sehr, dass du dir die Zeit nimmst und die Mühe machst, mir deine Meinung oder dein Feedback zu hinterlassen! Ist der Beitrag schon etwas älter, wird dein Kommentar nicht gleich sichtbar sein, sondern muss zuerst von mir freigegeben werden.

© 2012 - 2016 Pusteblume? · Powered by Blogger · Datenschutz · Impressum