Einfacher Rahmen als Slider- und Karussellersatz
3 verfasser
Seite 1 von 2
Seite 1 von 2 • 1, 2
Einfacher Rahmen als Slider- und Karussellersatz
Immer mehr Blogger entscheiden sich dafür, ihre Blogs mit schönen Karussells oder Slidern zu pimpen und damit sowohl einen tollen Eyecatcher zu schaffen, als auch den Lesern einen optimalen Überblick zu bieten. Doch diese Schönheit und Übersicht hat auch Nachteile. So zum Beispiel kann sich der Einbau eines solchen Features manchmal durchaus als kniffliger entpuppen, als zunächst gedacht und auch für die Leser eines mit Slider oder Karussell veredeltem Blogs sind diese Spielereien nicht immer ein Segen. Nicht jeder kann sich glücklicher Besitzer einer schnellen Internetleitung und eines neueren PCs nennen und für eben diese Nutzer können solche Einbauten manchmal ewig lange Ladezeiten oder sogar eingefrorene Seiten bedeuten.
Für jene, die gerne ein bisschen mehr Struktur und Ordnung hätten, dabei jedoch lieber auf Slider und Karussells verzichten wollen, gibt es eine ganz einfache Lösung, die ich euch nun vorstelle.
Unter dem Header und der Navigationsleiste könnt ihr einen Rahmen mit Covern sehen. Wie ihr das in nur wenigen Schritten bei euch umsetzt, erkläre ich euch jetzt.
Schritt 1: Ihr geht in euer Blogger-Dashboard und dann zum Layout
Schritt 2: fügt ein neues html-widget hinzu
Schritt 3: hier seid ihr jetzt selbst gefragt. Ich kann euch nur den Code liefern, den ihr allerdings nach euren Wünschen anpassen müsst. Innerhalb der jeweiligen Tüddelchen (") habe ich euch beschrieben, was für Informationen dort erforderlich sind. Die Tüddelchen aber bitte NICHT löschen!
Noch ein paar Worte zur Erklärung des Codes:
• rgb(174, 128, 186) steht für die Farbe des Rahmens. Wenn ihr eine andere wollt, könnt ihr euch hier den entsprechenden rgb-code heraussuchen und einfügen.
• #9a85cf ist der Farbcode der Schrift innerhalb des Rahmens. Wenn ihr diese ändern wollt, könnt ihr ebenfalls hier einen neuen Farbcode finden. Solltet ihr den Text gar nicht haben wollen, löscht einfach diesen Teil <span style="color: #9a85cf;">Klicke auf die Cover, um direkt zu den passenden Rezensionen zu gelangen!</span> komplett aus dem Code heraus.
•   steht für Leerzeichen. Wenn ihr weniger/mehr Raum zwischen den einzelnen Bildern haben wollt, fügt einfach ein   hinzu oder löscht eins.
Schritt 4: Speichert das html-widget ohne die Eingabe eines Titels ab.
Schritt 5: Jetzt sucht ihr euch einen passenden Platz für eurer neues Widget. Ich habe es damals genau unter Header und Navigationsleiste positioniert. Genauso gut könnt ihr es jedoch in eine der Kolumnen packen, wobei hier ggf erforderlich sein wird, dass ihr nach 2 oder auch 3 verlinkten Bildern einen Zeilenbruch macht, damit sich nicht euer gesamter Blog verzieht. Diesen erzeugt ihr ganz einfach mit dem Code <br>
Viel Spaß beim ausprobieren!
Für jene, die gerne ein bisschen mehr Struktur und Ordnung hätten, dabei jedoch lieber auf Slider und Karussells verzichten wollen, gibt es eine ganz einfache Lösung, die ich euch nun vorstelle.
Unter dem Header und der Navigationsleiste könnt ihr einen Rahmen mit Covern sehen. Wie ihr das in nur wenigen Schritten bei euch umsetzt, erkläre ich euch jetzt.
Schritt 1: Ihr geht in euer Blogger-Dashboard und dann zum Layout
Schritt 2: fügt ein neues html-widget hinzu
Schritt 3: hier seid ihr jetzt selbst gefragt. Ich kann euch nur den Code liefern, den ihr allerdings nach euren Wünschen anpassen müsst. Innerhalb der jeweiligen Tüddelchen (") habe ich euch beschrieben, was für Informationen dort erforderlich sind. Die Tüddelchen aber bitte NICHT löschen!
- Code:
<div style="border: 1px solid rgb(174, 128, 186); padding: 3px;"><center><span style="color: #9a85cf;">Klicke auf die Cover, um direkt zu den passenden Rezensionen zu gelangen!</span><br /><br />
<center>
<a href="Ziel-URL (das ist die Url, zu der der Leser weitergeleitet wird, wenn er auf das Cove rgeklickt hat" target="_blank"><img src='URL des Covers, welches ihr hochgeladen habt' title="Titel des Buches/Rezept/Artikel" /></a>
<a href="Ziel-URL (das ist die Url, zu der der Leser weitergeleitet wird, wenn er auf das Cove rgeklickt hat" target="_blank"><img src='URL des Covers, welches ihr hochgeladen habt' title="Titel des Buches/Rezept/Artikel" /></a>
<a href="Ziel-URL (das ist die Url, zu der der Leser weitergeleitet wird, wenn er auf das Cove rgeklickt hat" target="_blank"><img src='URL des Covers, welches ihr hochgeladen habt' title="Titel des Buches/Rezept/Artikel" /></a>
<a href="Ziel-URL (das ist die Url, zu der der Leser weitergeleitet wird, wenn er auf das Cove rgeklickt hat" target="_blank"><img src='URL des Covers, welches ihr hochgeladen habt' titel="Titel des Buches/Rezept/Artikel" /></a>
<a href="Ziel-URL (das ist die Url, zu der der Leser weitergeleitet wird, wenn er auf das Cove rgeklickt hat" target="_blank"><img src='URL des Covers, welches ihr hochgeladen habt' title="Titel des Buches/Rezept/Artikel" /></a>
<a href="Ziel-URL (das ist die Url, zu der der Leser weitergeleitet wird, wenn er auf das Cove rgeklickt hat" target="_blank"><img src='URL des Covers, welches ihr hochgeladen habt' title="Titel des Buches/Rezept/Artikel" /></a>
<a href="Ziel-URL (das ist die Url, zu der der Leser weitergeleitet wird, wenn er auf das Cove rgeklickt hat" target="_blank"><img src='URL des Covers, welches ihr hochgeladen habt' title="Titel des Buches/Rezept/Artikel" /></a>
<br /></center></center></div>
Noch ein paar Worte zur Erklärung des Codes:
• rgb(174, 128, 186) steht für die Farbe des Rahmens. Wenn ihr eine andere wollt, könnt ihr euch hier den entsprechenden rgb-code heraussuchen und einfügen.
• #9a85cf ist der Farbcode der Schrift innerhalb des Rahmens. Wenn ihr diese ändern wollt, könnt ihr ebenfalls hier einen neuen Farbcode finden. Solltet ihr den Text gar nicht haben wollen, löscht einfach diesen Teil <span style="color: #9a85cf;">Klicke auf die Cover, um direkt zu den passenden Rezensionen zu gelangen!</span> komplett aus dem Code heraus.
•   steht für Leerzeichen. Wenn ihr weniger/mehr Raum zwischen den einzelnen Bildern haben wollt, fügt einfach ein   hinzu oder löscht eins.
Schritt 4: Speichert das html-widget ohne die Eingabe eines Titels ab.
Schritt 5: Jetzt sucht ihr euch einen passenden Platz für eurer neues Widget. Ich habe es damals genau unter Header und Navigationsleiste positioniert. Genauso gut könnt ihr es jedoch in eine der Kolumnen packen, wobei hier ggf erforderlich sein wird, dass ihr nach 2 oder auch 3 verlinkten Bildern einen Zeilenbruch macht, damit sich nicht euer gesamter Blog verzieht. Diesen erzeugt ihr ganz einfach mit dem Code <br>
Viel Spaß beim ausprobieren!
Re: Einfacher Rahmen als Slider- und Karussellersatz
Also bei mir funktioniert das irgendwie nicht. Er erstellt den Rahmen, aber das Bild wird nicht angezeigt und wenn ich auf das leere Image Zeichen klicke, sagt er mir das die Seite auf meinem Blog wo man hingeleitet werden soll nicht existiert oO
Anorielt- Anzahl der Beiträge : 35
Anmeldedatum : 08.02.12
Alter : 33
Re: Einfacher Rahmen als Slider- und Karussellersatz
Magst du mir mal den Code geben, so, wie du ihn eingefügt hast? Dann schaue ich mal fix nach dem Fehler.
Re: Einfacher Rahmen als Slider- und Karussellersatz
Würde ich gerne, kann ich aber nicht weil das Forum mir dann sagt das ich in den ersten 7 Tagen keine Links posten darf, funktioniert selbst per Pm nicht
Anorielt- Anzahl der Beiträge : 35
Anmeldedatum : 08.02.12
Alter : 33
Re: Einfacher Rahmen als Slider- und Karussellersatz
Hö? Was ist denn das für ein Schmarrn?
Moment, ich schau mal fix, ob ich das beheben kann und ansonsten kannst du mir das Ganze auch gerne per Email schicken.
Moment, ich schau mal fix, ob ich das beheben kann und ansonsten kannst du mir das Ganze auch gerne per Email schicken.
Re: Einfacher Rahmen als Slider- und Karussellersatz
Habs dir eben per Email geschickt ;-) Ich nehme an das ist so ein Sicherheitsding vom Forum, in den ersten sieben Tagen weder einen Link noch eine Mail Adresse posten zu dürfen.
Anorielt- Anzahl der Beiträge : 35
Anmeldedatum : 08.02.12
Alter : 33
Re: Einfacher Rahmen als Slider- und Karussellersatz
Hab sie bekommen. Ich schau eben nach und poste dir dann hier den korrigierten Code!
Soll das Cover in dieser Größe bleiben, oder willst du es kleiner haben und an welcher Position deines Blogs soll der Code eingefügt werden?
Links darfst du jetzt übrigens auch posten, ich hab die Einstellung gefunden und es abgeändert.
Soll das Cover in dieser Größe bleiben, oder willst du es kleiner haben und an welcher Position deines Blogs soll der Code eingefügt werden?
Links darfst du jetzt übrigens auch posten, ich hab die Einstellung gefunden und es abgeändert.
Re: Einfacher Rahmen als Slider- und Karussellersatz
Ich würde den Code entweder wie du schon gesagt hast unter dem Header einfügen, oder ganz unten auf der Seite. Ob noch was geändert werden muss weiß ich nicht, da mir ja nichts angezeigt wurde.
Anorielt- Anzahl der Beiträge : 35
Anmeldedatum : 08.02.12
Alter : 33
Re: Einfacher Rahmen als Slider- und Karussellersatz
So, hier einmal der fertige Code für dich, Anorielt.
Du hattest in dem Code, den du verwendet hattest, vergessen, meine Erklärungen rauszulöschen und die Ziel-URL mit dem "das" aus meiner Beschreibung verbunden, weswegen du auch nicht weitergeleitet werden konntest, da diese URL ja nicht existierte.
Dein Bild habe ich etwas verkleinert, weil ich sonst in meinem Testblock nicht richtig hätte gucken können, ob alles passt. Wenn du lieber die große Variante haben möchtest, ist auch das kein Problem. Ersetz einfach meine imageshak-url mit deiner, aber achte bitte darauf, dass du den Direkt-Link benutzt.
Ich hoffe, ich konnte dir damit ein bissl helfen!
- Code:
<div style="border: 1px solid rgb(174, 128, 186); padding: 3px;"><center><span style="color: #9a85cf;">Klicke auf die Cover, um direkt zu den passenden Rezensionen zu gelangen!</span><br /><br />
<center>
<a href="http://kaestra.blogspot.com/2011/04/die-dunklen-machte-01-schattenstunde.html" target="_blank"><img src='http://img803.imageshack.us/img803/508/41wxk2ebcllss500.png' title="Die dunklen Mächte 01. Schattenstunde" /></a>
<br /></center></center></div>
Du hattest in dem Code, den du verwendet hattest, vergessen, meine Erklärungen rauszulöschen und die Ziel-URL mit dem "das" aus meiner Beschreibung verbunden, weswegen du auch nicht weitergeleitet werden konntest, da diese URL ja nicht existierte.
Dein Bild habe ich etwas verkleinert, weil ich sonst in meinem Testblock nicht richtig hätte gucken können, ob alles passt. Wenn du lieber die große Variante haben möchtest, ist auch das kein Problem. Ersetz einfach meine imageshak-url mit deiner, aber achte bitte darauf, dass du den Direkt-Link benutzt.
Ich hoffe, ich konnte dir damit ein bissl helfen!
Re: Einfacher Rahmen als Slider- und Karussellersatz
Ah, danke dir :-)
Muss zwar jetzt erstmal einkaufen gehen, aber danach probier ich es nochmal
Muss zwar jetzt erstmal einkaufen gehen, aber danach probier ich es nochmal
Anorielt- Anzahl der Beiträge : 35
Anmeldedatum : 08.02.12
Alter : 33
Re: Einfacher Rahmen als Slider- und Karussellersatz
Alles klar. Sag bescheid, ob es klappt oder nicht (dann schaue ich nochmal nach).
Re: Einfacher Rahmen als Slider- und Karussellersatz
Ich habe das gleiche Problem wie Anorielt! Ich konnte die Schriftfarbe und die Rahmenfarbe ändern...aber das Bild wird nicht angezeigt...aber auf den Fehler komm ich nicht...ich schick dir mal meinen Code zu und bin gespannt was du meinst
LG Luminchen
So schaut es bei mir aus
LG Luminchen
So schaut es bei mir aus
Re: Einfacher Rahmen als Slider- und Karussellersatz
Hallo, Luminchen!
Zunächst einmal fehlt am Ende dieses Codes dieser Teil: <br /></center></center></div>
Ich habe jetzt mal wegen deinem Bild geschaut, aber der Link, der bei dir dort eingetragen ist, scheint nicht gültig zu sein? Zumindest werde ich nur auf die Photobucket-Seite weitergeleitet, anstatt zu einem Bild.
Zunächst einmal fehlt am Ende dieses Codes dieser Teil: <br /></center></center></div>
Ich habe jetzt mal wegen deinem Bild geschaut, aber der Link, der bei dir dort eingetragen ist, scheint nicht gültig zu sein? Zumindest werde ich nur auf die Photobucket-Seite weitergeleitet, anstatt zu einem Bild.
Re: Einfacher Rahmen als Slider- und Karussellersatz
Kann ich denn einfach auf dem Bild verlinken dass schon auf dem Blog ist...muss also nicht über einen Bildhoster verlinken?
Re: Einfacher Rahmen als Slider- und Karussellersatz
Ich werde das morgen nochmal in Ruhe versuchen...bin glaub auch schon zu müde!
Falls es morgen nicht klappt dann melde ich mich nochmal, ok!
Falls es morgen nicht klappt dann melde ich mich nochmal, ok!
Re: Einfacher Rahmen als Slider- und Karussellersatz
Doch doch, du brauchst den Direct Link zu deinem Bild! Der Photbucket-Link, den du angegeben hast, gibt es nur nicht. Ich werde immer auf die Hauptseite von Photobucket weitergeleitet mit dem Vermerk, dass die gesuchte Seite nicht gefunden wurde.
Re: Einfacher Rahmen als Slider- und Karussellersatz
Wenn ich auf ein Bild (also jetzt im Bsp. das Cover von Kyria und Reb) im Blog klicke kann ich ja dessen URL kopieren...aber selbst wenn ich diese im Code einfüge erscheint dass dann nicht...
Auch nicht wenn ich den Code mit dem hier beende
Auch nicht wenn ich den Code mit dem hier beende
Ich glaube ohne deine Hilfe komm ich nicht ans Ziel...also hier nochmal der Code
Re: Einfacher Rahmen als Slider- und Karussellersatz
Sagst du mir noch fix, an welcher Position du den Rahmen haben möchtest, damit ich das genauso austesten kann?
Re: Einfacher Rahmen als Slider- und Karussellersatz
Ich habe deine Grafik einmal bei meinem ImageShack-Account hochgeladen und den Direct Link von dort in deinen Code eingefügt. Und es funktioniert!
Bitte schön:
Oh ok, möchtest du die Grafik dann in der Größe beibehalten, oder soll sie kleiner sein?
Bitte schön:
- Code:
<div style="border: 1px solid rgb(105, 102, 14); padding: 3px;"><center><span style="color: #6b442a;">Klicke auf die Cover, um direkt zu den passenden Rezensionen zu gelangen!</span><br /><br />
<center>
<a href="http://luminchenslesekiste.blogspot.com/2012/02/rezension_28.html" target="_blank"><img src='http://img715.imageshack.us/img715/856/kyriaundreb.jpg' title="Kyria und Reb" /></a> <br />
<br /></center></center></div>
Oh ok, möchtest du die Grafik dann in der Größe beibehalten, oder soll sie kleiner sein?
Re: Einfacher Rahmen als Slider- und Karussellersatz
So?
- Code:
<div style="border: 1px solid rgb(105, 102, 14); padding: 3px;"><center><span style="color: #6b442a;">Klicke auf die Cover, um direkt zu den passenden Rezensionen zu gelangen!</span><br /><br />
<center>
<a href="http://luminchenslesekiste.blogspot.com/2012/02/rezension_28.html" target="_blank"><img src='http://img252.imageshack.us/img252/5402/kyriarebsidebar.png' title="Kyria und Reb" /></a> <br />
<br /></center></center></div>
Re: Einfacher Rahmen als Slider- und Karussellersatz
Ist mir immer noch zu groß...so wie es bei deinem Testbild ganz oben aussieht wäre toll...
Muss jetzt meine große vom KiGA abholen...dann werde ich weitertüfteln...wäre doch gelacht wenn ich das nicht hibekomme!!!!
Muss jetzt meine große vom KiGA abholen...dann werde ich weitertüfteln...wäre doch gelacht wenn ich das nicht hibekomme!!!!
Re: Einfacher Rahmen als Slider- und Karussellersatz
Hier wäre nochmal der Photoshop Link...
https://2img.net/h/i796.photobucket.com/albums/yy250/Lumani12/kyria-und-reb.jpg
https://2img.net/h/i796.photobucket.com/albums/yy250/Lumani12/kyria-und-reb.jpg
Re: Einfacher Rahmen als Slider- und Karussellersatz
So, hier dann einmal mit der Grafikgröße, wie ich sie auf meinem Blog früher benutzt habe (wie auf dem Screenshot im ersten Post zu sehen ist):
Ist diese Größe in Ordnung, oder brauchst du es noch kleiner?
Und natürlich bekommst du das hin! Warts ab, wenn du erst einmal eine Weile an deinem Blog rumfummelst, wird es immer leichter!
- Code:
<div style="border: 1px solid rgb(105, 102, 14); padding: 3px;"><center><span style="color: #6b442a;">Klicke auf die Cover, um direkt zu den passenden Rezensionen zu gelangen!</span><br /><br />
<center>
<a href="http://luminchenslesekiste.blogspot.com/2012/02/rezension_28.html" target="_blank"><img src='http://img651.imageshack.us/img651/5402/kyriarebsidebar.png' title="Kyria und Reb" /></a>
<br /></center></center></div>
Ist diese Größe in Ordnung, oder brauchst du es noch kleiner?
Und natürlich bekommst du das hin! Warts ab, wenn du erst einmal eine Weile an deinem Blog rumfummelst, wird es immer leichter!
Seite 1 von 2 • 1, 2
Seite 1 von 2
Befugnisse in diesem Forum
Sie können in diesem Forum nicht antworten
|
|