Tôi là lập trình viên

Bộ hình nền 4K cho Laptop, Desktop cực đẹp 2020

Hiện tại màn hình độ phân giải 4K đã dần trở lên phổ biến, nếu bạn đang sở hữu 1 màn hình có độ phân giải 4k thì dùng hình nền phân giải Full HD sẽ không tận dụng được hết sức mạnh hiển thị của màn hình

Để tải hình nền 4k về máy bạn click chuột phải vào hình chọn Save as...

Đọc thêm

Tạo trang báo lỗi 404 chuyên nghiệp cho blogspot - p2

Trước kia mình có viết một bài là Tạo trang báo lỗi 404 Page Not Found chuyên nghiệp. Thì hôm nay lại tiếp tục hướng dẫn làm thêm một mẫu mới hấp dẫn hơn.

Lỗi không tìm thấy trang (page not found) xuất hiện khi người dùng truy cập vào một đường dẫn nào đó trên website, tuy nhiên máy chủ không tìm thấy và trả trả về nội dung không tồn tại (mã phản hồi 404). Lỗi này có thể xuất hiện ở bất kì website nào, trong bài viết này mình sẽ hướng dẫn các bạn tạo 1 trang báo lỗi 404 đẹp và chuyên nghiệp.

Live Preview

Bắt đầu thủ thuật ! Trước hết bạn cần xóa code 404 cũ của template đi bằng cách tìm đến thẻ điều kiện <b:if cond='data:blog.pageType == "error_page"'> hoặc <b:if cond='data:view.isError'>

Khai báo thẻ meta, chèn code trước thẻ </head>

<b:if cond='data:view.isError'>
<meta content='Sorry, the page you were looking for in this blog does not exist' name='description'/>
<meta content='noindex, nofollow' name='robots'/>
</b:if>

Chèn đoạn code SAU thẻ mở <body>

<b:if cond='!data:view.isError'>

Chèn code TRƯỚC thẻ đóng </body>

<b:else/>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700&subset=latin-ext,vietnamese' rel='stylesheet' type='text/css'/>
<style type='text/css'>/*<![CDATA[*/
*{margin:0;padding:0}
body{line-height:normal;font-family:Roboto,sans-serif;background:url(https://i.imgur.com/aPGRAV2.jpg)no-repeat center 0;-webkit-background-size:cover;-moz-background-size:cover;background-size:cover;background-attachment:fixed}
.hh-404-row{width:65%;margin:0 auto}
.hh-404-nav{margin-top:3em}
.hh-404-nav ul{text-align:center}
.hh-404-nav ul li{display:inline-block;margin:0 1.2em}
.hh-404-nav ul li a{color:#fff;font-size:1em;text-decoration:none;-webkit-transition:0.5s all;-moz-transition:0.5s all;-o-transition:0.5s all;-ms-transition:0.5s all;transition:0.5s all}
.hh-404-nav ul li a:hover{color:#fbb034}
.hh-404-errortext{padding-top:4em;text-align:center}
.hh-404-errortext h1{font-family:Roboto,sans-serif;font-size:1.2em;color:#fff;font-weight:bold;line-height:1.8em}
p.hh-404-text{font-size:1em;color:#fff;line-height:1.8em;font-weight:400;width:65%;margin:1.5em auto 2.5em}
p.hh-404-text a{color:#fbb034;text-decoration:none}
p.hh-404-text a:hover{color:#ffffff}
.hh-404-search input[type="text"]{width:50%;padding:0.8em 1.5em;font-size:1em;color:#fff;outline:none;border:2px solid #fbb034;background:none;border-radius:50px;-webkit-appearance:none;-webkit-transition:0.5s all;-moz-transition:0.5s all;transition:0.5s all}
.hh-404-search input[type="submit"]{font-family:Roboto,sans-serif;letter-spacing:.02rem;outline:none;box-shadow:none;text-transform:uppercase;font-weight:bold;background:transparent;border:2px solid #fbb034;padding:.8em 2em;color:#fff;cursor:pointer;border-radius:30px;font-size:15px;margin-left:0.3em;-webkit-transition:0.5s all;-moz-transition:0.5s all;transition:0.5s all}
.hh-404-search input[type="submit"]:hover{color:#fff;background:#fbb034}
::-webkit-input-placeholder{color:#fff!important}
:-moz-placeholder{color:#fff!important}
::-moz-placeholder{color:#fff!important}
:-ms-input-placeholder{color:#fff!important}
.hh-404-errortext h2{font-family:Roboto,sans-serif;font-weight:bold;font-size:14em;letter-spacing:20px;color:#fff}
.hh-404-errortext span{color:#fbb034}
@media(max-width:1366px){p.hh-404-text{width:75%}}
@media(max-width:1080px){.hh-404-row{width:75%}}
@media(max-width:991px){p.hh-404-text{width:85%}}
@media(max-width:900px){.hh-404-row{width:85%}.hh-404-errortext{padding-top:5em;text-align:center}.hh-404-nav ul li{margin:0 1em}p.hh-404-text{width:95%}}
@media(max-width:667px){.hh-404-nav ul li{margin:0 0.5em}.hh-404-errortext h1{font-size:1em}p.hh-404-text{width:100%;line-height:2em}.hh-404-errortext h2{font-size:12em}}
@media(max-width:480px){.hh-404-nav{float:none;text-align:center}.hh-404-nav{margin-top:1.5em}.hh-404-nav ul li a{font-size:0.9em}.hh-404-nav ul li{margin:0 1em}.hh-404-errortext h1{font-size:0.9em}.hh-404-search input[type="text"],.hh-404-search input[type="submit"]{font-size:0.9em}}
@media(max-width:414px){.hh-404-errortext h2{font-size:9em}.hh-404-errortext{padding-top:2em}.hh-404-search input[type="text"]{width:80%;margin-bottom:1em}}
@media(max-width:384px){.hh-404-search input[type="text"]{width:85%}.hh-404-search input[type="submit"]{margin:0 0 0 0;padding:.7em 2em}.hh-404-row{width:87%}.hh-404-errortext{padding-top:4em}.hh-404-errortext h2{letter-spacing:10px}}
@media(max-width:320px){.hh-404-nav ul li a{font-size:0.85em}.hh-404-nav ul li{margin:0 0.6em}p.hh-404-text{margin:0.8em auto}.hh-404-nav{margin-top:1em}.hh-404-search input[type="submit"]{padding:.6em 2em}.hh-404-errortext h2{font-size:7em}}
/*]]>*/
</style>

<div class='hh-404-main'>
<div class='hh-404-row'>
<div class='hh-404-errortext'>
<h2>4<span>0</span>4</h2>
<h1>Sorry ! The page you were looking for could not be found </h1>
<p class='hh-404-text'>You have been clicked on a link that can not be found. Please check the url or go to <a href='/'>main page</a> or try to search something here</p>
<div class='hh-404-search'>
<form action='/search'>
<input id='search' name='q' placeholder='Type to search...' required='' type='text'/>
<input type='submit' value='Search'/>
</form>
</div>
<div class='hh-404-nav'>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='/p/about.html'>About</a></li>
<li><a href='/p/contact.html'>Contact</a></li>
<li><a href='/p/sitemap.html'>Sitemap</a></li>
</ul>
</div>
</div>
</div>
</div>
</b:if>

Tùy chỉnh

Action của form được mặc định là /search (chức năng tìm kiếm query của blog), nếu bạn dùng google tìm kiếm tùy chỉnh có thể sửa (ví dụ <form action='/p/search.html'>)
Bạn tự fix id hoặc class trùng để tránh xung đột css
Có thể thẻ h1, h2 sẽ bị ảnh hưởng bởi template của bạn, nếu bị ảnh hưởng bạn tự căn chỉnh cho hợp lý

Ok, vậy thôi thủ thuật rất đơn giản, không dùng tới js nên không xoắn mấy

Để lại bình luận nếu bạn gặp khó khăn nhé ! Good Luck !

Đọc thêm

Event tặng domain Safelink.uk miễn phí

Chào các bạn, từ hôm chơi Blog lại tới giờ mà chưa có gì để tặng cho các bạn. Hôm nay mình có một cái tên miền khá là hay làm sân chơi nhỏ cho các bạn.

Thông tin domain

Tên: safelink.uk
Quản lý tại Google
Trị giá: 282.000vnđ
Thời gian còn lại: 10 tháng

Thể lệ

Các bạn comment một con số có 2 chữ số (00 - 99) + lời nhắn bất kỳ.
Người trúng giải sẽ là người có con số dự đoán trùng với kết quả giải 8 của XSMB.
Thời gian chốt Event là khi có đủ 10 bạn tham gia.

Điều kiện chung

Phải có ít nhất 10 bạn tham gia trở lên thì giải thưởng mới có giá trị.
Không được sử dụng acc clone hoặc nhiều acc khác nhau để comment.

Thế thôi, đây là event đầu tiên, nhỏ nhỏ thôi, sắp tới mình sẽ tặng .com .net tùy chọn cho các bạn. Chúc các bạn may mắn.

Đọc thêm

Hướng dẫn upload ảnh lên Google Photos và lấy link ảnh

Với Blogger nói riêng và người dùng nói chung thì ảnh là 1 thành phần rất quan trọng. Trong quá trình thiết kế giao diện web hoặc đăng tải bài đăng không thể không có sự hiện diện của nó. Vì thế việc tìm kiếm host upload ảnh và lưu trữ lâu dài là điều cực kì quan trọng. Hiện nay có rất nhiều host hỗ trợ việc này tuy nhiên tôi cũng như 1 số Blogger khác vẫn thích dùng hàng google hơn.

Ở bài viết này chúng ta hãy cùng tìm hiểu cách upload và lấy url ảnh nhanh chóng dạng https://xxx.jpg, https://xxx.png,... Có khá nhiều người thích dùng https://photos.google.com tuy nhiên nhược điểm của anh này là url ảnh dài hơn cả vạn lý trường thành, đây là 1 ví dụ cho 1 tấm ảnh.

https://lh3.googleusercontent.com/8_LQ7D8siFmTpQLHI9YN0FR_LMXGCm12jghcQ52a06G4p-eGlvifu3mDv884wkwpNun-Z048qtnznd81plLrgPQulcVNAjkTGC0AdUGwGvxWCecm24Ji_X9B802bdrJS74qRxT-dMxLvk05nRzeoWd3I7Hc629zESe6eHW6wjOJrcSK68bVpjEQCTvSgf6rykCuw3jxIzx9Mk7eV_Y6feVPqoyBkvUHevDvciXHMSHV39Xc8sQUPXxGwEa3ciKSWCqlmwCK4TLT5A697b3FK4EQs1nFyaAf9KvUqPOmud-r9B8E2BiHwvTwlw5uXXZbz2o-Jc6rFrg9GOEOdcpPobyAW2cdgEpQaju0uhlF3HZ0edzIwZ43iYg1jYKWu7GHg0M3yICrU7LDtamLN85P_EisjJJTM_znvqoQBfs_NZG3C-kUa3bN54zQBHJ-wuKEE1lo6Sl6qAo6378ZSYTsL06cUzSw3OkKsMYMw7t47HC25AXB1STGZEfBUm8pT85KD-moyd_RSqrDvh4GofO_XTCKIgjqymUjdlRaCuYkPIbcv8kTuhLr6CtLAXmYWJr-6AEyIX2ArgFC-dfWnJKRhq9HsUZR3TYpWx4xco8_57b-pjTJXCYAb=w1387-h780-no

Như các bạn đã thấy nó quá dài và không có độ thẩm mỹ. vì thế hãy lựa chọn cách upload ảnh và lấy url qua blogger.

Đảm bảo là bạn đã có tài khoản google và tạo cho mình 1 trang blog rồi nhé, tạo chơi cũng được. Lúc này bạn vào mục Bài đăng hoặc là Trang sau đó click vào mục đăng ảnh:

Chọn 1 tấm ảnh muốn upload và chờ quá trình tải lên hoàn tất.

Lúc này sẽ có 2 lựa chọn cho bạn

1. Lấy link kiểu "Google Photos"

Right Click chuột vào ảnh để lấy url

Link sẽ có dạng

https://lh3.googleusercontent.com/-TXfhUz42DW8/WZnkRL0DayI/AAAAAAAAIiY/D5cA3gpy75gH1ko7-DYUAPTPWKvK2UV7ACLcBGAs/h120/Spotlight%2B%2528695%2529.jpg

Lúc này bạn chỉ cần để ý đến giá trị h120 thay đổi nó là sẽ co dãn được bức ảnh

Các tùy chọn như sau

Thay h120 thành s0 để đưa về kích thước gốc
Thay h120 thành sXXX để thay đổi chiều rộng (đơn vị pixels)
Thay h120 thành hXXX để thay đổi chiều cao (đơn vị pixels)
Thay h120 thành sXXX-c hoặc hXXX-c để crop ảnh thành hình vuông
Thêm -d để bật hộp thoại download (áp dụng được cho cả 4 trường hợp trên lần lượt sẽ là s0-d, sXXX-d, hXXX-d,sXXX-c-d hoặc hXXX-c-d)

Quá tuyệt hảo cho 1 đường link đúng không

2. Lấy link kiểu "blogspot"

Tương tự bạn cũng upload hình lên và chọn như sau

Tiếp theo chuyển qua tab HTML sẽ thấy được link ảnh trong thẻ <a href='link ảnh'

Link ảnh có dạng

https://1.bp.blogspot.com/-TXfhUz42DW8/WZnkRL0DayI/AAAAAAAAIiY/D5cA3gpy75gH1ko7-DYUAPTPWKvK2UV7ACLcBGAs/s1600/Spotlight%2B%2528695%2529.jpg

Khi đó giá trị s1600 hoàn toàn tương tự như h120 ở trường hợp trên bạn tùy chỉnh tương tự nó.

Các tùy chọn như sau

Thay s1600 thành s0 để đưa về kích thước gốc
Thay s1600 thành sXXX để thay đổi chiều rộng (đơn vị pixels)
Thay s1600 thành hXXX để thay đổi chiều cao (đơn vị pixels)
Thay s1600 thành sXXX-c hoặc hXXX-c để crop ảnh thành hình vuông
Thêm -d để bật hộp thoại download (áp dụng được cho cả 4 trường hợp trên lần lượt sẽ là s0-d, sXXX-d, hXXX-d,sXXX-c-d hoặc hXXX-c-d)

Bạn muốn quản lý những bức ảnh này? Hãy vào đây. Tất cả ảnh bạn upload lên các dịch vụ của Google: Picasa Web Albums, Blogger, Hangouts, Google Photos, Google Drive đều nằm trong đó, có thể dễ dàng tải về hoặc xóa theo ý thích.

Như vậy việc upload và lấy link ảnh như trình bày ở trên giúp bạn chủ động cũng như thống nhất được host lưu trữ cho Blog của mình, nếu như blog của bạn vẫn còn vài thí sinh đang sử dụng ảnh của "con nhà người ta" thì hãy nhanh nhanh mang nó về host của mình đi nhé. Không lúc tài khoản của "con nhà người ta" bị khóa thì không biết kêu than ai nữa đâu :))

Đọc thêm

Tạo hộp thống kê trượt dọc cho blogspot

Thống kê Blog khá quan trọng với mỗi blogger, nó giúp người xem nắm được tổng quan Blog cũng như giúp webmaster theo dõi tình hình hoạt động để có chiến lược hiệu quả trong thời gian sắp tới.

Các tiêu chí thống kê Blog phổ biến được blogger sử dụng đó là tổng số bình luận, tổng số bài viết, tổng số trang tĩnh,... ngoài ra còn có tiện ích ngoài như thời gian tải trang, số người đang online. Blogger có cung cấp API để có thể gọi lấy các thông tin trên.

Bài viết này sẽ chia sẻ cho bạn đọc form thống kê chạy dọc blog với hiệu ứng cực cool, bao gồm thống kê số bình luận, số bài viết, số trang tĩnh và thời gian tải trang, xem demo phần bên trái của bài viết này.

Trước khi bắt đầu thủ thuật bạn hãy suy nghĩ thật kĩ có nên tích hợp nó vào hay không vì mỗi một thống kê sẽ phải tải feed, điều này ảnh hưởng rất lớn tới tốc độ tải trang của bạn.

Hướng dẫn thực hiện

Bước 1: Đầu tiên, vào Quản trị Blogger > Chỉnh sửa HTML

Bước 2: Tích hợp js fontawesome nếu blog bạn chưa có, chèn đoạn mã sau trước thẻ đóng </head>

<link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

Bước 3: Viết CSS, dán code sau vào trước thẻ ]]></b:skin>

/* Statistics */
.statistics{position:fixed;left:1%;top:35%;background:#fff;border-radius:5px;z-index:200;width:47px;padding:0 0 4px;box-shadow:1px 1px 15px rgba(128,128,128,0.5);font-size:16px!important}
.statistics ul{padding:10px 7px!important;margin:0!important}
.statistics ul li{list-style:none}
.icon-statistics{color:#222;cursor:pointer;border:.089em solid #cacaca;border-radius:50px;height:30px;line-height:30px;width:30px;overflow:hidden;display:block;float:left;margin-bottom:5px;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}
.icon-statistics i{margin:0 3px 0 7px}
.icon-statistics.page-statistics:hover{width:90px;background:#1f8401;color:#fff}
.icon-statistics.cmt-statistics:hover{width:130px;background:#3a579a;color:#fff}
.icon-statistics.post-statistics:hover{width:105px;background:#d63808;color:#fff}
.icon-statistics.load-statistics:hover{width:120px;background:#420420;color:#fff}
.icon-statistics.page-statistics:hover:after,.icon-statistics.cmt-statistics:hover:after,.icon-statistics.post-statistics:hover:after,.icon-statistics.load-statistics:hover:after{display:initial}

Bước 4: Cuối cùng đặt đoạn code sau trước thẻ đóng </body>

<div class='statistics'>
<ul>
<li><span class="icon-statistics cmt-statistics"><i class="fa fa-comments-o"></i><span id="totalComment"></span></span>
</li>
<li><span class="icon-statistics post-statistics"><i class="fa fa-edit"></i><span id="totalPost"></span></span>
</li>
<li><span class="icon-statistics page-statistics"><i class="fa fa-file-powerpoint-o"></i><span id="totalPage"></span></span>
</li>
<li><span class="icon-statistics load-statistics"><i class="fa fa-spinner fa-spin"></i><span id="loadTime"></span></span>
</li>
</ul>
</div>
<script style="text/javascript">
function numberOfComments(json) {
document.getElementById("totalComment").innerHTML = json.feed.openSearch$totalResults.$t + ' comments';
}
function showpostcount(json) {
document.getElementById("totalPost").innerHTML = parseInt(json.feed.openSearch$totalResults.$t, 10) + ' posts';
}
function numberOfPages(json) {
document.getElementById("totalPage").innerHTML = json.feed.openSearch$totalResults.$t + ' pages';
}
var startTime = new Date();
function currentTime() {
var a = Math.floor((new Date() - startTime) / 100) / 10;
if (a % 1 == 0) a += ".0";
document.getElementById("loadTime").innerHTML = a + ' seconds';
}
window.onload = function() { clearTimeout(loopTime) }
var loopTime = setInterval("currentTime()", 100);
</script>
<script src="/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script>
<script src="/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script>
<script src="/feeds/pages/default?alt=json-in-script&callback=numberOfPages"></script>

Bước 5: Lưu lại và kiểm tra kết quả.

Tùy chỉnh CSS theo ý thích của bạn, nếu xung đột id hoặc class hãy thay đổi sao cho hợp lý. Cảm thấy khó khăn chỗ nào cứ để lại bình luận mình sẽ trợ giúp.

Good luck !

Đọc thêm

Share Code hiển thị tất cả bình luận tại Trang tĩnh Blogspot

Code hiển thị tất cả bình luận tại Trang tĩnh là để chúng ta dễ dàng thống kê được số bình luận trên blog của mình. Bên cạnh đó còn giúp xem được những bình luận gần đây một cách rõ ràng và đẹp mắt.

Đây là đoạn code đã có từ khá lâu rồi nhưng nay vẫn còn hoạt động tốt. Đặc biệt là những template blogspot dạng như mình đang sử dụng, chạy cực kỳ ngon.

Để tạo một trang tĩnh hiển thị được hết tất cả các bình luận trên blog của bạn thì các bạn làm như sau:

Vào quản trị Blog > Trang > Trang Mới. Chọn chế độ xem HTML chỗ phần viết bài và dán toàn bộ code sau vào:

<style scoped="scoped">
#comments-container{border:3px #1e87f0 Dashed}
.post-body ul li:before{display:none}DIV.cm-content{background:#fafafa;color:#000;padding:5px}.thongtintg{width:100px;height:40px;loat:left}.noidungcm{width:400px;height:40px;loat:left}.tentacgia{background:#1e87f0;padding:3px}.tentacgia a{color:#fff;font-weight:bold}.tentacbaiviet a{color:#1e87f0}.cm-outer{margin:0 auto;padding:0;font:normal normal 11px/normal Arial,Sans-Serif;border-top:0;background:#fafafa}.cm-text{font-size:18px}.cm-outer li{margin:0;padding:7px 10px 12px;list-style:none;clear:both;border-top:1px solid #fafafa}.cm-outer .cm-header{margin:0 0 5px;background:#f4f4f4;color:#444;padding:5px}.cm-outer .cm-content{overflow:hidden}.cm-outer img{display:block;float:right;margin:2px 10px 2px 0;border:1px solid black;background:#8fa2cb url('http://img1.blogblog.com/img/anon36.png') no-repeat 50% 50%;overflow:hidden}ul.cm-outer{padding:10px 0!important}</style>
<div id="comments-container">
Loading…</div>
<script>
var cm_config = {
home_page: "https://www.anhtrainang.com",
max_result: 50,
t_w: 32,
t_h: 32,
summary: 9999,
new_tab_link: true,
ct_id: "comments-container",
new_cm: "all comment",
interval: 30000,
alert: true
};
</script>
<script type="text/javascript">
var _0x826a=["\x68\x74\x74\x70\x3A\x2F\x2F\x6E\x61\x6D\x6B\x6E\x61\x2E\x62\x6C\x6F\x67\x73\x70\x6F\x74\x2E\x63\x6F\x6D\x2F","\x63\x6F\x6D\x6D\x65\x6E\x74\x73\x2D\x63\x6F\x6E\x74\x61\x69\x6E\x65\x72","\x20\x4B\x6F\x6D\x65\x6E\x74\x61\x72\x20\x42\x61\x72\x75\x21","\x67\x65\x74\x54\x69\x6D\x65","\x73\x65\x74\x54\x69\x6D\x65","\x3B\x20\x65\x78\x70\x69\x72\x65\x73\x3D","\x74\x6F\x47\x4D\x54\x53\x74\x72\x69\x6E\x67","","\x63\x6F\x6F\x6B\x69\x65","\x3D","\x3B\x20\x70\x61\x74\x68\x3D\x2F","\x3B","\x73\x70\x6C\x69\x74","\x6C\x65\x6E\x67\x74\x68","\x73\x75\x62\x73\x74\x72\x69\x6E\x67","\x63\x68\x61\x72\x41\x74","\x20","\x69\x6E\x64\x65\x78\x4F\x66","\x73\x65\x74","\x74\x74\x5F\x63\x6D","\x67\x65\x74","\x74\x69\x74\x6C\x65","\x75\x6E\x64\x65\x66\x69\x6E\x65\x64","\x68\x65\x61\x64","\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x73\x42\x79\x54\x61\x67\x4E\x61\x6D\x65","\x73\x63\x72\x69\x70\x74","\x63\x72\x65\x61\x74\x65\x45\x6C\x65\x6D\x65\x6E\x74","\x74\x79\x70\x65","\x74\x65\x78\x74\x2F\x6A\x61\x76\x61\x73\x63\x72\x69\x70\x74","\x69\x64","\x63\x6D\x2D\x66\x65\x65\x64\x2D\x73\x63\x72\x69\x70\x74","\x73\x72\x63","\x68\x6F\x6D\x65\x5F\x70\x61\x67\x65","\x2F\x66\x65\x65\x64\x73\x2F\x63\x6F\x6D\x6D\x65\x6E\x74\x73\x2F\x64\x65\x66\x61\x75\x6C\x74\x3F\x61\x6C\x74\x3D\x6A\x73\x6F\x6E\x2D\x69\x6E\x2D\x73\x63\x72\x69\x70\x74\x26\x72\x65\x64\x69\x72\x65\x63\x74\x3D\x66\x61\x6C\x73\x65\x26\x6D\x61\x78\x2D\x72\x65\x73\x75\x6C\x74\x73\x3D","\x6D\x61\x78\x5F\x72\x65\x73\x75\x6C\x74","\x26\x63\x61\x6C\x6C\x62\x61\x63\x6B\x3D\x73\x68\x6F\x77\x52\x65\x63\x65\x6E\x74\x43\x6F\x6D\x6D\x65\x6E\x74\x73","\x61\x70\x70\x65\x6E\x64\x43\x68\x69\x6C\x64","\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x42\x79\x49\x64","\x72\x65\x6D\x6F\x76\x65\x43\x68\x69\x6C\x64","\x70\x61\x72\x65\x6E\x74\x4E\x6F\x64\x65","\x69\x6E\x74\x65\x72\x76\x61\x6C","\x65\x6E\x74\x72\x79","\x66\x65\x65\x64","\x6F\x70\x65\x6E\x53\x65\x61\x72\x63\x68\x24\x74\x6F\x74\x61\x6C\x52\x65\x73\x75\x6C\x74\x73","\x61\x6C\x65\x72\x74","\x6E\x65\x77\x5F\x63\x6D","\x28","\x29\x20","\x3C\x75\x6C\x20\x63\x6C\x61\x73\x73\x3D\x22\x63\x6D\x2D\x6F\x75\x74\x65\x72\x22\x3E","\x6C\x69\x6E\x6B","\x72\x65\x6C","\x61\x6C\x74\x65\x72\x6E\x61\x74\x65","\x68\x72\x65\x66","\x2F","\x6C\x61\x73\x74\x49\x6E\x64\x65\x78\x4F\x66","\x2E","\x6A\x6F\x69\x6E","\x2D","\x26\x68\x65\x6C\x6C\x69\x70\x3B","\x61\x75\x74\x68\x6F\x72","\x24\x74","\x6E\x61\x6D\x65","\x2E\x24\x31","\x72\x65\x70\x6C\x61\x63\x65","\x2F\x73","\x74\x5F\x77","\x24\x31","\x67\x64\x24\x69\x6D\x61\x67\x65","\x75\x72\x69","\x23\x6E\x6F\x70\x65","\x76\x61\x6C\x75\x65","\x67\x64\x24\x65\x78\x74\x65\x6E\x64\x65\x64\x50\x72\x6F\x70\x65\x72\x74\x79","\x63\x6F\x6E\x74\x65\x6E\x74","\x6E\x65\x77\x5F\x74\x61\x62\x5F\x6C\x69\x6E\x6B","\x20\x74\x61\x72\x67\x65\x74\x3D\x22\x5F\x62\x6C\x61\x6E\x6B\x22","\x73\x75\x6D\x6D\x61\x72\x79","\x3C\x6C\x69\x3E","\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x22\x63\x6D\x2D\x68\x65\x61\x64\x65\x72\x22\x3E\x3C\x73\x74\x72\x6F\x6E\x67\x3E\x3C\x73\x70\x61\x6E\x20\x63\x6C\x61\x73\x73\x3D\x22\x74\x65\x6E\x74\x61\x63\x67\x69\x61\x22\x3E\x3C\x61\x20\x68\x72\x65\x66\x3D\x22","\x22\x20\x74\x69\x74\x6C\x65\x3D\x22","\x22","\x3E","\x3C\x2F\x61\x3E\x3C\x2F\x73\x70\x61\x6E\x3E\x20\u0110\u0103\x6E\x67\x20\x6E\x67\xE0\x79\x20\x20","\x20\x74\u1EA1\x69\x3A\x20\x3C\x73\x70\x61\x6E\x20\x63\x6C\x61\x73\x73\x3D\x22\x74\x65\x6E\x74\x61\x63\x62\x61\x69\x76\x69\x65\x74\x22\x3E\x3C\x61\x20\x63\x6C\x61\x73\x73\x3D\x22\x74\x69\x65\x75\x64\x65\x62\x61\x69\x64\x61\x6E\x67\x22\x20\x68\x72\x65\x66\x3D\x22","\x3C\x2F\x61\x3E\x3C\x2F\x73\x70\x61\x6E\x3E\x3C\x2F\x73\x74\x72\x6F\x6E\x67\x3E\x3C\x2F\x64\x69\x76\x3E","\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x22\x63\x6D\x2D\x63\x6F\x6E\x74\x65\x6E\x74\x22\x3E\x3C\x61\x20\x68\x72\x65\x66\x3D\x22","\x3E\x3C\x69\x6D\x67\x20\x61\x6C\x74\x3D\x22\u0110\x61\x6E\x67\x20\x74\u1EA3\x69\x20\u1EA3\x6E\x68\x2E\x2E\x2E\x22\x20\x73\x74\x79\x6C\x65\x3D\x22\x77\x69\x64\x74\x68\x3A","\x70\x78\x3B\x68\x65\x69\x67\x68\x74\x3A","\x74\x5F\x68","\x70\x78\x3B\x22\x20\x73\x72\x63\x3D\x22","\x22\x3E\x3C\x2F\x61\x3E","\x3C\x73\x70\x61\x6E\x20\x63\x6C\x61\x73\x73\x3D\x22\x63\x6D\x2D\x74\x65\x78\x74\x22\x3E\x42\xEC\x6E\x68\x20\x6C\x75\u1EAD\x6E\x3A\x20","\x3C\x2F\x73\x70\x61\x6E\x3E","\x3C\x2F\x64\x69\x76\x3E\x3C\x2F\x6C\x69\x3E","\x3C\x2F\x75\x6C\x3E","\x69\x6E\x6E\x65\x72\x48\x54\x4D\x4C","\x63\x74\x5F\x69\x64"];var cm_config_defaults={home_page:_0x826a[0],max_result:7,t_w:32,t_h:32,summary:9999,new_tab_link:true,ct_id:_0x826a[1],new_cm:_0x826a[2],interval:30000,alert:true},_cookie={set:function (_0x7e58x5,_0x7e58x6,_0x7e58x7){var i,_0x7e58x9;if(_0x7e58x7){i= new Date();i[_0x826a[4]](i[_0x826a[3]]()+(_0x7e58x7*24*60*60*1000));_0x7e58x9=_0x826a[5]+i[_0x826a[6]]();} else {_0x7e58x9=_0x826a[7];} ;document[_0x826a[8]]=_0x7e58x5+_0x826a[9]+_0x7e58x6+_0x7e58x9+_0x826a[10];} ,get:function (_0x7e58x6){var _0x7e58xa=_0x7e58x6+_0x826a[9],_0x7e58x9=document[_0x826a[8]][_0x826a[12]](_0x826a[11]),_0x7e58x7;for(var _0x7e58x5=0;_0x7e58x5<_0x7e58x9[_0x826a[13]];_0x7e58x5++){_0x7e58x7=_0x7e58x9[_0x7e58x5];while(_0x7e58x7[_0x826a[15]](0)==_0x826a[16]){_0x7e58x7=_0x7e58x7[_0x826a[14]](1,_0x7e58x7[_0x826a[13]]);} ;if(_0x7e58x7[_0x826a[17]](_0x7e58xa)==0){return _0x7e58x7[_0x826a[14]](_0x7e58xa[_0x826a[13]],_0x7e58x7[_0x826a[13]]);} ;} ;return null;} ,del:function (_0x7e58xb){this[_0x826a[18]](_0x7e58xb,_0x826a[7],-1);} },tt_cm=(_cookie[_0x826a[20]](_0x826a[19]))?_cookie[_0x826a[20]](_0x826a[19]):0,doc_title=document[_0x826a[21]];for(var i in cm_config_defaults){cm_config_defaults[i]=( typeof (cm_config[i])==_0x826a[22])?cm_config_defaults[i]:cm_config[i];} ;function showRecentComments(_0x7e58x12){var _0x7e58x13=_0x7e58x12[_0x826a[42]][_0x826a[41]],_0x7e58x14=parseInt(_0x7e58x12[_0x826a[42]][_0x826a[43]].$t,10),_0x7e58x15=_0x826a[7],_0x7e58x16=tt_cm,_0x7e58xe=cm_config_defaults;if(_0x7e58x16<_0x7e58x14){if(_0x7e58xe[_0x826a[44]]===true){alert((_0x7e58x14-_0x7e58x16)+_0x7e58xe[_0x826a[45]]);} else {if(_0x7e58xe[_0x826a[44]]===false){document[_0x826a[21]]=_0x826a[46]+(_0x7e58x14-_0x7e58x16)+_0x7e58xe[_0x826a[45]]+_0x826a[47]+doc_title;} else {_0x7e58xe[_0x826a[44]]((_0x7e58x14-_0x7e58x16),_0x7e58xe[_0x826a[45]]);} ;} ;} ;_0x7e58x15=_0x826a[48];for(var i=0;i<_0x7e58x13[_0x826a[13]];i++){for(var _0x7e58x7=0;_0x7e58x7<_0x7e58x13[i][_0x826a[49]][_0x826a[13]];_0x7e58x7++){if(_0x7e58x13[i][_0x826a[49]][_0x7e58x7][_0x826a[50]]==_0x826a[51]){link=_0x7e58x13[i][_0x826a[49]][_0x7e58x7][_0x826a[52]];break ;} ;} ;var _0x7e58x17=link[_0x826a[54]](_0x826a[53])+1,_0x7e58x18=link[_0x826a[54]](_0x826a[55]),_0x7e58x19=link[_0x826a[12]](_0x826a[57])[_0x826a[56]](_0x826a[16])[_0x826a[14]](_0x7e58x17,_0x7e58x18)+_0x826a[58];author=_0x7e58x13[i][_0x826a[59]][0];name=author[_0x826a[61]][_0x826a[60]];avatar=author[_0x826a[67]][_0x826a[31]][_0x826a[63]](/\/s[0-9]+(\-c|\/)/,_0x826a[64]+_0x7e58xe[_0x826a[65]]+_0x826a[66])[_0x826a[63]](/http\:\/\/www.google.com\/url\?source\=imglanding(.*?)q\=/i,_0x826a[7])[_0x826a[63]](/\.(jpg|jpeg|png|bmp|gif)(.*?)$/i,_0x826a[62]);profile=(author[_0x826a[68]])?author[_0x826a[68]][_0x826a[60]]:_0x826a[69];date=_0x7e58x13[i][_0x826a[71]][1][_0x826a[70]];content=(_0x826a[72] in _0x7e58x13[i])?_0x7e58x13[i][_0x826a[72]][_0x826a[60]][_0x826a[63]](/<br ?\/?>/ig,_0x826a[16])[_0x826a[63]](/<.*?>/g,_0x826a[7])[_0x826a[63]](/[<>]/g,_0x826a[7]):_0x826a[7];nt=(_0x7e58xe[_0x826a[73]])?_0x826a[74]:_0x826a[7];content=(content[_0x826a[13]]>_0x7e58xe[_0x826a[75]])?content[_0x826a[14]](0,_0x7e58xe[_0x826a[75]])+_0x826a[58]:content;_0x7e58x15+=_0x826a[76];_0x7e58x15+=_0x826a[77]+profile+_0x826a[78]+name+_0x826a[79]+nt+_0x826a[80]+name+_0x826a[81]+date+_0x826a[82]+link+_0x826a[78]+_0x7e58x19+_0x826a[79]+nt+_0x826a[80]+_0x7e58x19+_0x826a[83];_0x7e58x15+=_0x826a[84]+profile+_0x826a[78]+name+_0x826a[79]+nt+_0x826a[85]+_0x7e58xe[_0x826a[65]]+_0x826a[86]+_0x7e58xe[_0x826a[87]]+_0x826a[88]+avatar+_0x826a[89];_0x7e58x15+=_0x826a[90]+content+_0x826a[91];_0x7e58x15+=_0x826a[92];} ;_0x7e58x15+=_0x826a[93];document[_0x826a[37]](_0x7e58xe[_0x826a[95]])[_0x826a[94]]=_0x7e58x15;_cookie[_0x826a[18]](_0x826a[19],_0x7e58x14,7000);tt_cm=_0x7e58x14;} (function (){var _0x7e58xc=document[_0x826a[24]](_0x826a[23])[0],_0x7e58xd=document[_0x826a[26]](_0x826a[25]),_0x7e58xe=cm_config_defaults;_0x7e58xd[_0x826a[27]]=_0x826a[28];_0x7e58xd[_0x826a[29]]=_0x826a[30];_0x7e58xd[_0x826a[31]]=_0x7e58xe[_0x826a[32]]+_0x826a[33]+_0x7e58xe[_0x826a[34]]+_0x826a[35];_0x7e58xc[_0x826a[36]](_0x7e58xd);setInterval(function (){var _0x7e58xf=document[_0x826a[26]](_0x826a[25]);_0x7e58xf[_0x826a[27]]=_0x826a[28];_0x7e58xf[_0x826a[29]]=_0x826a[30];_0x7e58xf[_0x826a[31]]=_0x7e58xe[_0x826a[32]]+_0x826a[33]+_0x7e58xe[_0x826a[34]]+_0x826a[35];var _0x7e58x10=document[_0x826a[37]](_0x826a[30]);_0x7e58x10[_0x826a[39]][_0x826a[38]](_0x7e58x10);_0x7e58xc[_0x826a[36]](_0x7e58xf);} ,_0x7e58xe[_0x826a[40]]);} )();
</script>

Lưu ý: thay link https://www.anhtrainang.com thành link blog các bạn. Cuối cùng xuất bản Trang và xem kết quả nhé!

Rất đơn giản để tạo được một trang tĩnh hiển thị được tất cả các bình luận trên blog của các bạn đúng không nào. Nếu thấy hữu ích hãy để lại bình luận ủng hộ nhé! Good Luck!

Đọc thêm

Những đoạn HTML Social Share (chia sẻ MXH) phổ biến cho Blogger

Button chia sẻ bài viết lên các trang mạng xã hội là 1 thành phần không thể thiếu với mỗi template blogspot. Việc bố trí bày biện nó trên website cũng phản ánh rất nhiều con mắt thẩm mĩ của mỗi Blogger. Nhưng trước khi làm điều đó bạn cần có code HTML tự động tạo liên kết valid với từng mạng xã hội.

Những đoạn HTML Social Share (chia sẻ MXH) thường sử dụng cho Blogger

Bài viết này sẽ chia sẻ tới bạn đọc button share tới các mạng xã hội thông dụng hiện nay gồm

Facebook
Twitter
Pinterest
Linkedin
VK
Yummly
Tumblr
Buffer
Reddit
Stumble

Nếu bạn có code các mạng xã hội khác, hãy đóng góp ở mục comment để bài viết được hoàn thiện hơn.

1. Facebook

<a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title="+ data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=200, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'>Facebook</a>

2. Twitter

<a expr:href='"http://twitter.com/share?url=" + data:post.url + "&title=" + data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=200, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'>Twitter</a>

3. Pinterest

<a expr:href=""http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.firstImageUrl + "&description=" + data:post.snippet" href="https://www.blogger.com/null" onclick="window.open(this.href, 'windowName', 'width=800, height=600, left=200, top=24, scrollbars, resizable'); return false;" rel="nofollow" target="_blank" title="Share to Pinterest">Pinterest</a>

4. Linkedin

<a expr:href='"http://www.linkedin.com/shareArticle?url=" + data:post.url + "&title="+ data:post.title' onclick='window.open(this.href, 'windowName', 'width=1000, height=700, left=200, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'>Linkedin</a>

5. VK

<a expr:href='"http://vkontakte.ru/share.php?url=" + data:post.url + "&title="+ data:post.title' onclick='window.open(this.href, 'windowName', 'width=1000, height=700, left=200, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank' title='Share to VK'>VK</a>

6. Yummly

<a expr:href='"http://www.yummly.com/urb/verify?url=" + data:post.url + "&title="+ data:post.title' onclick='window.open(this.href, 'windowName', 'width=1000, height=700, left=200, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank' title='Share to Yummly'>Yummly</a>

7. Tumblr

<a expr:href='"http://www.tumblr.com/share/link?url=" + data:post.url + "&title="+ data:post.title' onclick='window.open(this.href, 'windowName', 'width=550, height=700, left=200, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank' title='Share to Tumblr'>Tumblr</a>

8. Buffer

<a expr:href='"https://bufferapp.com/add?url=" + data:post.url + "&text="+ data:post.title' onclick='window.open(this.href, 'windowName', 'width=1000, height=700, left=200, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank' title='Share to Buffer'>Buffer</a>

9. Reddit

<a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title="+ data:post.title' onclick='window.open(this.href, 'windowName', 'width=1000, height=700, left=200, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank' title='Share to Reddit'>Reddit</a>

10. Stumble

<a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title="+ data:post.title' onclick='window.open(this.href, 'windowName', 'width=1000, height=700, left=200, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank' title='Share to StumbleUpon'>Stumble</a>

Trên đây là code tạo nút chia sẻ bài viết lên mạng xã hội, hoàn toàn bằng HTML, còn việc bố trí, css như nào là do bạn hoàn toàn kiểm soát. Mạng xã hội là 1 thành phần rất quan trọng trong việc SEO website vì vậy bạn nên tạo càng nhiều tương tác với nhiều mạng xã hội càng tốt nhé !

Good Luck !

Đọc thêm