Home »

Blogger comment box widget

23 tháng 3, 2014
Bài viết này mình sẽ chia sẻ một thủ thuật với phần comment của Blogger, đó là tạo một widget cho phép ẩn/hiện các comment và khung comment. Các bạn có thể xem hình bên.


Sau đây là các bước thực hiện:



Bước 1: Tại trang quản trị blog, các bạn vào Mẫu -> Chỉnh sửa HTML (các bạn nên sao lưu mẫu của mình trước khi thực hiện thủ thuật).

Bước 2: Chèn đoạn code sau vào trước thẻ đóng </head>:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/> 
<script type='text/javascript'> 
$(document).ready(function(){ 
    
    $(".toggle_container").hide(); 
  
    $("h3.trigger").click(function(){ 
        $(this).toggleClass("active").next().slideToggle("slow"); 
    }); 
  
}); 
</script>

Xóa đoạn màu xanh nếu blog của bạn đã có thư viện jQuery

Bước 3: Chèn đoạn code sau vào trước thẻ ]]></b:skin>:

/*----- Comment box - www.đoàntrịnh.vn ----*/
h3.trigger { 
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBIuYfmiAqYcYUwtoZRiXYVKMiYQ61fZOJodkvGV34d9c3XqsyN_qRIwoSBBQmi0IOPoZzUM_2Rf2SQA2j6iqP0n37dxiniC22gY4iyq-VivP7ji41csjlMWhOxbJneZJTa_AabVRVeJg/s1600/comment-boxbg.png) no-repeat; 
height: 44px; 
line-height: 46px; 
width: 518px; border-radius:4px; 
font-family:Arial; 
font-size: 1.4em; 
font-weight: bold; 
text-align:left; 
color:#A1A1A1; 
float: left; 
cursor:pointer; 
box-shadow: #333 0px 1px 3px; 
padding:0 0 0 50px; 
margin:10px 0px 10px 10px; 
}
h3.active { 
background-position: bottom left; 
color:#ddd; 
} 
.toggle_container { 
padding-left:10px; 
overflow: hidden; 
clear: both; 
}

- Có thể thay đổi độ rộng 518px cho phù hợp với blog của bạn
- Có thể tùy chỉnh style của widget tùy ý nếu bạn hiểu biết về code

Bước 4: Tìm dòng <b:includable id='comment-form' var='post'> và chèn đoạn code sau vào bên dưới nó:

<h3 class='trigger'>Click Here To add Comment</h3> 
<div class='toggle_container'> 
<div class='block'>

Bạn có thể sửa dòng chữ màu xanh theo ý thích của mình

Bước 5: Tiếp tục tìm </b:includable> và chèn phía trên nó đoạn code:

<p style=' line-height:0px; font-family:Arial; font-size:8px; font-weight:bold; text-align:right;'><a href='http://www.đoàntrịnh.vn' style='color:#CAC8C8;'><i>Blogger Widgets</i></a></p>
</div> 
</div>

Để việc thực hiện thủ thuật được chính xác, các bạn hãy xem hình sau:





Chúc các bạn thành công !
Tags: , ,

Comments[ 0 ]


Đăng nhận xét