How To: Responsive Blogger Template Based on Five [+ Template] ✤✤✤✤✤

Heads Up! Seit der Veröffentlichung hier hat Oliver eine Version mit dem alten Kommentarsystem veröffentlicht. Den Grundcode dafür findet ihr hier.

Heads Up! Since this tutorial has been published Oliver wrote a version with the old comment system. The basic code can be found here.

Und da ist es. Das neue Tutorial zu einem Responsiven Blogger-Template, welches auf Five basiert und bloss die Bootstrap-CSS verwendet, aber auf das Bootstrap-Menü verzichtet, welches ich bisher immer verwendet habe. Im Rahmen dieses zweiten Tutorials wollte ich eigentlich Drawing of A Rose genauer erläutern, spontan habe ich aber beschlossen, dass ich mehr Bock hab ein neues Template zu schreiben. ^^

And here it is. The new tutorial to a responsive blogger template, which is based on Five and only using the bootstrap CSS to have some basic style, but not using a bootstrap menu, because I already used this to often. Actually I intended on writing this based on my template Drawing of A Rose, but I just felt like writing a new one ^^

Intro

Ich werde mich wiederholen, auch damit die Leute, die den ersten Post zum Thema nicht gelesen haben, hier nochmal meine "Rede" zu hören bekommen.
Ein responsives Blogdesign ist ein "grosses" Unterfangen. Es erfordert von euch, mit Code umgehen zu können, und der Vorlagendesigner wird damit unbrauchbar. Aber und das ist das grosse Aber: Es LOHNT sich! Responsive Design ist in der heutigen Welt, in der jeder User mit Smartphones, Tablets, Netbooks, Laptops, PCs etc. auf's Internet zugreifen kann, enorm wichtig geworden. Eine Seite muss auf allen Endgeräten funktional sein. Habt ihr einen schönen Blog, dieser sieht aber auf allen Computern die nicht eure sind, scheisse aus? Das passiert mit responsive Design nicht, da eine repsonsive Seite automatisch an den Bildschirm angepasst wird, auf dem sie dargestellt ist. Es gibt also nur Vorteile bei responsive Design und der Aufwand lohnt sich. So, genug gelabert. Lasset den Spass beginnen :D

I'm gonna repeat myself, so people you haven't read the first post can have my opinion as well ^^
A responsive blogger template is quite a challenge. It does require pretty good knowledge and the template designer can be forgotten. It is hard work but it's sooo WORTH IT! responsive design is such an important thing in our society because everyone wants to be able to visit a website from a smartphone, tablet, computer etc. A page has to work on each one of those devices, otherwise people can't have the full experience and that's something we want our visitors to have. Ther's only advantages with responsive Design, so let's get started with the fun :D

The Template

Und hier was wir heute machen werden:

And here what we're gonna create today:



Hearts in Wonderland, heisst es und wie immer dürft ihr es auch haben, wenn ihr wollt ^^

it's called hearts in wonderland and as always you can have it if you want to ^^

DemoPage

Planning

Bevor es mit dem eigentlich Coden losgeht, braucht ihr einen Plan. Eine Idee, wie euer Blog am Ende aussehen muss. Das bedeutet, Schriften,Farben, Hintergrundbilder, Header etc.

Bei mir sieht das folgendermassen aus:

Before starting to code you need a plan. An idea, how your blog is gonna look like. This means fonts, colors, background images, header etc.

for me that's the following:

Farbpallette Colors | Pattern | Quicksand | Rochester | Bootstrap

Das ganze sollte ein simples Design werden, mit kleinen Details und dem Titel: "Hearts in Wonderland" (ja, mir helfen Titel beim Templatebauen xD)

My plan was to create a simple design with some fance detailing and the title "hearts in wonderland" (yes, I do geht inspired with titles xD)

Sketch

Okay, als nächstes kommt die Skizze dran, bei dem wir Container bauen. Das machen wir in einem HTML-Dokument. Holt also einen Editor raus und schreibt euch eine Aufteilung der einzelnen Container, oder öffnet Dabblet oder eine andere Seite und schreibt eure Skizze dort.
Meine schaut so aus:

Okay, next create your sketch, in which you built the containers. Do this in a html document with an editor or to save some time work in dabblet or a similar site.
That's what mine looks like:



Um Zeit zu sparen hab ich das alles in Dabblet geschrieben es kann also direkt mit den Containern losgelegt werden. Ich hab jeweils noch die ID als Inhalt eingefügt.
Die Container sehen folgendermassen aus. Der clear-container ist als Schutz da, weil wir sidebar und content floaten.

As said I just wrote it in dabblet to save some time. So just start with adding containers. The clear is there to save it all from ending in chaos ^^ because we're floating.



Als nächstes kommt die CSS. Wir definieren jeweils eine Höhe und eine Breite. Die Höhe wird später wieder entfernt, da sie durch den Inhalt bestimmt wird. Bei der Breite achten wir darauf, dass alles in Prozent angegeben wird, wir wollen das alles schliesslich responsive haben.

Die CSS schaut folgendermassen aus:

Next add your CSS. Just add a width and height, which is gonna be removed later on, because the actual content will fill our containers and give them the height. The widths have to be given in % so it becomes responsive.

CSS looks like this:

#container{
 width: 80%;
 height: 600px;
 margin-left: 10%;
 background: #aaa; 
 color: white;
 font-family: Lato; 
}

#header{
 width: 100%;
 height: 150px;
 background: #333; 
 position: relative;
 top: 0;
}

#menu{
 width: 100%;
 height: 30px;
 background: #555;
 position: relative; 
}

#content{
 width: 70%;
 height: 350px; 
 background: #333;
 position: relative;
 top: 10px; 
 float: right; 
}

#sidebar{
 width: 29%;
 height: 300px;
 background: #333;
 position: relative; 
 top: 10px;
 float: left; 
}

#credit{
 width: 100%;
 background: #333;
 height: 30px;
 position: relative;
 top: 30px; 
}

Das ganze wollen wir jetzt noch responsive. Wenn die Bildschirmbreite 980px unterschreitet, wollen wir die Sidebar unterhalb des Contents anzeigen. Das machen wir mit media queries. Wir passen also die CSS von Sidebar und Content an, sodass es folgendermassen aussieht:

Now we want to fix the sidebar. If our width is smaller than 980px, we want the sidebar to be underneath the content and the content to stretch to a full container width. We do this with media queries.

@media screen and (min-width:980px){
 #content{
  width: 70%;
  height: 350px; 
  background: #333;
  position: relative;
  top: 10px; 
  float: right; 
 }

 #sidebar{
  width: 29%;
  height: 300px;
  background: #333;
  position: relative; 
  top: 10px;
  float: left; 
 }
} 
@media screen and (max-width:979px){
 #content{
  width: 100%;
  height: 350px; 
  background: #333;
  position: relative;
  top: 10px; 
 }

 #sidebar{
  width: 100%;
  height: 300px;
  background: #333;
  position: relative; 
  top: 10px;
 }
}

Und das ist schon alles. Jetzt können wir endlich in Blogger loslegen.

And that's it. Now we can start in blogger.

Markup

Öffnet euren Testblog, löscht den kompletten Inhalt und dann setzt darin euer Basis-Template zusammen.
Holt euch Five, fügt die Container ein und verlinkt Fonts und die Bootstrap CSS, die dem ganzen zumindest ein bisschen Stil verleiht.

Das sieht für mich so aus:

Open up your testblog, delete the content and create your basic template inside there.
Grab five, add the container, link to fonts and the bootstrap CSS, to add at least a little bit of style.

That's what it looks like for me:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2'>

 <head>
   <meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
     <title><data:blog.pageTitle/></title>
 <b:include data='blog' name='all-head-content'/>

 <!-- Bootstrap CSS -->
 <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />

 <!-- Quicksand Webfont -->
 <link href='http://fonts.googleapis.com/css?family=Quicksand:400,700' rel='stylesheet' type='text/css' />
 
 <!-- Rochester Webfont -->
 <link href='http://fonts.googleapis.com/css?family=Rochester' rel='stylesheet' type='text/css' />
 
 <b:skin><![CDATA[*/
]]></b:skin>
 <b:template-skin><![CDATA[
 
 <!-- CSS -->
 
]]></b:template-skin>
</head>

<body expr:class='&quot;loading&quot;  + data:blog.mobileClass +  &quot; &quot;  + data:blog.pageType'>

<div id="container">
 <div id="header">Header</div><!--/header-->
 <div id="menu">Menu</div> <!--/menu-->
 <div id="content">
<b:section class='main' id='main'>
  <b:widget id='Blog1' locked='false' title='Blogposts' type='Blog'>
    <b:includable id='main'>
       <b:loop values='data:posts' var='i'>    
         <article><b:include data='i' name='post'/></article>
       </b:loop>
      <b:include name='nextprev'/>
    </b:includable>
    <b:includable id='backlinkDeleteIcon'/>
    <b:includable id='backlinks'/>
    <b:includable id='comment-form'/>
    <b:includable id='commentDeleteIcon'/>
    <b:includable id='comment_count_picker'/>
    <b:includable id='comment_picker'/>
    <b:includable id='comments'/>
    <b:includable id='feedLinks'/>
    <b:includable id='feedLinksBody'/>
    <b:includable id='iframe_comments' var='i'>
       <div class='cmt_iframe_holder' expr:data-href='data:i.canonicalUrl' expr:data-viewtype='data:i.viewType'/>
    </b:includable>
    <b:includable id='mobile-index-post'/>
    <b:includable id='mobile-main'/>
    <b:includable id='mobile-nextprev'/>
    <b:includable id='mobile-post'/>
    <b:includable id='nextprev'>
    <b:if cond='data:newerPageUrl'>
     <a expr:href='data:newerPageUrl'>
       <data:newerPageTitle/>
      </a>
    </b:if>
    <b:if cond='data:olderPageUrl'>
      <a expr:href='data:olderPageUrl'>
        <data:olderPageTitle/>
      </a>
    </b:if>
    </b:includable>
    <b:includable id='post' var='i'>
      <h3><data:i.date/></h3>
       <b:if cond='data:i.title'>
        <h2><a expr:href='data:i.url'><data:i.title/></a></h2>
       </b:if>
 <b:if cond='data:i.hasJumpLink'>
     <data:i.body/>
     <div class='jump-link'>
    <a expr:href='data:i.url' expr:title='data:i.title'>
     <data:i.jumpText/>
    </a>
    </div>
   <b:else/>
    <data:i.body/>
      </b:if>
     <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <div class='post-footer'>
       <span>
        <b:if cond='data:i.labels'>
          <data:postLabelsLabel/>
          <b:loop values='data:i.labels' var='label'>
            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
          </b:loop>
        </b:if>
       </span> 
      </div>
      <b:include name='iframe_comments'/>
     </b:if>
    </b:includable>
    <b:includable id='postQuickEdit'/>
    <b:includable id='shareButtons'/>
    <b:includable id='status-message'/>
    <b:includable id='threaded-comment-form'/>
    <b:includable id='threaded_comment_js'/>
    <b:includable id='threaded_comments'/>
  </b:widget>
</b:section> <!-- /blog -->
</div> <!-- /content -->
<div id="sidebar">
 <b:section class='sidebar' id='sidebar1' locked='false' showaddelement='yes'>
            <!-- Sidebar Widgets -->
 </b:section>
</div> <!-- /sidebar -->
<div style="clear: both;" />
<div id="credit">Credit</div>
</div><!-- /container -->
<script>
  window.___gcfg = {
    lang: 'de-DE',
    parsetags: 'explicit'
  }
</script>
</body>
</html>

Basic CSS

Das ganze hat jetzt natürlich nichts mit unserer Skizze gemeinsam. Das liegt daran, dass unsere CSS fehlt.
Die fügen wir nun ein und zwar dort wo <!-- CSS --> steht.
Wir entfernen alle Höhenangaben. Davor müssen wir aber dafür sorgen, dass alles mit Inhalt gefüllt ist. Wir fügen also ein paar Gadgets in die Sidebar ein (layout)

Unsere CSS für den Blogger-Editor

Well that does not look like our draft, that's because we don't have the CSS added yet. We paste it now where I added the <!-- CSS -->.
Remove all the heights. In Order to see all the containers, though we need to add content to each one of them. So go an and put some Widgets into the sidebar.

And then the CSS for the editor.

#container{
 width: 80%;
 margin-left: 10%;
 background: #aaa; 
 color: white;
}

#header{
 width: 100%;
 height: 150px;
 background: #333; 
 position: relative;
 top: 0;
}

#menu{
 width: 100%;
 height: 30px;
 background: #555;
 position: relative; 
}

@media screen and (min-width:980px){
  #content{
  width: 70%;
  background: #333;
  position: relative;
  top: 10px; 
  float: right; 
 }

 #sidebar{
  width: 29%;
  background: #333;
  position: relative; 
  top: 10px;
  float: left; 
 }
} 

@media screen and (max-width:979px){
 #content{
  width: 100%;
  background: #333;
  position: relative;
  top: 10px; 
 }

 #sidebar{
  width: 100%;
  background: #333;
  position: relative; 
  top: 10px;
 }
}

#credit{
 width: 100%;
 background: #333;
 position: relative;
 top: 30px; 
}

Und jetzt geht die Arbeit los. Damit ist der Basis-Look gemacht. Als nächstes schreibt ihr die Basis-CSS wie das alles aussehen muss. Ich werde jetzt nicht jeden einzelnen Schritt erklären. Aber nach dem Basis-Style schaut mein Template so aus:

And now work starts. You wanna begin writing your basic look. Just write the basic CSS and give it all some style. I'm not going into much detail because that's something everyone has to do for themselves. After the basic CSS my blog looks like this:



Die CSS ist folgende

And the corresponding CSS

body{
 background: url(http://colourlovers.com.s3.amazonaws.com/images/patterns/3948/3948002.png?1382819655) repeat fixed ;
 background-size:  100px;
 font-family: Quicksand; 
 font-size: 20px; 
 color: #3c2d22;
 z-index: 1;
}

h1, h2, h3, h4, h5{
 font-family: Rochester;  
 color: #2a5c5e; 
}

a:link{
 text-decoration: none;
 color: #398897;
}

a:visited{
 text-decoration: none;
 color: #398897;
}

a:hover{
 color: #b52439;
}

.buttonbg{ 
 background: #2a5c5e;
 color: #e3d8d0 !important;
 padding: 2px 5px;
}

.buttonbg:hover{
 background: #398897;
 color: #e3d8d0 !important;
}

#container{
 width: 80%;
 margin-left: 10%;
 background: ivory; 
 padding: 10px; 
 margin-top: 30px;
 margin-bottom: 30px;
 position: relative;
 border: 10px #e3d8d0 solid; 
}

#header{
 width: 100%;
 height: 150px;
 position: relative;
 top: 20px;
 font-family: Rochester;
 text-align: center;
 word-wrap:break-word;
height: auto; 
}

#header h1{
font-size: 75px; 
}

@media screen and (min-width:980px){
  #content{
  width: 70%;
  position: relative;
  top: 10px; 
  float: right; 
 }

 #sidebar{
  width: 29%;
  position: relative; 
  top: 10px;
  float: left; 
 }
} 

@media screen and (max-width:979px){
 #content{
  width: 100%;
  position: relative;
  top: 10px; 
 }

 #sidebar{
  width: 100%;
  position: relative; 
  top: 10px;
 }
}

#credit{
 width: 100%;
 position: relative;
 top: 30px; 
 padding-bottom: 20px;
 font-size: 85%; 
}

img{
 max-width: 100%;
}

@media screen and (max-width: 550px) {
#header h1{
font-size: 55px;
}
 #Blog1 #sidebar{
  font-size: 25px; 
 }
 
 #container{
  width: 94%;
  margin-left: 3%;
 }

}

.undertitle{
 font-size: 16px;
 padding-top: 3px;
 padding-bottom: 10px; 
border-top: 2px solid #b52439; 
}

article{
padding-bottom: 5px;
border-bottom: 5px #e3d8d0 solid;
margin-bottom: 10px; 
}

nav{
position: relative;
}

Ja, das Datum ist momentan noch doppelt vorhanden, das wird im nächsten Schritt gelöst.

Yeah, date is here twice, gonna change that now

Date

Okay, kommen wir nun zum Datum. Wie ihr seht, habe ich bereits die undertile-bar eingefügt, diese wird das Datum auf kleinen Anzeigen darstellen. Für grössere Bildschirme, möchte ich ein aufgespaltenes Datum verwenden und das Datum der untertitle-bar entfernen.

Zuerst fügen wir aber das aufgespaltene Datum ein.

Sucht nach

Okay, let's move to the date. As you can see I added my undertile-bar which is gonna showcase the date on small screens. For bigger screens I'm gonna split the date and hide the date from the bar.

First let's add the split date.

Search for

</head>

unterhalb davon fügt ihr folgendes Script ein:

Below that add the following script

<script> 
function replace_date(d) { 
   var da = d.split(&#39; &#39;); 
   month = &quot;<div class='month'>&quot;+da[1].slice(0,3)+&quot;</div>&quot;; 
   day = &quot;<div class='day'>&quot;+da[0]+&quot;</div>&quot;; 
   year = &quot;<div class='year'>&quot;+da[2]+&quot;</div>&quot;; 
   document.write(day+month+year); 
} 
</script>

Dann sucht ihr nach:

Then search for

<h3><data:i.date/></h3>

und ersetzt es durch:

and replace it with

<div class='date-border'><div class='date'> <script> replace_date(&#39;<data:i.dateHeader/>&#39;); </script> </div></div>

Danach kann man mit CSS gestalten. Bei mir sieht das dann so aus:

Then add the CSS. For me it looks like thais:



Um das ganze auch noch responsiv praktisch zu machen, habe ich in der untertitle-bar folgende kleine Änderung vorgenommen:

Then I made the follwing adjustment to the undertitle bar

<div class='undertitle'>
  <span class="small-date">| <i class='fa fa-calendar'/> <data:i.date/></span> <b:if cond='data:i.labels'>| <i class='fa fa-tags'/>
   <b:loop values='data:i.labels' var='label'>
   <a expr:href='data:label.url + &quot;?max-results=8&quot;' rel='tag'> <data:label.name/></a>
              <b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
   </b:loop>
   </b:if> |</div><!-- undertitle -->

Das Datum ist in einem span-tag drin, den wir ausblenden sobald die Breite 749px überschreitet. Das aufgespaltene Datum wird erst ab einer Breite von 750px angezeigt. In CSS sieht das so aus:

The date is in a span-tag which we hide as soon as the screen is wider than 749px. the split date is gonna be shown as soon as we have a width of 750px.
That's what the CSS looks like:

@media screen and (max-width:749px){
 .date-border{
  display: none; 
 }
}

@media screen and (min-width:750px){
 .small-date{
  display: none; 
 }

 .date-border{
  background: url(http://colourlovers.com.s3.amazonaws.com/images/patterns/3948/3948002.png?1382819655) repeat;
  background-size:  100px;
  height: 120px;
  width: 120px; 
  border-radius: 50em;
  webkit-border-radius: 50em; 
  padding: 20px; 
  position: absolute;
  right: -80px; 
  margin-top: -30px; 
  border: 6px solid ivory;
 }

 .date{
  background: rgba(255, 255, 255, .85);
  height: 90px;
  width: 90px; 
  border-radius: 50em;
  webkit-border-radius: 50em;
  border: 20px solid transparent;  
  position: absolute;
  right: 9px; 
  margin-top: -11px; 
  line-height: 1; 
  text-align: center; 
 }

 .day{
  color: #b52439;
  margin-top: -15px;
  font-weight: bold; 
  font-size: 130%;
 }

 .month{
  font-size: 170%;
  color: #74a9a9;
  font-family: Rochester;
 }

 .year{
  color: #2a5c5e;
  font-weight: bold;}
 }
}

Menu

Das Menu ist eine Abwandlung des Menus, das man hier findet. Ich habe es mit etwas Hover-Style aufgepeppt.

The Menu is basically what you find here. I just added a nice hover style.

HTML

<nav class='nav center cl-effect-5'>
 <ul>
  <li class='current'><i class='fa fa-long-arrow-down' style='opacity: 0.5'> </i> Menu</li>
  <li><a href='#'><span data-hover='Home'>Home</span></a></li>
  <li><a href='#' target='_blank'><span data-hover='About'>About</span></a></li>                  
  <li><a href='#' target='_blank'><span data-hover='Follow'>Follow</span></a></li>      
  <li><a href='#' target='_blank'><span data-hover='Contact'>Contact</span></a></li>
  <li><a href='#' target='_blank'><span data-hover='More'>More</span></a></li>      
 </ul>
</nav>

CSS

nav{
 width: 100%; 
 position: relative;
 padding: 5px 0px; 
 z-index: 10; 
 top: 20px;
 height: auto;
}

/* nav */
.nav ul {
 margin: 0;
 padding: 0;
}

.nav li {
 margin: 0 5px 10px 0;
 padding: 0;
 list-style: none;
 display: inline-block;
}

.nav a {
 padding: 3px 12px;
 text-decoration: none;
 color: #3c2d22 ;
 line-height: 100%;
}

/* center nav */
.nav.center ul {
 text-align: center;
}

.nav .current{
 display: none; 
}

@media screen and (max-width: 600px) {
 .nav a:hover {
  color: ivory;
  background: #b52439;
 }

 .nav {
  position: relative;
  min-height: 40px;
  font-size: 150%;
  margin-bottom: 35px; 
 } 
 .nav ul {
  width: 180px;
  padding: 5px 0;
  position: absolute;
  top: 0;
  left: 0;
  background: ivory; 
  z-index: 10; 
 }

 .nav li {
  display: none; /* hide all
 items */

margin: 0;

}



.nav .current {

display: block; /* show only current

 item */

}



.nav a {

display: block;

padding: 5px;

text-align: left;

}



/* on nav hover */ 

.nav ul:hover li {

display: block;

margin: 0 0 5px;

}



/* center nav */

.nav.center ul {

left: 50%;

margin-left: -90px;

}

}



@media screen and (min-width: 600px) {

nav a {

position: relative;

display: inline-block;

margin: 15px 25px;

margin-bottom:0; 

outline: none;

text-decoration: none;

text-transform: uppercase;

letter-spacing: 1px;

font-weight: 400;

text-shadow: 0 0 1px rgba(255,255,255,0.3);

font-size: 1.35em;

}



nav a:hover,

nav a:focus {

outline: none;

}



.cl-effect-5 a {

overflow: hidden;

padding: 0 4px;

height: 1em;

}



.cl-effect-5 a span {

position: relative;

display: inline-block;

-webkit-transition: -webkit-transform 0.3s;

-moz-transition: -moz-transform 0.3s;

transition: transform 0.3s;

}



.cl-effect-5 a span::before {

position: absolute;

top: 100%;

content: attr(data-hover);

-webkit-transform: translate3d(0,0,0);

-moz-transform: translate3d(0,0,0);

transform: translate3d(0,0,0);

color: #b52439; 

}



.cl-effect-5 a:hover span,

.cl-effect-5 a:focus span {

-webkit-transform: translateY(-100%);

-moz-transform: translateY(-100%);

transform: translateY(-100%);

}

}

Am Ende habe ich noch eine Magazine-Ansicht eingefügt. Wie das geht findet ihr hier.

Und so sieht das Endergebnis aus:

In the end I added a magazine look. How that works can be looked up here.

And that's what the end result looks like:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' 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='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
     <title><data:blog.pageTitle/></title>
 <b:include data='blog' name='all-head-content'/>

 <!-- Bootstrap CSS -->
 <link href='//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css' rel='stylesheet'/>

 <!-- Quicksand Webfont -->
 <link href='http://fonts.googleapis.com/css?family=Quicksand:400,700' rel='stylesheet' type='text/css'/>
 
 <!-- Rochester Webfont -->
 <link href='http://fonts.googleapis.com/css?family=Rochester' rel='stylesheet' type='text/css'/>
 <!-- Font Awesome --> 
    <link href='//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css' rel='stylesheet'/>

 <b:skin><![CDATA[*/
]]></b:skin>
 <b:template-skin><![CDATA[
body{
 background: url(http://colourlovers.com.s3.amazonaws.com/images/patterns/3948/3948002.png?1382819655) repeat fixed ;
 background-size:  150px;
 font-family: Quicksand; 
 font-size: 20px; 
 color: #3c2d22;
 z-index: 1;
}

h1, h2, h3, h4, h5{
 font-family: Rochester;  
 color: #2a5c5e; 
}

a:link{
 text-decoration: none;
 color: #398897;
}

a:visited{
 text-decoration: none;
 color: #398897;
}

a:hover{
 color: #b52439;
}

.buttonbg{ 
 background: #2a5c5e;
 color: #e3d8d0 !important;
 padding: 2px 5px;
}

.buttonbg:hover{
 background: #398897;
 color: #e3d8d0 !important;
}

#container{
 width: 80%;
 margin-left: 10%;
 background: ivory; 
 padding: 10px; 
 margin-top: 30px;
 margin-bottom: 30px;
 position: relative;
 border: 10px #e3d8d0 solid; 
}

#header{
 width: 100%;
 height: 150px;
 position: relative;
 top: 20px;
 font-family: Rochester;
 text-align: center;
 word-wrap:break-word;
height: auto; 
}

#header h1{
font-size: 75px; 
}


@media screen and (min-width:980px){
  #content{
  width: 70%;
  position: relative;
  top: 10px; 
  float: right; 
 }

 #sidebar{
  width: 29%;
  position: relative; 
  top: 10px;
  float: left; 
 }
} 

@media screen and (max-width:979px){
 #content{
  width: 100%;
  position: relative;
  top: 10px; 
 }

 #sidebar{
  width: 100%;
  position: relative; 
  top: 10px;
 }
}

#credit{
 width: 100%;
 position: relative;
 top: 30px; 
 padding-bottom: 20px;
 font-size: 85%; 
}

img{
 max-width: 100%;
}

@media screen and (max-width: 550px) {
#header h1{
font-size: 55px;
}
 #Blog1, #sidebar{
  font-size: 25px; 
 }
 
 #container{
  width: 94%;
  margin-left: 3%;
 }

}

.undertitle{
 font-size: 16px;
 padding-top: 3px;
 padding-bottom: 10px; 
border-top: 2px solid #b52439; 
}

article{
padding-bottom: 5px;
border-bottom: 5px #e3d8d0 solid;
margin-bottom: 10px; 
}

nav{
 width: 100%; 
 position: relative;
 padding: 5px 0px; 
 z-index: 10; 
 top: 20px;
 height: auto;
}

/* nav */
.nav ul {
 margin: 0;
 padding: 0;
}

.nav li {
 margin: 0 5px 10px 0;
 padding: 0;
 list-style: none;
 display: inline-block;
}

.nav a {
 padding: 3px 12px;
 text-decoration: none;
 color: #3c2d22 ;
 line-height: 100%;
}

/* center nav */
.nav.center ul {
 text-align: center;
}

.nav .current{
 display: none; 
}

@media screen and (max-width: 600px) {
 .nav a:hover {
  color: ivory;
  background: #b52439;
 }

 .nav {
  position: relative;
  min-height: 40px;
  font-size: 150%;
  margin-bottom: 35px; 
 } 
 .nav ul {
  width: 180px;
  padding: 5px 0;
  position: absolute;
  top: 0;
  left: 0;
  background: ivory; 
  z-index: 10; 
 }

 .nav li {
  display: none; /* hide all <li> items */
  margin: 0;
 }
 
 .nav .current {
  display: block; /* show only current <li> item */
 }
 
 .nav a {
  display: block;
  padding: 5px;
  text-align: left;
 }

 /* on nav hover */ 
 .nav ul:hover li {
  display: block;
  margin: 0 0 5px;
 }

 /* center nav */
 .nav.center ul {
  left: 50%;
  margin-left: -90px;
 }
}

@media screen and (min-width: 600px) {
 nav a {
  position: relative;
  display: inline-block;
  margin: 15px 25px;
  margin-bottom:0; 
  outline: none;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 400;
  text-shadow: 0 0 1px rgba(255,255,255,0.3);
  font-size: 1.35em;
 }

 nav a:hover,
 nav a:focus {
  outline: none;
 }

 .cl-effect-5 a {
  overflow: hidden;
  padding: 0 4px;
  height: 1em;
 }

 .cl-effect-5 a span {
  position: relative;
  display: inline-block;
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  transition: transform 0.3s;
 }

 .cl-effect-5 a span::before {
  position: absolute;
  top: 100%;
  content: attr(data-hover);
  -webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  color: #b52439; 
 }

 .cl-effect-5 a:hover span,
 .cl-effect-5 a:focus span {
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  transform: translateY(-100%);
 }
}

@media screen and (max-width:749px){
 .date-border{
  display: none; 
 }
}

@media screen and (min-width:750px){
 .small-date{
  display: none; 
 }

 .date-border{
  background: url(http://colourlovers.com.s3.amazonaws.com/images/patterns/3948/3948002.png?1382819655) repeat;
  background-size:  100px;
  height: 120px;
  width: 120px; 
  border-radius: 50em;
  webkit-border-radius: 50em; 
  padding: 20px; 
  position: absolute;
  right: -80px; 
  margin-top: -30px; 
  border: 6px solid ivory;
 }

 .date{
  background: rgba(255, 255, 255, .85);
  height: 90px;
  width: 90px; 
  border-radius: 50em;
  webkit-border-radius: 50em;
  border: 20px solid transparent;  
  position: absolute;
  right: 9px; 
  margin-top: -11px; 
  line-height: 1; 
  text-align: center; 
 }

 .day{
  color: #b52439;
  margin-top: -15px;
  font-weight: bold; 
  font-size: 130%;
 }

 .month{
  font-size: 170%;
  color: #74a9a9;
  font-family: Rochester;
 }

 .year{
  color: #2a5c5e;
  font-weight: bold;}
 }
}
]]></b:template-skin>
</head>

<script> 
function replace_date(d) { 
   var da = d.split(&#39; &#39;); 
   month = &quot;<div class='month'>&quot;+da[1].slice(0,3)+&quot;</div>&quot;; 
   day = &quot;<div class='day'>&quot;+da[0]+&quot;</div>&quot;; 
   year = &quot;<div class='year'>&quot;+da[2]+&quot;</div>&quot;; 
   document.write(day+month+year); 
} 
</script>

<body expr:class='&quot;loading&quot;  + data:blog.mobileClass +  &quot; &quot;  + data:blog.pageType'>

<div id='container'>
  <div id='header'><h1><a expr:href='data:blog.homepageUrl'><data:blog.title/></a></h1>
    <br/> 
    <span style='font-size: 100%; text-align: center; position: relative; top: -10px; margin-left: -50px;'><span class='fa-stack fa-1x'>
    <i class='fa fa-circle fa-stack-2x' style='color:#74a9a9;'/>
  <i class='fa fa-heart fa-stack-1x' style='color: #2a5c5e '/>
</span>

<span class='fa-stack fa-1x'>
  <i class='fa fa-circle-o fa-stack-2x' style='color:#3c2d22;'/>
  <i class='fa fa-heart fa-rotate-180 fa-stack-1x' style='color: #74a9a9;'/>
</span>
<span class='fa-stack fa-1x'>
    <i class='fa fa-circle fa-stack-2x' style='color:#b52439;'/>
  <i class='fa fa-heart fa-stack-1x' style='color: ivory;'/>
</span></span></div><!--/header-->
 <nav class='nav center cl-effect-5'>
 <ul>
  <li class='current'><i class='fa fa-long-arrow-down' style='opacity: 0.5'> </i> Menu</li>
  <li><a href='#'><span data-hover='Home'>Home</span></a></li>
  <li><a href='#' target='_blank'><span data-hover='About'>About</span></a></li>                  
  <li><a href='#' target='_blank'><span data-hover='Follow'>Follow</span></a></li>      
  <li><a href='#' target='_blank'><span data-hover='Contact'>Contact</span></a></li>
  <li><a href='#' target='_blank'><span data-hover='More'>More</span></a></li>      
 </ul>
</nav><!--/menu-->
 <div id='content'>
<b:section class='main' id='main'>
  <b:widget id='Blog1' locked='false' title='Blogposts' type='Blog'>
    <b:includable id='main'>
       <b:loop values='data:posts' var='i'>    
         <article><b:include data='i' name='post'/></article>
       </b:loop>
      <b:include name='nextprev'/>
    </b:includable>
    <b:includable id='backlinkDeleteIcon'/>
    <b:includable id='backlinks'/>
    <b:includable id='comment-form'/>
    <b:includable id='commentDeleteIcon'/>
    <b:includable id='comment_count_picker'/>
    <b:includable id='comment_picker'/>
    <b:includable id='comments'/>
    <b:includable id='feedLinks'/>
    <b:includable id='feedLinksBody'/>
    <b:includable id='iframe_comments' var='i'>
       <div class='cmt_iframe_holder' expr:data-href='data:i.canonicalUrl' expr:data-viewtype='data:i.viewType'/>
    </b:includable>
    <b:includable id='mobile-index-post'/>
    <b:includable id='mobile-main'/>
    <b:includable id='mobile-nextprev'/>
    <b:includable id='mobile-post'/>
    <b:includable id='nextprev'>
    <b:if cond='data:newerPageUrl'>
     <a class='buttonbg pull-left' expr:href='data:newerPageUrl'>
       <i class='fa fa-angle-left'/><data:newerPageTitle/>
      </a>
    </b:if>
    <b:if cond='data:olderPageUrl'>
      <a class='buttonbg pull-right' expr:href='data:olderPageUrl'>
        <data:olderPageTitle/> <i class='fa fa-angle-right'/>
      </a>
    </b:if>
    </b:includable>
    <b:includable id='post' var='i'>
 <b:if cond='data:blog.pageType == &quot;index&quot;'>
 <div class='hero-unit'>
      <div class='date-border'><div class='date'> <script> replace_date(&#39;<data:i.dateHeader/>&#39;); </script> </div></div>
       <b:if cond='data:i.title'>
         <h2>
           <span class='fa-stack fa-1x' style='font-size: 50%; margin-right: 10px; margin-top: -5px;'>
  <i class='fa fa-circle fa-stack-2x' style='color:#b52439;'/>
             <i class='fa fa-circle-o fa-stack-2x' style='color:#74a9a9; font-size: 230%; margin-top: -3px; margin-left: -0.5px;'/>
  <i class='fa fa-heart fa-stack-1x' style='color: #e3d8d0;'/>
</span><a expr:href='data:i.url'><data:i.title/></a></h2>
       </b:if>
<div class='undertitle'>
  <span class='small-date'>| <i class='fa fa-calendar'/> <data:i.date/></span> <b:if cond='data:i.labels'>| <i class='fa fa-tags'/>
   <b:loop values='data:i.labels' var='label'>
   <a expr:href='data:label.url + &quot;?max-results=8&quot;' rel='tag'> <data:label.name/></a>
              <b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
   </b:loop>
   |</b:if> </div><!-- undertitle --> 
  <div class='post-preview'>
   <img class='thumbpic pull-left' expr:src='data:i.firstImageUrl'/> <!-- first image of post is thumbnail -->
   <!-- if there ist jumplink show that part, otherwise show snippet -->
   <b:if cond='data:i.hasJumpLink'>
    <span><data:i.body/></span>
   <b:else/> 
    <span><data:i.snippet/></span> 
   </b:if> <!-- /if jumplink -->
   <br/>
   <a class='buttonbg pull-right' expr:href='data:i.url'>Read More <i class='fa fa-angle-right'/></a> <!-- Read More Link. Style with .readmore -->
   <div style='clear: both;'/> <!-- clearfix -->
  </div> <!-- /post-preview -->
 </div> <!-- /hero-unit -->
 <!-- Preview CSS -->
 <style> 
  .thumbpic{
   width: 400px;
     max-width: 100%;
   left: 0;
   position: relative;
   top: 10px;
     padding: 15px;
     padding-top: 0; 
  }
 
  .post-preview{
   position: relative; 
  }
  
  .hero-unit{
   margin-bottom: 30px; 
  }
 </style> 
 <b:else/> 
 <!-- POST PAGE STYLE -->  
      <div class='date-border'><div class='date'> <script> replace_date(&#39;<data:i.dateHeader/>&#39;); </script> </div></div>
       <b:if cond='data:i.title'>
         <h2>
           <span class='fa-stack fa-1x' style='font-size: 50%; margin-right: 10px; margin-top: -5px;'>
  <i class='fa fa-circle fa-stack-2x' style='color:#b52439;'/>
             <i class='fa fa-circle-o fa-stack-2x' style='color:#74a9a9; font-size: 230%; margin-top: -3px; margin-left: -0.5px;'/>
  <i class='fa fa-heart fa-stack-1x' style='color: #e3d8d0;'/>
</span><a expr:href='data:i.url'><data:i.title/></a></h2>
       </b:if>
<div class='undertitle'>
  <span class='small-date'>| <i class='fa fa-calendar'/> <data:i.date/></span> <b:if cond='data:i.labels'>| <i class='fa fa-tags'/>
   <b:loop values='data:i.labels' var='label'>
   <a expr:href='data:label.url + &quot;?max-results=8&quot;' rel='tag'> <data:label.name/></a>
              <b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
   </b:loop>
   |</b:if> </div><!-- undertitle -->
  <span><data:i.body/></span>

  <!-- edit link for Quick Editing -->
  <b:if cond='data:i.editUrl'>
   <span expr:class='&quot;item-control &quot; + data:i.adminClass'>
    <a expr:href='data:i.editUrl' expr:title='data:top.editPostMsg' style='color: red;'>
     <span>edit</span> <!-- quick edit link -->
    </a>
   </span>
  </b:if> <!-- / edit link -->  
 </b:if>
      <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <b:include name='iframe_comments'/>
     </b:if>
</b:includable>
    <b:includable id='postQuickEdit'/>
    <b:includable id='shareButtons'/>
    <b:includable id='status-message'/>
    <b:includable id='threaded-comment-form'/>
    <b:includable id='threaded_comment_js'/>
    <b:includable id='threaded_comments'/>
  </b:widget>
</b:section> <!-- /blog -->
</div> <!-- /content -->
<div id='sidebar'>
 <b:section class='sidebar' id='sidebar1' locked='false' showaddelement='yes'>
   <b:widget id='Profile1' locked='false' title='Über mich' type='Profile'>
     <b:includable id='main'>
    <b:if cond='data:title != &quot;&quot;'>
      <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
    <b:if cond='data:team == &quot;true&quot;'> <!-- team blog profile -->
      <ul>
        <b:loop values='data:authors' var='i'>
          <li><a class='profile-name-link g-profile' expr:href='data:i.userUrl' expr:style='&quot;background-image: url(&quot; + data:i.profileLogo + &quot;);&quot;'><data:i.display-name/></a></li>
        </b:loop>
      </ul>

    <b:else/> <!-- normal blog profile -->

      <b:if cond='data:photo.url != &quot;&quot;'>
        <a expr:href='data:userUrl'><img class='profile-img' expr:alt='data:photo.alt' expr:height='data:photo.height' expr:src='data:photo.url' expr:width='data:photo.width'/></a>
      </b:if>

      <dl class='profile-datablock'>
        <dt class='profile-data'>
          <a class='profile-name-link g-profile' expr:href='data:userUrl' expr:style='&quot;background-image: url(&quot; + data:profileLogo + &quot;);&quot;' rel='author'>
            <data:displayname/>
          </a>
          <b:if cond='data:hasgoogleprofile'>
            <br/>
            <div class='g-follow' data-annotation='bubble' data-height='20' expr:data-href='data:userUrl'/>
          </b:if>
        </dt>

        <b:if cond='data:showlocation == &quot;true&quot;'>
          <dd class='profile-data'><data:location/></dd>
        </b:if>

        <b:if cond='data:aboutme != &quot;&quot;'><dd class='profile-textblock'><data:aboutme/></dd></b:if>
      </dl>
      <a class='profile-link' expr:href='data:userUrl' rel='author'><data:viewProfileMsg/></a>
    </b:if>

     <b:include name='quickedit'/>
    </div>
  </b:includable>
   </b:widget>
   <b:widget id='PopularPosts1' locked='false' title='Beliebte Posts' type='PopularPosts'>
     <b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == &quot;false&quot;'>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (3) Show only thumbnails -->
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            </div>
            <div style='clear: both;'/>
          <b:else/>
            <!-- (4) Show snippets and thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
   </b:widget>
 </b:section>
</div> <!-- /sidebar -->
<div style='clear: both;'/>
<div id='credit'>&#169; Design  <a href='http://bekreatief.blogspot.com'>Be KreaTief</a> &#183; 2013 &#183; Based on <a href='https://github.com/5202/five/blob/master/five.xml'>Five by 5202</a> &#183; Pattern Template by <a href='http://www.colourlovers.com/lover/simzu'>Simzu</a> &#183; &#169; Content <a expr:href='data:blog.homepageUrl'><data:blog.title/></a></div><!--/credit-->

</div><!-- /container -->
<script>
  window.___gcfg = {
    lang: &#39;de-DE&#39;,
    parsetags: &#39;explicit&#39;
  }
</script>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
   <style>
     .date-border{
         display: none; 
  }
 </style>
</b:if>

</body>
</html>