Hiển thị lượt truy cập từng bài viết bằng Firebase - WAPCHIASE24H /* Sitemap by Showdzgn.com */
Hiển thị lượt truy cập từng bài viết bằng Firebase
Hiển thị lượt truy cập từng bài viết bằng Firebase
Hiển thị lượt truy cập từng bài viết bằng Firebase
Ở bài viết này BDK xin chia sẻ với bạn cách để hiển thị số lượt truy cập của từng bài viết trên blogspot bằng cách sử dụng Firebase. Tiện ích này giúp bạn và người đọc có thể xem số lượt truy cập của từng bài viết giúp người đọc có thể tin tưởng vào bài viết của bạn hơn nếu bài viết có nhiều lượt truy cập. Ngoài ra bạn cũng có thể theo dõi bài viết của mình được người đọc đón nhận như thế nào từ đó có hướng đi đúng đắn. Mời bạn xem thử

Cơ bản là như vậy. Nếu bạn muốn có một cái thì chúng ta bắt tay vào việc thôi. :)

Bước 1: Đăng ký tài khoản tại Firebase

Bạn click vào ĐÂYĐiền đầy dủ thông tin như bên dưới
Sau khi tạo tài khoản trang web sẽ hiện ra một khung như bên dưới đây ở góc trái. Bạn điền thông tin của mình vào và ấn chọn CREATE NEW APP
Sau đó chọn MANAGE APP 
Đến khi bạn thấy địa chỉ dạng như sau https://blogduykhanh.firebaseio.com là coi như xong. Bạn nhớ  địa chỉ này để sử dụng trong những bước sau
Trước khi đi đén bước tiếp theo thì bạn nên kiểm tra xem template của mình có thư viện jQuery hay chưa? Nếu chưa thì bạn thêm đoạn code sau trước thẻ </head><Script src = "// ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js '/>

Bước 2: Cài đặt CSS

Bạn đi đến Mẫu Chỉnh sửa HTML, dán đoạn code sau trước 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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwj5Z14A9ZMbflMHI9vRCVDiI0qrPxCFvvKvk5k7KneejNpQLIpPw8uJ6GsxYwjlGf2x5xn0eHL3oLGoTc3aHpV0eF6JKyWfBSoCfTBAAGCilKQ4lU_8HbwR1V0pypA8qp9yE9YbYdEipI/s1600/loader.gif') no-repeat 0 0;vertical-align:middle}

Bước 3: Cài đặt jQuery

Dán đoạn code sau trước thẻ </body> <b:if cond='data:blog.pageType != &quot;index&quot;'>
<script src='http://cdn.firebase.com/v0/firebase.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
// View counter
$(function(){var a=$(".viewers");a.each(function(){var n=$(this).attr("id"),e=new Firebase("https://blogduykhanh.firebaseio.com/"+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>
Nhớ thay đoạn địa chỉ https://blogduykhanh.firebaseio.com/ thành địa chỉ bạn tạo lúc nãy.

Bước 4: Cài đặt HTML

Đến đây thì công việc cài đặt coi như đã hoàn thành, giờ đến việc cho nó hiện lên là được. Bạn sẽ đặt code sau vào nơi bạn muốn hiển thị lượt truy cập<b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='viewers' expr:id='&quot;obs-&quot; + data:post.id'>Lượt xem:&amp;nbsp;<span class='loading'/>&amp;nbsp;lần</div> </b:if>Về vị trí thì khó mà nói cụ thể được vì tùy từng template và ý thích từng người đặt ở những nói khác nhau. Tuy nhiên thông thường nhiều người thích đặt ở đầu bài viết. Để thực hiện điều này bạn tìm đoạn code sau<div class='post-header'>
<div class='post-header-line-1'/>
</div>
Và thay thế nó bằng đoạn code sau<div class='post-header'>
  <div class='post-header-line-1'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='viewers' expr:id='&quot;obs-&quot; + data:post.id'>Lượt xem:&amp;nbsp;<span class='loading'/>&amp;nbsp;lần</div>
</b:if>
</div>
</div>

Bước 5: Lưu lại và tận hưởng

Đến đây thì công việc coi như hoàn tất. Lưu mẫu và xem kết quả.
Có một lưu ý nho nhỏ là khi blog bạn có quá nhiều trang và có quá nhiều lượt xem thì Firebaseio có thể sẽ hiển thị không đầy đủ, để hiển thị đầy đủ thì bạn phải đăng ký một tài khoản tính phí. Tuy nhiên nếu bạn vẫn muốn sử dụng chùa thì Firebaseio đã là tiện ích tốt nhất hiện nay rồi ^^
Chào các bạn đến với blog truyện tổng hợp của mình nhé !
  • Facebook
  • WhatsApp
  • Instagram
  • Subscribe Our Newsletter

    Posting Terkait

    0 Response to "Hiển thị lượt truy cập từng bài viết bằng Firebase"

    Đăng nhận xét

    Giới thiệu bản thân

    Thống kê

    43,461
    716 bài viết 67 nhận xét

    Đăng nhận xét

    Menu mobi

    NHÃN

    8vui.top (1) Anime (1) Anime641 (1) Bác sĩ window (6) Bts (1) Canhme (1) Choionline (1) chuyện thú vị (1) Code bán hosting cPanel (1) Code banghoi (1) Code blog php (6) code bot like (2) Code Dinhluyen (1) Code Forum JohnCMS 6.1.2 Mod By Chuối (1) Code Forum JohnCMS Vinajohn v2 (1) Code game Đại Anh Hùng (1) Code game Gunny (1) Code game Naruto (1) Code Link Protect Groups Facebook By Chuoi (1) Code MXH JohnCMS Userviet v3 (1) Code ovigame (1) Code sim (1) code tin tức (1) Code Vnhihi (1) Code Wap Game JohnCMS LOL (1) Date a live (2) Diendanvn (1) Dnfamily (1) emoji facebook blogger (1) Game (1) Gocpho (3) Hadpro (3) Hi4u (1) Imzik Template (1) Johncms (83) Johncms mod twitter (1) KB Template (1) Lebalongit (1) leminhut (1) M3v (1) Mefun (2) Modjohncms (1) MrT79 (1) nhanhnao code (1) nukeviet (2) olaVn (1) Phieubac code (2) phonho (1) Sao (1) Scam (2) scoure code upload (3) Source Web Chat Realtime ReactJS + Firebase (1) Star An Blog (1) Star Năm It (1) Start cường it (2) Sword art online (1) Teaavartar (1) Teen10x (1) Templat (1) template anime (10) Template blogger (185) template code đây rồi (2) template facebook (2) template nghĩa rồng blog (2) Template NPC (1) template phim (25) Template php (152) Template rút gọn link (1) Template shop bán nick lmht (1) template shop bán nick ngọc rồng (4) template star sinh blog (1) template star tuấn it (1) template thảo blogger (1) Template truyện (4) template TV (2) Template Vietblogger (1) Template wordpess (4) template youtube (1) tenki no ko (5) Tên Tiếng Nhật (2) Tết (1) Thanhstar code (1) Thủ thuật (287) Tin anime (67) Tin tức hay (1) Toàn siêu nhân (2) Top 10 anime hấp dẫn dựa trên tác phẩm văn học nổi tiếng (2) TuoiTre4v (1) Văn hoá Nhật Bản (4) Văn Huy ít (1) Vietfun (1) VietVina (1) Việt hoá (1) Vina4u (4) Vina4z (2) Vinajohn (2) Vinajohn vina (1) vlogstips (1) Vnbay code (1) Vnstar (1) Vnteam code (2) Vnteen code (1) Vtjohn (1) Wapchiase24h (1) Xenforo (1) Ya4r (1) Yeudehon (1) Youkoso Jitsuryoku Shijou Shugi (1) Z777 (2) Zzui 1.5 (1)

    Topst

    Đang tìm kiếm...

    Trang

    Recent Posts

    Liên kết website

    Website có sử dụng nguồn video được chia sẻ từ PhimMoi, Bilutv, Phimbathu,KPhim, Youtube... chúng tôi không giữ bản quyền về bất cứ nội dung trên website.

    Business

    [3,Demo,post-tag]

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Quảng cáo

    Quảng cáo bài viết