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

Nâng cấp comment editor lên skin contempo cho blogspot
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 với việc sử dụng comment skin-contempo 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.
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.

DEMO

Lưu ý:Nhớ lưu mẫu đề phòng không thành công.
CÁCH 1
Bước 1
Thêm vào sau thẻ <b:skin><![CDATA[
/* 
Variable definitions
   ====================
<Group description="New Comment Required – Dont edit">
<Variable name="body.background" description="Body Background" type="background" color="#000" default="#000 none repeat scroll top left" value="#000 none repeat scroll top left"/>
<Variable name="body.font" description="Font" type="font" default="normal normal 14px Arial, sans-serif" value="normal normal 14px Arial"/>
<Variable name="body.text.color" description="Text Color" type="color" default="#222" value="#222222"/>
<Variable name="body.text.font" description="2" type="font" default="$(body.font)" value="normal normal 14px Arial, sans serif"/>
<Variable name="posts.background.color" description="6" type="color" default="#fff" value="#ffffff"/>
<Variable name="body.link.color" description="7" type="color" default="#2196f3" value="#2196f3"/>
<Variable name="body.link.visited.color" description="8" type="color" default="$(body.link.color)" value="#2196f3"/>
<Variable name="body.link.hover.color" description="9" type="color" default="$(body.link.color)" value="#2196f3"/>
<Variable name="blog.title.font" description="10" type="font" default="$(robotoBold45)" value="$(robotoBold45)"/>
<Variable name="blog.title.color" description="11" type="color" default="#fff" value="#ffffff"/>
<Variable name="header.icons.color" description="12" type="color" default="#fff" value="#ffffff"/>
<Variable name="tabs.font" description="13" type="font" family="$(body.font.family)" size="$(body.font.size)" default="700 normal $(size) $(family)" value="700 normal $(size) $(family)"/>
<Variable name="tabs.color" description="14" type="color" default="#ccc" value="#cccccc"/>
<Variable name="tabs.selected.color" description="15" type="color" default="#fff" value="#ffffff"/>
<Variable name="tabs.overflow.background.color" description="16" type="color" default="$(posts.background.color)" value="#ffffff"/>
<Variable name="tabs.overflow.color" description="17" type="color" default="$(posts.text.color)" value="#222222"/>
<Variable name="tabs.overflow.selected.color" description="18" type="color" default="$(posts.title.color)" value="#212121"/>
<Variable name="posts.title.color" description="19" type="color" default="#212121" value="#212121"/>
<Variable name="posts.title.font" description="20" type="font" default="$(robotoBold22)" value="$(robotoBold22)"/>
<Variable name="posts.text.font" description="21" type="font" default="$(body.text.font)" value="normal normal 14px &#39;roboto&#39;, sans-serif"/>
<Variable name="posts.text.color" description="22" type="color" default="$(body.text.color)" value="#222222"/>
<Variable name="posts.icons.color" description="23" type="color" default="#707070" value="#707070"/>
<Variable name="labels.background.color" description="24" type="color" default="$(sidebar.backgroundColorTopHD)" value="$(sidebar.backgroundColorTopHD)"/>
</Group>
*/
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=contempo&quot; + data:variantParam' id='comment-editor-src'/>
Thường có 2 đoạn như vậy.
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:
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
Thành:
<a expr:href='data:post.commentFormIframeSrc + &quot;&amp;skin=contempo&quot; + data:variantParam' id='comment-editor-src'/>
Thường có 2 đoạn như vậy.
Lưu mẫu.
CÁCH 2
Bước 1
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 2
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 3 Khai báo Dán vào ngay sau thẻ <b:skin><![CDATA[
+ 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"/>
*/
+ 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 -->
*/
Lưu mẫu.

Với 2 cách trên nhiều blog khi lưu mẫu thì ngọt ngào nhưng một số blog bị 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.
CÁCH 3
Bước 1
Thay:
<html>
Thành:
<html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' b:templateUrl='fancy.xml' b:templateVersion='1.2.0' expr:dir='data:blog.languageDirection'>
Bước 2
Thay:
<b:skin><![CDATA[
Thành:
<b:skin version='1.2.0'><![CDATA[
Bước 3
Thực hiện 1 trong 2 cách 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 1 trong 2 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.
- 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ủ thuật blogspot - Tdb Blogspot
Facebook Comments
Blogger Comments