- Code:
-
<html>
<head>
<title>Leeres Layout<title>
{PLACE_POWEREDBY}
<style type="text/css">
div
{scrollbar-arrow-color: #FFFFFF;
scrollbar-base-color: #FFFFFF;
scrollbar-track-color: #FFFFFF;
scrollbar-face-color: #FFFFFF;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #FFFFFF;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-shadow-color: #FFFFFF}
body
{scrollbar-arrow-color: #FFFFFF;
scrollbar-base-color: #FFFFFF;
scrollbar-track-color: #FFFFFF;
scrollbar-face-color: #FFFFFF;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #FFFFFF;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-shadow-color: #FFFFFF;
background-image:
background-repeat: repeat}
td
{font-family: arial;
font-Size: 7pt;
Color: #FFFFFF}
INPUT {background-color: transparent; color: #FFFFFF; border: 1px #FFFFFF solid }
TEXTAREA {background-color: transparent; color: #FFFFFF; border: 1px #FFFFFF solid; width: 300px}
b{color: FFFFFF; font-size: 10pt;}
i{color: FFFFFF; font-size: 10pt;}
u{color: FFFFFF; font-size: 11pt;}
a{ CURSOR: default; COLOR: FFFFFF;
-DECORATION: none; font-family: arial}
a.navi:link, a.navi:active, a.navi:visited
{cursor: default;
color: FFFFFF;
-DECORATION: none;
background-color: FFFFFF;
text-align: center;
width: 100%;
font-family: arial}
a.navi:hover
{cursor: default;
color: #FFFFFF;
-DECORATION: none;
background-color: FFFFFF;
text-align: center;
width: 100%;
border: 2px #000000 solid;
font-weight: bold;
font-family: arial}
a:hover {CURSOR: default; COLOR: #FFFFFF;
-DECORATION: none; background-color: transparent; border-bottom: 2px #FFFFFF solid; font-family: arial}
.titlenavi {FONT-FAMILY: arial; FONT-SIZE: 11pt; COLOR: #FFFFFF;
-DECORATION: none; margin-bottom: 20px; line-height: 15px; font-weight: normal; display: block; border: 2px #FFFFFF solid; font-weight: bold; text-align: center}
table{width: 100%;}
</style>
</head>
<body bgcolor="#000000">
<div id=head style="left: 0px; top: 0px; topmargin: 0; leftmargin: 0; position: absolute"><scrolling:no>
<img src="http://HINTERGRUNDBILD.jpg" border="0"></scrolling>
</div>
<div align="justify"
id=entry style="position: absolute; overflow: auto; left: 100%; top: 100%; width: 100%; height: 100%; font-family: arial; font-size: 12px; color: #FFFFFF; border=: 2px; overflow: auto; filter: alpha(opacity=100); scrolling:no><justify>
:CONTENT_HIER:
</justify></div>
<DIV id=navigation
style=" overflow:auto; LEFT: 100%; WIDTH:100%; POSITION: absolute; TOP:100%; HEIGHT: 100%">
<p style="text-align: absolute">
<font color= #FFFFFF face="arial" size="1"><center>
<font size="2"><b>Titel</b></font><br>
<a href="http://IRGENDEINLINK.de">Link</a><br>
<a href="http://IRGENDEINLINK.de">Link</a><br>
<a href="http://IRGENDEINLINK.de">Link</a><br>
<br>
<hr><br>
<b>Titel</b><br>
<a href="http://IRGENDEINLINK.de">Link</a><br>
<a href="http://IRGENDEINLINK.de">Link</a><br>
<a href="http://IRGENDEINLINK.de">Link</a><br>
<br>
<hr><br>
</div></p></font>
</center>
</body></html>
Diesen Code musst du einfach nur in das Feld des Vollprofibereichs packen und anschließend anpassen. Aber vorerst erkläre ich ihn einmal:
1. Für gewöhnlich beginnt ein Layoutcode mit einem
- Code:
-
<html>
Damit auch der dümmste Browser (sprich der IE) merkt, dass es sich um einen Layoutcode handelt.
2. Anschließend folgt der
Header. Er steht sozusagen über dem Blog und ist unsichtbar bei MyBlog. In den Header fügst du CSS-Befehle. Also wie soll der Browser die Schrift etc. darstellen? Wenn du etwas nicht definierst, dann benutzt der Header die Standarteinstellungen.
Bevor wir nun aber mit dem CSS anfangen, packen wir das da in den Header:
- Code:
-
{PLACE_POWEREDBY}
Das ist der Tag um die Werbung im Blog einzufügen. Wenn du ihn in den Header packst, dann ist er ebenso unsichtbar. Folge: Keine Werbung mehr.
Aber nun zum CSS-Bereich.
Den Beginnen wir einfach mit dem Befehl für CSS:
- Code:
-
<style type="text/css">
(Die Befehle für die Darstellung sind manchmal überflüssig, aber wir machen hier sie nun, damit es wirklich keine Probleme gibt.)
Anschließend folgen in Blöcken jeweils Befehle für einzelne Dinge. Wir greifen hier als Beispiel den Befehl für die Navigationslinks heraus:
- Code:
-
a.navi:link, a.navi:active, a.navi:visited
{cursor: default;
color: FFFFFF;
-DECORATION: none;
background-color: FFFFFF;
text-align: center;
width: 100%;
font-family: arial}
Der Code beginnt mit der Definition. Was wollen wir definieren? Den Navigationslink (a.navi). Nach der Definition folgt eine {, anschließend die Befehle.
Zuerst wird der Mauspfeil festgelegt, dann die Farbe, die Textverzierung usw. Das alles kann beliebig vertauscht werden in seiner Reihenfolge, ganz weggelassen werden oder neu definiert werden. Näheres dazu findest du unter www.css4you.de, anschließend beendet wir den Block mit einer }.
Und damit werden nun alle möglichen Dinge festgelegt.
Bevor wir nun den Header abschließen, hier noch eine Kleinigkeit:
- Code:
-
table{width: 100%;}
Das hier definiert die Breite bzw. Größe deines Textfeldes. Da es aber nochmals eine solche Definition im body-Bereich gibt, solltest du hier 100% lassen bzw. beides ggf. anpassen.
Um den Header-Bereich nun zu beenden, wird der End-Tag noch eingesetzt:
- Code:
-
</style></header>
3. Es folgt der
Body-Bereich. Hier wird der eigentliche Aufbau festgelegt. Der ist an sich sehr einfach.
Man beginnt mit dem Hintergrund:
- Code:
-
<body bgcolor="#000000">
<div id=head style="left: 0px; top: 0px; topmargin: 0; leftmargin: 0; position: absolute"><scrolling:no>
<img src="http://HINTERGRUNDBILD.jpg" border="0"></scrolling>
</div>
Zuerst wird die background-color, also die Hintergrundfarbe definiert. Diese sieht man nur, wenn das Bild (noch) nicht geladen ist bzw. wenn der Bildschirm größer als das Bild ist.
Darunter ist der Tag für das Bild, hier musst du nur den Platzhalter (http://HINTERGRUNDBILD.jpg) gegen den Link deines Hintergrundbildes austauschen. (Benutze einen Directlink!)
Anschließend folgt der CONTENT-Bereich, also der Bereich deines Textfeldes:
- Code:
-
<div align="justify"
id=entry style="position: absolute; overflow: auto; left: 100%; top: 100%; width: 100%; height: 100%; font-family: arial; font-size: 12px; color: #FFFFFF; border=: 2px; overflow: auto; filter: alpha(opacity=100); scrolling:no><justify>
:CONTENT_HIER:
</justify></div>
Hier ist das CONTENT in ein div gepackt. Das kann man sich so vorstellen wir ein Viereck, das du nun nach Belieben auf deinem Blog herumschieben kannst. Dazu musst du die Angaben „left“ (Abstand zum linken Seitenrand), „top“ (Abstand zum oberen Seitenrand), „width“ (Breite) und „height“ (Höhe) verändern. Am besten machst du Pixelangaben (px), näheres findest du im Forum (
Klick!)
Probiere die Werte aus, bis das CONTENT da ist, wo es hin soll.
Achtung! Wenn du oben beim table-width eine Zahl hast, sollte diese hier ein klein wenig größer sein, damit der Scrollbalken den Text nicht berührt.
Weiter geht es mit der Navigation:
- Code:
-
<DIV id=navigation
style=" overflow:auto; LEFT: 100%; WIDTH:100%; POSITION: absolute; TOP:100%; HEIGHT: 100%">
<p style="text-align: absolute">
<font color= #FFFFFF face="arial" size="1"><center>
<font size="2"><b>Titel</b></font><br>
<a href="http://IRGENDEINLINK.de">Link</a><br>
<a href="http://IRGENDEINLINK.de">Link</a><br>
<a href="http://IRGENDEINLINK.de">Link</a><br>
<br>
<hr><br>
<b>Titel</b><br>
<a href="http://IRGENDEINLINK.de">Link</a><br>
<a href="http://IRGENDEINLINK.de">Link</a><br>
<a href="http://IRGENDEINLINK.de">Link</a><br>
<br>
<hr><br>
</div></p></font>
</center>
Auch die Navigation ist in ein div gepackt. Du kannst sie so herumschieben wie das CONTENT auch. Durch
- Code:
-
<center></center>
ist die Navigation zentriert, du kannst es rausnehmen, dann ist sie linksbündig oder umändern, wenn du das willst.
Um nun einen Link einzufügen, musst du nur den Link (http://IRGENDEINLINK.de) durch den Link ersetzen, den du willst und den Text „Link“ durch das Wort, das nachher in der Navigation dafür angezeigt werden soll.
Wenn du mehr oder weniger Links hast, füge einfach denselben Code drunter nochmals ein oder lösche ihn heraus.
Wenn du automatische MyBlog-Tags einfügen willst wie etwa das Gästebuch oder den Link zu Freunden, dann füge einfach anstatt einem Link den {}-Tag dafür ein. (Die Tags findest du über dem Vollprofifeld.)
Wenn du Zusatzseiten oder Kategorien hast, findest du die Links unter dem Feld. Aber Achtung! Füge nicht den ganzen Code ein, sondern nur die URL (also den Link) der Zusatzseite bzw. Kategorie.
So, am Ende muss der Body-Tag noch geschlossen werden:
- Code:
-
</body>
Und der html-Tag ebenfalls:
- Code:
-
</html>
Wenn du Sonderblöcke einfügen willst, ein Youtube-Video oder etwas, dann setze einfach ein div:
- Code:
-
<div
style="LEFT: 100%; WIDTH:100%; POSITION: absolute; TOP:100%; HEIGHT: 100%">INHALT</div>
Und schiebe es im Blog herum.
Sollte mal etwas nicht gehen oder angezeigt werden, überprüfe die Zeichensetzung und Schreibweise und ob du alle Tags geschlossen hast.
Ansonsten sind wir fertig!
Startseite 
Neueste Bilder 
