Classic Comment Form Version launched

| 26 November 2013 | |
Ich weiss, dass viele die klassischen Kommentare vermisst haben, also habe ich jetzt eine Version mit klassischen Kommentaren geschrieben.
Die Vorgehensweise bleibt sich gleich wie in den Tutorials auf diesem Blog erklärt.

I know there have been a lot of people who missed the old comment form so I included a classic comment version as well.
The way to add remains just as in the rest of the tutorials explained.


The new Code



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

/* COMMENTS */
.comments .avatar-image-container, .comments .avatar-image-container img {
 width: 51px;
 max-width: 43px;
 height: 43px;
 max-height: 51px;
 background: #FFF;
 float: left;
 border-radius: 50%;
 -moz-border-radius: 50%;
 margin: 0 10px 0 0;
}

#comments {
 padding-top: 20px;
 border-top: 1px solid #ddd;
}

.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single {
 margin-left:60px;
}

.comments .comment-block, .comments .comment-thread.inline-thread .comment-block {
 background:#E0E0FF;
 padding:10px;
 position: relative;
 z-index: 2 !important; 
}

.comments .comment-block:after{
 content:'';
 position: absolute; 
 border-color: transparent #E0E0FF transparent transparent;
 border-style:solid;
 border-width:15px;
 width:0;
 height:0;
 left: -30px;
 top: 10px; 
}

.comment-thread.inline-thread .avatar-image-container{
 margin-top: 45px;
}

.comments .comment-thread.inline-thread .comment-block:after{
 border-width: 13px 25px 1px 5px;
 transform: rotate(-25deg);
 -moz-transform: rotate(-25deg);
 -webkit-transform:rotate(-25deg);
 -o-transform: rotate(-25deg);
 -ms-transform:rotate(-25deg);
 left: -23px;
 top: 27px; 
 z-index: 1 !important; 
 position: absolute; 
}

.comment-header {
 font-weight: bold; 
 padding-bottom: 10px;
 padding-top: 10px;
 font-size: 120%;
}

.comments .comments-content .comment {
 width:100%;
 line-height:1em;
 margin:15px 0 0;
 padding:0;
 font-size: 90%; 
}

.comments .comments-content .comment-content {
 text-align: justify;
 line-height: 22px;
}

.comments .comments-content .comment-replies {
 margin-top:0;
}

#comments h4 {
 display:inline;
 line-height:40px;
 padding:10px;
}

#comments h4{
 line-height: 30px;
 margin: 0;
 padding: 20px 0 14px 10px;
 text-transform: uppercase;
 font-weight: 400!important;
 color: #444;
}

.comments .comments-content .datetime {
 float: right;
 padding-top: 6px;
 padding-right: 20px;
}

.comment-actions{
 background: #f2f2f2;
 padding: 8px;
 margin-left: 435px;
 border: 1px solid #ddd;
 float: right;
 margin-top: -30px;
 margin-right: 5px;
}

.comments .continue a{
 background: #f2f2f2;
 padding: 8px;
 border: 1px solid #ddd;
}

.comment-replybox-thread a{
 background: #f2f2f2;
 padding: 8px;
 border: 1px solid #ddd;
}

.comment-thread a {
 color: #777;
}

]]></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='Blog Posts' 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' var='post'>
  <div class='comment-form'>
    <a name='comment-form'/>
    <b:if cond='data:mobile'>
      <h4 id='comment-post-message'>
        <a expr:id='data:widget.instanceId + &quot;_comment-editor-toggle-link&quot;' href='javascript:void(0)'><data:postCommentMsg/></a></h4>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
    <b:else/>
      <h4 id='comment-post-message'><data:postCommentMsg/></h4>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
    </b:if>
    <data:post.friendConnectJs/>
    <data:post.cmtfpIframe/>
    <script type='text/javascript'>
      BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
    </script>
  </div>
</b:includable>
    <b:includable id='commentDeleteIcon' var='comment'>
  <span expr:class='&quot;item-control &quot; + data:comment.adminClass'>
    <b:if cond='data:showCmtPopup'>
      <div class='goog-toggle-button'>
        <div class='goog-inline-block comment-action-icon'/>
      </div>
    <b:else/>
      <a class='comment-delete' expr:href='data:comment.deleteUrl' expr:title='data:top.deleteCommentMsg'>
        <img src='//www.blogger.com/img/icon_delete13.gif'/>
      </a>
    </b:if>
  </span>
</b:includable>
    <b:includable id='comment_count_picker' var='post'>
  <b:if cond='data:post.commentSource == 1'>
    <span class='cmt_count_iframe_holder' expr:data-count='data:post.numComments' expr:data-onclick='data:post.addCommentOnclick' expr:data-post-url='data:post.url' expr:data-url='data:post.canonicalUrl'>
    </span>
  <b:else/>
    <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
      <data:post.commentLabelFull/>:
    </a>
  </b:if>
</b:includable>
    <b:includable id='comment_picker' var='post'>
  <b:if cond='data:post.commentSource == 1'>
    <b:include data='post' name='iframe_comments'/>
  <b:else/>
    <b:if cond='data:post.showThreadedComments'>
      <b:include data='post' name='threaded_comments'/>
    <b:else/>
      <b:include data='post' name='comments'/>
    </b:if>
  </b:if>
</b:includable>
    <b:includable id='comments' var='post'>
  <div class='comments' id='comments'>
    <a name='comments'/>
    <b:if cond='data:post.allowComments'>
      <h4><data:post.commentLabelFull/>:</h4>

      <b:if cond='data:post.commentPagingRequired'>
        <span class='paging-control-container'>
          <b:if cond='data:post.hasOlderLinks'>
            <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
              &#160;
            <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
              &#160;
          </b:if>

          <data:post.commentRangeText/>

          <b:if cond='data:post.hasNewerLinks'>
            &#160;
            <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
            &#160;
            <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
          </b:if>
        </span>
      </b:if>

      <div expr:id='data:widget.instanceId + &quot;_comments-block-wrapper&quot;'>
        <dl expr:class='data:post.avatarIndentClass' id='comments-block'>
          <b:loop values='data:post.comments' var='comment'>
            <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
              <b:if cond='data:comment.favicon'>
                <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
              </b:if>
              <a expr:name='data:comment.anchorName'/>
              <b:if cond='data:blog.enabledCommentProfileImages'>
                <data:comment.authorAvatarImage/>
              </b:if>
              <b:if cond='data:comment.authorUrl'>
                <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
              <b:else/>
                <data:comment.author/>
              </b:if>
              <data:commentPostedByMsg/>
            </dt>
            <dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
              <b:if cond='data:comment.isDeleted'>
                <span class='deleted-comment'><data:comment.body/></span>
              <b:else/>
                <p>
                  <data:comment.body/>
                </p>
              </b:if>
            </dd>
            <dd class='comment-footer'>
              <span class='comment-timestamp'>
                <a expr:href='data:comment.url' title='comment permalink'>
                  <data:comment.timestamp/>
                </a>
                <b:include data='comment' name='commentDeleteIcon'/>
              </span>
            </dd>
          </b:loop>
        </dl>
      </div>

      <b:if cond='data:post.commentPagingRequired'>
        <span class='paging-control-container'>
          <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
            <data:post.oldestLinkText/>
          </a>
          <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
            <data:post.olderLinkText/>
          </a>
          &#160;
          <data:post.commentRangeText/>
          &#160;
          <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
            <data:post.newerLinkText/>
          </a>
          <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
            <data:post.newestLinkText/>
          </a>
        </span>
      </b:if>

      <p class='comment-footer'>
        <b:if cond='data:post.embedCommentForm'>
          <b:if cond='data:post.allowNewComments'>
            <b:include data='post' name='comment-form'/>
          <b:else/>
            <data:post.noNewCommentsText/>
          </b:if>
        <b:else/>
          <b:if cond='data:post.allowComments'>
            <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
          </b:if>
        </b:if>

      </p>
    </b:if>
    <b:if cond='data:showCmtPopup'>
      <div id='comment-popup'>
        <iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
        </iframe>
      </div>
    </b:if>

    <div id='backlinks-container'>
    <div expr:id='data:widget.instanceId + &quot;_backlinks-container&quot;'>
       <b:if cond='data:post.showBacklinks'>
         <b:include data='post' name='backlinks'/>
       </b:if>
    </div>
    </div>
  </div>
</b:includable>
      <b:includable id='feedLinks'/>
      <b:includable id='feedLinksBody'/>
    <b:includable id='iframe_comments' var='i'> 
<b:if cond='data:i.allowIframeComments'>
<script expr:src='data:i.iframeCommentSrc' type='text/javascript'/>
<div class='cmt_iframe_holder' expr:data-href='data:i.canonicalUrl' expr:data-viewtype='data:i.viewType'/>
</b:if>
</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/>
<!-- classic comments -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='i' name='comment_picker'/>
</b:if>
<!-- classic comments end -->

  </b:if>
    
 </b:includable>
      <b:includable id='postQuickEdit'/>
      <b:includable id='shareButtons'/>
      <b:includable id='status-message'/>
    <b:includable id='threaded-comment-form' var='post'>
  <div class='comment-form'>
    <a name='comment-form'/>
    <b:if cond='data:mobile'>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
    <b:else/>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
    </b:if>
    <data:post.friendConnectJs/>
    <data:post.cmtfpIframe/>
    <script type='text/javascript'>
      BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
    </script>
  </div>
</b:includable>
    <b:includable id='threaded_comment_js' var='post'>
  <script async='async' expr:src='data:post.commentSrc' type='text/javascript'/>

  <script type='text/javascript'>
    (function() {
      var items = <data:post.commentJso/>;
      var msgs = <data:post.commentMsgs/>;
      var config = <data:post.commentConfig/>;

// <![CDATA[
      var cursor = null;
      if (items && items.length > 0) {
        cursor = parseInt(items[items.length - 1].timestamp) + 1;
      }

      var bodyFromEntry = function(entry) {
        if (entry.gd$extendedProperty) {
          for (var k in entry.gd$extendedProperty) {
            if (entry.gd$extendedProperty[k].name == 'blogger.contentRemoved') {
              return '<span class="deleted-comment">' + entry.content.$t + '</span>';
            }
          }
        }
        return entry.content.$t;
      }

      var parse = function(data) {
        cursor = null;
        var comments = [];
        if (data && data.feed && data.feed.entry) {
          for (var i = 0, entry; entry = data.feed.entry[i]; i++) {
            var comment = {};
            // comment ID, parsed out of the original id format
            var id = /blog-(d+).post-(d+)/.exec(entry.id.$t);
            comment.id = id ? id[2] : null;
            comment.body = bodyFromEntry(entry);
            comment.timestamp = Date.parse(entry.published.$t) + '';
            if (entry.author && entry.author.constructor === Array) {
              var auth = entry.author[0];
              if (auth) {
                comment.author = {
                  name: (auth.name ? auth.name.$t : undefined),
                  profileUrl: (auth.uri ? auth.uri.$t : undefined),
                  avatarUrl: (auth.gd$image ? auth.gd$image.src : undefined)
                };
              }
            }
            if (entry.link) {
              if (entry.link[2]) {
                comment.link = comment.permalink = entry.link[2].href;
              }
              if (entry.link[3]) {
                var pid = /.*comments/default/(d+)?.*/.exec(entry.link[3].href);
                if (pid && pid[1]) {
                  comment.parentId = pid[1];
                }
              }
            }
            comment.deleteclass = 'item-control blog-admin';
            if (entry.gd$extendedProperty) {
              for (var k in entry.gd$extendedProperty) {
                if (entry.gd$extendedProperty[k].name == 'blogger.itemClass') {
                  comment.deleteclass += ' ' + entry.gd$extendedProperty[k].value;
                } else if (entry.gd$extendedProperty[k].name == 'blogger.displayTime') {
                  comment.displayTime = entry.gd$extendedProperty[k].value;
                }
              }
            }
            comments.push(comment);
          }
        }
        return comments;
      };

      var paginator = function(callback) {
        if (hasMore()) {
          var url = config.feed + '?alt=json&v=2&orderby=published&reverse=false&max-results=50';
          if (cursor) {
            url += '&published-min=' + new Date(cursor).toISOString();
          }
          window.bloggercomments = function(data) {
            var parsed = parse(data);
            cursor = parsed.length < 50 ? null
                : parseInt(parsed[parsed.length - 1].timestamp) + 1
            callback(parsed);
            window.bloggercomments = null;
          }
          url += '&callback=bloggercomments';
          var script = document.createElement('script');
          script.type = 'text/javascript';
          script.src = url;
          document.getElementsByTagName('head')[0].appendChild(script);
        }
      };
      var hasMore = function() {
        return !!cursor;
      };
      var getMeta = function(key, comment) {
        if ('iswriter' == key) {
          var matches = !!comment.author
              && comment.author.name == config.authorName
              && comment.author.profileUrl == config.authorUrl;
          return matches ? 'true' : '';
        } else if ('deletelink' == key) {
          return config.baseUri + '/delete-comment.g?blogID='
               + config.blogId + '&postID=' + comment.id;
        } else if ('deleteclass' == key) {
          return comment.deleteclass;
        }
        return '';
      };

      var replybox = null;
      var replyUrlParts = null;
      var replyParent = undefined;

      var onReply = function(commentId, domId) {
        if (replybox == null) {
          // lazily cache replybox, and adjust to suit this style:
          replybox = document.getElementById('comment-editor');
          if (replybox != null) {
            replybox.height = '250px';
            replybox.style.display = 'block';
            replyUrlParts = replybox.src.split('#');
          }
        }
        if (replybox && (commentId !== replyParent)) {
          document.getElementById(domId).insertBefore(replybox, null);
          replybox.src = replyUrlParts[0]
              + (commentId ? '&parentID=' + commentId : '')
              + '#' + replyUrlParts[1];
          replyParent = commentId;
        }
      };

      var hash = (window.location.hash || '#').substring(1);
      var startThread, targetComment;
      if (/^comment-form_/.test(hash)) {
        startThread = hash.substring('comment-form_'.length);
      } else if (/^c[0-9]+$/.test(hash)) {
        targetComment = hash.substring(1);
      }

      // Configure commenting API:
      var configJso = {
        'maxDepth': config.maxThreadDepth
      };
      var provider = {
        'id': config.postId,
        'data': items,
        'loadNext': paginator,
        'hasMore': hasMore,
        'getMeta': getMeta,
        'onReply': onReply,
        'rendered': true,
        'initComment': targetComment,
        'initReplyThread': startThread,
        'config': configJso,
        'messages': msgs
      };

      var render = function() {
        if (window.goog && window.goog.comments) {
          var holder = document.getElementById('comment-holder');
          window.goog.comments.render(holder, provider);
        }
      };

      // render now, or queue to render when library loads:
      if (window.goog && window.goog.comments) {
        render();
      } else {
        window.goog = window.goog || {};
        window.goog.comments = window.goog.comments || {};
        window.goog.comments.loadQueue = window.goog.comments.loadQueue || [];
        window.goog.comments.loadQueue.push(render);
      }
    })();
// ]]>
  </script>
</b:includable>
    <b:includable id='threaded_comments' var='post'>
  <div class='comments' id='comments'>
    <a name='comments'/>
    <h4><data:post.commentLabelFull/>:</h4>

    <div class='comments-content'>
      <b:if cond='data:post.embedCommentForm'>
        <b:include data='post' name='threaded_comment_js'/>
      </b:if>
      <div id='comment-holder'>
         <data:post.commentHtml/>
      </div>
    </div>

    <p class='comment-footer'>
      <b:if cond='data:post.allowNewComments'>
        <b:include data='post' name='threaded-comment-form'/>
      <b:else/>
        <data:post.noNewCommentsText/>
      </b:if>
    </p>

    <b:if cond='data:showCmtPopup'>
      <div id='comment-popup'>
        <iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
        </iframe>
      </div>
    </b:if>

    <div id='backlinks-container'>
    <div expr:id='data:widget.instanceId + &quot;_backlinks-container&quot;'>
       <b:if cond='data:post.showBacklinks'>
         <b:include data='post' name='backlinks'/>
       </b:if>
    </div>
    </div>
  </div>
</b:includable>
    </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>

Older Post