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.)
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 Vorlage → Backup/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>
/* 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).
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.
Das ist ja fantastisch! :D
AntwortenLöschenDas muss ich (meine HTML Expertin xD) mal ausprobieren! :)
Danke für das Tutorial!^^
LG Jan
Ja, das kann schon echt praktisch sein, vor allem, wenn man schon viele Rezensionen geschrieben hat und da leichter was finden möchte :)
LöschenHallo Sandra,
AntwortenLöschendas 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
Du kannst es ja auf einem Testblog probieren, wenn dir mal fad ist ;)
LöschenStimmt, so einen habe ich sogar. ;-)
LöschenOh 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
AntwortenLöschenDanke 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
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 :)
LöschenIm freien Fall ist so ein schönes Buch ... ich hoffe, es gefällt dir :D Gerne!
Alles Liebe!
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
AntwortenLöschenFalls 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ö.
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.
LöschenJaaa, 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!
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öschenDas sieht ja klasse aus! Gibt es auch irgendwie, irgendwo eien Anleitung für dieses Suchfeld wie bei Spoilerparadies?
AntwortenLöschenLiebe Grüße
Babs
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öschenAh danke, und wie bekommt man es hin, das das Suchfeld nur in den Rezensionen sucht?
LöschenDamit bin ich überfragt ;) ...
LöschenHah, danke :D Ist ja richtg praktisch ^^ !
AntwortenLöschenLiebe Grüße :)
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öschenJa, 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öschenAhhh, 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öschenMein Bloglayout hasst mich -.- Hab dir eben eine E-Mail dazu geschrieben.
LöschenWow, Kompliment, ich finde, das sieht wirklich toll aus, aber für mich ist das Chinesisch.
AntwortenLöschenHabs gerade mal probiert und irgendwie ... naja, ich schiebs darauf, dass ich wordpress nutze, dass es nicht klappt XD
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öschenHallo Sandra,
AntwortenLöschenDanke 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
Deine Rückmeldung freut mich sehr! Danke für deinen Kommentar! :)
LöschenHei Sandra,
AntwortenLöschenvielen 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
Danke!! (:
LöschenOh 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.
AntwortenLöschenDanke für den tollen Code! :)
xoxo
Jule von Miss Foxy reads
Haha, das hört man doch gern! Ich freu mich, dass ich dir so helfen konnte!
LöschenHm... 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
AntwortenLöschenIch 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
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öschen260 Rezensionen, Heilige Mutter Maria O.O
LöschenDu 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
AntwortenLöschenDankedanke :) ♥
Haha, ist ja nicht so dass ich das selbst von einem Tutorial hab! Trotzdem gerne ^^
LöschenDu 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.
AntwortenLöschenDanke!!! ☺
GlG
Kitty ♥
Das ist aber lieb von dir, danke! :) ♥ Es freut mich, dass du so glücklich damit bist!
LöschenHallo Sandra,
AntwortenLöschenvielen, 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
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 :)
AntwortenLöschenLiebe Grüße
Aber natürlich, dazu ist der Post ja da :D
LöschenOhh das ist genial! ...und klingt schrecklich kompliziert x'D
AntwortenLöschenJetzt werde ich es erstmal 3857648756-Mal durchlesen und probieren.
Vielen Dank, dass du es als Toturial gemacht hast.
Viele liebe Grüße
Meike ^-^
Hallo :) Danke für das Tutorial, ich hab den Index/das Index (?) schon länger auf meinem Blog, habe allerdings ein Problem damit.
AntwortenLöschenWenn 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
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öschenHallo Sandra,
AntwortenLöschenIch 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.
Hey Petra,
LöschenVielen 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.
Hallöchen,
AntwortenLöschenich 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
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öschenIch 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!! :)
AntwortenLöschenLiebe Grüße, Philly
Wie unheimlich lieb von dir, du weißt ja gar nicht wie mich solche lieben Kommentare immer freuen! Danke!
LöschenHuhu, du hast nicht zufällig Lust, mitzuteilen, wie es funktioniert, ein BILD hovern zu lassen???? :D
AntwortenLöschenMit Text kann ich das ja auch, aber mit einem Bild? Oh Gott, das ist SOOOO cool :O
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:
Löschen.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
Hach, für einen Anfänger ist das immer sehr schwer, ich hab mir gestern schon die Finger wund gesucht und nichts gefunden :D
LöschenIm HTML der Seite einfügen? Und welchen Code benutze ich dann, um festzulegen, welches Bild hovern soll? :)
Oh und nach dem übersichtlichen Index, da funktionieren die links nichts, also wenn ich auf a klicke, oder b, dann passiert nichts :(
LöschenGenau, 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).
LöschenMö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;"/>
Und dein Problem mit dem Anklicken scheinst du gelöst zu haben. Bei mir funktioniert dein Index wunderbar. :)
LöschenDas 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öschenHallo Sandra
AntwortenLöschenIch 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
Hallo Andrea,
LöschenDanke 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!
Hey Sandra,
LöschenDanke 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?
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öschenHallo Sandra,
AntwortenLöschenvielen 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
Hey Carla,
LöschenBei 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.
Daaaaaaaaaanke, dass ist sooo toll!
AntwortenLöschenWar 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
Hey Mary, wenn es dir weiterhilft hab ich hier ein Tutorial. Manko ist bei den sogenannten "Pagejumps", dass nicht gescrollt wird, sondern gesprungen.
Löschenhttp://time-to-steal-ideas.blogspot.co.at/2013/03/page-jumps.html
Alles Liebe,
Sandra
Danke für den Link! ♥
LöschenSuper 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öschenDein Tutorial ist der absolute Wahnsinn! Ich hatte mir soetwas ähnliches bereits gebastelt, jedoch blieb man dabei nie auf der selben Seite und somit war das ganze wirklich sehr chaotisch! Wenn du magst, würde ich mich sehr über den HTML Link für die Kästen freuen! Am besten erreichst du mich (Phyllis.Czok@gmx.de).
AntwortenLöschenIch freue mich soooo sehr deine Seite gefunden zu haben und nun endlich durchstarten zu können! :)
Liebste Grüße,
Phyllis (Zeilensehnsucht).
Hallo
AntwortenLöschenDanke für das super Tutorial. Selbst ich habe mit ein bisschen Hilfe es geschafft.
Danke
Liebe Grüße Kaylie
Hallo,
AntwortenLöschenschö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
Hei
AntwortenLöschenDanke tausend mal für das tolle Tutorial! Ich hab bei mir rumgebastelt und es schaut jetzt toll aus! HIER kannst du es dir ansehen, vielleicht hast du mir noch nen Tipp, wie ich die "Spalten" zwischen den Bildern minimieren kann?
Liebe Grüsse
Katy
Hey Sandra,
AntwortenLöschenich 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/
Hey Sandra,
AntwortenLöschenauch ich bin über dein Tutorial gestolpert und werde es vielleicht auf meinem Blog ausprobieren :) Vielen Dank dafür!
Liebe Grüße, Sandy
Hallo Sandra
AntwortenLöschenich wurde durch http://marys-buecherwelten.blogspot.de/ auf dein Tutorial aufmerksam und ich bin dir so dankbar für diese Anleitung. Du bist mein Held <3
Ich habe es jetzt auf meiner Seite angefangen einzufügen und werde es nach ud nach immer weiter altualiersen :)
Fast hätrte ich wen dafür bezhalt mir das einzurichten aber jetzt kann ich es alleine.
DANKE DANKE DANKE
Lieben Gruß
Tina
PS: Hier kannste ja mal gucken wenn du magst :-) Ich feile noch am Design und so aber es ist ein anfang
www.meinbuchmeinewelt.de
Hallo Sandra,
AntwortenLöschenich hab es so gemacht wie du es geschrieben hast aber der Code mag mich nicht. Es zeigt mir alle beim Laden an aber sobald ich auf einen Buchstaben klicke komm nichts mehr. Das HTML ist richtig aber leider geht es nicht ich weiß wirklich nicht mehr weiter. Hab 1 Woche versucht den Fehler zu finden oder etwas abzuändern aber ich bekomm es nicht hin. Könnte es am CSS liegen?
Liebste Grüße,
Tinker
Hei♥
AntwortenLöschen*Kreisch* ich lese hier das es bei allen funktioniert nur bei mir nicht :(( Wenn ich auf die Buchstaben drücke passiert nicht & wenn ich die Links unter den jeweiligen Buchstaben setzte kommen sie vorne bei der ersten Seite :((
Ich komm mir ganz schön unfähig vor..
Einen schönen Abend
Ally
Sehr schönes Tutorial. Hab es jetzt seit 3 Tagen versucht leider klappt das nicht bei mir.
AntwortenLöschenVielen Dank für all euer liebes Feedback, Leute! Finde ich toll, dass euch die Idee so gefällt und euch weiterhilft. Zusätzlich sorry an alle, bei denen es nicht geklappt hat. :(
AntwortenLöschenHallöchen =)
AntwortenLöschenDieser post hat mir wirklich sehr geholfen!!!
vielen lieben dank!!!
Herzliche Grüße
Anjelika / Chilly
PS:
hier das ergebnis
https://chillys-buchwelt.blogspot.de/p/test.html
Hallo :)
AntwortenLöschengestern Abend bin ich verzweifelt ins Bett, da ich total unglücklich mit meiner Rezensionen Übersicht war. Heute mittag bin ich auf die Suche gegangen und habe deinen Beitrag gefunden. Im ersten Moment dachte niemals schaffe ich das. Aber es ist gar nicht so schwer wie es aussieht nur eben eine sehr sehr mühselige Arbeit. Aber egal nach knapp 5 Stunden des kopierens und einfügens bin ich fast am Ziel.
Vielen Dank ♥
Liebste Grüße
Sarah
Libris Poison