Classic Comment Form Version launched

| November 26, 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



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

/* 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:ivory;
 padding:10px;
 position: relative;
 z-index: 2 !important; 
}

.comments .comment-block:after{
 content:'';
 position: absolute; 
 border-color: transparent ivory 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>

<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='Blog Posts' 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' 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='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/>
<!-- 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><!--/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>
Older Post
© Design Be KreaTief · 2013 · Based on Five by 5202 · Pattern Template by Eonscintilla · © Content Drawing Of A Rose