Freitag, 10. August 2012

Tutorial: Menüleiste über Header einfügen

Hallo meine Lieben!
In diesem Tutorial erkläre ich euch, wie ihr die Menüleiste (bei mir: Posts, Tutorials, to do, Gästebuch, Blogvorstellung) ober euren Header einfügen könnt!
Bei mir würde das dann so aussehen:
(Ps, die Farben, Schrift, etc kann man natürlich ändern!! - wird weiter unten erklärt)


Falls es euch interessiert, dann bleibt dran :)

Schritt 1

Ihr geht auf Design - Html bearbeiten, dann drückt ihr Strg und F und sucht nach   ]]></b:skin>

und fügt dann drüber diesen Code ein:

 /* Link-Balken
----------------------------------------------- */
#Line {
width: 100%;
height: 21px;
background: #eee;
position: fixed;
color: #ccc;
margin-top: 0px;
text-align: center;
word-spacing: 20px;
font-family: arial;
font-size: 12px;
line-height: 1.9em;
letter-spacing: 1px;
}



Ihr müsst einfach rumprobieren, wie's euch am Besten gefällt. 

Width = Position (100% - zentriert, 50% zb. links von eurem blog) 
Height = Größe des Balkens.
Falls ihr die Hintergrundfarbe des Balkens ändert wollt, dann sucht euch hier den passenden ↓ Farb-Code aus :))  ↓
Margin-top regelt den Abstand der Tabs von der oberen Kante eures Blogs .
Text-align = Ausrichtung der einzelnen Tabs.
Word-spacing = Abstand zwischen den Tabs. 
Font-family = Schriftart
Font-size = Schriftgröße 
Line-height = Höhe der Leiste
Letter-spacing Abstand der einzelnen Buchstaben zueinander.

Schritt2:

Jetzt sucht ihr nach </head> 
(drückt wieder Strg + F)

Darunter fügt ihr nun diesen Code ein:

<div id='Line'>
<a href='LINK'>TEXT</a>
<a href='LINK'>TEXT</a>
<a href='LINK'>TEXT</a>
<a href='LINK'>TEXT</a>
<a href='LINK'>TEXT</a>
</div>

bei mir sieht das dann so ↓ aus. Ich hab bei "link" und "text" schon was eingefügt, damit ihr euch das vielleicht besser vorstellen könnt. und wenn ihr das gemacht habt, nur noch abspeichern und fertig ;) (oben seht ihr dann nochmal wie's aussehen könnte:))
 

20 Kommentare:

  1. super erklärt. hast einen sehr tollen blog. (:

    AntwortenLöschen
  2. super tutorial, will ich bald mal probieren! :)

    AntwortenLöschen
  3. richtig gute erklärung,wollte schon immer mal wissen wie das geht:D

    AntwortenLöschen
  4. Toll und verständlich erklärt!
    habe es grade aus probiert , jetzt steht bei mir oben aber 'TEXT TEXT TEXT TEXT'
    wie kann ich das ändern?

    Ganz liebe grüße!:)

    http://rabeasantini.blogspot.de/

    AntwortenLöschen
    Antworten
    1. das hab ich eigentlich auch erklärt ;)
      lies nochmal bei schritt 2 nach.
      du musst einfach statt text das einfügen, was du da stehen haben möchtest ;)

      Löschen
  5. hey.
    bei mir geht die Seitenleiste immer über "Missbrauch melden" , "Nächster Blog" usw. wie kann ich das ändern ?

    http://pinkesocken.blogspot.de/

    AntwortenLöschen
    Antworten
    1. warum das jetzt bei dir so ist, weiß nicht, vielleicht hast dus falsch eingefügt oder so :)
      du kannst ja auch mal versuchen, diese leiste wo "missbrauch melden" etc steht weg zu machen, wie bei mir. vielleicht ist es dann weg.

      Löschen
    2. und wie mache ich die weg ? :D

      wäre super wenn du mir auch hier antworten würdest: http://foreveryoung-jenny.blogspot.de/

      Löschen
  6. Danke für das Tutorial!
    Schön dass du das gemacht hast! .-)
    Liebe Grüße a&a twins

    AntwortenLöschen
  7. hmm... bei mir funktoniert das ganze nicht so richtig, aber ist meine schuld :P du hast einen sehr süßen blog! :)♥

    AntwortenLöschen
  8. Hallo :) Also erstmal danke für das Tutorial, das war wirklich sehr hilfreich! :) So und dann auch schon meine Frage. Also ich habe das hinbekommen mit der Menüleiste nur jetzt weiß ich nicht wie ich das machen kann das man dann darauf klicken kann und dann da was lesen kann. Könntest du mir vllt sagen wie man das macht? Das wäre sehr lieb. :)

    AntwortenLöschen
    Antworten
    1. hey ho,
      sorry, ich versteh leider deine frage grad nicht.
      ich mein, wenn du auf zb"to do" klickst, dann zeigts dir doch an was da steht? :D

      Löschen
  9. Uhh bei mir hats auch geklappt :D
    Aber kannst du vielleicht auch erklären, wie das unter den header geht, so wie bei dir jetzt?
    Das wär echt toll <3

    Alles Liebe :)

    http://we-all-are-daydreamers.blogspot.com/

    AntwortenLöschen
    Antworten
    1. also wenn dus unter den header willst, dann musst du eigentlich GAR NICHTS mit codes machen. du gehst einfach auf " post schreiben" - "posts bearbeiten" -- rechts daneben steht dann " seiten bearbeiten" und dann gehst du auf "neue seite" -> die sind dann automatisch unter dem header =)
      hier noch ein kleines bild damit duauch verstehst was ich meine:

      http://img4.fotos-hochladen.net/uploads/seiteneinfgen7sjry2di83.png

      Löschen
  10. Hey :) Also ich habe jetzt verstanden was mein Problem war. Peinlich, aber egal. Jetzt habe ich habe eine neues Problem. Wenn man jetzt zum Beispiel bei meinem Blog auf to-do klickt wird nur das angezeigt: 'Die Seite, nach der Sie im Blog suchen, ist nicht vorhanden.' Was muss jetzt machen, könntest du mir da vllt helfen? :O

    AntwortenLöschen
    Antworten
    1. oh okay, passt!
      vielleicht hast du den link nicht richtig eingefügt bzw. nicht vollständig :)
      ich finds immer schwer jemandem zu helfen, wenn mans nicht selbst sieht :D
      also schau einfach nach, ob der link richtig drin steht und ob der link vollständig ist :)

      Löschen
  11. Ok, sorry weil ich jetzt wirklich nicht weiter weiß zeig ich dir jetzt einfach mal meinen Link: To-do so steht es bei mir und ich weiß nicht was daran falsch ist. Ich wäre wirklich froh, wenn du mir helfen könntest. :)

    AntwortenLöschen
    Antworten
    1. ich weiß schon was du damit meintest, aber der satz "ich finds schwer jemandem zu helfen, wenn msn nicht selbst sieht" war eher drauf bezogen, dass ich ja nicht in deine einstellungen schauen kann, also weiß ich nicht wie du die links eingefügt hast und kann dir somit auch nicht sagen, was du genau falsch gemacht hast:D
      wie gesagt, schau einfach mal, ob du den link zu der seite "to do" richtig eingefügt hast:)

      Löschen
    2. Ok ich bin total bescheuert weil ich dir eigentlich garnicht denn link schicken wollte, sondern dir einfach nur zeigen wollte wie der link in meinen einstellungen aussieht. :o Aber egal ich probier nochmal rum aber danke das du mir helfen wolltest :)

      Löschen