[BLOGGER] Classic Menus ✤✤✤

Eigentlich ist es eine der ersten Sachen, die man normalerweise auf Tutorial-Blogs finden kann. Mir ist allerdings aufgefallen, dass ich tatsächlich kein Tutorial habe, in dem ich ein simples, gerades Menü vorstelle. Das möchte ich heute nachholen.
Ein Menü zu schreiben ist wirklich extrem einfach. Blogger verfügt über das Seiten-Gadget. Ihr könnt natürlich das gestalten, oder aber ihr schreib gleich alles selbst, was ich persönlich vorziehe, weil es mit der CSS einfacher geht, das Seiten-Gadget hat tonnenweise versteckte CSS drin, die ich lieber komplett umgehe, aber ich stell euch das am Ende dieses Posts auch noch vor, weil es mit einer Menge !importants auch relativ schnell geht.
Ich hab wieder ein Demo zusammengestellt, damit ihr euch die einzelnen Beispiele ansehen könnt.

Usually it's one of the first things you can find on a tutorial blog. But I realized that I really never made a tutorial about simple menus. That's what I wanna do today.
Writing a simple horizontal menu is very very easy. Blogge has the PageList-Widget, you could of course style this one, but I prefer writing everything myself, because blogger hides a lot of CSS, which you have to overwrite. Still I am gonna show you how to do that at the end of this post.
I wrote a Demopage for ya, so you can have a look at the different examples.

DEMO

A Horizontal List Menu

Als erstes wie man überhaupt ein horizontales Menü bekommt, eine einfache Leiste.
Dazu schreiben wir als erstes eine Liste, in die wir Links platzieren.

First how you get a horizontal menu out of a list. We start by writing that list, in which we place our page-links.

<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Archive</a></li>
<li><a href="#">Contact</a></li>
</ul>

Ausschaun tut das dann so:

Result looks like this:

• Home
• About
• Archive
• Contact

Ja, nicht ganz das, was man erwartet. Da müssen wir mit CSS dahinter, um das ganze in eine Horizontale Linie zu bringen.
Dafür geben wir der Liste eine Klasse und zwar nehm ich jetzt hier einfach simple, weil ich das im Demo auch so gemacht hab.
Unsere Liste schaut jetzt also so aus:

Not what we want. We have to add CSS, to transform it into a horizontal bar. For that we are adding a class to the ul-element, which in my case is simple. Our list now looks like that:

<ul class="simple" >
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Archive</a></li>
<li><a href="#">Contact</a></li>
</ul>

Dem ganzen geben wir jetzt noch CSS und zwar folgendes:

Now for the CSS

.simple{
text-align: center;
}
.simple ul{
width: 100%;
list-style: none;
}
.simple li{
list-style: none;
display: inline;
padding-right: 15px;
text-align: center;
}

Und dann haben wir's schon. Unser Basis-Menü ist gemacht und schaut so aus:

And after adding that our basic menu is done, and looks like that:

• Home
• About
• Archive
• Contact

Eigentlich können wir das jetzt genauso in unseren Blog einbauen, aber vielleicht wollen wir hier noch etwas mehr Gestaltung hinzufügen. Wie ihr seht, bin ich immer von der simple-CSS ausgegangen und hab darauf aufgebaut um ein paar verschiedene Styles zusammenzustellen. Die verschiedenen Versionen könnt ihr euch eben im Demo ansehen.
Wie bekommt ihr das jetzt aber in den Blog? Oft haben Leute damit so bisschen ihre Schwierigkeiten, also geh ich das mal mit euch durch.
Ich möchte in meinen Blog jetzt das Ribbon 2 Beispiel einbauen.

Now you could just add it like that into your blog. But maybe we wanna add some style. That's what I did in the examples. To the simple CSS I added
another class with some styling.
Adding this to your blog is simple. But I wanna tell you how, using Ribbon 2.

How to get it in your Blog

Das ganze lässt sich jetzt auf zwei Arten umsetzen. 1. Eigene HTML-Liste schreiben - links nicht vergessen - CSS hinzufügen, alles in ein HTML-Gadget kopieren und speichern.
Oder aber ihr schreibt die CSS spezifisch auf das Seitenlistengadget um.
Wie das geht, möchte ich jetzt kurz zeigen.
Das Seitenlistengadget funktioniert relativ speziell, aber es ist machbar auch das anzupassen.

Ihr müsst anstelle meinen Klassen die Klasse .PageList verwenden und dann ist es eigentlich genau gleich.
Die CSS könnt ihr im Vorlagendesigner einfügen, oder aber direkt im HTML. Dafür sucht ihr nach:

]]></b:skin>

Und darüber kommt dann die CSS. Hier muss nicht noch die Simple-CSS eingefügt werden, weil eine horizontale Liste ist das ganze schon. :) Es sind einige mehr !importants von Nöten um die CSS die bereits da ist zu überschreiben. Aber sonst ist es eigentlich genau das gleiche. Für dieses schwarze Band sähe die CSS beispielsweise so aus (einfach Ribbon 2 kopieren und etwas nach eigenem Geschmack modifizieren.

You can add this to your blog in two ways. 1. Just write your list - dont forget adding the links - add the CSS and put everything in a HTML-widget.
Save and you're done. Or 2. you write the CSS specifically for the PageList-Widget, which is probably already in your blog.
I wanna show you how that works.
This widgets works a lil strangely, but it is still possible to adjust this one as well.

Instead of using my classes, the class you have to use is .PageList, the rest is more or less the same.
CSS can be added in the template designer or directly into the HTML, which is what I prefer.
In the HTML search for:

]]></b:skin>

And above of that you're adding the CSS, you don't have to incorporate the simple-CSS here because the PageList is already horizontal. :) You have to use quite some !importants to overwrite the PageList's actual CSS. For this black ribbon the CSS would look like this:

.PageList{
width: 968px;
height: 36px;
background-color: #1a1a1a;
position: relative;
text-align:center !important;
margin-left: -74px;
}

.PageList li{
text-align: center;
display:inline !important; 
float:none !important;
}

.PageList li a{
color: #f9f9f9 !important;
font-size: 14px !important;
}

.PageList li a:hover{
border: 0;
color: #f9f9f9;
letter-spacing: 2px;
}

.PageList:before{
content:"";
width: 0;
height: 0;
border-width: 17px;
border-style: solid;
border-color: black black black transparent;
position: absolute;
top: 1px;
left: -34px;
}

.PageList:after{
content:"";
width: 0;
height: 0;
border-width: 17px;
border-style: solid;
border-color: black transparent black black;
position: absolute;
top: 1px;
right: -34px;
}

Und das war's von meiner Seite. Ich hoffe das hier hat euch vielleicht geholfen. Und bei Fragen steh ich wie immer zur Verfügung. :) Oh und was haltet ihr vom neuen Demo-Style? Gut?

And that's all from my site. I hope this helped you. And if you have any questions - as always - feel free to ask. :) Oh and what do you think about the new Demo-Style? Good?