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:

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 :




&& 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.



  1. Bloggerdashboard → Euer Blog → Layout → Gadget hinzufügen → HTML/Java Script 
  2. Nun fügt ihr diesen Code ein.
 <a href="BLOG - LINK" ><img src="http://2.bp.blogspot.com/-obPvC7_ESdg/UIbmBS3NfZI/AAAAAAAAAz4/I1RC0uPwfYY/s1600/blogger.png" hight="30" /> </a>

<a href="FACEBOOK LINK" ><img src="http://3.bp.blogspot.com/-8UVpawKaXp0/UIbmDmeZDCI/AAAAAAAAA0A/vsWPVpO6ae4/s1600/facebook.png" hight= "30" /> </a>

<a href="TWITTER LINK" ><img src="http://4.bp.blogspot.com/-EzzNDz5yZ6k/UIbmExiEThI/AAAAAAAAA0I/84qwzPrXHgc/s1600/twitter-bird-light-bgs.png" hight="30" /> </a>
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 ;*



Einfach dann aufklicken & 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.



  1. 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)
  2. Macht nun Vorlage, HTML bearbeiten, Fortfahren und dann STRG + A und dann entf
  3. 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='&quot;loading&quot; + 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 == &quot;index&quot;'>
    <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>

        <!-- corrects IE6 width calculation -->
        <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'/>
      <!-- columns -->
      </div>

    <!-- main -->
    </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>
      <!-- outside of the include in order to lock Attribution widget -->
      <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>

  <!-- content -->
  </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(&#39;loading&#39;, &#39;&#39;);
      }, 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 + &quot;-1&quot;' preferred='yes' showaddelement='yes'/>

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

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

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

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

      <macro:if cond='data:col.includeBottom'>
        <b:section mexpr:class='data:col.class' mexpr:id='data:col.idPrefix + &quot;-3&quot;' 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.
09:07

hallo

Heey.
Auf diesem Blog werdet ihr alles rund um die Themen:

HTML - Bilderbearbeitung - PhotoShop - GIMP ...

lesen können