|
Đăng bởi Admin | 12/8/13 | 0 nhận xét
- Chọn kiểu hay dạng ngôi sao mà mình ưng ý.
- Chọn nền tảng (Platform) là Blogger (Nếu chèn vào comment bạn chọn Blogger comments) để lấy code.
2- Chọn Chỉnh sửa (Edit) của phần Bài đăng (Main Post).
3- Bấm chọn vòa ô "Hiển thị xếp hạng theo dấu sao" (Show Star Ratings)
3- Lưu thiết đặt lại.
Tiện ích đánh giá hình ngôi sao được rất nhiều blog/web sử dụng để đánh giá mức độ ưng ý về bài viết của độc giả. Về cơ bản thì tiện ích này tương tự như google+, like facebook, tweeter, tuy nhiên giao diện nhìn đẹp hơn. Vì vậy hôm nay Namkna sẽ chia sẻ với mọi người một cách để tạo tiện ích đánh giá dạng ngôi không chỉ cho cho bài viết trong blogger mà cả phần comment của blog. Ngoài ra, tiện ích này còn thống kê được số lượt xem bài viết trong blogger của bạn và đặc biệt là dễ dàng tùy chỉnh.
Các bạn có thể xem Demo: View Demo
Với các mẫu simple của blogger thì tiện ích này được tích hợp sẵn nhưng với nhiều mẫu tùy chỉnh thì tiện ích này bị các designer ẩn đi nên các bạn không thấy. Do vậy mình sẽ hướng dẫn các bạn 2 cách: 1 là từ Graddit.com1, 2 là kích hoạt có sẵn của blogger.
Ảnh minh họa:
Với các mẫu simple của blogger thì tiện ích này được tích hợp sẵn nhưng với nhiều mẫu tùy chỉnh thì tiện ích này bị các designer ẩn đi nên các bạn không thấy. Do vậy mình sẽ hướng dẫn các bạn 2 cách: 1 là từ Graddit.com1, 2 là kích hoạt có sẵn của blogger.
Cài đặt với Graddit.com
1- Truy cập vào trang chủ: http://graddit.com/ratings-widget.- Chọn kiểu hay dạng ngôi sao mà mình ưng ý.
- Chọn nền tảng (Platform) là Blogger (Nếu chèn vào comment bạn chọn Blogger comments) để lấy code.
- Copy đoạn code thu được để sử dụng cho bước tiếp theo.
2- Chèn vào Blogger
2- Chèn vào Blogger
2.1. Đăng nhập vào tài khoản Blogger
2.2. Vào phần Mẫu (Template)
2.3. Chọn chỉnh sửa HTML (Edit HTML) => Tiếp tục (procced) => Chọn mở rộng mẫu tiện ích (Expand Widget Templates)
2.4. Chèn code bên dưới vào sau thẻ <head>
2.2. Vào phần Mẫu (Template)
2.3. Chọn chỉnh sửa HTML (Edit HTML) => Tiếp tục (procced) => Chọn mở rộng mẫu tiện ích (Expand Widget Templates)
2.4. Chèn code bên dưới vào sau thẻ <head>
<link type="text/css" rel="stylesheet" href="http://static.graddit.com/css/graddit.css"/>2.5. Tìm đoạn code bên dưới hoặc tương tự:
<div class='post-header-line-1'/>
2.6. Chèn code mà bạn vừa lấy tại Graddit.com ở trên vào ngay dưới code vừa tìm được
2.7. Lưu mẫu lại và kiểm tra kết quả nha.Kích hoạt đánh giá Rating có sẵn của Blogger
1- Bạn vào phần bố cục (Layout)2- Chọn Chỉnh sửa (Edit) của phần Bài đăng (Main Post).
3- Lưu thiết đặt lại.
Cập nhật bổ xung!
Đối với cách này thì đối với những mẫu bạn đã tùy chỉnh, đã loại bỏ các biến Variable có thể không hiện được, chỉ đối với những mẫu sẵn có của blogger kích hoạt sẽ được hiển thị ngay. Để có thể hiện thị được với mẫu bạn đã tùy chỉnh thì sau khi thực hiện xong các bước trên bạn hãy thực hiện thêm các bước sau:
1- Vào Mẫu (Template) >> Chỉnh sửa HTML (Edit HTML) >> Mở rộng mẫu tiện ích (Expand Widget Templates) và tìm đoạn code sau
<data:post.body/>- Chèn đoạn code sau vào sau code vừa tìm được!
<div class='star-ratings' style='float:right;'> <b:if cond='data:top.showStars'> <div expr:g:background-color='data:backgroundColor' expr:g:text-color='data:textColor' expr:g:url='data:post.absoluteUrl' g:height='42' g:type='RatingPanel' g:width='180'/> </b:if> </div>2- Tìm code sau:
<b:include name='feedLinks'/>
- Chèn code bên dưới vào sau code vừa tìm được (Nếu chưa có):
<b:if cond='data:top.showStars'>
<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>
google.load("annotations", "1");
function initialize() {
google.annotations.setApplicationId(<data:top.blogspotReviews/>);
google.annotations.createAll();
google.annotations.fetch();
}
google.setOnLoadCallback(initialize);
</script>
</b:if>
Lưu mẫu lại.
- Nguồn: Namkna Thu thuat vi tinh
Thư viện Tài liệu học tập
Ẩm thực Việt
Bàn về phong thủy
Namkna
Thư viện Tài liệu học tập 
Chính Trực Blog 
DautoCrazy.Blog 
Thư viện ảnh bìa
Tiền của tui
Caocongkien 360
Báo Tuổi Trẻ Đời Sống
CuoiS2
Không có nhận xét nào:
Đăng nhận xét
Cảm ơn bạn đã nhận xét !
Mã hóa Code- Bạn có thể chèn link vào nhận xét bằng thẻ: <a href="Link" rel="nofollow">Tên link</a>
- Tạo <b>Chữ đậm</b> và <i>Chữ ngiêng</i> cho nhận xét
- Hãy Chuyển đổi mã code trước khi chèn vào nhận xét
- Hãy bấm Theo dõi dưới chân trang để nhanh chóng nhận được phản hồi từ Thủ thuật vi tính
- Những nhận xét nào không lành mạnh hoặc chèn link spam sẽ bị xóa khỏi blog.