Nâng cấp comment blogspot lên skin contempo, soho.Sửa lỗi nút trả lời khi tắt javascript mặc định

Các blogspot hầu như đều sử dụng hệ thống comment editor, sau khi blogger trình làng một số template contempo, soho với việc sử dụng comment skin-contempo, skin-soho thì fom nhập nhận xét rất đơn giản và lạ mắt.

Đương nhiên đối với những người đang dùng hệ thống editor sẽ rất muốn nâng cấp fom nhập nhận xét cho giống với comment skin-contempo.

Bài viết này gồm 2 phần:

1- Nâng cấp comment editor lên skin contempo, soho cho blogspot

2- Sửa lỗi nút reply-trả lời của comments không hoạt động khi tắt javascript mặc định của blogspot

Sau đây là hướng dẫn nâng cấp comment form editor lên skin contempo, soho cho blogspot, một hệ thống comment(bình luận) mới nhất cho blogspot tại thời điểm này của blogger.


Lưu ý:Nhớ lưu mẫu đề phòng không thành công.

Nâng cấp comment editor lên skin contempo, soho cho blogspot


Bước 1
Thay:
<html>
Thành:
<html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' expr:dir='data:blog.languageDirection'>

Bước 2

Tìm thẻ <b:includable id='comment-form' var='post'> click vào hình tam giác để mở nội dung bên trong

Thay:

<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>

Thành:

<a expr:href='data:post.commentFormIframeSrc + &quot;&amp;skin=soho&quot; + data:variantParam' id='comment-editor-src'/>

Có 2 đoạn như vậy.
Xóa luôn <data:post.friendConnectJs/>

Bước 3

Tìm thẻ:
<b:includable id='threaded-comment-form' var='post'>
click vào hình tam giác để mở nội dung bên trong. Thay toàn bộ nội dung trong thẻ bằng mã sau:

<div class='comment-form'>
         <p><data:blogCommentMessage/></p>
         <data:blogTeamBlogMessage/>
         <a expr:href='data:post.commentFormIframeSrc + &quot;&amp;skin=soho&quot;' id='comment-editor-src'/>
         <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='110px' id='comment-editor' name='comment-editor' src='' width='100%'/>
         <data:post.cmtfpIframe/>
         <script>
         BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;);
         </script>
         </div>

Code này dùng skin=soho nếu dùng dùng skin=contempo thì thay lại đoạn bôi màu vàng chanh.

Bước 4

Tìm tới thẻ:
<b:includable id='threaded_comment_js' var='post'>
Thay toàn bộ nội dung bằng mã sau

<b:template-script inline='true' name='threaded_comments'/>
   <script async='async' expr:src='data:post.commentSrc' type='text/javascript'/>
         <script type='text/javascript'>
         blogger.widgets.blog.initThreadedComments(
         <data:post.commentJso/>,
         <data:post.commentMsgs/>,
         <data:post.commentConfig/>);
         </script>
Bước 5 Khai báo Dán vào ngay sau thẻ <b:skin><![CDATA[

+ Nếu dùng skin=soho sử dụng mã sau:

/*
<Variable name="body.background" description="Background" type="background" color="$(body.background.color)" default="$(color) none repeat scroll top left"  value="#ffffff url(https://1.bp.blogspot.com/-L1QF3AEPkCc/WUBaE0Ok8QI/AAAAAAAAJDQ/zaV2flqJrfMRa2zLQpJ_tmdHLNjdexPEwCLcBGAs/s1600/shatt.jpg) no-repeat scroll top center /* cyball  */;"/>
<Variable name="body.background.color" description="Background color" type="color" default="#fff"  value="#f7f7f7"/><!--  fondo -->
<Variable name="body.title.color" description="Title color" type="color" default="#000"  value="#000000"/><!--  títulos -->
<Variable name="body.action.font.large" description="Action font (large)" type="font" default="$(montserrat14)"  value="normal 14px Arial, sans-serif"/><!--  títulos -->
<Variable name="body.action.color" description="Action color" type="color" default="#bf8b38"  value="#bf8b38"/>
<Variable name="body.text.font" description="Text font" type="font" default="$(garamond20)"  value="normal 20px Arial, sans-serif"/><!-- fuente -->
<Variable name="body.text.color" description="Text color" type="color" default="#000"  value="#000000"/>
<Variable name="body.link.color" description="Link color" type="color" default="#bf8b38"  value="#e0384c"/><!-- enlaces -->
*/

+ Nếu dùng skin=contempo sử dụng mã sau:

/*
<Variable name="body.text.font" description="Font" type="font" default="$(fuente)" value="15px Josefin Sans, sans-serif"/> <!-- fuente -->
<Variable name="body.text.color" description="Color" type="color" default="#444"/> <!-- color  -->
<Variable name="body.background" description="Background" type="background" default="#fff none repeat scroll top left"/>
<Variable name="posts.background.color" description="Post background color" type="color" default="#fff"/> <!--  fondo -->
<Variable name="body.link.color" description="Link color" type="color" default="#992e38"/> <!-- enlaces -->
<Variable name="tabs.font" description="Fonts" type="font" default="$(fuente)"/>
<Variable name="posts.title.color" description="Post title color" type="color" default="#212121"/> <!--  títulos -->
<Variable name="posts.icons.color" description="Post icons color" type="color" default="#707070"/> <!-- "checkbox" --> 
<Variable name="labels.background.color" description="Label background color" type="color" default="#f7f7f7"/>
  <Variable name="posts.text.color" description="Post text color"  type="color" default="$(body.text.color)"  value="#757575"/>
  <Variable name="posts.byline.color" description="Post byline color" type="color" default="rgba(0, 0, 0, 0.54)"  value="rgba(0, 0, 0, 0.54)"/>
  <Variable name="blockquote.font" description="Blockquote font" type="font" default="$(robotoLightItalic15)"  value="italic 300 15px Roboto, sans-serif"/>
  <Variable name="blockquote.color" description="Blockquote color" type="color" default="#444"  value="#444444"/>
*/

Lưu mẫu.

Với cách trên nhiều blog khi lưu mẫu thì ngọt ngào nhưng một số blog bị thông báo lỗi do phần khai báo có trùng lặp và không xác định được đầu vào...do vậy khi gặp lỗi không lưu được mẫu thì sử dụng cách sau.

Khắc phục

Thực hiện như trên tới khi lưu mẫu mà vẫn bị lỗi không lưu được thì làm như sau:

- Copy toàn bộ mẫu vừa thực hiện theo cách trên nhưng không lưu được vào notepad sau đó thoát khỏi trình duyệt, lúc này blog sẽ ở giao diện ban đầu khi chưa chỉnh sửa.

- Vào lại phần chủ đề, vào tùy chỉnh và chọn một mẫu contempo hay soho mặc định của blogger tùy theo bạn đã cài cho bản vừa copy là skin contempo hay soho và áp dụng cho mẫu. Lúc này mẫu của bạn là mẫu soho hay contempo mặc định của blogger.

- Thoát trình duyệt

- Vào lại phần chủ đề => vào chỉnh sửa mẫu bôi đen toàn bộ mẫu và xóa hết sau đó dán toàn bộ mấu đã copy vào rồi lưu mẫu.

Với cách này thì 99% là thành công.Nếu rơi vào 1% thì đành dùng form comment cũ vậy.

Lưu ý

Nhớ phải lưu mẫu trước khi thực hiện cài đặt để nếu rơi vào 1% thì còn có cái để tải mẫu đang dùng lên.

Thêm

#comments iframe{min-height:93px}

vào phần css để bỏ thanh cuộn iframe comment.

Sửa lỗi nút reply-trả lời không hoạt động khi tắt javascript mặc định của blogspot


Bước 1

Tìm tới thẻ: <b:includable id='threaded_comments' var='post'>

Xóa bỏ:

<b:if cond='data:post.embedCommentForm'>
                        <b:include data='post' name='threaded_comment_js'/>
                      </b:if>

Bước 2

Nếu blog đang dùng thư viện jquery thì bỏ qua nếu không dùng thì thêm vào trước </head> link sau:

<b:if cond='data:widgets.Blog.first.allBylineItems.comments and data:view.isSingleItem'>
     <script async='async' defer='defer' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'/>
    </b:if>

Bước 3

Thêm javascript sau vào trước thẻ </body>

<b:if cond='data:widgets.Blog.first.allBylineItems.comments and data:view.isSingleItem'>
<script>//<![CDATA[
$(function() { 
    var l = '',id = '',li = ''
  $('.comment a.comment-reply').click(function(e) {
    l = $('#comment-editor').attr('src')
    $('.cancel-reply').remove()
    $('.comment-actions').removeAttr('style')
    $('#top-continue.continue').hide()
    var $this = $(this),
    id = $this.attr('data-comment-id')
    l = l + '&parentID=' + id
    li = $this.parent().parent().parent().attr('id')
    $('#comment-editor').attr('src', l)
    $this.parent().hide()
    $('#comment-editor').appendTo($('#' + li + '>.comment-replybox-single'))
    $('#' + li + '>.comment-replybox-single').append('<div class="cancel-reply"><a>Cancel</a></div>')
    $('.cancel-reply').click(function() {
      $(this).remove()
      $('.comment-actions,#top-continue.continue').removeAttr('style')
      $('#comment-editor').appendTo($('.comment-form'))
    })
  })
  })
//]]></script>
  </b:if>

Lưu mẫu.
Publis: 

Post a Comment

🙂😬😀😂🤣😍💖
Windows + . hoặc Windows + ; để chèn emoji