Add to your Blog

| 20 September 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 uns speichert ihn in der Zwischenablage durch die Betätigung von Strg+C (Apfel+C für Mac-User).

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)


<?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-rc1/css/bootstrap.min.css' rel='stylesheet'/>
<!--Glyphicons -->
   <link href='//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css' rel='stylesheet'/>

<!-- Fonts -->
   <link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:200,700' rel='stylesheet' type='text/css'/>
   <link href='http://fonts.googleapis.com/css?family=Raleway:700,300' rel='stylesheet' type='text/css'/>

 <b:skin><![CDATA[*/
]]></b:skin>
 <b:template-skin><![CDATA[
body{
 background: url(https://googledrive.com/host/0Bz6HRVCs7oBaVFNPTl9BbEo1Y2s/) repeat fixed; 
 font-family: 'Raleway', sans-serif;
 font-size: 18px;
}

h1, h2, h3, h4, h5{
 font-family: 'Yanone Kaffeesatz', sans-serif;
}

.btn{
 letter-spacing: 1px; 
 border-radius: 0; 
}

img{
 max-width: 100%; 
}

/* Carousel Style */
#carousel-example-generic{
 width: 1300px; 
 max-width: 100%;
 position: realtive;
 margin-left: auto;
 margin-right: auto; 
}

.carousel-caption{
 width: 100%;
 padding-top: 20px;
 padding-bottom: 20px;
 background: rgba(255, 255, 255, .1);
 position: absolute;
 left: 0;  
}

.carousel-caption h3{
 font-weight: bold; 
}

/* Navbar Style */
.navbar{
 z-index: 20; 
}

.nav-collapse, .navbar .container{
 background: #222222;
}

.navbar-brand{
 font-weight: bold;
}

.navbar-form input{
 border-radius: 0; 
}

.undertitle{
 width: 100%;
 text-align: center;
 border-top: 3px solid #bbb;
 font-size: 16px;
 padding-top: 3px;
}

/* Home Page Style */
.marketing{
 background: transparent;
 max-width: 100%;
 width: 1300px; 
}

.featurette-image{
 width: 450px; 
 margin: 10px; 
}

.col-lg-4:nth-of-type(odd) img{ 
 float: right; 
}

.col-lg-4:nth-of-type(even) img{
 float: left;
}

.col-lg-4:nth-of-type(n+4){
 width: 100%;
}

/*Float Center if width is smaller than 915px */
@media screen and (max-width:915px){
 .col-lg-4:nth-of-type(odd) img, .col-lg-4:nth-of-type(even) img{
  float: center;
  display: block;
 }    
}

.col-lg-4:nth-of-type(n+4) .btn{
 float: right; 
 text-shadow: 0 0 transparent
}

.col-lg-4:nth-of-type(n+4) h2, .col-lg-4:nth-of-type(n+4) p{
 text-shadow: 1px 1px #fff;
}

.col-lg-4:nth-of-type(1), .col-lg-4:nth-of-type(2), .col-lg-4:nth-of-type(3){
 padding: 20px; 
 text-align: center; 
}

.col-lg-4:nth-of-type(1) hr, .col-lg-4:nth-of-type(2) hr, .col-lg-4:nth-of-type(3) hr{
 display: none; 
}

.col-lg-4:nth-of-type(1) .btn, .col-lg-4:nth-of-type(2) .btn, .col-lg-4:nth-of-type(3) .btn{
 float: center !important; 
 text-shadow: 0 0 transparent; 
}

.col-lg-4:nth-of-type(1) img, .col-lg-4:nth-of-type(2) img, .col-lg-4:nth-of-type(3) img{
 width: 70%;
 margin: 0 15%;
 max-width: 100%; 
}

.col-lg-4:nth-of-type(1) h2, .col-lg-4:nth-of-type(2) h2, .col-lg-4:nth-of-type(3) h2{
 text-align: center;
 text-shadow: 1px 1px #fff; 
}

.col-lg-4:nth-of-type(1) p, .col-lg-4:nth-of-type(2) p, .col-lg-4:nth-of-type(3) p{
 font-size: 17px;
 text-shadow: 1px 1px #fff; 
}

/* Foot 4 Gadgets */
#foot{
 max-width: 100%;
 position: relative;
 top: 30px; 
}

/* Column Style Foot
--------------------------*/ 
.col {
 float: left;
 padding-left: 3.2%;
 margin-bottom: 80px;
}

.grid3 .col {
 width: 33.3%;
}

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

/* reset cols to 2-column */
@media screen and (max-width: 800px) {
 .grid3 .col {
  width: 50%;
 }

 .grid3 .col:nth-of-type(3n+1) {
  padding-left: 3.2%;
  clear: none;
 }

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

/* reset cols to fullwidth */
@media screen and (max-width: 600px) {
 .col {
  width: 100% !important;
  margin-left: 0 !important;
  clear: none !important;
  padding: 0; 
 }
}

footer{
 font-size: 13px; 
 margin-top: 50px; 
 position: absolute;
 bottom: 0;
 max-width: 100%;
 width: 1300px;  
}
]]></b:template-skin>
</head>

<!-- Add Background And Width Fix For Static and Item Pages -->
<b:if cond='data:blog.pageType != &quot;index&quot;'>
 <style>
  .col-lg-4{
   width: 100%;
   font-size: 20px;
   margin-top: 50px;  
  }

  .marketing{
   background: #FFFAFA;
  }
 </style>
</b:if>

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

<!-- NAVBAR -->
<nav class='navbar navbar-static-top navbar-inverse' role='navigation'>
<div class='container'>

    <button class='navbar-toggle pull-left' data-target='.navbar-responsive-collapse' data-toggle='collapse' style='z-index: 25; border:0;' type='button'>
      <span class='icon-bar'/>
      <span class='icon-bar'/>
      <span class='icon-bar'/>
    </button>

<a class='navbar-brand' expr:href='data:blog.homepageUrl'><data:blog.title/></a>
    
  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class='nav-collapse collapse navbar-responsive-collapse'>
      <ul class='nav navbar-nav'>
              <li><a href='#'>Menu Item</a></li>
              <li><a href='#'>Menu Item</a></li>
              <li class='dropdown'>
                <a class='dropdown-toggle' data-toggle='dropdown' href='#'>Drop Down<b class='caret'/></a>
                <ul class='dropdown-menu'>
                  <li><a href='#'>Drop Content</a></li>
                  <li><a href='#'>Drop Content</a></li>
                  <li><a href='#'>Drop Content</a></li>
                </ul>
              </li>
            </ul>
 <!-- Navbar Search Field -->  
    <form action='/search' class='navbar-form pull-right' method='GET' role='search'>
      <input class='form-control' name='q' placeholder='Search' type='text'/>
    </form>
   </div><!-- /.navbar-collapse -->
    </div> 
  </nav><!-- /navbar -->
  
<!-- CAROUSEL Fader -->  
<b:if cond='data:blog.url == data:blog.homepageUrl'> <!-- shows on home page only -->
  <style>
    /* hide if width is smaller than 500px */
    @media screen and (max-width:500px){
  .carousel{
   display: none; 
  }
 }
 </style>
 <div class='carousel slide' id='carousel-example-generic'>
 <!-- Indicators -->
 <ol class='carousel-indicators'>
  <li class='active' data-slide-to='0' data-target='#carousel-example-generic'/>
  <li data-slide-to='1' data-target='#carousel-example-generic'/>
  <li data-slide-to='2' data-target='#carousel-example-generic'/>
  <li data-slide-to='3' data-target='#carousel-example-generic'/>
 </ol>

 <!-- Wrapper for slides -->
 <div class='carousel-inner'>
  <div class='item active'>
   <img alt='Slide1' src='/slide1.jpg'/>
   <div class='carousel-caption'>
    <h3>Heading</h3>
    <p>Description</p> 
    <p><a class='btn btn-default' href='#'>Link</a></p>
   </div>
  </div>
 
    <div class='item'>
  <img alt='Slide2' src='/slide2.jpg'/>
  <div class='carousel-caption'>
   <h3>Heading</h3>
   <p>Description</p>
   <p><a class='btn btn-default' href='#'>Link</a></p>
  </div>
    </div>

    <div class='item'>
  <img alt='Slide3' src='/slide3.jpg'/>
  <div class='carousel-caption'>
   <h3>Heading</h3>
   <p>Description</p>
   <p><a class='btn btn-default' href='#'>Link</a></p>
  </div>
    </div>

    <div class='item'>
  <img alt='Slide4' src='/slide4.jpg'/>
  <div class='carousel-caption'>
   <h3>Heading</h3>
   <p>Description</p>
   <p><a class='btn btn-default' href='#'>Link</a></p>
  </div>
    </div>
  </div> <!-- carousel-inner -->

  <!-- Controls -->
  <a class='left carousel-control' data-slide='prev' href='#carousel-example-generic'>
    <span class='icon-prev'/>
  </a>
  <a class='right carousel-control' data-slide='next' href='#carousel-example-generic'>
    <span class='icon-next'/>
  </a>
  </div> <!-- /Carousel -->
  </b:if>


    <div class='container marketing'>
 <!-- Blog Widget Start -->
  <b:section class='main' id='main'>
    <b:widget id='Blog1' locked='false' title='Blogposts' type='Blog'>
      <b:includable id='main'>
  <div class='row'>
       <b:loop values='data:posts' var='i'>    
         <div class='col-lg-4'><article><b:include data='i' name='post'/></article>
<hr class='featurette-divider'/></div>
       </b:loop>
      </div> <!-- /row -->
      <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='btn btn-primary pull-left' expr:href='data:newerPageUrl'>
       <data:newerPageTitle/>
      </a>
    </b:if>
    <b:if cond='data:olderPageUrl'>
      <a class='btn btn-primary pull-right' expr:href='data:olderPageUrl'>
        <data:olderPageTitle/>
      </a>
    </b:if>
    </b:includable>
      <b:includable id='post' var='i'>
 
<b:if cond='data:blog.pageType == &quot;index&quot;'>
      <div class='row featurette'>
          <a expr:href='data:i.url'><img class='featurette-image img-responsive' expr:src='data:i.firstImageUrl'/></a>
         <h2 class='featurette-heading'><a expr:href='data:i.url'><data:i.title/></a></h2>
          <p class='lead'> <b:if cond='data:i.hasJumpLink'>
     <data:i.body/><br/>
     <a class='pull-right btn btn-default' expr:href='data:i.url' expr:title='data:i.title'>
     <data:i.jumpText/>
    </a>
   <b:else/>
            <data:i.snippet/><br/>
<a class='btn btn-default' expr:href='data:i.url' expr:title='data:i.title'>
     <data:i.jumpText/>
    </a>
      </b:if></p>
        <div class='clearfix'/>
        </div>

  <style>

</style>
  <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'>
| <span class='glyphicon glyphicon-calendar'/> <data:i.date/> <b:if cond='data:i.labels'>| <span class='glyphicon glyphicon-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 class='grid3' id='foot'>
<div class='col'>
<b:section class='foot' id='foot1' locked='false' showaddelement='yes'/> <!-- /.foot -->
</div> <!-- /.col (1) -->

<div class='col'>
<b:section class='foot' id='foot2' locked='false' showaddelement='yes'/> <!-- /.foot -->
</div> <!-- /.col (2) -->

<div class='col'>
<b:section class='foot' id='foot3' locked='false' showaddelement='yes'/> <!-- /.foot -->
</div> <!-- /.col (3) -->
</div> <!-- /#foot -->

      <!-- FOOTER -->
      <footer>
        <p class='pull-right'><a href='#'><span class='glyphicon glyphicon-arrow-up'/>Back to top<span class='glyphicon glyphicon-arrow-up'/></a></p>
        <p>&#169; Content <a expr:href='data:blog.homepageUrl'><data:blog.title/></a>&#183; 2013 &#183; Template made by <a href='http://bekreatief.blogspot.com'>Be KreaTief</a> &#183; Based on <a href='https://github.com/5202/five/blob/master/five.xml'>Five by 5202</a> &#183; Using <a href='http://getbootstrap.com/'>Bootstrap</a> and <a href='http://glyphicons.com/'>Glyphicons</a> &#183; Pattern by <a href='http://subtlepatterns.com/'>Subtle Patterns</a></p>
      </footer>

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

<!-- JQuery -->
<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'/>

<!-- Bootstrap JavaScript -->
<script src='//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js'/>

<script type='text/javascript'>
  $(document).ready(function() {
    $(&#39;.carousel&#39;).carousel({
      interval: 9000
    })
  });
</script>

</body>
</html>

Geht als nächstes zur HTML-Ansicht eures Blogs, unter Vorlage HTML bearbeiten und löscht den gesamten Code der darin enthalten ist (Sicherheitskopie nicht vergessen, gross was schiefgehen kann nicht, aber es empfiehlt sich immer)
Wenn ihr das habt, fügt ihr euren Code ein (Strg+V/Apfel+V) und speichert.
Das Template ist jetzt installiert und ihr könnt eure Gadgets wieder einfügen.

Now open up your HTML Code and delete the full code (don't forget to make a copy before, in case anything goes wrong, very improbable, but just to be on the save side)
Then paste in the code you copied (Ctrl+V/Cmd+V) and save.
The template is now installed and you can readd your widgets






Was jetzt noch erledigt werden muss ist das Carousel und das Menü und dann seid ihr fertig.

Now you have to set up the carousel and menu and you are good to go


Newer Post Older Post