Add to your Blog

| October 16, 2013 | , |
Da Blogger ziemlich mühsam bei der Installation von Templates Gadgets wie Navbar und Attribution an den ekligsten Stellen eines Templates einbaut, wenn man es traditionell höchlädt, habe ich beschlossen einfach den ganzen Code hier für euch in eine Box zu packen, damit ihr ihn per Copy Paste einfügen könnt.
Das Ganze geht dann ziemlich schnell von statten und entfernt gleich alles Unnötige.
Leider gehen dabei allerdings auch die Gadgets verloren, die ihr haben wollt. Also speichert jedes eurer Gadgets ab, falls es sich um etwas handelt, das mit Inhalt gefüllt ist. (Also Copy Paste in ein Word-Dokument oder Editor) Die anderen merkt ihr euch mit den Einstellungen, falls es was Besonderes gibt.

Selektiert den ganzen Code hier und speichert ihn in der Zwischenablage durch die Betätigung von Strg+C (Apfel+C für Mac-User).

Dann folgt den Anweisungen im Video

Since Blogger is pretty annoying with the installation of templates and likes to add widgets like the attribution and navbar into a template, I found it is a lot easier to actually implement a template by just copy pasting the code.
Unfortunately with copy pasting every other widget will be deleted as well. So if you have widgets, copy their content into a word document or editor, save them and or remember the setting of them, so you can add them again after the installation.

Select the code in here and save it to your clipboard, by pressing Ctrl+C (Cmd+C if you're using Mac)

Then follow the instructions in the video







<?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>

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

<!-- Font Awesome -->
<link href='//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css' rel='stylesheet'/>

<!-- Dosis Webfont -->
   <link href='http://fonts.googleapis.com/css?family=Dosis:400,600,200' rel='stylesheet' type='text/css'/>

 <b:include data='blog' name='all-head-content'/>
 <b:skin><![CDATA[*/
]]></b:skin>
 <b:template-skin><![CDATA[
/* Color Scheme: http://dabblet.com/gist/7013445 */
body{
 background: url(https://googledrive.com/host/0Bz6HRVCs7oBaVFNPTl9BbEo1Y2s/) repeat; 
 font-family: Dosis, Calibri, Arial, Sans Serif; 
 font-size: 20px; 
 color: #151b2b;
 z-index: 1;
}

h1, h2, h3, h4, h5{
 font-weight: 200;
 text-transform: uppercase;
 font-family: Dosis;  
 color: #35384a; 
}

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

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

a:hover{
 color: #94a458;
}

.buttonbg{ 
 background: #35384a;
 color: #d6cfb6 !important;
 padding: 2px 5px;
 text-transform: uppercase; 
}

.buttonbg:hover{
 background: #8a072c;
 color: #e8d082 !important;
}

#header{
 width: 100%; 
 background: url(http://colourlovers.com.s3.amazonaws.com/images/patterns/3931/3931179.png?1381951636) repeat fixed; 
 position: relative;
 top: 0;
 left: 0; 
 text-align: center; 
 padding-top: 30px; 
 z-index: -2; 
}

#header img{
 max-width: 100%;
 position: relative;
}

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

/* 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: #35384a;
 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: #8a072c;
  background: rgba(255, 255, 255, .5);
 }

 .nav {
  position: relative;
  min-height: 40px;
  font-size: 150%; 
 } 
 .nav ul {
  width: 180px;
  padding: 5px 0;
  position: absolute;
  top: 0;
  left: 0;
  background: url(https://googledrive.com/host/0Bz6HRVCs7oBaVFNPTl9BbEo1Y2s/) repeat; 
  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: #8a072c; 
 }

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

#container{
 width: 80%;
 max-width: 1300px; 
 margin-left: 10%;
 position: relative;
 top:20px;
}


@media screen and (max-width:979px){
 #sidebar{
  width: 100%; 
  position: relative;
  top: 30px; 
  margin-bottom: 30px; 
 }

 #content{
  width: 100%; 
  position: relative;
  top: 0; 
 }
}

@media screen and (min-width:980px){
 #sidebar{
  width: 29%; 
  float: left;
  position: relative;
  top: 0; 
 }

 #content{
  width: 70%; 
  float: right; 
  position: relative;
  top: 0; 
 }
}

#credit{
 width: 100%; 
 position: relative;
 top: 30px;
 left: 0; 
 padding: 5px 0px; 
 font-size: 80%; 
}

.index #sidebar{
 display: none;
}

.index #content{
 width: 100%;
 float: none; 
}

img{
 max-width: 100%;
}

/* Image Scale */
.col .thumbpic{
    width: 100%;
    top: 0;
    left: 0; 
}

article{
 display: block;
}

.col {
 float: left;
 margin-left: 3.2%;
 margin-bottom: 30px;
}

.grid .col {
 width: 22.6%;
}

.grid .col:nth-of-type(4n+1){
 margin-left: 0;
 clear: left;
}

@media screen and (max-width: 740px) {
 .grid .col {
  width: 31.2%;
 }
 
 .grid .col:nth-of-type(4n+1) {
  margin-left: 3.2%;
  clear: none;
 }

 .grid .col:nth-of-type(3n+1) {
  margin-left: 0;
  clear: left;
 }
}

@media screen and (max-width: 600px) {
 .grid .col {
  width: 48.4%;
 }
 
 .grid .col:nth-of-type(3n+1) {
  margin-left: 3.2%;
  clear: none;
 }
 
 .grid .col:nth-of-type(2n+1) {
  margin-left: 0;
  clear: left;
 }
}

@media screen and (max-width: 400px) {
 .col {
  width: 100% !important;
  margin-left: 0 !important;
  clear: none !important;
 }
#Blog1{
font-size: 25px; 
}
}

.undertitle{
 width: 100%;
 text-align: center;
 font-size: 16px;
 padding-top: 3px;
 text-transform: uppercase;
 padding-bottom: 10px; 
}
.searchfield{
 position: absolute;
 top: 0px;
 right: 0; 
 width: 300px; 
 max-width: 100%;
 z-index: -1; 
}

.searchfield input{
 width: 100%;
 color: #8a072c;
 border: 0;
 padding: 7px; 
 background: url(https://googledrive.com/host/0Bz6HRVCs7oBaVFNPTl9BbEo1Y2s/) no-repeat;
 position: relative; 
 z-index: -1; 
}

.searchfield:focus{
 background-color: rgba(255, 255, 255 .5);
}

.searchfield i{
        position: absolute;
        right: 20px;     
        top: 25%;      
        color: #94a458; 
}
]]></b:template-skin>
</head>

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

  <div id='header'>
<form action='/search' class='searchfield' method='GET'><input name='q' placeholder='Search' type='text'/><i class='icon-search'/></form>
          <img src='https://googledrive.com/host/0Bz6HRVCs7oBaa1ZQSDVoMmdDTXc/DrawingOfARose/yourheader.png'/>
  </div><!--/header-->
<nav class='nav center cl-effect-5'>
    <ul>
                  <li class='current'><i class='icon-long-arrow-down' style='opacity: 0.5'> </i> Menu</li>
     <li><a href='#'><span data-hover='Home'>Home</span></a></li>
     <li><a href='#'><span data-hover='About'>About</span></a></li>
     <li><a href='#'><span data-hover='Contact'>Contact</span></a></li>
     <li><a href='#'><span data-hover='Follow'>Follow</span></a></li>
     <li><a href='#'><span data-hover='More'>More</span></a></li>
    </ul>
   </nav>

  <div id='container'>
   <div id='content'>
<b:section class='main' id='main'>
  <b:widget id='Blog1' locked='false' title='Blogposts' type='Blog'>
    <b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;index&quot;'>           
    <div class='grid'>
        <b:loop values='data:posts' var='i'>
            <article class='col'><b:include data='i' name='post'/></article>
        </b:loop>
    </div>
<b:else/>
    <b:loop values='data:posts' var='i'>    
        <article><b:include data='i' name='post'/></article>
    </b:loop>
</b:if>
      <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='pull-left' expr:href='data:newerPageUrl'>
       <i class='icon-chevron-left'/> <data:newerPageTitle/>
      </a>
    </b:if>
    <b:if cond='data:olderPageUrl'>
      <a class='pull-right' expr:href='data:olderPageUrl'>
        <data:olderPageTitle/> <i class='icon-chevron-right'/>
      </a>
    </b:if>
    </b:includable>
    <b:includable id='post' var='i'>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
   <a expr:href='data:i.url'><img class='thumbpic' expr:src='data:i.firstImageUrl'/></a>

   <h3><a expr:href='data:i.url'><data:i.title/></a></h3>

   <span><data:i.snippet/></span>

  <b:else/>
  <!-- Page Type Item -->
   <b:if cond='data:i.title'>
    <h2 class='text-center'><a expr:href='data:i.url'><data:i.title/></a></h2>
   </b:if>
<div class='undertitle'>
| <i class='icon-calendar'/> <data:i.date/> <b:if cond='data:i.labels'>| <i class='icon-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>
   <data:i.body/>
   <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></div><!--/content-->
   <div id='sidebar'><b:section class='sidebar' id='sidebar1' locked='false' showaddelement='yes'/>
          </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/Eonscintilla'>Eonscintilla</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>
</body>
</html>

Newer Post Older Post
© Design Be KreaTief · 2013 · Based on Five by 5202 · Pattern Template by Eonscintilla · © Content Drawing Of A Rose