Selfdesigns: HTML

Posts mit dem Label HTML werden angezeigt. Alle Posts anzeigen

12:49

New Top Kommentatoren Widget

Hey ihr Lieben,

heute möchte ich euch ein Widget zeigen

wie ihr eure Top Kommentatoren anzeigen

lassen könnt OHNE das ihr mitgezählt werdet.

Und das müsst ihr machen

&& so ändert ihr es für euch um :

YourBlogUrl= da müsst ihr eure Blogurl einfügen

&ExcludeedNick1= Euer Bloggername

(direkt unter euren Blogger-Namen

&ExcludeedNick2= Fals ihr einen 2ten Bloggernamen habt)

&ShowHowMany= die Anzahl der Personen die ANgezeigt werden sollen.

Ich hoffe doch das ich euch helfen konnte ;*

Eure Jessy

07:54

Dein Text für Seite nicht gefunden!

Heey ihr Lieben.
Nach langem schreibe ich wieder ein Tutorial für euch.
Es ist nicht wirklich so spannend.
Ich hoffe jedoch es hilft jemandem von euch.

oder du klickst einfach schnell hier um es besser zu sehen:
http://beautycoral.blogspot.de/p/hho.html

Schritt 1:

Ihr klickt auf die angegebenen Sachen. Danach erscheint ein Textfeld dort gebt ihr den Text ein der erscheinen soll. Zum Schluss auf Änderungen speichern und ihr seit fertig! Wenn ihr alles richtig gemacht habt müsste vor Bearbeiten nun (Festgelegt) stehen.

Bis bald!
Lena von beautycoral.blogspot.de

11:33

Wie verlinke ich GFC und BC?

Heey ihr Lieben.

Ich möchte euch wie versprochen zeigen, wie ihr BC und GFC verlinkt.
Fangen wir an mit GFC. Ich denke das besitzen mehr von euch.
Den Link hierzu könnt ihr auf Bilder verlinken, wie z.B. Social Media Buttons (letztes Tutorial) oder selbsterstellte Bilder von euch.

1. Ihr geht aufs Dashboard und klickt auf die Follower Anzahl eures Blogs.

2. In dem Link oben shet ihr ganz viele Zahlen am Schluss des Links. Diese braucht ihr.

3. Diese kopiert ihr und fügt sie in diesen Link ein:
http://www.blogger.com/follow-blog.g?blogID=eure Zahlen

Achtung! Das = davor muss so bleiben am Link darf nichts außer die Zahlen verändert werden!

Jetzt zu Blog Connect.

1. Ihr geht auf euer Blog Connect Konto.

2. Ihr klickt oben auf Widgets.

3. Ihr klickt auf dieses Bild.

4. Nun erscheint wieder unten ein HTML Code indem zwei Links stehen. Der erste Link den ihr im HTML Code findet ist euer Link zum verlinken von BlogConnect.

In meinem Fall dieser: http://blog-connect.com/a?id=5432908491314341006

Bis bald! Lena

11:14

Follow Buttons + schwebende Social Media Buttons

Heey ihr Lieben!
Jemand hat gefragt, wo oder wie man die Follow Buttons, die bei uns an der Seite sind her bekommt bzw. macht.
Leider kann ich euch nicht sagen, wie man die macht, aber ich kann euch sagen wo ihr kostenlos solche Buttons herbekommt.

1. Geht auf diese Seite http://www.iconfinder.com/search/?q=follow+button, dort sucht ihr euch Buttons nach eurer Wahl aus.

2. Speichert sie in einem Ordner von eurem Computer.

3. Um schwebende Social Media Buttons hinzubekommen müsst ihr die Bilder z.B. hier bei http://tinypic.com/ hochladen.

4. Jetzt geht es ans coden. Ghet aufs Dashboard/Layout/Gadget hinzufügen/ HTML/Java Script.

5. Diesen Code müsst ihr nun in die leeren Zeilen einfügen.

<style>
#floatbubble {position:fixed; left: 10px; bottom: 30px; width:40px; z-index:999;}
#floatbubble a {display:block; width:40px; height:40px; background-position: center; background-repeat: no-repeat; white-space: nowrap;}

#facebook a:link {background-image:url(LINK ZUM BILD); }
#px a:link {background-image:url(LINK ZUM BILD); }
#flickr a:link {background-image:url(LINK ZUM BILD); }
#da a:link {background-image:url(LINK ZUM BILD); }
#vimeo a:link {background-image:url(LINK ZUM BILD); }
#formspring a:link {background-image:url(LINK ZUM BILD); }
#rss a:link {background-image:url(LINK ZUM BILD); }
</style>

<div id='floatbubble'>
<div id='facebook'><a href="LINK" target="_blank"></a></div>
<div id='px'><a href="LINK" target="_blank"></a></div>
<div id='flickr'><a href="LINK" target="_blank"></a></div>
<div id='da'><a href="LINK" target="_blank"></a></div>
<div id='vimeo'><a href="LINK" target="_blank"></a></div>
<div id='formspring'><a href="LINK" target="_blank"></a></div>
<div id='rss'><a href="LINK" target="_blank"></a></div>
</div>

Rot markierte Zeilen löscht ihr und stellt dort den letzten Link also ich glaube der heißt Layout Link ein von deinem Button den du bei tinypic hochgeladen hast.

Blau markierte Zeilen gibst du den Link zu deinem Social Media Button ein.

Rot markierte Zeilen bestimmt die Breite der Buttons.

Ich werde gleich noch ein Tutorial schreiben, wie ihr Google Friend Connect und BlogConnect verlinkt.

Eure Lena.

08:38

Abgerundete Bilder

Heey ihr Lieben.

Ich möchte euch heute zeigen, wie ihr anstatt langweilige eckige Bilder, abgerundete Ecken an euren Bildern hinbekommt. So soll es dann aussehen:

Ihr geht in euren HTML Bereich unter Dashboard/Vorlage/HTML bearbeiten.
Ihr sucht nach img, oder a img { oder img in Kombination mit post. je nach Vorlage anders.

3. Nun fügt ihr unter img zwischen den beiden geschwungenen Klammern diesen Code ein:

-moz-border-radius:20px;
-webkit-border-radius:20px;
border-radius:20px;

Dann sollte das so ausschauen!

4. Speichern und fertig!

Liebe Grüße! Lena.

12:31

Variante 2 - Weiße Musikleiste

Ich habe eine bessere Alternative zur ersten weißen Musikleiste (klick) gefunden.
Sie funktioniert wieder mit dem guten alten Youtube und macht wirklich wenig Arbeit.

Schritt 1:
Ihr sucht euch euer gewünschtes Lied in Youtube.
Aus der Adressleiste kopiert ihr euch nun den jeweiligen Teil der Url eures Liedes den ich fett markiert habe.

http://www.youtube.com/watch?v=v-i8okC0-GE

Schritt 2:
In den Html-Teil eures Postes kopiert ihr folgenden Code

An die Stelle der X'e setzt ihr nun den vorher kopierten Teil der Url.
Wer möchte kann dann noch Länge und Breite der Leiste anpassen.

Edit: in diesem Post erscheint die Leiste einfach nicht. Fragt mich nicht wieso, es ist mir unerklärlich
auf meinem Blog könnt ihr sie aber im aktuellen Post anschauen.

10:25

Sidebar fixieren

Hey ihr Lieben.

Ich möchte euch heute erklären, wie ihr eure Sidebar fixieren könnt.
Zuerst solltet ihr wissen, dass für dieses Tutorial eure Sidebar nicht überfüllt sein sollte. Maximal ein Bild und vier Seiten-Buttons (CA.!)

1. Schritt: Vorlage/Design -> Anpassen -> Layout

2. Schritt: Bei Body-Layout dürft ihr nur diese Sidebars auswählen rechts, links oder rechts und links. Die Sidebar darf sich auch nicht im Verlauf spalten. (Zur Auswahl stehen 2. in der 1. Reihe & 1. und 2. in der 2. Reihe)

3. Schritt: Ihr geht zurück auf Vorlage/Design -> HTML bearbeiten

4. Schritt: Nun sucht ihr mit Strg + F den Begriff ]]></b:skin>

5. Schritt:Ihr fügt den Code zwei Zeilen über ]]></b:skin> der Code kommt auf eure ausgewählte Sidebar an.

Linke Sidebar:
#sidebar-left-1{position:fixed;}

Rechte Sidebar:
#sidebar-right-1{position:fixed;}

Rechte & Linke Sidebar:
#sidebar-right-1{position:fixed;}
#sidebar-left-1{position:fixed;}

Fertig!

Liebe Grüße und bis bald! Lena.

09:49

Kontaktformular einbinden

Heey Ihr.

Ich wollte euch heute zeigen, wie ihr ein Kontakt formular wie z.B. hier auf eine Seite einbinden könnt.

Zunächst geht ihr auf diese Seite:

http://www.foxyform.de/

Einstellungen: Bei Einstellungen würde ich zunächst diese Kästchen ankreuzen: E-Mail, Betreff, Webseite.
Profi-Einstellungen: Dort fönnt ihr die Hintergrundfarbe und alles andere einstellen. Ihr klickt einfach auf Farbtabelle und dann kopiert ihr auf der erscheinenden Seite den Farbcode, den ihr als Hintergrundfarbe oder als Schriftfarbe eingestellt haben wollt.
Zieladresse: Deine Email Adresse.
Nun gehst du auf Formular erstellen.
Jetzt kopierst du den Html Code.
Nun geh auf Blogge rund auf die Seite auf der du das Formular haben möchtest.
So. Nun müsste links oben irgendwo Verfassen und HTML stehen. Du gehst auf HTML.
Am Ende dieses WirrWarrs machst du einmal Enter (große Taste, leere Zeile) und kopierst hier den Text rein.
Jetzt auf Aktualisieren/Veröffentlichen und fertig bist du.

Ich hoffe dieses Tutorial hat euch geholfen.

Welche Tutorials möchtest ihr noch von uns sehen?

Bis bald! Lena.

10:48

LinkWithin einbinden

Heey Leute!

Ich möchte euch heute zeigen wie ihr am Ende eines Posts wie hier das "Was sie noch interessieren könnte" Gadget einbinden könnt.

Ihr geht auf diese Seite:

http://www.linkwithin.com/learn?ref=widget

Danach trägt ihr in dem Kästchen das hier ein:

Email: eure E-Mail Addresse

Blog Link: euren Blog Link

Platform: Klickt ihr euren Anbieter unter dem ihr bloggt an

Width: Bei Width gebt ihr an wie viele solcher posts es bei euch unter dem Post anzeigen soll

Denn Hacken macht ihr, wenn eure Schriftfarbe auf eurem Blog heller ist wie euer Hintergrund.

Jetzt auf Get Widget drücken!

So danach müsste eine Anleitung kommen nun drückt ihr bei erstens auf Install Widget.

Nun auf Inhalt bearbeiten. Jetzt müsste dort so ein HTMl Code stehen diesen kopiert ihr.

Dashboard, Layout, HTML/Java Script. In diesem Gadget fügt ihr den kopierten Code ein und klickt auf speichern. Finish! Ich hoffe das kleine Tutorial hat euch geholfen.

Eure, Lena.

15:58

Hintergrundmusik einfügen

Hey ihr Süßen,

also ich habe mich mal schlau gemacht wie man

Hintergrundmusik einfügt und habe eine Seite

gefunden auf der es ganz einfach ist.

Ihr geht dazu Hier rauf dann klickt ihr

auf Get the Code. Dort wählt ihr dann

Blogger aus und macht alle schritte

die dort vorgegeben sind (:

Oder ihr geht auf diese Seite
klicken, wenn das andere zu lange dauert.

&& dann einfach einfügen im

Blog speichern und fertig.

Noch fragen? dann schreibt einfach ;*

14:22

Variante 1 - Weiße Musikleiste einbinden

Viele Blogger haben einen weißen Hintergrund. Die graue Youtube-Leiste passt da einfach nicht in das Gesamtbild und Abspielen lassen sich die Lieder da auch nicht mehr.
Für all diejenigen, die untenstehende Leiste in ihrem Blog haben wollen, folgt jetzt eine kleine Anleitung.

1. Ihr geht auf diese Seite: http://mp3skull.com/
Oben in der Leiste gebt ihr euer gewünschtes Lied ein.
(Viel Auswahl ist leider nicht. Hab mich schon geärgert, dass es die Hälfte meiner Lieblingsbands dort nicht gibt)
Nach dem Klick auf "Search" erscheint eine Liste mit eurem Lied, oder ähnlichen Liedern.
Indem ihr auf Play klickt, könnt ihr herausfinden, ob es der richtige Song ist.
Ja? dann....

2. klickt ihr auf "Embed".
In dem kleinen Feld, dass sich dahinter öffnet, befindet sich euer HTML-Code zu dem Lied. (Small und Big hat was mit der Größe eurer Leiste zu tun.)
Den Code kopiert ihr und fügt ihn im HTML-Teil eures Postes ein.
Sobald er eingefügt ist, könnt ihr noch bei width(Länge) und height(Höhe) die Werte verändern,damit die Leiste so aussieht, wie ihr wollt.
Wenn ihr in den normalen Textteil wechselt, könnt ihr auch noch den Liednamen und die Internetadresse rauslöschen. Dem Code passiert dabei nichts.
Dass ihr die Leiste erstmal nicht seht, ist im übrigen normal. Sobald ihr aber auf Vorschau klickt, erscheint sie.

13:46

Header zentrieren

Hey ihr Süßen,

da jemand gefragt hat wie man einen Header zentriert

dachte ich mir mach ich mal ein kleines Tutorial dazu...

Vielleicht interessiert es noch ein paar andere (:

Als erstes geht ihr zum Vorlagen Designer ( Vorlage > Anpassen )

Wenn ihr dort seit geht auf Erweitern und scrollt runter

bis zu CSS einfügen.

In das weiße Kästchen fügt ihr dann das hier ein:

#Header1_headerimg {
margin: auto;
}

Dann sollte es so aussehen :

Und schon müsste euer Header mittig sein.

Wenn es nicht gleich so ist versucht es nochmal da Blogger meistens spinnt

&& wenn es dann immer noch nicht passt versucht es hiermit:

#header-inner img {
margin: 0 auto;}

Ich hoffe konnte euch helfen ;*

12:10

Tastenkombie && Scrollbox

Hey ihr Süßen,

eine hat mich um ein Tutorial gebeten und

hier ist es, ich hoffe euch hilft es auch ;*

Also als erstes erkläre ich euch wie ihr ein

Screenshort von euren PC-Bildschirm

machen könnt.

Dazu drückt ihr einfach die Tastenkombi

Shift-Taste (= Umschalttaste) + Druckertaste

gleichzeitig dann öffnet ihr ein Bearbeitungsprogramm

(z.b. Photoscape, Print, Photoshop usw. )

Dann drückt ihr STRG + C.

Somit fügt ihr den Screenshort ein.

Dann nur noch Speichern und fertig.

Fals ihr es in meinem Letzten post

gesehen habt habe ich dort eine

Box die man scrollen kann und

wo ein langer text drin steht um dies

zu bekommen geht ihr im Post auf

HTML> dann geht ihr auf die letzte

Zeile von nichts steht und gebt

< textarea > Hier text eingeben </ textarea >

( macht die Lesezeichen raus )

Wenn ihr das gemacht habt geht

oben zurück auf verfassen und fertig!

Hoffe habs verstanden und es klappt

Kussi ;*

bei fragen einfach kommi

11:33

Top Schreiber Gadget

Hey meine Süßen,

heute zeige ich euch wie ihr ein Top Schreiber

Gadget auf euren Blog bekommt.

dazu kopiert ihr alles was hier steht :

<div class='widget-content'>

<div style="text-align:justify;line-height:1.2;">
<script type="text/javascript">
function cCloud(feed) {
max = 0;
min = 10000;
//finding highest and lowest count
for (i=0;i<feed.count;i++)
{
ccCount = feed.value.items[i].commentcount * 1;
if (ccCount > max)
{
max = ccCount;
}
if (ccCount < min)
{
min = ccCount;
} 
} 
ccCountD = "";
display = "";
for (j=0;j<feed.count;j++)
{
ccdiff = feed.value.items[j].commentcount - min;
ccFontsize = 80 + (ccdiff * 100) / (max - min) + "%";
ccUrl = "'" + feed.value.items[j].authorurl + "'";
ccCountD = "(" + feed.value.items[j].commentcount + ")";//comment count
ccName = feed.value.items[j].title + ccCountD;
ccLName = "<a style='font-size:" + ccFontsize + "' href=" + ccUrl + " target='_blank'>" + ccName + "</a>";//clickable commentator name
display = display + ccLName + " ";
}
document.write(display);
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
YourBlogUrl=http://vivalavidalebedasleben.blogspot.de/
&Exclusions=Anonymous,TinaLaVogue
&ShowHowMany=15
&Order=alphabet
&_callback=cCloud
&_id=cfa196644e1d6159c9183548c4b5e2f5
&_render=json" 
type="text/javascript"></script>
</div>
</div>

&& kopieren.

Dann geht ihr auf Euren Blog, auf Layout,

dann neues Gadget hinzufügen,

scrollt runter bis HTML / Javascript

&& fügt es ein. Bevor ihr auf speichern

geht sucht ihr im dem Texte die Zeile

YourBlogUrl=http://vivalavidalebedasleben.blogspot.de/

&& dann fügt ihr statt http://vivalavidalebedasleben.blogspot.de/

eure Blogurl ein && geht dann auf speichern

&& fertig ist das Top Schreiber Gadget.

10:50

Social Media Buttons

Hallo.

Ich möchte euch heute zeigen, wie ihr Social Media Buttons wie auf meinem Blog beautycoral.blogspot.de hinbekommt.

Bloggerdashboard → Euer Blog → Layout → Gadget hinzufügen → HTML/Java Script
Nun fügt ihr diesen Code ein.

3. Der erste Absatz vom Code besteht für einen anderen Blog, wie z.B. einen Gemeinschaftsblog, wie ich ihn habe, wenn du das nicht willst löschtst du einfach diesen Absatz. Der zweite Absatz ist für Facebook und der dritte für Twitter. Dort wo ihr euren Link von eurem Social Network einfügen müsst habe ich rot markiert. Letztendlich sollte der Code aber in schwarz in eurem Gadget stehen.

Eure Lena!

08:16

Hallo

Hey ihr Süßen,

dann will ich mich mal vorstellen,

Ich bin Jessy und einer der 4 Autoren dieses

Blogges und wenn ihr auf das linke bild oben

klickt kommt ihr auf meinem Blog.

Als erstes möchte ich euch eins meiner Layouts

posten das ich mal gemacht habe. Das Layout

dieses Blogges habe ich auch gemacht und wenn

euch meine Arbeit gefällt kann ich gerne mehr

machen, ihr werdet öfter was Sachen wie HTML

und Photoshop bzw. Photoscape eine Menge

von mir Lesen. So das wars erstmal das ist

das design ich hoffe es gefällt euch

Kussi ;*

Hier geht es zu dem Download

Einfach dann auf

klicken & die Datei wird runtergeladen.

Entweder ihr kopiert den ganzen Text mit Strg + A , Strg + C.

&& geht dann auf Vorlage > HTML bearbeiten > Fortfahren.

drügt diesmal Strg+A und dann Strg+V und geht dann auf Speichern.

&& wenn euch gefragt wird geht ihr auf Widgets behalten.

Oder ihr geht bei Vorlage oben rechts auf Backup/Wiederherstellung,

wählt dort dann Datei hochladen aus, sucht die runtergeladenen Datei,

fügt sie dort ein, speichert sie ab && fertig.

Das Copyright bitte nicht rauslöschen, weil es das Urheberrecht

verletzt && ich werde dafür dann sorgen das es konsequenzen hat!

08:12

Willkommens Design/Layout

Heey.

Heute mein erster Post und dieser soll ein Willkommens Layout sein.

Aufgepasst ich übernehme keine Verantwortung, wenn irgendetwas mit eurem Blog schief gehen sollte.

Und bei mir läuft das ein wenig anders.

Ich kann leider noch keine Screenhots machen, deswegen muss ein Bild vorerst reichen.

Sonst probiert das Layout erst bei einem Probeblog aus, dann könnt ihr es immer noch bei eurem jetzigen machen.

Geht in euer Dashboard auf euren Blog Vorlage,Backup/Wiederherstellung, Vollständige Vorlage herunterladen ! (Denn falls das Deisgn nicht gefällt könnt ihr sofort wieder euer altes in diesem Fenster machen)
Macht nun Vorlage, HTML bearbeiten, Fortfahren und dann STRG + A und dann entf
Nun fügt ihr in dieses leere Feld diesen Code ein:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
    <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
    <b:if cond='data:blog.isMobile'>
      <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
    <b:else/>
      <meta content='width=1100' name='viewport'/>
    </b:if>
    <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>

    <b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name:     Simple
Designer: Josh Peterson
URL:      www.noaesthetic.com
----------------------------------------------- */

/* Variable definitions
   ====================
   <Variable name="keycolor" description="Main Color" type="color" default="#66bbdd" value="#667fdd"/>

   <Group description="Page Text" selector="body">
     <Variable name="body.font" description="Font" type="font"
         default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 14px Verdana, Geneva, sans-serif"/>
     <Variable name="body.text.color" description="Text Color" type="color" default="#222222" value="#777777"/>
   </Group>

   <Group description="Backgrounds" selector=".body-fauxcolumns-outer">
     <Variable name="body.background.color" description="Outer Background" type="color" default="#66bbdd" value="#667edd"/>
     <Variable name="content.background.color" description="Main Background" type="color" default="#ffffff" value="#ffffff"/>
     <Variable name="header.background.color" description="Header Background" type="color" default="transparent" value="#ffffff"/>
   </Group>

   <Group description="Links" selector=".main-outer">
     <Variable name="link.color" description="Link Color" type="color" default="#2288bb" value="#073763"/>
     <Variable name="link.visited.color" description="Visited Color" type="color" default="#888888" value="#0b5394"/>
     <Variable name="link.hover.color" description="Hover Color" type="color" default="#33aaff" value="#3d85c6"/>
   </Group>

   <Group description="Blog Title" selector=".header h1">
     <Variable name="header.font" description="Font" type="font"
         default="normal normal 60px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="italic bold 60px Calligraffitti"/>
     <Variable name="header.text.color" description="Title Color" type="color" default="#3399bb" value="#073763"/>
   </Group>

   <Group description="Blog Description" selector=".header .description">
     <Variable name="description.text.color" description="Description Color" type="color"
         default="#777777" value="#0b5394"/>
   </Group>

   <Group description="Tabs Text" selector=".tabs-inner .widget li a">
     <Variable name="tabs.font" description="Font" type="font"
         default="normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 14px Verdana, Geneva, sans-serif"/>
     <Variable name="tabs.text.color" description="Text Color" type="color" default="#999999" value="#073763"/>
     <Variable name="tabs.selected.text.color" description="Selected Color" type="color" default="#000000" value="#0b5394"/>
   </Group>

   <Group description="Tabs Background" selector=".tabs-outer .PageList">
     <Variable name="tabs.background.color" description="Background Color" type="color" default="#f5f5f5" value="#3d85c6"/>
     <Variable name="tabs.selected.background.color" description="Selected Color" type="color" default="#eeeeee" value="#6fa8dc"/>
   </Group>

   <Group description="Post Title" selector="h3.post-title, .comments h4">
     <Variable name="post.title.font" description="Font" type="font"
         default="normal normal 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal bold 24px Gruppo"/>
   </Group>

   <Group description="Date Header" selector=".date-header">
     <Variable name="date.header.color" description="Text Color" type="color"
         default="$(body.text.color)" value="#073763"/>
     <Variable name="date.header.background.color" description="Background Color" type="color"
         default="transparent" value="transparent"/>
   </Group>

   <Group description="Post Footer" selector=".post-footer">
     <Variable name="post.footer.text.color" description="Text Color" type="color" default="#666666" value="#666666"/>
     <Variable name="post.footer.background.color" description="Background Color" type="color"
         default="#f9f9f9" value="#f9f9f9"/>
     <Variable name="post.footer.border.color" description="Shadow Color" type="color" default="#eeeeee" value="#eeeeee"/>
   </Group>

   <Group description="Gadgets" selector="h2">
     <Variable name="widget.title.font" description="Title Font" type="font"
        default="normal bold 11px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal bold 30px Gruppo"/>
     <Variable name="widget.title.text.color" description="Title Color" type="color" default="#000000" value="#073763"/>
     <Variable name="widget.alternate.text.color" description="Alternate Color" type="color" default="#999999" value="#0b5394"/>
   </Group>

   <Group description="Images" selector=".main-inner">
     <Variable name="image.background.color" description="Background Color" type="color" default="#ffffff" value="#ffffff"/>
     <Variable name="image.border.color" description="Border Color" type="color" default="#eeeeee" value="#eeeeee"/>
     <Variable name="image.text.color" description="Caption Text Color" type="color" default="$(body.text.color)" value="#222222"/>
   </Group>

   <Group description="Accents" selector=".content-inner">
     <Variable name="body.rule.color" description="Separator Line Color" type="color" default="#eeeeee" value="#eeeeee"/>
     <Variable name="tabs.border.color" description="Tabs Border Color" type="color" default="$(body.rule.color)" value="#eeeeee"/>
   </Group>

   <Variable name="body.background" description="Body Background" type="background"
       color="$(body.background.color)" default="$(color) none repeat scroll top left" value="$(color) none repeat scroll top left"/>
   <Variable name="body.background.override" description="Body Background Override" type="string" default="" value=""/>

   <Variable name="body.background.gradient.cap" description="Body Gradient Cap" type="url"
       default="url(//www.blogblog.com/1kt/simple/gradients_light.png)" value="none"/>
   <Variable name="body.background.gradient.tile" description="Body Gradient Tile" type="url"
       default="url(//www.blogblog.com/1kt/simple/body_gradient_tile_light.png)" value="none"/>

   <Variable name="content.background.color.selector" description="Content Background Color Selector" type="string" default=".content-inner" value=".content-inner"/>
   <Variable name="content.padding" description="Content Padding" type="length" default="10px" value="10px"/>
   <Variable name="content.padding.horizontal" description="Content Horizontal Padding" type="length" default="$(content.padding)" value="$(content.padding)"/>
   <Variable name="content.shadow.spread" description="Content Shadow Spread" type="length" default="40px" value="40px"/>
   <Variable name="content.shadow.spread.webkit" description="Content Shadow Spread (WebKit)" type="length" default="5px" value="5px"/>
   <Variable name="content.shadow.spread.ie" description="Content Shadow Spread (IE)" type="length" default="10px" value="10px"/>

   <Variable name="main.border.width" description="Main Border Width" type="length" default="0" value="0"/>

   <Variable name="header.background.gradient" description="Header Gradient" type="url" default="none" value="none"/>
   <Variable name="header.shadow.offset.left" description="Header Shadow Offset Left" type="length" default="-1px" value="-1px"/>
   <Variable name="header.shadow.offset.top" description="Header Shadow Offset Top" type="length" default="-1px" value="-1px"/>
   <Variable name="header.shadow.spread" description="Header Shadow Spread" type="length" default="1px" value="1px"/>
   <Variable name="header.padding" description="Header Padding" type="length" default="30px" value="30px"/>

   <Variable name="header.border.size" description="Header Border Size" type="length" default="1px" value="1px"/>
   <Variable name="header.bottom.border.size" description="Header Bottom Border Size" type="length" default="$(header.border.size)" value="$(header.border.size)"/>
   <Variable name="header.border.horizontalsize" description="Header Horizontal Border Size" type="length" default="0" value="0"/>

   <Variable name="description.text.size" description="Description Text Size" type="string" default="140%" value="140%"/>

   <Variable name="tabs.margin.top" description="Tabs Margin Top" type="length" default="0" value="0"/>
   <Variable name="tabs.margin.side" description="Tabs Side Margin" type="length" default="30px" value="30px"/>
   <Variable name="tabs.background.gradient" description="Tabs Background Gradient" type="url"
       default="url(//www.blogblog.com/1kt/simple/gradients_light.png)" value="url(//www.blogblog.com/1kt/simple/gradients_light.png)"/>
   <Variable name="tabs.border.width" description="Tabs Border Width" type="length" default="1px" value="1px"/>
   <Variable name="tabs.bevel.border.width" description="Tabs Bevel Border Width" type="length" default="1px" value="1px"/>

   <Variable name="date.header.padding" description="Date Header Padding" type="string" default="inherit" value="inherit"/>
   <Variable name="date.header.letterspacing" description="Date Header Letter Spacing" type="string" default="inherit" value="inherit"/>
   <Variable name="date.header.margin" description="Date Header Margin" type="string" default="inherit" value="inherit"/>

   <Variable name="post.margin.bottom" description="Post Bottom Margin" type="length" default="25px" value="25px"/>

   <Variable name="image.border.small.size" description="Image Border Small Size" type="length" default="2px" value="2px"/>
   <Variable name="image.border.large.size" description="Image Border Large Size" type="length" default="5px" value="5px"/>

   <Variable name="page.width.selector" description="Page Width Selector" type="string" default=".region-inner" value=".region-inner"/>
   <Variable name="page.width" description="Page Width" type="string" default="auto" value="auto"/>

   <Variable name="main.section.margin" description="Main Section Margin" type="length" default="15px" value="15px"/>
   <Variable name="main.padding" description="Main Padding" type="length" default="15px" value="15px"/>
   <Variable name="main.padding.top" description="Main Padding Top" type="length" default="30px" value="30px"/>
   <Variable name="main.padding.bottom" description="Main Padding Bottom" type="length" default="30px" value="30px"/>

   <Variable name="paging.background"
       color="$(content.background.color)"
       description="Background of blog paging area" type="background"
       default="transparent none no-repeat scroll top center" value="transparent none no-repeat scroll top center"/>

   <Variable name="footer.bevel" description="Bevel border length of footer" type="length" default="0" value="0"/>

   <Variable name="mobile.background.overlay" description="Mobile Background Overlay" type="string"
       default="transparent none repeat scroll top left" value="transparent none repeat scroll top left"/>
   <Variable name="mobile.background.size" description="Mobile Background Size" type="string" default="auto" value="auto"/>
   <Variable name="mobile.button.color" description="Mobile Button Color" type="color" default="#ffffff" value="#ffffff"/>

   <Variable name="startSide" description="Side where text starts in blog language" type="automatic" default="left" value="left"/>
   <Variable name="endSide" description="Side where text ends in blog language" type="automatic" default="right" value="right"/>
*/

/* Content
----------------------------------------------- */
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
$(body.background.override)
}

html body $(page.width.selector) {
min-width: 0;
max-width: 100%;
width: $(page.width);
}

a:link {
text-decoration:none;
color: $(link.color);
}

a:visited {
text-decoration:none;
color: $(link.visited.color);
}

a:hover {
text-decoration:underline;
color: $(link.hover.color);
}

.body-fauxcolumn-outer .fauxcolumn-inner {
background: transparent $(body.background.gradient.tile) repeat scroll top left;
_background-image: none;
}

.body-fauxcolumn-outer .cap-top {
position: absolute;
z-index: 1;
height: 400px;
width: 100%;
background: $(body.background);
$(body.background.override)
}

.body-fauxcolumn-outer .cap-top .cap-left {
width: 100%;
background: transparent $(body.background.gradient.cap) repeat-x scroll top left;
_background-image: none;
}

.content-outer {
-moz-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
-webkit-box-shadow: 0 0 $(content.shadow.spread.webkit) rgba(0, 0, 0, .15);
-goog-ms-box-shadow: 0 0 $(content.shadow.spread.ie) #333333;
box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);

margin-bottom: 1px;
}

.content-inner {
padding: $(content.padding) $(content.padding.horizontal);
}

$(content.background.color.selector) {
background-color: $(content.background.color);
}

/* Header
----------------------------------------------- */
.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none;
}

.Header h1 {
font: $(header.font);
color: $(header.text.color);
text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
}

.Header h1 a {
color: $(header.text.color);
}

.Header .description {
font-size: $(description.text.size);
color: $(description.text.color);
}

.header-inner .Header .titlewrapper {
padding: 22px $(header.padding);
}

.header-inner .Header .descriptionwrapper {
padding: 0 $(header.padding);
}

/* Tabs
----------------------------------------------- */
.tabs-inner .section:first-child {
border-top: $(header.bottom.border.size) solid $(tabs.border.color);
}

.tabs-inner .section:first-child ul {
margin-top: -$(header.border.size);
border-top: $(header.border.size) solid $(tabs.border.color);
border-left: $(header.border.horizontalsize) solid $(tabs.border.color);
border-right: $(header.border.horizontalsize) solid $(tabs.border.color);
}

.tabs-inner .widget ul {
background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
_background-image: none;
border-bottom: $(tabs.border.width) solid $(tabs.border.color);

margin-top: $(tabs.margin.top);
margin-left: -$(tabs.margin.side);
margin-right: -$(tabs.margin.side);
}

.tabs-inner .widget li a {
display: inline-block;

padding: .6em 1em;

font: $(tabs.font);
color: $(tabs.text.color);

border-$startSide: $(tabs.border.width) solid $(content.background.color);
border-$endSide: $(tabs.bevel.border.width) solid $(tabs.border.color);
}

.tabs-inner .widget li:first-child a {
border-$startSide: none;
}

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
color: $(tabs.selected.text.color);
background-color: $(tabs.selected.background.color);
text-decoration: none;
}

/* Columns
----------------------------------------------- */
.main-outer {
border-top: $(main.border.width) solid $(body.rule.color);
}

.fauxcolumn-left-outer .fauxcolumn-inner {
border-right: 1px solid $(body.rule.color);
}

.fauxcolumn-right-outer .fauxcolumn-inner {
border-left: 1px solid $(body.rule.color);
}

/* Headings
----------------------------------------------- */
h2 {
margin: 0 0 1em 0;

font: $(widget.title.font);
color: $(widget.title.text.color);
text-transform: uppercase;
}

/* Widgets
----------------------------------------------- */
.widget .zippy {
color: $(widget.alternate.text.color);
text-shadow: 2px 2px 1px rgba(0, 0, 0, .1);
}

.widget .popular-posts ul {
list-style: none;
}

/* Posts
----------------------------------------------- */
.date-header span {
background-color: $(date.header.background.color);
color: $(date.header.color);
padding: $(date.header.padding);
letter-spacing: $(date.header.letterspacing);
margin: $(date.header.margin);
}
.date-header {
text-align: center;
}

.main-inner {
padding-top: $(main.padding.top);
padding-bottom: $(main.padding.bottom);
}

.main-inner .column-center-inner {
padding: 0 $(main.padding);
}

.main-inner .column-center-inner .section {
margin: 0 $(main.section.margin);
}

.post {
margin: 0 0 $(post.margin.bottom) 0;
}

h3.post-title, .comments h4 {
font: $(post.title.font);
margin: .75em 0 0;
text-align: center
}

.post-body {
font-size: 110%;
line-height: 1.4;
position: relative;
}

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: $(image.border.small.size);

background: $(image.background.color);
border: 1px solid $(image.border.color);

-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}

.post-body img, .post-body .tr-caption-container {
padding: $(image.border.large.size);
}

.post-body .tr-caption-container {
color: $(image.text.color);
}

.post-body .tr-caption-container img {
padding: 0;

background: transparent;
border: none;

-moz-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
box-shadow: 0 0 0 rgba(0, 0, 0, .1);
}

.post-header {
margin: 0 0 1.5em;

line-height: 1.6;
font-size: 90%;
}

.post-footer {
margin: 20px -2px 0;
padding: 5px 10px;

color: $(post.footer.text.color);
background-color: $(post.footer.background.color);
border-bottom: 1px solid $(post.footer.border.color);

line-height: 1.6;
font-size: 90%;
}

#comments .comment-author {
padding-top: 1.5em;

border-top: 1px solid $(body.rule.color);
background-position: 0 1.5em;
}

#comments .comment-author:first-child {
padding-top: 0;
border-top: none;
}

.avatar-image-container {
margin: .2em 0 0;
}

#comments .avatar-image-container img {
border: 1px solid $(image.border.color);
}

/* Comments
----------------------------------------------- */
.comments .comments-content .icon.blog-author {
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);
}

.comments .comments-content .loadmore a {
border-top: 1px solid $(widget.alternate.text.color);
border-bottom: 1px solid $(widget.alternate.text.color);
}

.comments .comment-thread.inline-thread {
background-color: $(post.footer.background.color);
}

.comments .continue {
border-top: 2px solid $(widget.alternate.text.color);
}

/* Accents
---------------------------------------------- */
.section-columns td.columns-cell {
border-$startSide: 1px solid $(body.rule.color);
}

.blog-pager {
background: $(paging.background);
}

.blog-pager-older-link, .home-link,
.blog-pager-newer-link {
background-color: $(content.background.color);
padding: 5px;
}

.footer-outer {
border-top: $(footer.bevel) dashed #bbbbbb;
}

/* Mobile
----------------------------------------------- */
body.mobile {
background-size: $(mobile.background.size);
}

.mobile .body-fauxcolumn-outer {
background: $(mobile.background.overlay);
}

.mobile .body-fauxcolumn-outer .cap-top {
background-size: 100% auto;
}

.mobile .content-outer {
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .15);
box-shadow: 0 0 3px rgba(0, 0, 0, .15);
padding: 0 $(content.shadow.spread);
}

body.mobile .AdSense {
margin: 0 -$(content.shadow.spread);
}

.mobile .tabs-inner .widget ul {
margin-left: 0;
margin-right: 0;
}

.mobile .post {
margin: 0;
}

.mobile .main-inner .column-center-inner .section {
margin: 0;
}

.mobile .date-header span {
padding: 0.1em 10px;
margin: 0 -10px;
}

.mobile h3.post-title {
margin: 0;
}

.mobile .blog-pager {
background: transparent none no-repeat scroll top center;
}

.mobile .footer-outer {
border-top: none;
}

.mobile .main-inner, .mobile .footer-inner {
background-color: $(content.background.color);
}

.mobile-index-contents {
color: $(body.text.color);
}

.mobile-link-button {
background-color: $(link.color);
}

.mobile-link-button a:link, .mobile-link-button a:visited {
color: $(mobile.button.color);
}

.mobile .tabs-inner .section:first-child {
border-top: none;
}

.mobile .tabs-inner .PageList .widget-content {
background-color: $(tabs.selected.background.color);
color: $(tabs.selected.text.color);
border-top: $(tabs.border.width) solid $(tabs.border.color);
border-bottom: $(tabs.border.width) solid $(tabs.border.color);
}

.mobile .tabs-inner .PageList .widget-content .pagelist-arrow {
border-$startSide: 1px solid $(tabs.border.color);
}
]]></b:skin>

    <b:template-skin>
      <b:variable default='960px' name='content.width' type='length' value='860px'/>
      <b:variable default='0' name='main.column.left.width' type='length' value='260px'/>
      <b:variable default='310px' name='main.column.right.width' type='length' value='0px'/>

      <![CDATA[
      body {
        min-width: $(content.width);
      }

      .content-outer, .content-fauxcolumn-outer, .region-inner {
        min-width: $(content.width);
        max-width: $(content.width);
        _width: $(content.width);
      }

      .main-inner .columns {
        padding-left: $(main.column.left.width);
        padding-right: $(main.column.right.width);
      }

      .main-inner .fauxcolumn-center-outer {
        left: $(main.column.left.width);
        right: $(main.column.right.width);
        /* IE6 does not respect left and right together */
        _width: expression(this.parentNode.offsetWidth -
            parseInt("$(main.column.left.width)") -
            parseInt("$(main.column.right.width)") + 'px');
      }

      .main-inner .fauxcolumn-left-outer {
        width: $(main.column.left.width);
      }

      .main-inner .fauxcolumn-right-outer {
        width: $(main.column.right.width);
      }

      .main-inner .column-left-outer {
        width: $(main.column.left.width);
        right: 100%;
        margin-left: -$(main.column.left.width);
      }

      .main-inner .column-right-outer {
        width: $(main.column.right.width);
        margin-right: -$(main.column.right.width);
      }

      #layout {
        min-width: 0;
      }

      #layout .content-outer {
        min-width: 0;
        width: 800px;
      }

      #layout .region-inner {
        min-width: 0;
        width: auto;
      }
      ]]>
    </b:template-skin>
</head>

<body expr:class='"loading" + data:blog.mobileClass'>
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/>
</b:section>

<b:if cond='data:blog.pageType == "index"'>
    <div itemscope='itemscope' itemtype='http://schema.org/Blog' style='display: none;'>
      <meta expr:content='data:blog.title' itemprop='name'/>
      <b:if cond='data:blog.metaDescription'>
        <meta expr:content='data:blog.metaDescription' itemprop='description'/>
      </b:if>
    </div>
</b:if>

<div class='body-fauxcolumns'>
    <div class='fauxcolumn-outer body-fauxcolumn-outer'>
    <div class='cap-top'>
      <div class='cap-left'/>
      <div class='cap-right'/>
    </div>
    <div class='fauxborder-left'>
    <div class='fauxborder-right'/>
    <div class='fauxcolumn-inner'>
    </div>
    </div>
    <div class='cap-bottom'>
      <div class='cap-left'/>
      <div class='cap-right'/>
    </div>
    </div>
</div>

<div class='content'>
<div class='content-fauxcolumns'>
    <div class='fauxcolumn-outer content-fauxcolumn-outer'>
    <div class='cap-top'>
      <div class='cap-left'/>
      <div class='cap-right'/>
    </div>
    <div class='fauxborder-left'>
    <div class='fauxborder-right'/>
    <div class='fauxcolumn-inner'>
    </div>
    </div>
    <div class='cap-bottom'>
      <div class='cap-left'/>
      <div class='cap-right'/>
    </div>
    </div>
</div>

<div class='content-outer'>
<div class='content-cap-top cap-top'>
    <div class='cap-left'/>
    <div class='cap-right'/>
</div>
<div class='fauxborder-left content-fauxborder-left'>
<div class='fauxborder-right content-fauxborder-right'/>
<div class='content-inner'>

    <header>
    <div class='header-outer'>
    <div class='header-cap-top cap-top'>
      <div class='cap-left'/>
      <div class='cap-right'/>
    </div>
    <div class='fauxborder-left header-fauxborder-left'>
    <div class='fauxborder-right header-fauxborder-right'/>
    <div class='region-inner header-inner'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Layout-designing (Header)' type='Header'/>
</b:section>
    </div>
    </div>
    <div class='header-cap-bottom cap-bottom'>
      <div class='cap-left'/>
      <div class='cap-right'/>
    </div>
    </div>
    </header>

    <div class='tabs-outer'>
    <div class='tabs-cap-top cap-top'>
      <div class='cap-left'/>
      <div class='cap-right'/>
    </div>
    <div class='fauxborder-left tabs-fauxborder-left'>
    <div class='fauxborder-right tabs-fauxborder-right'/>
    <div class='region-inner tabs-inner'>
      <b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>
<b:widget id='PageList1' locked='false' title='Seiten' type='PageList'/>
<b:widget id='HTML3' locked='false' title='' type='HTML'/>
</b:section>
      <b:section class='tabs' id='crosscol-overflow' showaddelement='no'>
<b:widget id='HTML4' locked='false' title='' type='HTML'/>
</b:section>
    </div>
    </div>
    <div class='tabs-cap-bottom cap-bottom'>
      <div class='cap-left'/>
      <div class='cap-right'/>
    </div>
    </div>

    <div class='main-outer'>
    <div class='main-cap-top cap-top'>
      <div class='cap-left'/>
      <div class='cap-right'/>
    </div>

    <div class='fauxborder-left main-fauxborder-left'>
    <div class='fauxborder-right main-fauxborder-right'/>
    <div class='region-inner main-inner'>

      <div class='columns fauxcolumns'>

        <div class='fauxcolumn-outer fauxcolumn-center-outer'>
        <div class='cap-top'>
          <div class='cap-left'/>
          <div class='cap-right'/>
        </div>
        <div class='fauxborder-left'>
        <div class='fauxborder-right'/>
        <div class='fauxcolumn-inner'>
        </div>
        </div>
        <div class='cap-bottom'>
          <div class='cap-left'/>
          <div class='cap-right'/>
        </div>
        </div>

        <div class='fauxcolumn-outer fauxcolumn-left-outer'>
        <div class='cap-top'>
          <div class='cap-left'/>
          <div class='cap-right'/>
        </div>
        <div class='fauxborder-left'>
        <div class='fauxborder-right'/>
        <div class='fauxcolumn-inner'>
        </div>
        </div>
        <div class='cap-bottom'>
          <div class='cap-left'/>
          <div class='cap-right'/>
        </div>
        </div>

        <div class='fauxcolumn-outer fauxcolumn-right-outer'>
        <div class='cap-top'>
          <div class='cap-left'/>
          <div class='cap-right'/>
        </div>
        <div class='fauxborder-left'>
        <div class='fauxborder-right'/>
        <div class='fauxcolumn-inner'>
        </div>
        </div>
        <div class='cap-bottom'>
          <div class='cap-left'/>
          <div class='cap-right'/>
        </div>
        </div>

        
        <div class='columns-inner'>

        <div class='column-center-outer'>
        <div class='column-center-inner'>
          <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blogposts' type='Blog'/>
</b:section>
        </div>
        </div>

        <div class='column-left-outer'>
        <div class='column-left-inner'>
          <aside>
          <macro:include id='main-column-left-sections' name='sections'>
            <macro:param default='0' name='num' value='1'/>
            <macro:param default='sidebar-left' name='idPrefix'/>
            <macro:param default='sidebar' name='class'/>
            <macro:param default='true' name='includeBottom'/>
          </macro:include>
          </aside>
        </div>
        </div>

        <div class='column-right-outer'>
        <div class='column-right-inner'>
          <aside>
          <macro:include id='main-column-right-sections' name='sections'>
            <macro:param default='2' name='num' value='0'/>
            <macro:param default='sidebar-right' name='idPrefix'/>
            <macro:param default='sidebar' name='class'/>
            <macro:param default='true' name='includeBottom'/>
          </macro:include>
          </aside>
        </div>
        </div>

        </div>

        <div style='clear: both'/>
      
      </div>

    
    </div>
    </div>
    <div class='main-cap-bottom cap-bottom'>
      <div class='cap-left'/>
      <div class='cap-right'/>
    </div>
    </div>

    <footer>
    <div class='footer-outer'>
    <div class='footer-cap-top cap-top'>
      <div class='cap-left'/>
      <div class='cap-right'/>
    </div>
    <div class='fauxborder-left footer-fauxborder-left'>
    <div class='fauxborder-right footer-fauxborder-right'/>
    <div class='region-inner footer-inner'>
      <macro:include id='footer-sections' name='sections'>
        <macro:param default='2' name='num'/>
        <macro:param default='footer' name='idPrefix'/>
        <macro:param default='foot' name='class'/>
        <macro:param default='false' name='includeBottom'/>
      </macro:include>
      
      <b:section class='foot' id='footer-3' showaddelement='no'>
<b:widget id='Attribution1' locked='true' title='' type='Attribution'/>
</b:section>
    </div>
    </div>
    <div class='footer-cap-bottom cap-bottom'>
      <div class='cap-left'/>
      <div class='cap-right'/>
    </div>
    </div>
    </footer>


</div>
</div>
<div class='content-cap-bottom cap-bottom'>
    <div class='cap-left'/>
    <div class='cap-right'/>
</div>
</div>
</div>

<script type='text/javascript'>
    window.setTimeout(function() {
        document.body.className = document.body.className.replace('loading', '');
      }, 10);
</script>
<b:include data='blog' name='google-analytics'/>
</body>

<macro:includable id='sections' var='col'>
<macro:if cond='data:col.num == 0'>
<macro:else/>
    <b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + "-1"' preferred='yes' showaddelement='yes'/>

    <macro:if cond='data:col.num >= 2'>
      <table border='0' cellpadding='0' cellspacing='0' mexpr:class='"section-columns columns-" + data:col.num'>
      <tbody>
      <tr>
        <td class='first columns-cell'>
          <b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + "-2-1"'/>
        </td>

        <td class='columns-cell'>
          <b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + "-2-2"'/>
        </td>

        <macro:if cond='data:col.num >= 3'>
          <td class='columns-cell'>
            <b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + "-2-3"'/>
          </td>
        </macro:if>

        <macro:if cond='data:col.num >= 4'>
          <td class='columns-cell'>
            <b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + "-2-4"'/>
          </td>
        </macro:if>
      </tr>
      </tbody>
      </table>

      <macro:if cond='data:col.includeBottom'>
        <b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + "-3"' showaddelement='no'/>
      </macro:if>
    </macro:if>
</macro:if>
</macro:includable>

<b:section-contents id='sidebar-left-1'>
<b:widget id='Followers1' locked='false' title='Follower' type='Followers'/>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
<b:widget id='BlogArchive1' locked='false' title='Blog-Archiv' type='BlogArchive'/>
</b:section-contents><b:section-contents id='footer-1'>
<b:widget id='HTML5' locked='false' title='' type='HTML'/>
<b:widget id='HTML2' locked='false' title='' type='HTML'/>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
</b:section-contents><b:section-contents id='footer-2-1'/><b:section-contents id='footer-2-2'/></html>

4. Das ist das komplette Layout das ich gemacht habe. Alles was ihr vorher gehabt habt müsst ihr halt dann wieder herstellen.

Selfdesigns

New Top Kommentatoren Widget

Dein Text für Seite nicht gefunden!

Wie verlinke ich GFC und BC?

Follow Buttons + schwebende Social Media Buttons

Abgerundete Bilder

Variante 2 - Weiße Musikleiste

Sidebar fixieren

Kontaktformular einbinden

LinkWithin einbinden

Hintergrundmusik einfügen

Variante 1 - Weiße Musikleiste einbinden

Header zentrieren

Tastenkombie && Scrollbox

Top Schreiber Gadget

Social Media Buttons

Hallo

Willkommens Design/Layout

we are

Follow us

Labels

Blog Archive

Search This Blog

Translate

Copyright