Add to your Blog

| 25 Oktober 2013 | , |
Da das mit dem Hochladen stets Konfusionen hervorbring und CopyPaste viel einfacher ist, reiche ich euch einfach den Code, den ihr in euren Editor kopiert.
Die Folge davon ist, dass alle Gadgets gelöscht werden. Also stellt sicher, dass ihr euch alle Gadgets abspeichert und sie danach wieder einfügt. Trotzdem ist Einfügen einfacher als nachher alles "falsche" zu löschen.

Since there's always trouble with uploading a template and copy paste is a lot easiert that's the way I'm gonna explain it to you. Just copy the code underneath and paste it into your editor. This will delete your widgets so make sure to save them all before pasting the code. Afterwards you can read them which is a lot easiert than having to delete all that blogger junk.



1. Save Widgets

Als erstes alle Gadgets abspeichern, damit nichts verloren geht.

First you wanna copy all your widgets so they don't get lost.

2. Copy Code

Den Code kopieren und dann zur Vorlage des Testblogs wechseln.

Copy the code and then swith to the template of your test blog.

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

.searchfield{
 position: absolute;
 left: 0; 
 width: 100%;
height: auto;  
}

.searchfield input{
 width: 100%;
 color: #e3d8d0;
 border: 0;
 padding: 7px; 
 background: #2a5c5e;
 position: relative; 
margin-top: 10px; 
}

.searchfield input:focus{
 background-color: #e3d8d0;
 color: #b52439;
}

.searchfield i{
        position: absolute;
        right: 20px;     
        top: 10px;      
        color: #74a9a9; 
margin-top: 10px; 
}
]]></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'>
<form action='/search' class='searchfield' method='GET'><input name='q' placeholder='Search' type='text'/><i class='fa fa-search'/></form>
 <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/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>




3. Add Code and Save

Kompletten Codeinhalt löschen und den eben kopierten einfügen.
Speichern.

Delete the complete content and paste the code you just copied. Save





4. Mobile Template

Die mobile Vorlage muss auf Benutzerdefiniert gesetzt werden.

We have to change the template for the mobile version to a customized version.







5. Add Widgets back in

Zum Schluss die Widgets wieder einfügen.

Lastely add the widgets back in.

 edit

Keine Kommentare:

Kommentar veröffentlichen

Neuerer Post Älterer Post
© Design Be KreaTief · 2013 · Based on Five by 5202 · Pattern Template by Simzu · © Content Hearts in Wonderland