Nguồn: dunghennessy và http://www.way2blogging.org/widget-generators/recent-comments-widget-with-avatar
Được đăng bởi :
Minh
|
Thứ Hai, 27 tháng 2, 2012
|
06:54:00
TẠO KHUNG COMMENTS CHO BLOG
Nguồn: dunghennessy và http://www.way2blogging.org/widget-generators/recent-comments-widget-with-avatar
Hôm nay, tôi chia sẻ thêm một cách để bạn có một khung Recent comments khá đẹp.
ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}
.w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
.w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
.w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments = 5,
showAvatar = true,
avatarSize = 60,
roundAvatar = true,
characters = 40,
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://tranphucminh.googlecode.com/files/w2b-recent-comments-w-gravatar1.js"></script>
<script type="text/javascript" src="http://www.tranphucminh.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>
Demo:
Nguồn: dunghennessy và http://www.way2blogging.org/widget-generators/recent-comments-widget-with-avatar
Mời bạn xem hình minh hoạ khung comments của blog dunghennessy phía dưới.
Thủ thuật này khá đơn giản, bạn đăng nhập vào Blog > Chọn thiết kế > Thêm tiện ích HTML/Javacript rồi dán tất cả các đoạn code phía dưới vào.
<style type="text/css">Thủ thuật này khá đơn giản, bạn đăng nhập vào Blog > Chọn thiết kế > Thêm tiện ích HTML/Javacript rồi dán tất cả các đoạn code phía dưới vào.
ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}
.w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
.w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
.w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments = 5,
showAvatar = true,
avatarSize = 60,
roundAvatar = true,
characters = 40,
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://tranphucminh.googlecode.com/files/w2b-recent-comments-w-gravatar1.js"></script>
<script type="text/javascript" src="http://www.tranphucminh.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>
Demo:
Nguồn: dunghennessy và http://www.way2blogging.org/widget-generators/recent-comments-widget-with-avatar
Bạn đã xem chưa
- Thủ thuật tạo Slideshow bài viết mới nhất ngoài trang chủ Blogspot
- Tạo popup chỉ xuất hiện một lần duy nhất cho blog
- Thủ thuật tự động gom các Widget trên Blogspot thành các Tab nội dung
- Thủ thuật tạo các nút điều khiển cho Blogspot
- Chống bị chôm data bài đăng trên Blogspot
- Thành phần hiển thị popup đóng tự động
- Tiện ích "Bài viết liên quan" cho Blogger, bản nâng cao, có phân trang
- Tạo tab nhiều tiện ích cho blogspot
- Hướng dẫn tạo Drop Menu cho blog
- Tạo Menu Labels (Nhãn) xổ xuống cho Blogger
- Phân trang cho blog - Page Navigation
- Share temp maphim.net phiên bản v3.0 [skin Phim47] . Xml của Blogger.
- Bộ nút tăng giảm font chữ trong web
- Giải pháp Blogger bị chặn 02/07/2012
- Các truy vấn cơ bản với Blogspot
- Nâng cấp ANC Gdata lên phiên bản 2.
- Hướng dẫn config domain cho hầu hết các mạng.
- Hướng dẫn cài đặt tên miền cho blogspot
- Khắc phục hiện tượng chặn web của VNPT.
- Giải pháp VNPT chặn blogger ngày 09/06/2012
- Style mới cho tiện ích "Recent post" theo label ở Homepage
- Bài viết liên Quan và các tin khác
- Code tạo một box nằm bên góc phải
- Cách đưa Sitemap vào blogger blog
- Tạo các Tab nội dung
- Tạo thumb cho bài đăng phổ biến
- Tạo lại header cho chuẩn Seo
- Mẹo vặt trong thiết kế Template Blogspot
- Tạo button cho phép bạn ẩn/hiện nội dung
- Danh sách thủ thuật Blog.duypham.info
- Danh sách thủ thuật Blog itechplus
- Danh sách thủ thuật Blog Namkna
- Danh sách thủ thuật Blog traidatmui
- Danh sách thủ thuật Blog Fandung
- Mẫu đẹp cho bài viết được xem nhiều
- Tạo logo liên kết chạy ngang
- Tạo trang in chuyên nghiệp nhiều tùy chọn cho Blogspot
- Tự động làm mới trang Web/blog và chuyển hướng
- Tùy biến label thành tag cloud giống WP
- K14 - Pro Menu (với hiệu ứng prodown)
- Tạo ảnh loading đẹp với css và js
- BlogSpot cải thiện tính năng SEO cho blog
- BlogSpot cải thiện tính năng SEO cho blog
- ANCKeywords - Tự động cập nhập keywords từ người dùng cho site.
- ANCKeywords - Tự động cập nhập keywords từ người dùng cho site.
- Tạo hộp tìm kiếm cho blogspot
- Tạo Feed với Feed Burner của Google
- Hướng dẫn xem các kênh SCTV không bị chặn hình ảnh
- Trang trí cho widget Label và Blogroll
- Tiện ích Về tác giả ở cuối bài viết Blogger
- Chèn link Google Search vào footer của bài viết
- Jquery Slider Tin Tức - News Slider
- ANCData - Plugin load feed Blogger version 1
- Đưa Radio vào Blog của bạn (Yêu cầu)
- Cài đặt tên miền riêng cho blogspot
- [Updated] K14 - Pro Menu (với hiệu ứng prodown)
- Truy cập Blogspot vô tư khỏi sợ bị chặn
- Chèn Chabox Gtalk vào BlogSpot.
- Jquery Slider Tin Tức - News Slider
- Dropbox - Một dịch vụ hosting miễn phí và chất lượng
- Quà tặng âm nhạc cho BlogSpot
- Tiện ích Top Commentators cho blogspot
- Chèn link Google Search vào footer của bài viết
- SlideTab Recent posts (jQuery)
- [Update] Tạo Menu Thanh menu ngang có sổ dọc xuống
- [3.0.2] Nâng cấp ANCMedia Player cho trang phim
- Ngẫu hứng Blogger (3)
- Ngẫu hứng Blogger (2)
- Một số đoạn code tuyết rơi
- Tạo liên hệ giống blog Minh
- Bạn biết gì về Blogspot, hãy chia sẻ cùng tôi.
- Blogger chính thức add avatar vào comment feed
- Thêm Reactions vào bài viết của blogspot
- Tạo địa chỉ hộp thư Gmail trên blogspot
- Hiển thị bài viết cho trang Music,Phim.
- Facebook comments for blogger - Update
- Chèn comment của disqus vào blogspot
- Chèn comment của facebook vào blogspot
- Lấy link youtube hàng loạt cho ANCMedia
- Tích hợp ANCMusic Player cho Blogspot
- Hướng dẫn Bảo mật data blogger
- Tích hợp AncPlay Media Player cho Blogspot
- Temple Blog đẹp miễn phí
- Code danh ngôn
- Chèn biểu tượng cảm xúc vào nhận xét dạng input
- TẠO 4 BANNER QUẢNG CÁO 125X125
- Hướng dẫn đăng kí tên miền đẹp
- Tạo Sitemap đẹp cho blogspot
- Tạo thanh cuộn trong blogspot
- Một số vấn đề thường gặp ở Blogspot
- [Yêu cầu] - Kwick jQuey cho tiện ích Random posts
- Menu đẹp cho blogger
- [ Yêu Cầu ] - Chèn quảng cáo giữa 2 bài viết bất kỳ trên trang chủ
- [ Yêu cầu ] - Ẩn 1 bài viết bất kỳ trong tiện ích Popular Posts
- Adv Recent Posts - Load nhiều tiện ích RP cùng 1 lúc
- [ Giới thiệu ] - Cải thiện tốc độ load cho các trang tin tức
- Truy tìm dấu vết hồ sơ Blogger đồng hương
- Làm đẹp tiện ích Popular Posts (hiệu ứng tooltip)
1 nhận xét | Viết lời bình
Thank bạn nhiều nha, mình làm được rồi, rất đẹp đó