Cách làm khung comment mở rộng hoặc thu nhỏ trong blogspot

Việc kéo xuống để xem bài viết cũng có thể làm blog của bạn dài hàng cây số. Chưa nói gì đến việc thêm các bài viết liên quan, các comment và các phần khác. 

Và để làm rút ngắn bớt độ dài đó của trang mình chia sẻ các bạn cách mở rộng và thu nhỏ comment ở cuối mỗi bài viết.

 Các bạn hãy thực hiện theo các bước sau:

Bước 1: Các bạn vào Mẫu -> Chỉnh sửa HTML (lưu ý: 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, để nếu có sai xót gì thì có thể khôi phục mà không sợ ảnh hưởng tới blog).

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>

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

/*----- Comment box - kjmagic.blogspot.com ----*/

h3.trigger {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHE1J-np72TgikpjGfK9cJM9QcbrGqWPMmMyno5hgu82t26dM6Z1mEnSJaQaSgtnjrUqW8T6VlRbunjX5EYwSOeEDR9GqdTz6c-Od_p-NcLqnJw40XPpJJysJ9_Lpbvg_XJQS49jDGJSE/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 đỏ 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://kjmagic.blogspot.com' style='color:#CAC8C8;'><i>Blogger Widgets</i></a></p>

</div>

</div>

Cuối cùng Lưu Mẫu và truy cập vào blog của bạn kiểm tra là xong.

Tweet