Berbagi-Kreativitas.blogspot.com - بِسْــــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم Salam Blogger! Pada kesempatan kali ini Saya ingin berbagi tips desain sekaligus optimasi
Cara Buat Komentar Thread Blog Default Thread. Saya katakan default thread karenanya Saya akan memberitahukan cara untuk mengembalikan fungsi komentar kebentuk semula, mengingat sekarang blogger semakin peka terhadap apa yang diminati para member-Nya alias Bloggers, melihat tips satu ini banyak peminatnya blogger langsung update setting default template yang ada pada template standart blog sudah menggunakan
Fungsi Thread yang sebelumnya tidak ada sampai-sampai Saya juga pernah buat yakni
Buat Thread Balas Komentar Blogger tapi fungsi tidak berjalan dengan baik.
Cara Buat Komentar Thread Blog Default Thread
Satu hal yang sering dilupakan atau disengaja Saya tidak tahu, bagi teman-teman yang hobi ganti template dari situs-situs yang menyediakan
Template Blog SEO Friendly hati-hati,hehe (Nanti Suhendri Mr bakal buat yang bener-bener Fresh) tidak jarang sipembuat/ designer menimpa fungsi lama ke fungsi baru alhasil yang dibilang
SEO Friendly tidak sepenuhnya dirasakan. Suka bingung ketika ada yang ingin dikembalikan salah satu fungsi ke bentuk default template blog seperti komentar. Kasus ini pernah juga Saya rasakan, setelah berjalannya waktu akhirnya Saya dapat bongkar permasalahan terkait ketika
Tes Rich Snippet pada
Webmaster Tools pernah Saya baca Fungsi Thread yang salah akan menyebabkan warning pada webmaster tools menjadikan Saya berpikir lebih ektra alhasil clear tidak ada warning satupun, miliki
Komentar Thread SEO Friendly ya dengan tips ini.
Sekarang tanpa sobat cape dan pusing-pusing mikir untuk desain komentar agar memiliki fungsi replay li (Thread) yang belum tentu hasilnya adalah
SEO Friendly, kesalahan fatal terjadi disini ketika Sobat ingin melakukan optimasi melalui
Webmaster Tools. Agar menjadikan
Komentar Blog SEO Friendly Dengan Thread Default Blog dengarkan Saya dan ikuti langkah-langkahnya dibawah ini.
1. Masuk Blogger.com/ Draft.blogger.com
2. Pada halaman Edit HTML backup template blog Anda
3. Centang "
Expand Template Widget" sebelum Edit template
4. Tekan Ctrl+F untuk mencari kode berikut
<b:include data='post' name='comments'/> <b:include data='post' name='threaded_comments'/> dan idthreaded_comment_jsPastikan kode tersebut ada ditemplate blog sobat, dan peletakannya benar. Kode pada template blog default sendiri detail kode-Nya seperti berikut
<b:if cond='data:blog.pageType == "static_page"'>
<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:if cond='data:blog.pageType == "item"'>
<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>
<div class='post-outer'>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "static_page"'>
<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:if cond='data:blog.pageType == "item"'>
<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>
</div>
Diatas adalah contoh script terkait komentar thread default blog, disini Saya tidak mau bikin Anda pusing. Sekali lagi hanya untuk memastikan.
5. Sekarang fokus pada Id komentar thread saja yaitu
threaded_comment_js pastikan Id ini tersimpan dan belum diubah ada 2 kategori atau fungsi pada template blog Anda yakni Id yang tersimpan sebagai variable JavaScript dan HTML komentar
6. Abaikan Id tersebut jika sudah ditemukan Ctrl+F berikut kode lengkapnya.
<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>
7. Pastikan Id variable seperti berikut (teks tebal) berada diatas kode JavaScript komentar thread (tes biru) pada template blog Anda
<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;
}
bla...bla...bla..., }
})();
// ]]>
</script>
</b:includable>
8.Ubah full kode JavaScript berwarna biru seperti diatas template blog Anda menjadi JavaScript seperti dibawah.
<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>
9. Ubah semua kode CSS terkait komentar (comments) pada blog sobat sebelumnya, jika default seperti berikut.
/* Comments
----------------------------------------------- */
.comments .comments-content .icon.blog-author {
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);
}
.comments .comments-content .loadmore a {
border-top: 1px solid $(tabs.border.color);
border-bottom: 1px solid $(tabs.border.color);
}
.comments .continue {
border-top: 2px solid $(tabs.border.color);
}
.post-outer .comments {
margin-top: 2em;
}
jika ingin ada sedikit variasi bisa gunakan CSS desain seperti yang Saya gunakan, lihat kode berikut
/* ------ comment ------------- */
.small-comment{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzRg_K-Lsy6IZyMWlSEGDjhM2fxBHpyDb3U9q5Uc9-1eqbtBNKj9Kgmty4fSW9v5Z4CWv_xeJ7OFUm6wI2DOoNsRVQR1SJhY2jaKAes_eibWonkChsFfyAXDrM4nheh_jg15PNjBmY75oU/s200/smallcommentsx-c.png) no-repeat;padding-left:8px;height:20px;line-height:14px;float:right;color:#FFF;font-weight:700;font-size:11px}
.small-comment div{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzRg_K-Lsy6IZyMWlSEGDjhM2fxBHpyDb3U9q5Uc9-1eqbtBNKj9Kgmty4fSW9v5Z4CWv_xeJ7OFUm6wI2DOoNsRVQR1SJhY2jaKAes_eibWonkChsFfyAXDrM4nheh_jg15PNjBmY75oU/s200/smallcommentsx-c.png) top right no-repeat;padding-right:0;height:20px}
.comments .comments-content .icon.blog-author {
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);
}
.comments .comments-content .loadmore a {
border-top: 1px solid $(tabs.border.color);
border-bottom: 1px solid $(tabs.border.color);
font: normal .8em Packard Antique;
}
.comments .continue {
border-top: 2px solid $(tabs.border.color);
}
#comments-block li, .comments .comments-content .comment-thread ol li, .comments .comments-content .comment:last-child {
background:#ffffff;margin:10px auto 0;
margin:10px 0;
padding:5px 10px;
border-top:1px solid #f1f1f1;
border-left:5px solid #f1f1f1;
border-bottom:1px solid #f1f1f1;
border-right:1px solid #f1f1f1;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
box-shadow: 0 1px 0 #fff inset, 0 1px 0 #fff;
-moz-box-shadow: 0 1px 0 #fff inset, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 0 #fff inset, 0 1px 0 #fff;
}
.comment-actions a { background: #c1c1c1; background: -moz-linear-gradient(top, #c1c1c1 0%, #dedede 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c1c1c1), color-stop(100%,#dedede)); background: -webkit-linear-gradient(top, #c1c1c1 0%,#dedede 100%); background: -o-linear-gradient(top, #c1c1c1 0%,#dedede 100%); background: -ms-linear-gradient(top, #c1c1c1 0%,#dedede 100%); background: linear-gradient(top, #c1c1c1 0%,#dedede 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c1c1c1', endColorstr='#dedede',GradientType=0 ); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; padding:2px 5px !important; margin-right:10px; border:1px solid #c1c1c1; color:#666666; -webkit-box-shadow: 2px 1px 1px -1px rgba(0, 0, 0, 0.1); -moz-box-shadow: 2px 1px 1px -1px rgba(0, 0, 0, 0.1); box-shadow: 2px 1px 1px -1px rgba(0, 0, 0, 0.1); }
.comment-actions a:hover { background: #c9c9c9; background: -moz-linear-gradient(top, #c9c9c9 0%, #dedede 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c9c9c9), color-stop(100%,#dedede)); background: -webkit-linear-gradient(top, #c9c9c9 0%,#dedede 100%); background: -o-linear-gradient(top, #c9c9c9 0%,#dedede 100%); background: -ms-linear-gradient(top, #c9c9c9 0%,#dedede 100%); background: linear-gradient(top, #c9c9c9 0%,#dedede 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9c9c9', endColorstr='#dedede',GradientType=0 ); text-decoration:none !important; }
.avatar-image-container {
-webkit-box-shadow:
1px 1px 0 rgba(0, 0, 0, 0.100),
3px 3px 0 rgba(255, 255, 255, 1.0),
4px 4px 0 rgba(0, 0, 0, 0.125),
6px 6px 0 rgba(255, 255, 255, 1.0),
7px 7px 0 rgba(0, 0, 0, 0.150),
9px 9px 0 rgba(255, 255, 255, 1.0),
10px 10px 0 rgba(0, 0, 0, 0.175);
-moz-box-shadow:
1px 1px 0 rgba(0, 0, 0, 0.100),
3px 3px 0 rgba(255, 255, 255, 1.0),
4px 4px 0 rgba(0, 0, 0, 0.125),
6px 6px 0 rgba(255, 255, 255, 1.0),
7px 7px 0 rgba(0, 0, 0, 0.150),
9px 9px 0 rgba(255, 255, 255, 1.0),
10px 10px 0 rgba(0, 0, 0, 0.175);
box-shadow:
1px 1px 0 rgba(0, 0, 0, 0.100),
3px 3px 0 rgba(255, 255, 255, 1.0),
4px 4px 0 rgba(0, 0, 0, 0.125),
6px 6px 0 rgba(255, 255, 255, 1.0),
7px 7px 0 rgba(0, 0, 0, 0.150),
9px 9px 0 rgba(255, 255, 255, 1.0),
10px 10px 0 rgba(0, 0, 0, 0.175);
-moz-transition:
-moz-transform 0.5s ease 0s;
}
/* ------ end comment ------------- */
10. Tekan Ctrl+F untuk mencari kode
<b:if cond='data:post.title'> letakkan kode berikut tepat dibawah kode tersebut
<h1 class='post-title entry-title'> <div class='small-comment'><a expr:href='data:post.addCommentUrl'><data:post.numComments/></a><div class='small-comment div'/></div>
11. Simpan template. Selesai ini baiknya lanjutkan dengan menggunakan tips desain
Cara Pasang Kode Emoticons Yahoo Komentar Thread Terbaru BlogRasakan perbedaannya, dan semoga sukses! Kalo ada yang ditanyakan jangan ragu, semaksimal mungkin Saya akan jawab dan bantu Anda sekian dan terima kasih Salam.
Catatan:- Pada langkah no.4 fokus pada kode
<b:include data='post' name='threaded_comments'/> dan
id saja, jika kode tersebut tidak ditemukan bisa lihat
Buat Thread Balas Komentar Blogger- Pada langkah no.9 perhatikan kode CSS yang
bercetak tebal -
tidak miring (wajib dipasang)
- Kode
JavaScript yang Saya berikan diatas adalah default dari blogger, jadi jangan khawatir kalo itu bisa buat berat blog (tidak buat berat blog)
- Tips ini berlaku bagi Anda yang komentar-Nya
belum thread dan
sudah thread tapi masih mengalami
warning! pada optimasi
Rich Snippet di
Webmaster Tools yang sudah atau ingin mengikuti tips perbaikan dan optimasi berikut
Mengatasi Missing Required Field "Update" Webmaster Tools. dan
Cara Buat Bintang Pada Blog Rating Rich Snippet Review 
Tidak ada komentar:
Posting Komentar