Einfacher Rahmen als Slider- und Karussellersatz

Seite 1 von 2 1, 2  Weiter

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach unten

Einfacher Rahmen als Slider- und Karussellersatz

Beitrag von Seelchen am Di Feb 07, 2012 1:19 pm

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!

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>&nbsp; &nbsp; &nbsp; &nbsp;

<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> &nbsp; &nbsp; &nbsp; &nbsp;

<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> &nbsp; &nbsp; &nbsp; &nbsp;

<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> &nbsp; &nbsp; &nbsp; &nbsp;

<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> &nbsp; &nbsp; &nbsp; &nbsp;

<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>&nbsp; &nbsp; &nbsp; &nbsp;

<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.
&nbsp steht für Leerzeichen. Wenn ihr weniger/mehr Raum zwischen den einzelnen Bildern haben wollt, fügt einfach ein &nbsp 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! Very Happy




avatar
Seelchen
Admin

Anzahl der Beiträge : 187
Anmeldedatum : 07.02.12

http://buecher-seele.blogspot.com

Nach oben Nach unten

Re: Einfacher Rahmen als Slider- und Karussellersatz

Beitrag von Anorielt am Mi Feb 08, 2012 4:07 am

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
avatar
Anorielt

Anzahl der Beiträge : 35
Anmeldedatum : 08.02.12
Alter : 27

Nach oben Nach unten

Re: Einfacher Rahmen als Slider- und Karussellersatz

Beitrag von Seelchen am Mi Feb 08, 2012 4:12 am

Magst du mir mal den Code geben, so, wie du ihn eingefügt hast? Dann schaue ich mal fix nach dem Fehler. Very Happy
avatar
Seelchen
Admin

Anzahl der Beiträge : 187
Anmeldedatum : 07.02.12

http://buecher-seele.blogspot.com

Nach oben Nach unten

Re: Einfacher Rahmen als Slider- und Karussellersatz

Beitrag von Anorielt am Mi Feb 08, 2012 4:18 am

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
avatar
Anorielt

Anzahl der Beiträge : 35
Anmeldedatum : 08.02.12
Alter : 27

Nach oben Nach unten

Re: Einfacher Rahmen als Slider- und Karussellersatz

Beitrag von Seelchen am Mi Feb 08, 2012 4:19 am

Hö? Was ist denn das für ein Schmarrn? Rolling Eyes
Moment, ich schau mal fix, ob ich das beheben kann und ansonsten kannst du mir das Ganze auch gerne per Email schicken. 😉
avatar
Seelchen
Admin

Anzahl der Beiträge : 187
Anmeldedatum : 07.02.12

http://buecher-seele.blogspot.com

Nach oben Nach unten

Re: Einfacher Rahmen als Slider- und Karussellersatz

Beitrag von Anorielt am Mi Feb 08, 2012 4:21 am

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.
avatar
Anorielt

Anzahl der Beiträge : 35
Anmeldedatum : 08.02.12
Alter : 27

Nach oben Nach unten

Re: Einfacher Rahmen als Slider- und Karussellersatz

Beitrag von Seelchen am Mi Feb 08, 2012 4:34 am

Hab sie bekommen. Ich schau eben nach und poste dir dann hier den korrigierten Code! Smile

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. Smile
avatar
Seelchen
Admin

Anzahl der Beiträge : 187
Anmeldedatum : 07.02.12

http://buecher-seele.blogspot.com

Nach oben Nach unten

Re: Einfacher Rahmen als Slider- und Karussellersatz

Beitrag von Anorielt am Mi Feb 08, 2012 4:39 am

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.
avatar
Anorielt

Anzahl der Beiträge : 35
Anmeldedatum : 08.02.12
Alter : 27

Nach oben Nach unten

Re: Einfacher Rahmen als Slider- und Karussellersatz

Beitrag von Seelchen am Mi Feb 08, 2012 4:50 am

So, hier einmal der fertige Code für dich, Anorielt. Smile

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! Very Happy
avatar
Seelchen
Admin

Anzahl der Beiträge : 187
Anmeldedatum : 07.02.12

http://buecher-seele.blogspot.com

Nach oben Nach unten

Re: Einfacher Rahmen als Slider- und Karussellersatz

Beitrag von Anorielt am Mi Feb 08, 2012 4:58 am

Ah, danke dir :-)
Muss zwar jetzt erstmal einkaufen gehen, aber danach probier ich es nochmal
avatar
Anorielt

Anzahl der Beiträge : 35
Anmeldedatum : 08.02.12
Alter : 27

Nach oben Nach unten

Re: Einfacher Rahmen als Slider- und Karussellersatz

Beitrag von Seelchen am Mi Feb 08, 2012 5:09 am

Alles klar. Sag bescheid, ob es klappt oder nicht (dann schaue ich nochmal nach). Smile
avatar
Seelchen
Admin

Anzahl der Beiträge : 187
Anmeldedatum : 07.02.12

http://buecher-seele.blogspot.com

Nach oben Nach unten

Re: Einfacher Rahmen als Slider- und Karussellersatz

Beitrag von Luminchen am Do März 01, 2012 9:34 am

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

Klicke auf die Cover, um direkt zu den passenden Rezensionen zu gelangen!





       


Den Code kann ich nicht schicken...dann kommt immer das Bild Rolling Eyes

Luminchen

Anzahl der Beiträge : 22
Anmeldedatum : 25.02.12
Ort : Allgäu

http://luminchenslesekiste.blogspot.com/

Nach oben Nach unten

Re: Einfacher Rahmen als Slider- und Karussellersatz

Beitrag von Seelchen am Do März 01, 2012 9:39 am

Hallo, Luminchen! Smile

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. Hmm
avatar
Seelchen
Admin

Anzahl der Beiträge : 187
Anmeldedatum : 07.02.12

http://buecher-seele.blogspot.com

Nach oben Nach unten

Re: Einfacher Rahmen als Slider- und Karussellersatz

Beitrag von Luminchen am Do März 01, 2012 9:40 am

Kann ich denn einfach auf dem Bild verlinken dass schon auf dem Blog ist...muss also nicht über einen Bildhoster verlinken?

Luminchen

Anzahl der Beiträge : 22
Anmeldedatum : 25.02.12
Ort : Allgäu

http://luminchenslesekiste.blogspot.com/

Nach oben Nach unten

Re: Einfacher Rahmen als Slider- und Karussellersatz

Beitrag von Luminchen am Do März 01, 2012 9:41 am

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!

Luminchen

Anzahl der Beiträge : 22
Anmeldedatum : 25.02.12
Ort : Allgäu

http://luminchenslesekiste.blogspot.com/

Nach oben Nach unten

Re: Einfacher Rahmen als Slider- und Karussellersatz

Beitrag von Seelchen am Do März 01, 2012 9:47 am

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. Smile
avatar
Seelchen
Admin

Anzahl der Beiträge : 187
Anmeldedatum : 07.02.12

http://buecher-seele.blogspot.com

Nach oben Nach unten

Re: Einfacher Rahmen als Slider- und Karussellersatz

Beitrag von Luminchen am Do März 01, 2012 11:35 pm

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


Ich glaube ohne deine Hilfe komm ich nicht ans Ziel...also hier nochmal der Code

Klicke auf die Cover, um direkt zu den passenden Rezensionen zu gelangen!




       

Luminchen

Anzahl der Beiträge : 22
Anmeldedatum : 25.02.12
Ort : Allgäu

http://luminchenslesekiste.blogspot.com/

Nach oben Nach unten

Re: Einfacher Rahmen als Slider- und Karussellersatz

Beitrag von Seelchen am Do März 01, 2012 11:38 pm

Sagst du mir noch fix, an welcher Position du den Rahmen haben möchtest, damit ich das genauso austesten kann? Smile
avatar
Seelchen
Admin

Anzahl der Beiträge : 187
Anmeldedatum : 07.02.12

http://buecher-seele.blogspot.com

Nach oben Nach unten

Re: Einfacher Rahmen als Slider- und Karussellersatz

Beitrag von Luminchen am Do März 01, 2012 11:45 pm

Oben unter dem Header

Luminchen

Anzahl der Beiträge : 22
Anmeldedatum : 25.02.12
Ort : Allgäu

http://luminchenslesekiste.blogspot.com/

Nach oben Nach unten

Re: Einfacher Rahmen als Slider- und Karussellersatz

Beitrag von Seelchen am Do März 01, 2012 11:45 pm

Ich habe deine Grafik einmal bei meinem ImageShack-Account hochgeladen und den Direct Link von dort in deinen Code eingefügt. Und es funktioniert! Smile

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?
avatar
Seelchen
Admin

Anzahl der Beiträge : 187
Anmeldedatum : 07.02.12

http://buecher-seele.blogspot.com

Nach oben Nach unten

Re: Einfacher Rahmen als Slider- und Karussellersatz

Beitrag von Luminchen am Do März 01, 2012 11:47 pm

Nein kleiner....das Buch ist ja rießig! Shocked

Luminchen

Anzahl der Beiträge : 22
Anmeldedatum : 25.02.12
Ort : Allgäu

http://luminchenslesekiste.blogspot.com/

Nach oben Nach unten

Re: Einfacher Rahmen als Slider- und Karussellersatz

Beitrag von Seelchen am Do März 01, 2012 11:51 pm

So? Smile

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>
avatar
Seelchen
Admin

Anzahl der Beiträge : 187
Anmeldedatum : 07.02.12

http://buecher-seele.blogspot.com

Nach oben Nach unten

Re: Einfacher Rahmen als Slider- und Karussellersatz

Beitrag von Luminchen am Do März 01, 2012 11:55 pm

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!!!!

Luminchen

Anzahl der Beiträge : 22
Anmeldedatum : 25.02.12
Ort : Allgäu

http://luminchenslesekiste.blogspot.com/

Nach oben Nach unten

Re: Einfacher Rahmen als Slider- und Karussellersatz

Beitrag von Luminchen am Do März 01, 2012 11:56 pm

Hier wäre nochmal der Photoshop Link...

http://illiweb.com/fa/pbucket.gif

Luminchen

Anzahl der Beiträge : 22
Anmeldedatum : 25.02.12
Ort : Allgäu

http://luminchenslesekiste.blogspot.com/

Nach oben Nach unten

Re: Einfacher Rahmen als Slider- und Karussellersatz

Beitrag von Seelchen am Fr März 02, 2012 12:01 am

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):

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! Very Happy
avatar
Seelchen
Admin

Anzahl der Beiträge : 187
Anmeldedatum : 07.02.12

http://buecher-seele.blogspot.com

Nach oben Nach unten

Re: Einfacher Rahmen als Slider- und Karussellersatz

Beitrag von Gesponserte Inhalte


Gesponserte Inhalte


Nach oben Nach unten

Seite 1 von 2 1, 2  Weiter

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach oben

- Ähnliche Themen

 
Befugnisse in diesem Forum
Sie können in diesem Forum nicht antworten