Fb: November 2017

Bạn và người khác

44 bình luận

Bạn và người khác

44 bình luận

বিজ্ঞান Blogspot Stt đã cập nhật trạng thái của anh ấy
Quản trị viên • Saturday, November 25, 2017 •

Bài viết tản mản đầu tiên. Mà cũng không biết nó có phải tản mạn không nữa tại cái này liên quan đến Blogspot mà cái ý tưởng như cái thủ thuật vậy :v
Nói đến đây chắc nhiều bạn vẫn chưa biết nghệ thuật bo tròn là gì và ngay cả mình cũng chỉ mới phát hiện ra nó mới cách đây 2 tiếng mặc dù mình đã làm rất nhiều lần nhưng chưa biết nó là 1 nghệ thuật :v

Nghệ thuật bo tròn CSS nói nôm na là nghệ thuật "border-radius". Nói ngang đây chắc nhiều bạn biết chút ít về CSS cũng hiểu :v

Tại sao mình nói đây là nghệ thuật ? Bởi "hầu hết" (không phải là tất cả) các CSS, widget... khi sử dụng border-radius (bo tròn) sẽ làm chúng đẹp và trở nên tỉ mỉ hơn.

Các bạn cứ thử xem :v Ví dụ nhé:

- 1 avatar của những người bình luận các bạn thấy thế nào giữa 1 cái ảnh vuông và 1 cái ảnh tròn? Hẳn rất nhiều bạn sẽ cảm thấy tròn sẽ đẹp hơn bởi vì nó tạo ra 1 "đường cong mềm mại" với sự bo tròn "tỉ mỉ từng khung hình" :v

- 1 ví dụ khác ở cái nút Back to Top và Back to Home của Blog các bạn (hay ở blog mình chẳng hạn) thì nhìn qua các blog thường dùng 2 cái nút đó với border-radius luôn luôn khác 0 :v và đa số là border-radius: 100%. Có 1 vài blog cũng có button vuông nhưng border-radius luôn luôn lớn hơn 0 !

- Ví dụ điển hình ngay Blog Bác Sĩ Windows, đây là blog sử dụng nghệ thuật này rất điêu luyện bởi vì sao ? Không phải lúc nào, cái gì nó bo tròn cũng đẹp. Bạn nào chưa chú ý kĩ thì hãy nhìn kĩ blog đó và từng chi tiết mình kể nhé:

+ Đầu tiên đạp vào con mắt cái khung tìm kiếm.

+ Thứ 2 là cái thumbnail bài viết trong kết quả tìm kiếm của Search Live. Hãy nhìn kĩ nhé, BSW đã bo tròn nó 50% (border-radius: 50%) cái thumbnail này nhìn rất đẹp.

+ Còn rất nhiều thứ khác nữa và cả những chi tiết rất nhỏ mà đôi khi các bạn còn không để ý cơ :v

Nay đã có rất nhiều blog đã biết và sử dụng CSS bo tròn nhưng chưa hề hay biết đó là nghệ thuật từ bao giờ. Nhưng sử dụng đúng, đẹp thì mới gọi là nghệ thuật. Không phải cái gì cũng dùng đến nó mà có những thứ không nên đụng vào nó !

Bài viết hôm nay đến thế thôi, hơi xàm tí nhưng tâm sự của mình đó :v Nói cho các bạn biết đó là một nghệ thuật. Hi vọng sau bài viết này, các bạn sẽ để ý hơn đến nghệ thuật "border-radius", nó sẽ giúp các bạn làm đẹp blog rất nhiều đấy !

#Blogspot #Stt

Nghệ thuật bo tròn CSS trong Blogspot - Khanh Blogger

Bạn và người khác

70 bình luận

Bạn và người khác

70 bình luận

বিজ্ঞান Blogspot Tips đã thêm một thủ thuật mới
Quản trị viên • Thursday, November 23, 2017 •

TKN đã quay trở lại :v Trong thời gian vừa qua đã có rất nhiều bạn gửi yêu cầu viết thủ thuật đến mình. Đang lẽ cái bài viết hôm nay mà mình đăng sẽ không phải bài này đâu nhưng do thớt nó hối quá nên phải ra kẻo ẻm nó mong mặc dù chưa đầy 1 ngày :3 Như cái tiêu đề thì hôm nay mình sẽ hướng dẫn cho các bạn cách thêm biệt hiệu sau tên người bình luận cho Blogspot siêu đơn giản nhưng không hề dễ dàng thành công :3 Cái này chỉ áp dụng thẻ B:IF thôi nên cũng dễ hiểu lắm =)))

Thumbnail by Huỳnh Hoài Bảo đập chai :3

Các bước thực hiện
Bước 1: Các bạn vào chỉnh sửa HTML, tìm đoạn dạng <div class='comment_name'>. Trong đoạn code đó sẽ có 1 đoạn thường sẽ là:

<a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
<data:comment.author/> </a>

Các bạn thêm đoạn code dưới vào sau đoạn code bên trên là OK :v (nghĩa là sau cái thẻ đóng </a> ý :v)

<b:if cond='data:comment.author == "Trọng Khanh Nguyễn"'><style type='text/css'>.top1_cmt {background: #ededed; border-radius: 90px; font-weight: 500; padding: 2px 10px 2px 10px}</style><span class='top1_cmt'> <i aria-hidden='true' class='fa fa-trophy' style='color: #efdb04'/> KHANH ĐẸP CHOAI</span></b:if>

Trong đó:
Trọng Khanh Nguyễn các bạn thay thành người muốn đặt biệt hiệu .
KHANH ĐẸP CHOAI là biệt hiệu mà bạn muốn đặt cho người đó.

Code trên mình dùng b:if với thẻ lấy dữ liệu là data:comment.author (lấy dữ liệu tên người bình luận)

VD: <b:if cond='data:comment.author == "Trọng Khanh Nguyễn"'>SỐ 1</b:if> nghĩa là cái chữ SỐ 1 đó chỉ hiển thị khi người bình luận tên Trọng Khanh Nguyễn. Chắc các bạn hiểu nhỉ :3 Mình giải thích vậy vốn dĩ để các bạn hiểu hơn về nó để sau này còn áp dụng vài thứ nữa =)))
Đến đây thì cũng xong rồi đấy, nếu bạn muốn đặt biệt hiệu cho nhiều người thì chỉ việc copy ra nhiều cái code B:IF như trên thôi :v Một vài bạn biết chút ít về CSS cũng có thể chỉnh lại CSS cái biệt hiệu ở trên nằm trong thẻ <style> để đẹp hơn, vừa với ý bạn :v

Xong rồi đấy, đơn giản không :v À đến đây thì bạn nào muốn thêm biệt hiệu ở blog mình thì cũng có thể comments phía dưới nhé :v Các bạn không hiểu hay muốn góp ý chỗ nào thì cứ việc để lại bình luận, mình sẽ giải đáp cho các bạn, đừng ngại nhé =))) (Nhìn lại cái bài viết thấy có 1 bước :v)

Chúc các bạn thành công !

#Blogspot #Tips

Hướng dẫn thêm biệt hiệu sau tên người bình luận cho Blogspot - Khanh Blogger

Bạn và người khác

44 bình luận

Bạn và người khác

44 bình luận

বিজ্ঞান Blogspot Tips đã thêm một thủ thuật mới
Quản trị viên • Tuesday, November 21, 2017 •

Chào cả nhà. Lâu rồi không viết thủ thuật cho mọi người. Hôm nay sẽ là bài viết không phải về thủ thuật mà là vấn đề về thủ thuật Blogspot. Bài viết này chắc các SEOER sẽ quan tâm đấy. Nó sẽ không quan trọng đối với những bạn dùng Blog không quan tâm đến SpeedInsights.

Nhác làm thumbnail nên mượn tạm ảnh của BSW vậy :3 Mặc dù title không phù hợp :v

Gần đây thì Bác Sĩ Windows có share một widget Top những người bình luận cho Blogspot. Vì nó được thiết kế bởi 1 bàn tay có kinh nghiệm lâu năm nên rất đẹp và được nhiều người dùng. Tuy nhiên sự đẹp lạ kì ấy lại làm cho những SEOER đang dùng widget này một sự lãng quên đối với SpeedInsights.

Tiện đây mình nói luôn. SpeedInsights là công cụ test tốc độ tải trang cho Blogspot. Ở đây nhiều bạn cứ hiểu lầm là cái này nó sai, rồi đưa ra vài giả thiết bảo "Blog tôi 14 điểm vẫn load nhanh đấy thôi"..v...v.. Hiểu theo nghĩa gốc thì là vậy. Đúng là đôi khi vào mấy cái web/blog mặc dù điểm trên SpeedInsights nó không được cao nhưng tốc độ load nó siêu nhanh. Quá sai lầm. Bây giờ mình sẽ giải nghĩa luôn nhé. SpeedInsights là công cụ kiểm tra tốc độ TẢI DỮ LIỆU của web/blog. Nó không bao giờ đi kiểm tra tốc độ load cả. Nếu muốn kiểm tra các bạn có thể dùng cái js load gì đấy ngay trên blog cũng được. Nó vô cùng quan trọng đối với việc SEO. Bởi một Web/blog có một điểm cao trên SpeedInsights đồng nghĩa cơ hội SEO sẽ cao hơn và dễ dàng hơn.

Vấn đề chính

Vì sao ngay ở phần đầu mình lại nói widget Top những người bình luận cho Blogspot lại ảnh hưởng đến việc SEO. Đơn giản, để khách quan các bạn hãy thử test speed trên SpeedInsights trước và sau khi thêm nó vào. Nó giảm rất nhiều đúng không ? Chắc hẳn là có. Cái này còn tùy thuộc vào người bình luận nữa. Khi mình sử dụng thì thấy blog giảm từ 90 điểm xuống còn 75 điểm. Ôi má ơi thật kinh khủng ! Vì sao lại thế. Đơn giản là vì cái widget đó chưa nén Avatar của người bình luận. Các bạn hãy thử click phải copy link ảnh avatar trên widget rồi paste vào tab mới, sẽ ra một cái ảnh to đùng ! Nó sẽ làm giảm rất nhiều điểm SEOER đấy. Ban đầu mình thấy cái việc này khá nhỏ không cần phải viết bài, chỉ định qua bình luận trên Bác Sĩ Windows rồi nói cho anh ý, nhưng như thế chỉ một vài người xem được thôi, hoặc thậm chí chỉ anh Trường nghe thôi. Vì người ta ít để ý đến comments lắm, chỉ xem bài viết chất lượng rồi dùng thôi. Vậy nên mình viết bài để cảnh báo các bạn. Mình không bảo các bạn bỏ cái widget đó đi mà thay vào đó hãy thêm một đoạn JS nhỏ để nén ảnh. Hoặc bỏ luôn avatar trong widget đó :v

Kết luận

Mình đính chính lại không phải mình ghét dì anh Trường Nguyễn đâu nha :v Bạn nào xem hết bài viết sẽ thấy mình không bôi nhọ danh dự gì cả mà chỉ là chỉ cách cho các SEOER tối ưu thôi (ngay tiêu đề bài viết cũng thể hiện rõ điều đó). Mình cũng là một SEOER quèn, chưa có kinh nghiệm nên cũng còn học hỏi nhiều anh ý, lúc trước thấy ảnh tối ưu mà Points từ 31 lên 88 :v (Kinh dị quá mẹ ơi). Mình hi vọng với bài viết này sẽ giúp các bạn tối ưu dược một phần Blogspot của mình, biết đâu sau bài viết anh ý sẽ viết 1 bài hướng dẫn nén ảnh các thứ thì sao :v Tóm gọn lại là...Chúc các bạn thành công (chỉ biết nói mỗi câu đó :v)

#Blogspot #Tips

Hướng dẫn tối ưu Widget Top những người bình luận - Shared by Bác Sĩ Windows - Khanh Blogger

Bạn và người khác

35 bình luận

Bạn và người khác

35 bình luận

বিজ্ঞান Blogspot Tips đã thêm một thủ thuật mới
Quản trị viên • Sunday, November 19, 2017 •

Hello các bạn đã quay trở lại với blog mình. Theo yêu cầu từ nhiều bạn thì hôm nay mình sẽ chia sẻ Widget Top bình luận mà mình đã test nó thành công mấy ngày qua :v Nó đơn giản chỉ là lọc số bình luận của từng ID rồi xếp hạng chúng chứ không dùng Host gì cả như nhiều bạn nói.

DEMO

Để thực hiện các bạn chỉ cần chèn đoạn code sau và nơi muốn hiển thị

<style type="text/css">
.so_cmt {background: #e8e8e8; color: #adabab; padding: 3px; border-radius: 10px; padding-left: 5px; padding-right: 5px}
.top-commentators b {border: 1px solid #4267b2; border-radius: 100%; padding: 6px; color: #fff; font-size: 13px; background: #4267b2; padding-left: 9px; padding-right: 9px}
.top-commentators a {color: #4267b2}
.top-commentators {
margin: 3px 0;
border-bottom: 1px dotted #ccc;
padding: 8px;
}
.avatar-top-commentators {
vertical-align:middle;
border-radius: 30px;
}
.top-commentators .commenter-link-name {
padding-left:0;
}
</style>
<script type="text/javascript">
var maxTopCommenters = 5;
var minComments = 1;
var numDays = 0;
var excludeMe = true;
var excludeUsers = ["Anonymous", "Trọng Khanh Nguyễn"];
var maxUserNameLength = 42;
//
var txtTopLine = '<b>[#]</b> [image] [user] <span class="so_cmt"><i class="fa fa-comment" aria-hidden="true"></i> [count]</span>';
var txtNoTopCommenters = 'No top commentators at this time.';
var txtAnonymous = '';
//
var sizeAvatar = 33;
var cropAvatar = true;
//
var urlNoAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu34O3a5hXcElr6Nxfd9vo-QEccZksSBjLjD5tkUbHfr3G1qFVKB6XrbQbuoFssRxdGGtgLiGsLbn60yU5vBU1VO6x0aUrC0ub5RCliPnkCCBsVDfcRNU6eaBiQJpaWGecFSBxwEcdXIcj/s1600/avatar_blue_m_96.png" + sizeAvatar;
var urlAnoAvatar = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTN1pMM8rhtu56EnnwYZluPMIDkLfkk6b-8Crans9CoNDyVBsrYXJL8FIQq8l83YdJNsEscc6WzQw0ixRXGNirsSbzLOqCR1IIQtAeZnRdNwii5HNPkyqswXu5dAgyD-66H-ENgcmUfklq/s1600/avatar1.png' + sizeAvatar;
var urlMyProfile = '';
var urlMyAvatar = '';
if(!Array.indexOf) {
Array.prototype.indexOf=function(obj) {
for(var i=0;i<this.length;i++) if(this[i]==obj) return i;
return -1;
}}
function replaceTopCmtVars(text, item, position)
{
if(!item || !item.author) return text;
var author = item.author;
var authorUri = "";
if(author.uri && author.uri.$t != "")
authorUri = author.uri.$t;
var avaimg = urlAnoAvatar;
var bloggerprofile = "http://www.blogger.com/profile/";
if(author.gd$image && author.gd$image.src && authorUri.substr(0,bloggerprofile.length) == bloggerprofile)
avaimg = image.src;
else {
var parseurl = document.createElement('a');
if(authorUri != "") {
parseurl.href = authorUri;
avaimg = 'http://www.google.com/s2/favicons?domain=' + parseurl.hostname;
}
}
if(urlMyProfile != "" && authorUri == urlMyProfile && urlMyAvatar != "")
avaimg = urlMyAvatar;
if(avaimg == "http://img2.blogblog.com/img/b16-rounded.gif" && urlNoAvatar != "")
avaimg = urlNoAvatar;
var newsize="s"+sizeAvatar;
avaimg = avaimg.replace(/\/s\d\d+-c\//, "/"+newsize+"-c/");
if(cropAvatar) newsize+="-c";
avaimg = avaimg.replace(/\/s\d\d+(-c){0,1}\//, "/"+newsize+"/");
var authorName = author.name.$t;
if(authorName == 'Anonymous' && txtAnonymous != '' && avaimg == urlAnoAvatar)
authorName = txtAnonymous;
var imgcode = '';
if(authorUri!="") imgcode = '<a href="'+authorUri+'">'+imgcode+'</a>';
if(maxUserNameLength > 3 && authorName.length > maxUserNameLength)
authorName = authorName.substr(0, maxUserNameLength-3) + "...";
var authorcode = authorName;
if(authorUri!="") authorcode = '<a class="commenter-link-name" href="'+authorUri+'">'+authorcode+'</a>';
text = text.replace('[user]', authorcode);
text = text.replace('[image]', imgcode);
text = text.replace('[#]', position);
text = text.replace('[count]', item.count);
return text;
}
var topcommenters = {};
var ndxbase = 1;
function showTopCommenters(json) {
var one_day=1000*60*60*24;
var today = new Date();
if(urlMyProfile == "") {
var elements = document.getElementsByTagName("*");
var expr = /(^| )profile-link( |$)/;
for(var i=0 ; i<elements.length ; i++)
if(expr.test(elements[i].className)) {
urlMyProfile = elements[i].href;
break;
}
}
if(json && json.feed && json.feed.entry && json.feed.entry.length) for(var i = 0 ; i < json.feed.entry.length ; i++ ) {
var entry = json.feed.entry[i];
if(numDays > 0) {
var datePart = entry.published.$t.match(/\d+/g);
var cmtDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]);

var days = Math.ceil((today.getTime()-cmtDate.getTime())/(one_day));
if(days > numDays) break;
}
var authorUri = "";
if(entry.author[0].uri && entry.author[0].uri.$t != "")
authorUri = entry.author[0].uri.$t;
if(excludeMe && authorUri != "" && authorUri == urlMyProfile)
continue;
var authorName = entry.author[0].name.$t;
if(excludeUsers.indexOf(authorName) != -1)
continue;
var hash=entry.author[0].name.$t + "-" + authorUri;
if(topcommenters[hash])
topcommenters[hash].count++;
else {
var commenter = new Object();
commenter.author = entry.author[0];
commenter.count = 1;
topcommenters[hash] = commenter;
}
}
if(json && json.feed && json.feed.entry && json.feed.entry.length && json.feed.entry.length == 200) {
ndxbase += 200;
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&start-index='+ndxbase+'&alt=json-in-script&callback=showTopCommenters"></'+'script>');
return;
}
// chuyen doi numtovar TKN
var tuplear = [];
for(var key in topcommenters) tuplear.push([key, topcommenters[key]]);
tuplear.sort(function(a, b) {
if(b[1].count-a[1].count)
return b[1].count-a[1].count;
return (a[1].author.name.$t.toLowerCase() < b[1].author.name.$t.toLowerCase()) ? -1 : 1;
});
var realcount = 0;
for(var i = 0; i < maxTopCommenters && i < tuplear.length ; i++) {
var item = tuplear[i][1];
if(item.count < minComments)
break;
document.write('<di'+'v class="top-commentators">');
document.write(replaceTopCmtVars(txtTopLine, item, realcount+1));
document.write('</d'+'iv>');
realcount++;
}
if(!realcount)
document.write(txtNoTopCommenters);
}
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&alt=json-in-script&callback=showTopCommenters"></'+'script>');
</script>

Chú thích:
Màu đỏ là số người mà bạn muốn hiển thị trên Top Bình luận
Màu tím là số ngày nó thống kê và lọc. Ở đây mình để 0 là lọc toàn thời gian, các bạn muốn chỉnh lại thì thay ở phần con số màu tím đó, VD 1 tuần thì chỉnh lại thành 7.
Phần in nghiêng các bạn thay thành tên không muốn hiển thị trên TOP BÌNH LUẬN, VD như tên các bạn chẳng hạn.

Tổng kết
Vậy là mình đã hướng dẫn xong các bạn cách tạo widget Top người bình luận cho Blogspot. Khi thêm cái này nó sẽ chỉ giảm 1 điểm SpeedInsights nên các bạn yên tâm sử dụng. Bạn nào khi chèn vào mà nó chưa hiện thì các bạn hãy chờ chút nhé ! Nó sẽ hiện ngay thôi vì đang lọc mà =)))

Chúc các bạn thành công !

#Blogspot #Tips

Widget Top người bình luận nhiều nhất cho Blogspot - Khanh Blogger

Bạn và người khác

38 bình luận

Bạn và người khác

38 bình luận

বিজ্ঞান Blogspot Tips đã thêm một thủ thuật mới
Quản trị viên • Friday, November 17, 2017 •

Hello các bạn. Hôm nay mình sẽ chia sẻ cho các bạn 1 button Share bài viết với hiệu ứng cực đẹp dạng mở Tab.

DEMO

Để làm được nó rất đơn giản chỉ cần thêm đoạn code sau vào nơi muốn hiển thị trong theme của bạn:

<style>
.share-btn {
position: absolute;
background-color: #f7f7f7;
;
border-radius: 100px;
width: 200px;
height: 72px;
box-shadow: 0 5px 10px rgba(0, 0, 40, 0.03);
transition: all 0.4s cubic-bezier(0.3, 0, 0, 1.3);
overflow: hidden;
cursor: pointer;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
font-family: Roboto;
}
.share-btn .cta {
position: absolute;
color: #f5ce67;
text-transform: uppercase;
font-size: 22px;
letter-spacing: 1px;
transition: all 0.25s ease-in-out;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.share-btn .close {
position: absolute;
right: 38px;
top: 31px;
cursor: pointer;
color: #cfd2d9;
font-size: 20px;
opacity: 0;
transition: all 0.4s cubic-bezier(0.3, 0, 0, 1.3);
transform: rotate(-45deg);
transform-origin: center center;
}
.share-btn .social {
width: 70%;
padding-left: 0;
list-style-type: none;
margin: 75px auto 0 auto;
}
.share-btn .social span {
float: right;
}
.share-btn .social li {
padding-bottom: 15px;
transform: scale(0.7) translateX(10px) translateY(-10px);
transition: all 0.25s ease-in-out;
transform-origin: 0% 0%;
opacity: 0;
}
.share-btn .social li:nth-child(1) {
color: #3b5998;
}
.share-btn .social li:nth-child(2) {
color: #55acee;
}
.share-btn .social li:nth-child(3) {
color: #d34836;
}
.share-btn .fake-input {
width: 60%;
margin: 10px auto 0 auto;
background-color: #f3f6fb;
color: #b2b5bc;
border-radius: 10px;
padding: 15px;
font-size: 15px;
overflow: hidden;
}
.clicked {
width: 260px;
height: 270px;
border-radius: 50px;
cursor: auto;
}
.share-btn.clicked .cta {
left: 40px;
top: 30px;
transform: translateX(0) translateY(0);
color: #cfd2d9;
}
.share-btn.clicked .close {
opacity: 1;
transform: rotate(0deg);
}
.share-btn.clicked .social li {
transform: scale(1) translateX(0) translateY(0);
opacity: 1;
}
.share-btn.clicked .social li:nth-child(1) {
transition-delay: .05s;
}
.share-btn.clicked .social li:nth-child(2) {
transition-delay: .1s;
}
.share-btn.clicked .social li:nth-child(3) {
transition-delay: .15s;
}

</style>
<div class="share-btn">
<span class="cta">Share</span>
<div class="close"><i class="fa fa-times" aria-hidden="true"></i></div>
<ul class="social">
<li><a style="color: #3d4be2" expr:href='"http://www.facebook.com/sharer/sharer.php?u=" + data:blog.url' onclick='window.open(this.href,'sharer', 'toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow'>Facebook<span>12</span></a></li>
<li><a style="color: #a3d8ff" expr:href='"http://twitter.com/home?status=" + data:blog.url' onclick='window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=436" ); return false;' rel='nofollow'>Twitter<span>50</span></a></li>
<li><a style="color: #ff0f02" expr:href='"https://plus.google.com/share?url=" + data:blog.url' onclick='javascript:window.open(this.href," " ," menubar=no,toolbar=no,resizbutton_le=yes,scrollbars=yes,height=600,width=600" ); return false; ' rel='nofollow'>Google +<span>248</span></a></li>
</ul>
<div class="fake-input"><data:blog.url/></div>
</div>

<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script >
$('.share-btn').click(function(){
$(this).addClass("clicked");
});

$('.close').click(function (e) {
$('.clicked').removeClass('clicked');
e.stopPropagation();
});

</script>

Lại một thủ thuật nữa mình chia sẻ. Hi vọng với button Share này sẽ làm blog bạn trở nên chuyên nghiệp hơn.
Chúc các bạn thành công !

#Blogspot #Tips

Tạo button Share hiệu ứng đẹp cho Blogspot - Khanh Blogger

Bạn và người khác

27 bình luận

Bạn và người khác

27 bình luận

বিজ্ঞান Blogspot Tips đã thêm một thủ thuật mới
Quản trị viên • Thursday, November 16, 2017 •

Hello xin chào các bạn đã quay trở lại với Blog TKN :v

Sau nhiều ngày edit blog thì mình khi kiểm tra Speed Google thì nó rất chậm, từ 73 điểm khi mới thay theme sau edit xuống còn 50. Nhưng sau đó, mình đã tìm tòi, khám phá tài liệu trên mạng để đúc kết một vài kinh nghiệm giúp tối ưu, tăng tốc độ tải trang cho Blog. Việc này giúp ích rất nhiều trong việc SEO của các bạn. Bắt đầu nhé !

Như các bạn đã thấy, ban đầu blog mình khá nặng, nhưng sau những cách làm dưới đây, tốc độ nó nhanh hẳn. Cùng thực hiện nào !

1. Loại bỏ JavaScript và CSS chặn hiển thị trong nội dung trong màn hình đầu tiên

Ở bước này, Google nó sẽ không cảnh báo đúng 100% mà dường như là sai be bét (đối với blog mình) :v Khi bạn chạy phân tích, nó sẽ báo lỗi Javascript chặn hiển thị ở phần Loại bỏ JavaScript và CSS chặn hiển thị trong nội dung trong màn hình đầu tiên. Để loại bỏ VD đoạn JS là

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'/>

Thì bạn chỉ cần thêm async='async' sẽ là

<script async='async'src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js' type='text/javascript'></script>

Nhưng có một vài đoạn mã nó hiển thị nhưng Google lại báo không, vậy nên trước khi thêm bạn cần kiểm tra xem nó có hoạt động ở trang chủ không, nếu không thì hãy thêm còn có thì đừng dại mà thêm kẻo nó không hiện nhé !

2. Sử dụng thẻ điều kiện

Việc này rất quan trọng, một JS khi bạn thêm chỉ để chạy ở trang bài viết mà bạn lại không đặt vào trong thẻ điều kiện cho nó thì quả thực là sai lầm. Nó sẽ chạy ở tất cả các trang và tất nhiên là sẽ làm chậm Blog của bạn. Vậy nên hãy thêm thẻ điều kiện cần thiết khi muốn JS, CSS hoạt động ở trang nhất định nào đó nhé !

3. Tối ưu hình ảnh

Đây là bước nhiều bạn bảo nó không ảnh hướng nhiều nhưng Ảnh là một trong những thành phần quyết định đến tốc độ Blog. Sau khi làm bước này mình cảm thấy khá thích thú khi nó lên tận 7 điểm :v

Ở nhiều blog, Thumbnail ngoài trang chủ thường được gắn là Ảnh đầu tiên bài viết. Thường thì những bức ảnh đó thường khá nặng vì ảnh trong bài viết thì phải đẹp cũng như kích thước lớn nữa. Nên nó sẽ ảnh hưởng rất nhiều đến Blog của bạn. Vậy làm thế nào để giải quyết vấn đề đó ?

Mình có kham khảo một vài bài viết trên mạng thì nó cũng sẽ lấy ảnh đầu tiên nhưng sẽ cắt đi cho vừa với Thumbnail. Cũng khá hay nhưng nó chỉ là giảm kích thước chứ không nén ảnh nên ảnh sau khi cắt vẫn sẽ rất nặng. Vậy phải làm thế nào?
Để tối ưu thì mình sẽ lấy ảnh đầu tiên, một bức ảnh cực nhỏ đủ làm Thumbnail và đã nén nhưng khi độc giả xem bài viết vẫn sẽ thấy một bức ảnh đầu tiên tuyệt đẹp.
Cách này lúc trước mình đã hướng dẫn các bạn ở LinkThuThuat.com, các bạn có thể xem lại bài viết TẠI ĐÂY.

4. Không sử dụng ảnh làm Background cho Blog

Có thể nói làm như vậy thì blog sẽ đẹp hơn nhưng quả là sai lầm khi bạn hãy tưởng tượng, một Thumbnail thôi cũng đã bị Google cảnh báo chứ nói gì cái ảnh Background to bự thế kia :v Nói ngang đấy chắc các bạn cũng tự hiểu ha :v

5. Xóa CSS, JS thì phải xóa triệt để

Đôi khi các bạn xài theme khác rồi tùy biến lại thì trong quá trình edit theme, bạn sẽ bỏ những widget, những thứ không cần thiết nhưng đa số bạn chỉ xóa phần hiển thị của nó còn phần JS, CSS của nó bạn gần như không quan tâm.

Khi xóa những đoạn code hiển thị không cần thiết, bạn cần phải tìm những CSS, JS liên quan và xóa luôn nó, việc này sẽ giúp Blog load nhanh hơn rất nhiều đấy.

Ví dụ mình có đoạn code sau:

<div class="testcss_t" id="jscss">ABC</div>

Chẳng hạn bạn cần xóa đoạn code đó thì bạn cần phải tìm hết những thứ liên quan đến nó và xóa đi, ví dụ ở đây mình sẽ tìm .testcss và jscss.
Lưu ý: Trước khi xóa, bạn cần kiểm tra xem còn code nào sử dụng thuộc tính đó nữa không, nếu có thì đừng dại mà xóa nhé =))))

6. Hạn chế lấy dữ liệu từ Blogspot

Ở blog mình thì phần nào mình lấy dữ liệu cũng đều bị cảnh báo, ví dụ như lấy dữ liệu thống kê nhận xét mới sẽ có JS như sau:

<script src='/feeds/comments/summary?alt=json-in-script&callback=nhanxetmoi'></script>

Những đoạn code này chiếm tốc độ load khá cao, vậy nên các bạn nên hạn chế lấy dữ liệu để hiển thị cho Blog nhá !
Có 1 cách để tối ưu nó nhưng mình vẫn chưa tìm ra :v

7. Tận dụng bộ nhớ Cache của trình duyệt cho Blogger

Đây là cách tối thượng nhất trong việc tối ưu Blogspot. Nói nôm na là khi người dùng và blog bạn thì máy chủ sẽ lưu lại các JS, CSS, code... của blog trước đó và các lần sau khi vào nó sẽ rất nhanh mà không cần phải tải lại các JS, CSS, code đó nữa.
Rất đơn giản chỉ cần chèn đoạn code này vào Blog

<include expiration='7d' path='*.css'/>
<include expiration='7d' path='*.js'/>
<include expiration='3d' path='*.gif'/>
<include expiration='3d' path='*.jpeg'/>
<include expiration='3d' path='*.jpg'/>
<include expiration='3d' path='*.png'/>
<meta content='public' http-equiv='Cache-control'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta CONTENT='text/javascript' http-equiv='Content-Script-Type'/>
<meta CONTENT='text/css' http-equiv='Content-Style-Type'/>
<meta content='tue, 02 jun 2020 00:00:00 GMT' http-equiv='expires'/>
<meta charset='utf-8'/>
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<meta content='blogger' name='generator'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>

Sau khi là 7 cách trên thì đây là kết quả của Blog mình

Thật tuyệt phải không nào ! Hi vọng với những cách làm trên sẽ giúp Blog của bạn có một tốc độ tải BÀN THỜ :v

Chúc các bạn thành công !

#Blogspot #Tips

Tối ưu tốc độ tải trang cho Blogspot - Khanh Blogger

Bạn và người khác

15 bình luận

Bạn và người khác

15 bình luận

বিজ্ঞান Stt đã cập nhật trạng thái của anh ấy
Quản trị viên • Monday, November 13, 2017 •

Như tiêu đề bài viết thì đây là bài viết đầu tiên của mình. Và cũng rất vui khi được mọi người ủng hộ làm lại blog qua bao nhiêu sóng bão. Hôm nay bài viết này với mục đích được liên kết với những blog khác nhằm mục đích trao đổi, giao lưu, học hỏi !

Đây là blog cá nhân chính thức của mình. Trong quá trình viết blog thì mình rất mong được kết nối với nhiều Blogger khác với cùng một mục đích chia sẻ.

Để liên kết với blog mình rất đơn giản chỉ cần comments phía dưới với nội dung: Tiêu đề Blog và Ảnh là OK.
P/S: Hiện tại mình đang quản lý web: linkthuthuat.com (website chia sẻ liên kết thủ thuật). Nó có lượng truy cập mỗi ngày khá cao tầm 5-10k views. Các bạn có blog viết về thủ thuật thì mình rất mong được hợp tác với các bạn. Để hợp tác thì các bạn có thể xem qua tại link: linkthuthuat.com/hop-tac.

Cảm ơn các bạn đã đọc bài viết và chúc một ngày tốt lành (bài viết ngắn mà đúng không :v)

Vì logo liên kết của nhiều blog đã không tuân thủ nên mình đã reset all liên kết và mất phần logo. Các bạn có thể cập nhật lại logo của mình bằng cách comments bên dưới link logo với kích thước 40x40 nhé. Kích thước lớn hơn sẽ không được chấp thuận !

#Stt

Liên kết bạn bè - Bài viết đầu tiên - Khanh Blogger

Bạn và người khác

47 bình luận

Bạn và người khác

47 bình luận