ASTN: XHTML Blogger, Utilitas Sistem Komentar V2
Lingkup pencarian…Bersihkan!

Berbagi tutorial blog yang dirangkum dan dibentuk dalam sebuah kode.

Donasi

Pertimbangkan untuk memberikan donasi melalui PayPal jika Anda merasa bahwa artikel-artikel di blog ini bermanfaat. Terima kasih.

XHTML Blogger, Utilitas Sistem Komentar V2

Dalam Konsep

JavaScript Thread Komentar

<b:includable id='threaded_comment_js' var='post'>
  <script async='async' expr:src='data:post.commentSrc' type='text/javascript'></script>

  <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>
DataKeteranganTampilan/Contoh Tampilan
data:post.commentSrcElemen ini akan menghasilkan URL sebuah script untuk keperluan fitur komentar//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js
data:post.commentJsoElemen ini akan menghasilkan JSON komentar yang telah diterbitkan di dalam posting terkaitSampel
data:post.commentMsgsElemen ini akan menghasilkan objek berupa variabel untuk menyatakan pesan-pesan tertentu yang akan tampil dalam sistem komentar versi ke duaSampel
data:post.commentConfigElemen ini akan menghasilkan nilai-nilai konfigurasi komentar, menyangkut ID blog, ID posting, URL feed, nama penulis administrator, URL profil administrator, URL Blogger dan kedalaman thread (beberapa tampaknya masih dalam konsep)Sampel

CSS Thread Komentar

<b:includable id='threaded_comment_css'>
<style>
.comments {}
.comments .comments-content {}
.comments .comment .comment-actions a, .comments .continue a {}
.comments .comment .comment-actions a:hover, .comments .continue a:hover {}
.comments .comments-content .comment-thread ol {}
.comments .comments-content .inline-thread {}
.comments .comments-content .comment-thread {}
.comments .comments-content .comment-thread:empty {}
.comments .comments-content .comment-replies {}
.comments .comments-content .comment {}
.comments .comments-content .comment:first-child {}
.comments .comments-content .comment:last-child {}
.comments .comments-content .comment-body {}
.comments .comments-content .user {}
.comments .comments-content .icon.blog-author {}
.comments .comments-content .datetime {}
.comments .comments-content .comment-header, .comments .comments-content .comment-content {}
.comments .comments-content .comment-content {}
.comments .comments-content .owner-actions {}
.comments .comments-replybox {}
.comments .comment-replybox-single {}
.comments .comment-replybox-thread {}
.comments .comments-content .loadmore a {}
.comments .thread-toggle {}
.comments .continue {}
.comments .comments-content .loadmore {}
.comments .comments-content .loadmore.loaded {}
.comments .thread-chrome.thread-collapsed {}
.comments .thread-toggle {}
.comments .thread-toggle .thread-arrow {}
.comments .thread-expanded .thread-arrow {}
.comments .thread-collapsed .thread-arrow {}
.comments .avatar-image-container {}
.comments .avatar-image-container img {}
@media screen and (max-device-width: 480px) {
  .comments .comments-content .comment-replies {}
}
</style>
</b:includable>

Sudah tidak berlaku lagi?

thumbnail
Judul: XHTML Blogger, Utilitas Sistem Komentar V2
Diposting oleh: Astin
Publikasi: 2014-07-28T19:57:00+08:00
Peringkat: 5
Peringkat Maksimal: 5
Dalam Konsep JavaScript Thread Komentar <b:includable id='threaded_comment_js' var='post'> <script async='asy...
 

Berlangganan

Berlangganan posting: Daftarkan alamat email Anda untuk memperoleh umpan posting terbaru langsung ke kotak masuk pesan.

1 Komentar:

MestiQQ Adalah perusahaan judi online KELAS DUNIA ber-grade A

Sudah saatnya Pencinta POKER Bergabung bersama kami dengan Pemain - Pemain RATING-A

Hanya dengan MINIMAL DEPOSIT RP. 10.000 anda sudah bisa bermain di semua games.

Kini terdapat 8 permainan yang hanya menggunakan 1 User ID & hanya dalam 1 website.
( POKER, DOMINO99, ADU-Q, BANDAR POKER, BANDARQ, CAPSA SUSUN, SAKONG ONLINE, BANDAR66 )

PROSES DEPOSIT DAN WITHDRAWAL CEPAT Dan AMAN TIDAK LEBIH DARI 2 MENIT.

100% tanpa robot, 100% Player VS Player.
Live Chat Online 24 Jam Dan Dilayani Oleh Customer Service Profesional.

Segera DAFTARKAN diri anda dan Coba keberuntungan anda bersama MestiQQ
** Register/Pendaftaran : WWW-MestiQQ-POKER
Jadilah Milionare Sekarang Juga Hanya di MestiQQ ^^

Untuk Informasi lebih lanjut silahkan Hubungi Customer Service kami :
BBM : 2C2EC3A3
WA: +855966531715
SKYPE : mestiqqcom@gmail.com

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://nama_situs.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI...</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI...</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

Klik untuk melihat kode: :) :( ^_^ :D ;) :-bd :'( :\ :p B) :Q :Ozz 7:( \o/ **p <3 0:) :-a 7:O *fck* x@ X@ ~x( :yaya: :emo19:

ASTN Astin query. Adalah suatu Web yang bertemakan tutorial tentang blog khususnya (blogger / blogspot) yang akan memberikan content seputar dunia blogging secara gratis alias free/cuma"" dan akan selalu mencoba untuk belajar dan membantu dalam penyelesaian masalah mengenai apa yang belum saya dan anda ketahui tentang mengedit dan membuat suatu deretan Code yang berarti untuk anda,saya dan juga bagi para sahabat blogger lainnya,baik itu berupa code HTML, CSS dan JavaScript.

Blog/Web yang saya ikuti tidak lain adalah (www.dte.web.id) semua yang ada pada blog astn ini baik berupa desain tampilan CSS,HTML,JavaScript,dan juga sebagian content yang terdapat di sini itu semua dibuat oleh (Admin) pemilik dari blog yang saya sebutkan diatas, Saya membuat blog ASTN ini hanya untuk bahan pembelajaran saja dalam mengenal dunia Web lebih jauh dan lebih dalam lagi, bukan untuk mencari kepopuleran nama dan menjatuhkan orang lain (pemilik desain), saya selaku Admin dari blog ini mengucapkan mohon maaf yang sebesar besarnya kepada Admin www.dte.web.id jika anda merasa tidak berkenan karena saya telah lancang menyalin dan menempel begitu saja hasil desain karya anda pada blog ASTN ini.

English

Blogs / web i follow are nothing else www.dte.web.id everyone on this blog astn good design css, display of html, javascript, and also part content is here that all created by ( admin ) the owner of blog, i mentioned above i made this blog astn only learning for the course in the web world diagnosticate further and deeper again not to seek kepopuleran name and air-drop others ( owner ), design as of admin this blog, my apologies utter of magnitude to admin www.dte.web.id if you feel not acceptable because i have just lancang copy and hold the design work you on this blog astn.

Daftar Tautan

Komunitas

GitHubbloofersblogazinistcss-decksxcSOColour LoversJSFiddleCSS-Tricks
Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?

Tutup
Ke atas!
__Template Name : ( ASTN ) -->