• Tư vấn điều trị
      bệnh khàn tiếng


    www.trikhantieng.com

    Liên hệ + 0913163316

BlogList111

Việt Nam Gia Phả, nơi lưu trữ Gia Phả của người Việt Nam  Kiến thức Blogspot Ngonluanho: Nhung cau chuyen thap lua-Tin-Cay-Men Vngreenzone Là một nơi chia sẻ kinh nghiệm làm blogger - Nơi tôn vinh tâm hồn blogger Việt

Tạo phần Comments Block riêng cho một trang riêng biệt

41
09/10/2011

Trong phần nhận xét trên blogspot, khu vực comments-block chứa các thành phần chính của các nhận xét như avatar, comment-author, comment-body, comment-timestamp. Đoạn code hiển thị các thành phần này nằm giữa 2 thẻ b:loop như sau:

  1. <div id='comments-block'>
  2. <b:loop values='data:post.comments' var='comment'>
  3. ......
  4. ......
  5. ......
  6. ......
  7. </b:loop>
  8. </div>

Dựa vào cấu trúc này, chúng ta có thể tạo kiểu comments-block riêng cho một bài viết nào đó.



Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML. Chọn Expand Widget Templates. Tìm dòng code <b:loop values='data:post.comments' var='comment'> rồi đặt trước nó bằng đoạn code như sau:

  1. <b:if cond='data:blog.url == "URL_trang_riêng biệt"'>
  2. <b:loop values='data:post.comments' var='comment'>
  3. Đoạn code xác định các thành phần nhận xét riêng biệt ở đây
  4. </b:loop>
  5. <b:else/>

Tiếp theo tìm đến thẻ đóng </b:loop> cho thẻ <b:loop values='data:post.comments' var='comment'> nói trên rồi đặt sau nó bằng thẻ đóng </b:if>.

Trong đoạn code thêm vào, bạn cần thiết kế kiểu comments-block riêng để tạo sự khác biệt với phần comments-block ở các trang khác (nhớ thay URL cho trang riêng biệt để áp dụng thủ thuật).

Tựu trung lại, toàn bộ đoạn code sau khi thêm sẽ như thế này:

  1. <b:if cond='data:blog.url == "URL_trang_riêng biệt"'>
  2. <b:loop values='data:post.comments' var='comment'>
  3. Đoạn code xác định các thành phần nhận xét riêng biệt ở đây
  4. </b:loop>
  5. <b:else/>
  6. <b:loop values='data:post.comments' var='comment'>
  7. Đoạn code xác định các thành phần nhận xét chung cho các trang khác ở đây
  8. </b:loop>
  9. </b:if>

Bước 2. Đặt CSS theo định dạng như sau vào trước thẻ </head>.

  1. <b:if cond='data:blog.pageType == "item"'>
  2. <b:if cond='data:blog.url == "URL_trang_riêng biệt"'>
  3. <style>
  4. đặt code CSS của phần Comments cho trang riêng biệt tại đây
  5. </style>
  6. <b:else/>
  7. <style>
  8. đặt code CSS chung của phần Comments cho tất cả các trang còn lại tại đây
  9. </style>
  10. </b:if>
  11. </b:if>

Lưu Template. Thủ thuật cho bạn thêm một tình huống sử dụng lệnh điều kiện để tạo nét độc đáo cho blogspot. DEMO cho thủ thuật này chính là phần nhận xét dưới đây. Nếu chú ý kỹ bạn sẽ thấy sự khác biệt so với các bài viết khác.

{41 bình luậnAdd yours ?}

23:03:00, 9 thg 10, 2011

Nào, chúng ta cùng còm men để thấy DEMO cái nào :1)

Reply
23:08:00, 9 thg 10, 2011

@Huỳnh Nhật Hà Bữa nay trút bỏ cái temp Admin làm visitor một lần cho nó đã thèm luôn :D)

Reply
23:21:00, 9 thg 10, 2011

Còm men ủng hộ anh Hà cái nào hì!:F). Đề tài Blogspot quả thật vô tận mà không phải ai cũng có thể suy nghĩ và viết bài được! Em đang cố gắng suy nghĩ và phát huy đây anh Hà ạ! Rất muốn 1 ngày nào đó được làm 1 CTV lâu dài của TTB! :F) :1)

Reply
23:27:00, 9 thg 10, 2011

Ban đầu nhìn bên ngoài bài viết thấy có 2 comment tưởng là có ai comment trước cả em chứ hihihi! :1). Hóa ra là chủ nhân post bài xong comment luôn. Mà em nghĩ nếu áp dụng triệt để lệnh điều kiện thì sẽ có rất nhiều cái lợi, 1 trong số đó là tăng tốc độ load trang nữa mà blog của em đang áp dụng khá nhiều!

Reply
23:27:00, 9 thg 10, 2011

@Linh Dung Rất hân hạnh chào đón. Tư duy sáng tạo sẽ giúp khám phá kho kiến thức vô tận của blogspot. "Tôi tư duy vậy tôi tồn tại" mà. :1)

Reply
23:32:00, 9 thg 10, 2011

@Huỳnh Nhật Hà Ui cái comment của em chắc nhảy vào spam rồi! Dài quá chăng! Hôm qua cũng bị anh Hà ạ! Lúc nào đã rèn giũa tốt em xí 1 phần đó nha anh! :1)

Reply
23:33:00, 9 thg 10, 2011

anh Hà cho em hỏi: để điều chỉnh kích thước comment-body ta phải vào chỗ nào anh.Em tìm theo từ khóa comment mà tìm hoài ko thấy?:C)

Reply
23:39:00, 9 thg 10, 2011

@Quang Trang e chưa có CSS cho comment-body (nội dung nhận xét). E muốn chỉnh size thì thêm CSS như vầy:
#comment-body {width:XXXpx} thay XXX bằng con số chỉ bề rộng.

Reply
23:45:00, 9 thg 10, 2011

Vâng,cảm ơn anh,để em thử xem sao:3)

Reply
23:49:00, 9 thg 10, 2011

Nhân tiện cho em hỏi cái: anh có bài viêt nào viết về cách chỉnh sửa avata xoay xoay như của anh ko?:D)

Reply
23:55:00, 9 thg 10, 2011

@Quang Áp dụng code sau cho hover của hình ảnh nè bạn: -moz-transform:scale(1.0) rotate(-1090deg);-ms-transform:scale(1.0) rotate(-1090deg);-o-transform:scale(1.0) rotate(-1090deg);-webkit-transform:scale(1.0) rotate(-1090deg);transform:scale(1.0) rotate(-1090deg)

Reply
23:57:00, 9 thg 10, 2011

@Quang Cái này đơn giản quá viết làm gì cho mệt, em chỉ cần đặt đoạn CSS nhỏ sau đây vào trước thẻ </head> là OK ấy mà:

<!--[if !IE]> -->
<style type='text/css'>
.avatar-image-container img:hover {-moz-transform: scale(1.2) rotate(-1090deg) ;-webkit-transform: scale(1.2) rotate(-1090deg) ;-o-transform: scale(1.2) rotate(-1090deg) ;-ms-transform: scale(1.2) rotate(-1090deg) ;transform: scale(1.2) rotate(-1090deg) } </style>
<!-- <![endif]-->

Reply
00:02:00, 10 thg 10, 2011

thank mấy bác, em làm đc rồi:I) :D)

Reply
08:08:00, 10 thg 10, 2011

@Huỳnh Nhật HàHay quá. Áp dụng là được ngay. Cảm ơn Bác Hà nhiều.

Reply
08:49:00, 10 thg 10, 2011

@24h-CafeAnh Hà ơi áp dụng theo hướng dẫn của anh thành công rồi, nhưng sau đó nó hiện nội dung này (function disableselect(e){ return false } function reEnable(){ return true } //if IE4+ document.onselectstart=new Function ("return false") //if NS6 if (window.sidebar){ document.onmousedown=disableselect document.onclick=reEnable })ở cuối trang. Anh giúp mình khắc phục với.

Reply
09:33:00, 10 thg 10, 2011

thủ thuật đơn giản mà hiệu quả phết bác Hà ạ

Reply
10:30:00, 10 thg 10, 2011

@24h-CafeCái đó là do e áp dụng thủ thuật chống bôi đen văn bản (dùng code chưa đúng) chứ đâu liên quan gì đến TUT này.

Tìm đến đoạn code sau trước thẻ </body>:

function disableselect(e){
return false
}

function reEnable(){
return true
}

//if IE4+
document.onselectstart=new Function ("return false")

//if NS6
if (window.sidebar){
document.onmousedown=disableselect
document.onclick=reEnable
}
<script type="text/javascript">

Và sửa lại thành thế này:

<script type="text/javascript">
function disableselect(e){
return false
}

function reEnable(){
return true
}

//if IE4+
document.onselectstart=new Function ("return false")

//if NS6
if (window.sidebar){
document.onmousedown=disableselect
document.onclick=reEnable
}
</script>

Chú ý script phải có thẻ mở và thẻ đóng đầy đủ chứ k là nhặn xị lên hết nha em (có thể do e vô tình làm mất code).

Reply
10:33:00, 10 thg 10, 2011

@Pika Rock Hì, có thể áp dụng cho một trang Rock thật hoành tráng ấy nhỉ.

Reply
10:56:00, 10 thg 10, 2011

@Huỳnh Nhật HàCảm ơn anh Hà nhiều. Mình có lẻ do mình khi thêm vào và xóa đi lại xóa mất cái thẻ đóng <>. :F)

Reply
11:34:00, 10 thg 10, 2011

Hà ơi cho mình hỏi chèn likebox dưới bài viết thì làm sao nhỉ.

Reply
13:49:00, 10 thg 10, 2011

@Quan PhamLên Facebook tạo một fan page rồi lấy URL:

Đặt đoạn code sau đây vào sau dòng <data:post.body/>:

<iframe allowTransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2FURL_fanpage_có bắt đầu bằng www.&amp;width=590&amp;colorscheme=light&amp; show_faces=true&amp;stream=false&amp;header=false&amp;height=180' style='border:none; overflow:hidden; width:590px; height:180px;'/>

Reply
Yolks
AUTHOR
20:13:00, 10 thg 10, 2011

@Huỳnh Nhật Hà Giao diện mới của em cần a Hà cho em Ý kiến nhé . Cám ơn

Reply
20:53:00, 10 thg 10, 2011

@Yolks Vài ý kiến góp ý:
(1) Cái bar màu đen chứa Read More link nên chuyển sang màu nhạt cho cân đối
(2) Tiện ích Popular Posts thêm CSS:
#PopularPosts1 ul li (list-style:none) để làm mấy dấu chấm đen
(3) Phần Comments nên thêm padding
#comments {padding:20px}
(4) Comment Editor nên thêm width để loại bỏ khoảng trống dưới phần nhập comments:
#comment-editor {load:left;width:600px;height:250px}

Reply
20:56:00, 10 thg 10, 2011

@Huỳnh Nhật Hà Bổ sung thêm cái Menu nữa nha.

Reply
21:20:00, 18 thg 10, 2011

Anh Hà thử tạo phần comment như hộp chat của Yahoo ý. VD cái này chẳng hạn http://ca7.upanh.com/16.282.20609716.RNN0/yahoo.jpg bấm vào mặt cười là box Emoticons, tệp đính kèm = chèn link, T = code chữ nghiêng + chữ in đậm, VÍ DỤ THẾ. hjhj

Reply
12:14:00, 23 thg 10, 2011

Đúng thứ cần tìm rồi đây:
Blog mới tạo. mọi người ủng hộ với:
My blog

Reply
11:21:00, 24 thg 10, 2011

Hỏi mọi người chút nhé: mình tạo một page riêng, như About Me chẳng hạn, zậy áp dụng cách làm trên có được hok???, bài viết trên mình chưa hiểu rõ lắm nên chưa giám làm. Có ai rành khâu này hok chỉ giáo zới !!!

Reply
12:06:00, 24 thg 10, 2011

Tùy chọn bài đăng, cho phép nhận xét.

Reply
15:40:00, 24 thg 10, 2011

@Elvis Anh Tất nhiên là được chứ. Làm theo hướng dẫn thôi có khó gì.

Reply
09:48:00, 26 thg 10, 2011

vậy mình muốn cài dạng comment của face vào trang theo từng bài viêt thỳ sao a?e thấy comment cảu .zingme như comment của face book ấy/giúp e vs nhá .thnks a!:O)

Reply
09:53:00, 26 thg 10, 2011

@mAn ĐiezEl Cái này a thấy các trang nước ngoài giới thiệu rồi nên a k giới thiệu lại. E có thể tham khảo nhé:
http://www.bloggermint.com/2010/05/how-to-add-facebook-comment-box-on-blogger-blogs/

Reply
10:00:00, 26 thg 10, 2011

vậy là tốt rồi .kum ơm a .để e tự tìm hỉu ạ .:2)
chúc a ngày vv nhá .

Reply
00:20:00, 27 thg 10, 2011

haha. qua hay:N) :E)

Reply
10:28:00, 29 thg 10, 2011

@mAn ĐiezElLàm được chưa bạn ơi.

Reply
17:26:00, 29 thg 10, 2011

@Elvis Anh
chưa được bạn à.blog của mình tạo theo comment phân cấp nhưng giờ nó bị lỗi k sửa đc .bjo mình muốn thay lại nhưng k đc .còn phần a hà giới thiệu theo bài viết kia thỳ nó đồi thiết lập App ID nhưng với tài khoản trên face của mình thỳ k làm đc.nản.anh hà giúp e đc k?

Reply
20:13:00, 29 thg 10, 2011

@mAn ĐiezEl Sao k dùng hệ thống Comments Disqus đi, có phân cấp luôn đó. Xài Facebook rất hạn chế vì ở VN bị chặn, muốn xem phải dùng TUT.

Reply
14:08:00, 30 thg 10, 2011

vâng ạ .kum ơm a hà .trc em cũng sài disqus ấy .but chán vì không thể dùng cho mấy biểu tượng kum xúc đc à.:4)

Reply
11:57:00, 15 thg 11, 2011

:1)

Reply
19:23:00, 25 thg 11, 2011

anh Hà, em muốn trang nào cũng làm chung 1 kiểu như thế này thì phải làm sao:F)

Reply
03:04:00, 12 thg 5, 2012

Anh Hà ơi, giúp em với. Em thử như trên mà vẫn chưa làm được. anh có thể qua xem rồi chỉ giúp em mấy chỗ trong blog em được không ạ? :B)

Reply
11:16:00, 9 thg 6, 2012

huong dan hieu j chet lien long vong long vong :E)

Reply
Nội quy! Đóng lại Khi bạn viết bình luận, cần tuân thủ một số quy tắc sau:
» Bình luận phải nghiêm túc và không chứa các liên kết quảng cáo.
» Có thể sử dụng các thẻ <b> … </b>,<i> … </i>, <a href="URL..."> ... </a>.
» Yêu cầu thủ thuật tại mục Yêu cầu thủ thuật hoặc hỏi tại mục Hỏi và Đáp.
More →
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Mã hóa code Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa

Next post: Bài đăng Mới hơn

Previous post: Bài đăng Cũ hơn