Verschiedene Hintergründe für bestimmte Seiten ♥♥


Leider kam ich diese Woche nicht dazu, euch über den Sonntagstutorial abstimmen zu lassen. Ich hatte allgemein eine nicht so tolle Woche, weshalb ich mich lieber im Bett versteckt als mich am PC um Mails und meinen Blogs gekümmert habe. Es war einfach keine gute Woche für mich.


Für euch habe ich ein Tutorial, wie man für eine bestimmte Seite einen eigenen Hintergrund einstellen kann. Wer es zum Beispiel im Blog eher minimalistisch hält, aber auf einer bestimmten Seite einen lebendigeren Hintergrund haben möchte, kann das mit diesem Tutorial verwirklichen.


1. Öffnet unter Vorlage euren HTML-Code. Sucht nach </head> und fügt folgendes direkt darunter:

<b:if cond='data:blog.url == &quot;http://www.copypastelove.org/p/mira.html&quot;'>
<style>
body {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgivcJs1nb4kkxy7wT7x3rrxYVZGaVcMyG3eGpx0VXkRQO2BAtvtYIH4SMX0Bdpuw7d7tm1bPEFsOUe1w2kBtZlw4-GjlbznXzPT84wQKfyj_BPlnihbqy6nuodUtqa9wajLi3Yn7Rz_iLB/s1600/wavegrid.png);background-position: center; background-repeat:repeat; background-attachment: fixed;
}
</style>
</b:if>
So sollte es dann aussehen:


2. Ersetzt das gelb-markierte mit einer Seite oder Post eurer Wahl. Den Link kriegt ihr, indem ihr die Seite öffnet und die URL aus der Adressleiste kopiert. Das grün-markierte ersetzt ihr durch den Link eines Hintergrundes eurer Wahl, welches ihr zuvor im Internet hochgeladen habt (via Photobucket, TinyPic, Picasa, Abload etc.). Schöne Hintergründe findet ihr hier unter "Hintergründe".

3. Speichern.

TIPP für Fortgeschrittene: Ihr könnt auch das andere Teile des Designs ändern. Wie ihr schon gemerkt habt, steht im Code ein Style-Tag, dazwischen könnt ihr euch CSS-mäßig komplett austoben! :)

Viel Spaß und gutes Gelingen!

21 21 Kommentare

  1. Coole Idee und gut erklärt, ich werde es bald mal ausprobieren! :-)

    AntwortenLöschen
  2. schön was man mit den Conditional-Tags anfangen kann :)

    Alternativ lässt sich das auch für alle statischen Seiten, alle "Item"-Pages etc. machen, indem man den HEAD-Tag mit einem 'data:blog.pageType' erweitert :) Lässt sich echt viel schönes mit machen!

    liebe grüße,
    H+ML

    AntwortenLöschen
  3. Ich hab genau das die letzten Tage gesucht und nicht gefunden, perfekt :D
    Das wird gleich ausprobiert!

    Spark&Bark

    xx

    AntwortenLöschen
  4. Als nächstes Tutorial würde ich mir das Menü wünschen so wie ihr es jetzt habt, danach suche ich schon lange :)

    AntwortenLöschen
    Antworten
    1. Dazu gibt es doch schon ein Tutorial?! "Drop-Down-Menü" heißt es und du musst einfach am CSS-Code herumbasteln, damit es auch so aussieht wie da. :D Glaube ich zumindest mal. ^^

      Löschen
    2. Ja das habe ich ja so in meinem Blog eingebaut, aber das ist dann nur mit einer Drop down Reihe und nicht 3 nebeneinander, siehe "Für die Leser".

      Löschen
    3. das ist kniffliger...hier muss du ein neues Element anlegen mit 3 Spalten, wär zu kompliziert hier in den Kommentaren zu erklären

      Löschen
    4. Drum hätte ich dazu gern ein Tutorial ^.^

      Löschen
  5. Gehts dir denn mittlerweile besser?

    Das ist wirklich ein tolles Tutorial!

    LG
    Anke

    AntwortenLöschen
  6. Kann mir jemand helfen? Ich suche eine Anleitung dafür, wie man Hintergründe 'feststellen' kann. Sodass man nur den Text scrollt, der Hintergrund aber 'fest' bleibt. Wisst ihr was ich meine?!

    AntwortenLöschen
    Antworten
    1. {
      background: url(//.....jpg) fixed;
      }

      im richtigen bereich hinten an "background" ein "fixed" dranhängen :)

      Löschen
  7. klasse,
    wie immer bei euch ;-)
    aber........
    ich sehs grad erst
    WIE HABT IHR DENN EURE KLASSE....MENULEISTE........
    erstellt???
    die ist einfach.....WOW

    ein grüßle sendet flo

    AntwortenLöschen
  8. dein blog hat mir schon des öfteren geholfen! danke :)

    xoxo milla
    http://blondhairpinkheart.blogspot.co.at/

    AntwortenLöschen
  9. ***!!!FRAGE!!!***
    Wie Programmiert man eigentlich das Datum und die Kommentare dass sie am Rand in einem Kreis zu sehen sind? Hier ein Beispiel: http://myriamfrisano.blogspot.de/
    Würde mir Riesig Helfen wenn ihr mal ein Tutorial dazu macht! Und anderen würde es auch nicht schaden!
    Liebe Grüße Fentry

    AntwortenLöschen
  10. Wie ist das denn, man kann das ja auch alles direkt auf der Seite im html ändern. Welche Variante ist denn technisch gesehen besser?

    Liebe Grüße!

    AntwortenLöschen
  11. geht nicht, warum? bei mir macht er gar nichts

    AntwortenLöschen
    Antworten
    1. Mit so einem Kommentar kann ich dir auch nicht helfen..

      Löschen
  12. ohje...
    hab's schon 2x versucht aber es funktioniert einfach nicht :(

    AntwortenLöschen
  13. Hallo, ich schaffe es leider nicht, meinen Hintergrund einzufügen. Könnte mir vllt jemand sagen, wo mein Fehler liegt? Habe direkt unter /head alles eingefügt und nichts ändert sich. Ist das mit der Vorlage, die ich verwende nicht machbar?


    Viele Grüße,
    Nina

    AntwortenLöschen

Danke für dein Kommentar! Bitte beachte, dass Beleidigungen & Spam ohne Vorwarnung gelöscht werden. Bitte hab Verständnis dafür, dass wir nicht alle Kommentare beantworten können!

Falls ein Tutorial nicht funktioniert hat, dann schreibe bitte in deinem Kommentar genau, was nicht funktioniert & deinen Bloglink. So kann dir besser geholfen werden!

Du möchtest dich direkt an Mira wenden, um ein Problem zu lösen oder ein Design erstellen zu lassen? Dann schaue doch hier vorbei und melde dich!

Hinweis: Nur ein Mitglied dieses Blogs kann Kommentare posten.