Alper'in blogu: https://gematriga.blogspot.com/
ÇOK ÖNEMLİ NOT: Blogunuzda yorumlara ait CSS kodları var ise ortalık biraz karışabilir. Bu adımları uygulamadan önce muhakkak mevcut temanızın yedeğini alın. Hatta isterseniz kendinize denemek için bir deneme blogu oluşturun orada deneyin.
ÇOK ÖNEMLİ NOT II: Bütün adımları dikkatlice uygulayın. 8. adımda farklı bir şey uygulayacağımız için bu adıma özellikle dikkat edelim.
İlk olarak blogumuzda jquery kütüphanesi yoksa jquery kütüphanesini eklememiz lazım. Bunun için Blogger > Tema > HTML'yi Düzenle kısmına girip
[<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js' type='text/javascript'/>]
1. Adım
Öncelikle Blogger > Tema > HTML'yi Düzenle kısmına girip aşağıdaki CSS kodlarını
[.comments h4{font-size:13px;font-weight:400;padding:10px 0;margin:0;border-bottom:1px solid #eee}
.comments .comments-content{padding:10px 0}
.comments .comments-content .comment{margin-bottom:0;padding-bottom:8px}
.comments .comments-content .comment:first-child{padding-top:0}
.cmm-tabs .content-tab{background-color:transparent;padding:0}
.cmm-tabs-header{background-color:#ff3d00;height:32px;margin-bottom:0;position:relative}
.cmm-tabs-header h3{display:inline-block;margin:0;color:#E4E4E4;font-weight:700;font-size:13px;height:32px;line-height:32px;padding-left:10px}
.cmm-tabs-header h3 h9{display:none}
.simpleTab .cmm-tabs-header .wrap-tab{float:right}
.cmm-tabs-header .wrap-tab a{height:auto;line-height:32px;padding:0 10px;font-size:14px;display:inline-block}
.cmm-tabs-header .wrap-tab li{float:left;width:auto}
.facebook-tab,.fb_iframe_widget_fluid span,.fb_iframe_widget iframe{width:100%!important}
.comments .item-control{position:static}
.comments .avatar-image-container{float:left}
.comments .avatar-image-container,.comments .avatar-image-container img{height:35px;max-height:35px;width:35px;max-width:35px;border-radius:2px}
.comments .comment-block{padding:10px;box-shadow:none;border:1px solid #eee;border-radius:2px}
.comments .comment-block,.comments .comments-content .comment-replies{margin-left:47px;margin-top:0}
.comments .comments-content .inline-thread{padding:0}
.comments .comments-content .comment-header{font-size:14px;border-bottom:1px solid #eee;padding:0 0 3px}
.comments .comments-content .user{font-style:normal;font-weight:400}
.comments .comments-content .icon.blog-author{font-weight:400}
.comments .comments-content .comment-content{text-align:justify;font-size:14px;line-height:1.4em}
.comments .comment .comment-actions a{margin-right:5px;padding:2px 5px;color:#010101;font-weight:400;background-color:#f0f0f0;font-size:10px;letter-spacing:1px}
.comments .comment .comment-actions a:hover{color:#fff;text-decoration:none}
.comments .comments-content .datetime{margin-left:0;float:right;font-size:11px}
.comments .comments-content .comment-header a{color:inherit}
.comments .comments-content .comment-header a:hover{color:#ff3d00}
.comments .thread-toggle{margin-bottom:4px}
.comments .comments-content .comment-thread{margin:4px 0}
.comments .continue a{padding:0;padding-top:10px;padding-left:47px;font-weight:500}
.comments .comments-content .loadmore.loaded{margin:0;padding:0}
.comments .comment-replybox-thread{margin:0}
iframe.blogger-iframe-colorize,iframe.blogger-comment-from-post{max-height:260px!important}
.cmm-tabs.simpleTab .content-tab{background-color:transparent;padding:0;margin-top:0}
.cmm-tabs.simpleTab .wrap-tab li a{color:#E4E4E4;font-weight:400;background-color:rgba(255,255,255,0.1);height:32px;font-size:12px;letter-spacing:1px}
.cmm-tabs.simpleTab .wrap-tab li a.activeTab{background-color:#ff3d00;color:#fff}
.posts-title h2 a:before{margin-right:10px}
.cmm-tabs.simpleTab .wrap-tab{float:right}
.cmm-tabs.simpleTab .wrap-tab li{padding:0;line-height:0;margin-left:0}
.wrap-tab{list-style:none}
.content-tab{transition:all 0s ease;-webkit-transition:all 0s ease;-moz-transition:all 0s ease;-o-transition:all 0s ease}
]
3. Adım
Blogunuzun HTML kısmında aşağıdaki gibi kodlar olacaktır. Bu kodların hepsini seçmeniz gerekir. Ama aradaki "..." lara dikkat edin. Çünkü bu kodlar genişleyebilir. Seçtikten sonra aşağıdaki resimdeki gibi olduğundan emin olalım.
[<b:includable id='comment-form' var='post'>...</b:includable>
<b:includable id='commentDeleteIcon' var='comment'>...</b:includable>
<b:includable id='comment_count_picker' var='post'>...</b:includable>
<b:includable id='comment_picker' var='post'>...</b:includable>
<b:includable id='comments' var='post'>...</b:includable>]
4. Adım
Aşağıdaki kodları 3. Adımda bulduğumuz ve seçtiğimiz kodların yerine yapıştıralım.
[ <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 + "_comment-editor-toggle-link"' 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/>
<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('<data:post.appRpcRelayPath/>');
</script>
</div>
</b:includable>
<b:includable id='commentDeleteIcon' var='comment'>
<span expr:class='"item-control " + 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>
 
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
 
</b:if>
<data:post.commentRangeText/>
<b:if cond='data:post.hasNewerLinks'>
 
<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>
</b:if>
</span>
</b:if>
<div expr:id='data:widget.instanceId + "_comments-block-wrapper"'>
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='"comment-author " + 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'>
<abbr class='timeago' expr:title='data:post.timestampISO8601'><data:comment.timestamp/></abbr>
</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>
 
<data:post.commentRangeText/>
 
<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 + "_backlinks-container"'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>
</div>
</b:includable>]
5. Adım
Blogunuzun HTML kısmında aşağıdaki gibi kodlar olacaktır. Bu kodların hepsini seçmeniz gerekir. Ama aradaki "..." lara dikkat edin. Çünkü bu kodlar genişleyebilir. Seçtikten sonra aşağıdaki resimdeki gibi olduğundan emin olalım.
[<b:includable id='threaded-comment-form' var='post'>...</b:includable>
<b:includable id='threaded_comment_js' var='post'>...</b:includable>
<b:includable id='threaded_comments' var='post'>...</b:includable>
</b:widget>
</b:section>]
6. Adım
Aşağıdaki kodları 5. Adımda bulduğumuz ve seçtiğimiz kodların yerine yapıştıralım.
[<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('<data:post.appRpcRelayPath/>');
</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 + "_backlinks-container"'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>
</div>
</b:includable>
</b:widget>
<b:widget id='HTML200' locked='true' title='Comments system' type='HTML' version='1'>
<b:widget-settings>
<b:widget-setting name='content'>[disqus][blogger][facebook]</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:content == "[blogger]"'>
<div class='cmm-tabs'>
<div data-tab='blogger'><div class='blogger-tab'/></div>
</div>
</b:if>
<b:if cond='data:content == "[facebook]"'>
<div class='cmm-tabs'>
<div data-tab='facebook'><div class='facebook-tab'/></div>
</div>
<script type='text/javascript'>
//<![CDATA[
$('#comments').remove();
//]]>
</script>
</b:if>
<b:if cond='data:content == "[disqus]"'>
<div class='cmm-tabs'>
<div data-tab='disqus'><div class='disqus-tab'><div id='disqus_thread'/></div></div>
</div>
<script type='text/javascript'>
//<![CDATA[
$('#comments').remove();
//]]>
</script>
</b:if>
<b:if cond='data:content == "[blogger][facebook]"'>
<div class='cmm-tabs'>
<div data-tab='blogger'><div class='blogger-tab'/></div>
<div data-tab='facebook'><div class='facebook-tab'/></div>
</div>
</b:if>
<b:if cond='data:content == "[blogger][disqus]"'>
<div class='cmm-tabs'>
<div data-tab='blogger'><div class='blogger-tab'/></div>
<div data-tab='disqus'><div class='disqus-tab'><div id='disqus_thread'/></div></div>
</div>
</b:if>
<b:if cond='data:content == "[facebook][blogger]"'>
<div class='cmm-tabs'>
<div data-tab='facebook'><div class='facebook-tab'/></div>
<div data-tab='blogger'><div class='blogger-tab'/></div>
</div>
</b:if>
<b:if cond='data:content == "[facebook][disqus]"'>
<div class='cmm-tabs'>
<div data-tab='facebook'><div class='facebook-tab'/></div>
<div data-tab='disqus'><div class='disqus-tab'><div id='disqus_thread'/></div></div>
<script type='text/javascript'>
//<![CDATA[
$('#comments').remove();
//]]>
</script>
</div>
</b:if>
<b:if cond='data:content == "[disqus][blogger]"'>
<div class='cmm-tabs'>
<div data-tab='disqus'><div class='disqus-tab'><div id='disqus_thread'/></div></div>
<div data-tab='blogger'><div class='blogger-tab'/></div>
</div>
</b:if>
<b:if cond='data:content == "[disqus][facebook]"'>
<div class='cmm-tabs'>
<div data-tab='disqus'><div class='disqus-tab'><div id='disqus_thread'/></div></div>
<div data-tab='facebook'><div class='facebook-tab'/></div>
</div>
<script type='text/javascript'>
//<![CDATA[
$('#comments').remove();
//]]>
</script>
</b:if>
<b:if cond='data:content == "[blogger][facebook][disqus]"'>
<div class='cmm-tabs'>
<div data-tab='blogger'><div class='blogger-tab'/></div>
<div data-tab='facebook'><div class='facebook-tab'/></div>
<div data-tab='disqus'><div class='disqus-tab'><div id='disqus_thread'/></div></div>
</div>
</b:if>
<b:if cond='data:content == "[blogger][disqus][facebook]"'>
<div class='cmm-tabs'>
<div data-tab='blogger'><div class='blogger-tab'/></div>
<div data-tab='disqus'><div class='disqus-tab'><div id='disqus_thread'/></div></div>
<div data-tab='facebook'><div class='facebook-tab'/></div>
</div>
</b:if>
<b:if cond='data:content == "[facebook][blogger][disqus]"'>
<div class='cmm-tabs'>
<div data-tab='facebook'><div class='facebook-tab'/></div>
<div data-tab='blogger'><div class='blogger-tab'/></div>
<div data-tab='disqus'><div class='disqus-tab'><div id='disqus_thread'/></div></div>
</div>
</b:if>
<b:if cond='data:content == "[facebook][disqus][blogger]"'>
<div class='cmm-tabs'>
<div data-tab='facebook'><div class='facebook-tab'/></div>
<div data-tab='disqus'><div class='disqus-tab'><div id='disqus_thread'/></div></div>
<div data-tab='blogger'><div class='blogger-tab'/></div>
</div>
</b:if>
<b:if cond='data:content == "[disqus][blogger][facebook]"'>
<div class='cmm-tabs'>
<div data-tab='disqus'><div class='disqus-tab'><div id='disqus_thread'/></div></div>
<div data-tab='blogger'><div class='blogger-tab'/></div>
<div data-tab='facebook'><div class='facebook-tab'/></div>
</div>
</b:if>
<b:if cond='data:content == "[disqus][facebook][blogger]"'>
<div class='cmm-tabs'>
<div data-tab='disqus'><div class='disqus-tab'><div id='disqus_thread'/></div></div>
<div data-tab='facebook'><div class='facebook-tab'/></div>
<div data-tab='blogger'><div class='blogger-tab'/></div>
</div>
</b:if>
<div id='fb-root'/><script>(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) return;js = d.createElement(s); js.id = id;js.src = "//connect.facebook.net/tr_TR/sdk.js#xfbml=1&version=v2.0";fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script><script>$(".facebook-tab").append("<div class='fb-comments' data-href='<data:blog.canonicalUrl/>' data-width='100%' data-numposts='5' data-colorscheme='light'></div>");</script>
</b:if>
</b:includable>
</b:widget>
<b:widget id='HTML201' locked='true' title='Disqus Shortname' type='HTML' version='1'>
<b:widget-settings>
<b:widget-setting name='content'>gereksizislerinadami</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
var disqus_shortname = '<data:content/>';
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
</b:if>
</b:includable>
</b:widget>
</b:section>]
7. Adım
a.
b. Not: Eğer üstteki yöntem ile çalışmazsa aşağıdaki kodları
[<script type='text/javascript'>
//<![CDATA[
(function(a){a.fn.simpleTab=function(b){b=jQuery.extend({active:1,fx:null,showSpeed:400,hideSpeed:400,showEasing:null,hideEasing:null,show:function(){},hide:function(){},change:function(){}},b);return this.each(function(){var e=a(this),c=e.children("[data-tab]"),d=b.active-1;e.addClass("simpleTab").prepend('<ul class="wrap-tab"></ul>');c.addClass("content-tab").each(function(){a(this).hide();e.find(".wrap-tab").append('<li><a href="#">'+a(this).data("tab")+"</a></li>")}).eq(d).show();e.find(".wrap-tab a").on("click",function(){var f=a(this).parent().index();a(this).closest(".wrap-tab").find(".activeTab").removeClass("activeTab");a(this).addClass("activeTab");if(b.fx=="slide"){if(c.eq(f).is(":hidden")){c.slideUp(b.hideSpeed,b.hideEasing,function(){b.hide.call(e)}).eq(f).slideDown(b.showSpeed,b.showEasing,function(){b.show.call(e)})}}else{if(b.fx=="fade"){if(c.eq(f).is(":hidden")){c.hide().eq(f).fadeIn(b.showSpeed,b.showEasing,function(){b.show.call(e)})}}else{if(b.fx=="fancyslide"){if(c.eq(f).is(":hidden")){c.slideUp(b.hideSpeed,b.hideEasing,function(){b.hide.call(e)}).eq(f).delay(b.hideSpeed).slideDown(b.showSpeed,b.showEasing,function(){b.show.call(e)})}}else{if(c.eq(f).is(":hidden")){c.hide().eq(f).show()}}}}b.change.call(e);return false}).eq(d).addClass("activeTab")})}})(jQuery);
$(document).ready(function() {
$(".cmm-tabs").simpleTab({
active: 1,
fx: "fade",
showSpeed: 400,
hideSpeed: 400
});
$('.blogger-tab').append($('#comments'));
$(".cmm-tabs.simpleTab .wrap-tab").wrap("<div class='cmm-tabs-header'/>");
$('.cmm-tabs-header').prepend('<h3>YORUMLAR</h3>');
});
//]]>
</script>]
8. Adım
Blogger > Tema > Yerleşim kısma girelim. Orada Blog Kayıtları eklentisinin hemen altında Comment System ve Disqus Shortname adında iki eklenti göreceğiz.
2 numaralı kısımda ise disqus shortname kısmı bulunuyor. Buraya disqus'taki kullanıcı adınızı yazacaksınız. Örneğin: benim disqus shortname'im gereksizislerinadami olduğu için oraya gereksizislerinadami yazdım.
Blogger'ın varsayılan şablonunda yaptığım halinin önizlemesine aşağıdaki bağlantıdan bakabilirsiniz.
Hiç yorum yok:
Yorum Gönder