Share Popular Posts Style Cực Đẹp

Tổng chào các đọc giả của tôi, thời gian vừa qua có quá nhiều chuyện cần giải quyết nên mình không viết bài cũng như không đi tương tác với các blog bạn bè được. Hôm nay mình đi quờ quạn thì thấy cái bài viết liên quan của HongHaiBlog hơi bị đẹp nên mình rip về và edit sơ lại và share cho các bạn đây. Cái này đơn giản vô cùng, làm theo mình nhé!

Tạo Thống Kê Ảo Với Số Lượng View Khủng Cho Blogspot

Đã là một Blogger thì chắc chắn bạn phải có riêng cho mình một blog và ít nhiều gì thì lượt xem hay comment cũng có phải không nào? Và không phải bạn có cái thống kê của bạn ở trang chủ quản trị mà bạn cần tạo cho website của mình một bảng thống kê riêng.
Và cũng do một số yêu cầu của các bạn bè của mình nên hôm nay mình sẽ share khung Thống kê blogspot cực chất. Và nó có rất nhiều điều hay ho các bạn cùng tham khảo nhé!

Tiện ích thống kê này được mình edit lại từ Tiện ích giới thiệu của anh Ngô Quang Trường (Truongblogger.com) và thêm vào đó một số tính năng nói chung là hay ho để cho nó được bá đạo và đẹp mặt hơn

Thôi vào bài luôn nha, dài dòng nãy giờ đủ rồi 😀

Đầu tiên để tạo 1 widget thì chúng ta phải truy cấp vào Blogger => Bố cục (layout) => Thêm Tiện ích => HTML/Javascript rồi paste các đoạn code bên dưới vào nhé

1. Thống Kê Ảo All

Đây  là một dạng thống kê khá hay và đáng để cho các bạn thử. Nó khá là đơn giản bởi vì mình chỉ sử dụng lại các đoạn code mà anh Trường đã cung cấp ngay trong widget.
Cái này phần lớn là dành cho các bạn sống ảo thôi nhé :v

Code:

<style>

#ketnoi{margin:0 0 -5px;width: 100%;box-sizing: border-box;display: inline-block;position: relative;color: #333;line-height: normal;text-align: center; border: 2px solid #eee;font-weight: 700;font-size:12px}

#ketnoi a{color:#333}

#ketnoi-col-1{width: 33.3333%;float: left;}

#ketnoi-col-1 span,#ketnoi-col-1 p{margin:0;padding:0}

.ketnoi-icon{display: block;width: 50px;height: 50px;line-height: 50; text-align: center;background: #333;color: #fff;margin: 0 auto 5px;border-radius: 100%;transition: .3s;font-size: 22px;}

.ketnoi-pageview,.ketnoi-post,.ketnoi-comments,.{padding: 10px 0;}

.ketnoi-pageview,.ketnoi-post,.ketnoi-comments{border-bottom: 1px solid #eee}

.ketnoi-pageview,.ketnoi-post,.ketnoi-comments{border-left: 1px solid #eee;border-right: 1px solid #eee;}

.ketnoi-pageview i{background: #39599f}

.ketnoi-post i{background:#9b59b6}

.ketnoi-comments i{background:#1abc9c}

</style>

<div id='ketnoi'>

<div id='ketnoi-col-1'>

<div class='ketnoi-pageview'>

<i class="fa fa-eye ketnoi-icon"></i>

<span>6.682.293</span><p>Lượt Xem</p></a>

</div>

</div>

<div id='ketnoi-col-1'>

<div class='ketnoi-post'>

<i class="fa fa-pencil-square-o ketnoi-icon"></i><span>51</span><p>Bài Viết</p></a>

</div>

</div>

<div id='ketnoi-col-1'>

<i class="fa fa-comments ketnoi-icon"></i><span>828/span><p>Bình luận</p></a>

</div>

</div></div>

Tùy theo ý thích mà các bạn chỉnh sửa các con số mà mình in đậm trong code nhé!

2.Thống Kê Nữa Ảo Nữa Thật

Ok, cái này cũng là một cái thống kê nhưng cái này nó cao cấp hơn, Tại sao?. Bởi vì khung thống kê này được mình nâng cấp lại các phần và chú ý rằng cái đoạn code này mình có dùng đến  JavaScript (js) nên có lẽ nó sẽ ảnh hưởng đến việc load trang blog bạn đấy nhé

Code:

<style>

#ketnoi{margin:0 0 -5px;width: 100%;box-sizing: border-box;display: inline-block;position: relative;color: #333;line-height: normal;text-align: center; border: 2px solid #eee;font-weight: 700;font-size:12px}

#ketnoi a{color:#333}

#ketnoi-col-1{width: 33.3333%;float: left;}

#ketnoi-col-1 span,#ketnoi-col-1 p{margin:0;padding:0}

.ketnoi-icon{display: block;width: 50px;height: 50px;line-height: 50px;text-align: center;background: #333;color: #fff;margin: 0 auto 5px;border-radius: 100%;transition: .3s;font-size: 22px;}

.ketnoi-facebook,.ketnoi-post,.ketnoi-comments,.{padding: 10px 0;}

.ketnoi-facebook,.ketnoi-post,.ketnoi-comments{border-bottom: 1px solid #eee}

.ketnoi-post,.ketnoi-lienhe{border-left: 1px solid #eee;border-right: 1px solid #eee;}

.ketnoi-facebook i{background: #39599f}

.ketnoi-post i{background:#9b59b6}

.ketnoi-comments i{background:#1abc9c}

</style>

<div id='ketnoi'>

<div id='ketnoi-col-1'>

<div class='ketnoi-facebook'>

<i class="fa fa-eye ketnoi-icon"></i> <a> <script type='text/javascript'>document.write(Math.floor((Math.random()*2738)+500000));</script></a>

<p>Lượt Xem</p>

</div>

</div>

<div id='ketnoi-col-1'>

<div class='ketnoi-post'>

<i class="fa fa-file-pencil-square-o ketnoi-icon"></i><span><script style="text/javascript">function showpostcount(t){document.write(parseInt(t.feed.openSearch$totalResults.$t,10))}</script><script src="/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script></span><p>Bài viết</p>

</div>

</div>

<div id='ketnoi-col-1'>

<div class='ketnoi-comments'>

<i class="fa fa-comments ketnoi-icon"></i><span><script style="text/javascript">function numberOfComments(e){document.write(e.feed.openSearch$totalResults.$t)}</script><script src="/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script></span><p>Bình luận</p>

</div>

</div></div>

Nói luôn cho các bạn khỏi tò mò rằng đoạn code này chỉ thống kê chính xác số lượng comments và số lượng post trên blog thôi nhé, còn số lượng view blog là random tự động đấy nhé.
Đừng có dại mà chụp màng hình số lượng views lại rồi đăng lên các trang mạng xã hội nhé, bị ném đá sml đó

3.Thống Kê Hoàn Hảo - Chuẩn All

Phần này là vì code có hạn nên mình sẽ  để trống nhé =). Nếu sau này mình tìm ra được đoạn code thống kê tổng lượt xem trang thì mình sẽ update.

Ok! Mình đã giúp các bạn tạo một thống kê cho Blog rồi đấy, bây giờ phần thực hành là của các bạn. Các bạn cũng có thể phối các đoạn code lại với nhau để tạo cho mình một thống kê riêng với style của các bạn.

Còn bây giờ thì mình xin chào các bạn nhé!
Chúc các bạn thành công nhé! Có gì không được thì cứ bình luận bên dưới mình sẽ giải đáp nhé. Cảm ơn các bạn!

Cách Tạo Thông Báo Chữ (Text) Chạy Cho Blogspot - Blogger

Bạn là một blogger với một lượng truy cập hàng ngày cũng kha khá và một ngày nào đó blog bạn bị sự cố và bạn muốn thông báo đến tất cả khách hàng mà bạn lại không muốn viết một bài đăng quá ngắn để thông báo. Vậy bạn sẽ làm cách nào? Đó chính là tạo ngay một thông báo đẩy ngay tại chỗ dễ thấy nhất trên blog của các bạn. Và vì thế hôm nay mình sẽ Share cho các bạn một số đoạn code  như thế.

Xin lưu ý các bạn, các đoạn mã này chỉ hoạt động trên các trình soạn thảo văn bản có hỗ trợ ngôn ngữ HTML thôi nhé (Mình thấy đa phần trình soạn thảo trên các hệ thống Blog miễn phí đều hỗ trợ HTML, riêng diễn đàn hầu như là không).

1. Chữ Chạy Ngang Từ Phải Qua Trái
Đây là đoạn mã cơ bản nhất, bạn chỉ việc để dòng chữ cần cho chạy vào giữa 2 thẻ MARQUEE là được.
Đoạn mã:

<marquee>Star Phúc Blog</marquee>

Star Phúc Blog

2. Chữ Chạy Ngang Từ Trái Qua Phải
Đoạn mã:

<marquee direction="right">Star Phúc Blog</marquee>

Star Phúc Blog

3. Chữ Chạy Từ Trên Xuống Dưới
Đoạn mã:

<marquee direction="down">Star Phúc Blog</marquee>

Star Phúc Blog

4. Chữ Chạy Từ Dưới Lên Trên
Đoạn mã:

<marquee direction="up">Star Phúc Blog</marquee>

Star Phúc Blog

5. Chữ Chạy Qua Lại
Đoạn mã:

<marquee behavior="alternate">Star Phúc Blog</marquee>

Star Phúc Blog


6. Chữ Chạy Có Màu Nền

Đoạn mã:

<font ><marquee direction="left" style="background:orange">Star Phúc Blog</marquee></font>

Star Phúc Blog

7. Chữ Chạy Có Khung Xung Quanh
Đoạn mã:

<marquee style="border:blue 2px SOLID">Star Phúc Blog</marquee>

Star Phúc Blog
8. Chữ Chạy Ngang, Dừng Lại Khi Rê Chuột
Đoạn mã:

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2">Star Phúc Blog</marquee>

Star Phúc Blog
• Các bạn thay số 2 thành số bạn muốn để chỉnh tốc độ chạy cho " Chữ Chạy Ngang, Dừng Lại Khi Rê Chuột" nhé

Cảm ơn bạn đã đọc bài viết của tôi, hãy để lại bình luận nếu có thắc mắc gì nhé.
Chúc các bạn thành công với những đoạn code của mình.

Nguồn: DoPhuQuy.Com

Tạo Tiện Ích (Widget) Bình Luận Gần Đây Cho Blogspot

Ý là hôm bữa Template cũ bị lỗi, lười fix quá nên down cái templaye mới của Toicode về sài mà thấy nó có cái tiện ích (widget) 'Bình Luận Gần Đây' đẹp quá nên ăn cắp về và share cho các bạn luôn 😀😀

Hình Ảnh Demo:

Hoặc Demo Tại Đây

Nó rất đơn giản thôi, các bạn chỉ cần thềm tiện ích javascrip/html vào và paste đoạn code dưới đây vào thôi vì đoạn code này đã được các admin trước edit thành liên kết tương đối

Bước 1: Truy cập vào Blogger.com => Bố cục => Thêm tiện ích => Javascript/html
Bước 2: Paste đoạn code này vào:

<style>
.nxmoi{color: #ccc;}
.nxmoi li{margin:0;padding:10px;border-left: 2px solid #ccc;}
.nxmoi li:before {content: "";width: 8px;height: 8px;display: block;border: 2px solid #ccc;border-radius: 50%;float: left;left:-5px;position: absolute;background: #065381;}
.nxmoi span a{color: #ddd;font-weight:600;transition: color .3s;}
.nxmoi span a:hover{color:#fff;transition: color .3s;}
</style>
<script>//<![CDATA[
var sl_nhanxet = 6,
    kt_nhanxet = 70;
// Recent Comment
function nhanxetmoi(json) {
    var entry, commurl, commsum;
    document.write('<ul class="nxmoi">');
    for (var i = 0; i < sl_nhanxet; i++) {
        entry = json.feed.entry[i];
        if (i == json.feed.entry.length) break;
        for (var k = 0; k < entry.link.length; k++) {
            if (entry.link[k].rel == 'alternate') {
                commurl = entry.link[k].href;
                break;
            }
        }
        commsum = ("content" in entry) ? entry.content.$t : ("summary" in entry) ? entry.summary.$t : "";
        commsum = commsum.replace(/<.*?>/g, "");
        if (commsum.length > kt_nhanxet) commsum = commsum.substring(0, kt_nhanxet) + "...";
        document.write('<li><span><a href="' + commurl + '" rel="nofollow">' + entry.author[0].name.$t + ' </a></span> <span>' + commsum + '</span></li>');
    }
    document.write('</ul>');
}
//]]></script>
<script src="/feeds/comments/summary?alt=json-in-script&amp;callback=nhanxetmoi"></script>

Bước 3: Lưu Template lại và xem thành quả thôi. Chúc các bạn thành công

Có Thể Bạn Quan Tâm:

• Xem Thêm: Code F12 Facebook
• Xem Thêm: Cách Get Token Không Dính CheckPoint
• Xem Thêm: Tut Unlock CheckPoint Account ĐK SĐT