Tạo bộ đếm lượt xem bài viết cho Blogger, đây là một tiện ích khá quen thuộc mà bạn từng thấy trên các Theme của Wordpress. Khi các Blogger Covert Theme Wordpress sang Blogger thì một điều họ vẫn chưa thể làm được đó là: Làm sao để hiển thị lượt xem bài viết trên trang chủ? và câu hỏi ấy đã được trả lời. FireBase là dịch vụ sẽ giúp bạn thực hiện điều đó, rất đơn giản nhưng nó làm cho BLOG của bạn chuyên nghiệp hơn.
 |
| Bộ đếm lượt xem bài viết giống Wordpress cho Blogger |
Tiện ích được tạo bởi Jquery và FireBase. Đây là một tiện ích phù hợp với các trang chuyên về Video, TV khá thú vị nhé!
Các bước thực hiện
Bước 1: Truy cập
FireBase và đăng kí một tài khoản.
 |
| Đăng kí FireBase |
Bước 2: Sau khi đăng kí xong, bạn sẽ được chuyển hướng vào trang sau khi đăng nhập. Tại đây các bạn tạo một APP mới.
 |
| Tạo APP |
Bước 3: Sau khi APP tạo xong, các bạn chọn Manage APP
 |
| Manage APP |
Các bạn lưu lấy link FireBase trên thanh địa chỉ trình duyệt có dạng:
https://dongvietblog.firebaseio.com
Bước 4: Các bạn lưu ý trong Template của bạn cần phải có thư việc
Jquery rồi nhé! Thêm đoạn CSS sau vào trên thẻ
]]></b:skin>
.post-header-line-1 {overflow:hidden}
.viewers{margin:10px 0;display:table;background:#fefefe;color:#333;padding:6px 12px;box-shadow:inset 0 0 0 1px #c9c9c9;cursor:default;font-weight:bold;transition:all .3s ease-out}
.viewers:hover {background:#aaa;color:#fff;box-shadow:inset 0 0 0 1px #888;}
.viewers .loading {display:inline-block;width:20px;height:20px;background:transparent url('http://4.bp.blogspot.com/-wxZ5pjyYyaw/VayIXoixrWI/AAAAAAAAD6A/W51FR1H6jHg/s1600/loading.gif') no-repeat 0 0;vertical-align:middle}
Bước 5: Thêm đoạn code sau lên trước thẻ
</body>
<b:if cond='data:blog.pageType != "index"'>
<script src='http://cdn.firebase.com/v0/firebase.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(function(){var a=$(".viewers");a.each(function(){var n=$(this).attr("id"),e=new Firebase("Địa chỉ FireBase của bạn."+n);e.once("value",function(n){var i=n.val();null==i?i=1:"/"!=window.location.pathname&&i++,e.set(i),a.children("span").removeClass("loading").html(i)})})});
//]]>
</script>
</b:if>
Bước 6: Thêm đoạn code sau vào nơi bạn muốn chèn bộ đếm.
<div class='viewers' expr:id='"obs-" + data:post.id'><span class='loading'/>&nbsp;Views</div>
Bước 7: Lưu Template. Vậy là bạn đã tạo thanh công một bô đếm lượt xem bài viết khá tuyệt cho Blogger.
Share this
EmoticonEmoticon