Hiển thị các bài đăng có nhãn Blogspot Tips. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn Blogspot Tips. Hiển thị tất cả bài đăng

27/02/2019

Code Sidebar trượt dọc theo màn hình cho Blogspot

Code Sidebar trượt dọc theo màn hình cho Blogspot

Khi thiết kế 1 trang Blogspot nếu phần Sidebar (Cột bên) ngắn hơn phần Main-Wrapper phần nội dung thì làm cho giao diện Blogspot mất cân đối khi chuột xuống. 

Hơn nữa nếu bạn đặt quảng cáo Google Adsense tại Sidebar thì nên trượt theo trang theo để người dùng dễ nhấp chuột.

Đoạn code sau đây sẽ giúp phần Sidebar sẽ trượt theo phần Main-Wapper giúp người dùng luôn xem được nội dung của cả 2 cột.

24/02/2019

Tạo hiệu ứng màn hình cong cho Website/Blogspot

Tạo hiệu ứng màn hình cong cho Website/Blogspot

Khi lướt Web bằng di động bạn sẽ thấy 2 mép màn hình có hiệu ứng cong. Viêc này làm cho Website/Blogspot trở nên thích mắt hơn.

Bạn thường dễ thấy các Smartphone Samsung thiết kế màn hình cong 2 bên, thì nay chúng ta sẽ mang hiệu ứng này lên trên Website/Blogspot 1 cách dễ dàng

Hiệu ứng màn hình cong cho Website/Blogspot

22/02/2019

Thêm tính năng sắp xếp bình luận mới nhất, cũ nhất cho blogspot

Thêm tính năng sắp xếp bình luận mới nhất, cũ nhất cho blogspot

Mặc định trong Blogspot sẽ hiển thị comment từ cũ nhất đến mới nhất. Việc này làm cho những comment mới nhất bị trôi xuống dưới quá nhiều rất khó để theo dõi.

Do đó ta sẽ thêm tính năng sắp xếp bình luận từ mới nhất → cũ nhất để bạn có thể dễ dàng theo dõi những bình luận mới nhất là khi nào!

Tính năng này tương tự như Comment của Facebook thì nay đã có thể sử dụng trên Blogspot 1 cách dễ dàng.

Bước 1: Xác định nơi muốn hiển thị sắp xếp comment

Thông thường ta sẽ chèn phía trên những bình luận hoặc trên Khung Comment của Blogger.
Code phần bình luận có cấu trúc như sau.

Thêm tính năng sắp xếp bình luận mới nhất, cũ nhất cho blogspot
Thêm tính năng sắp xếp bình luận mới nhất, cũ nhất cho blogspot

14/01/2019

Tổng hợp CSS hữu ích cho Blogspot mà mọi Web đều cần

Tổng hợp CSS hữu ích cho Blogspot mà mọi Web đều cần

Đây là những CSS hữu ích để chèn vào trong Website/Blogspot mà bất kì website nào cũng có thể áp dụng.

Các đoạn CSS này bạn có thể chèn trong cặp thẻ <skin> hoặc <style> trong giao diện blogspot

I. Tạo icon cho liên kết trong bài viết

Mục đích nhằm tạo cho web có điểm nhấn ở các liên kết, hơn nữa việc làm nổi bật các liên kết này sẽ khiến cho người dùng dễ nhấp chuột vào để tìm kiếm thêm thông tin về từ khóa đó và bạn cũng dễ điều hướng người dùng.

Về mặt SEO khi người dùng truy cập và xem nhiều trang sẽ làm tăng Time Onpage hơn.

Tạo icon liên kết ngoài cho bài viết trong blogspot

10/01/2019

Tiện ích nhận xét mới, Bài viết mới, Bài viết theo nhãn cho Blogger

Tiện ích nhận xét mới, Bài viết mới, Bài viết theo nhãn cho Blogger

Bài này chủ yếu là chia sẻ lại một số code thường hay sử dụng ở cột Sidebar vì hầu như bây giờ các thủ thuật về Blogger đã lỗi thời rất khó tìm kiếm... 

Do vậy trong 1 bài viết mình sẽ chia sẻ code của 3 tiện ích thông dụng này nhé!

Các thủ thuật tiện ích cho Blogger bao gồm:
  • Nhận xét mới nhất gần đây cho Blogspot
  • Bài viết mới nhất cho blogspot
  • Bài viết theo nhãn cho Blogspot
- Các bạn chỉ cần tạo HTML/Javascript mới và dán vào nhé, CSS, HTML, Feeds đều nằm 1 chỗ nên không cần phải cài đặt dài dòng.

- Code này đã được tối ưu nên nhẹ nhàng, tải trang rất nhanh thích hợp để sử dụng trên blogger.

1. Nhận xét mới nhất cho blogger (không ảnh)

Nhận xét mới nhất cho blogger
Nhận xét mới nhất cho blogger

<style>
.nxmoi{color:#ccc}.nxmoi li{margin:0;padding:10px;border-left:2px solid #ccc}.nxmoi li:before{margin-right:10px;content:"";width:12px;height:12px;display:block;border:3px solid #ccc;border-radius:50%;float:left;left:-5px;background:#fff}.nxmoi li:hover:before{background:#F48FB1}.nxmoi span a{color:#F48FB1;font-weight:600;transition:color .3s}.nxmoi span a:hover{color:#F48FB1;transition:color .3s}.nxmoi span{color:#000}
</style>
<script>//<![CDATA[
var sl_nhanxet = 5,
    kt_nhanxet = 50;
// 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>
Tùy chỉnh:
- số nhận xét muốn hiển thị, mặc định đang để là t comments.
var sl_nhanxet = 5,

2. Bài viết mới nhất cho Blogger

Bài viết mới cho Blogger
Bài viết mới cho Blogger

<style>ul.recent_posts_arlina li:hover,.PopularPosts ul li:hover{box-shadow:0 0 25px rgba(0,0,0,0.15)}ul.recent_posts_arlina li:last-child,.widget-content.list-label-widget-content ul li:last-child{border:0!important}.recent_posts_arlina .wrapinfo{display:inline-block;margin:0 0 0 10px;overflow:hidden;position:relative;float:right}ul.recent_posts_arlina li img.recent_thumb{border:1px solid #ccc;box-shadow:0 0 2px #999;float:left;width:45px;height:45px;border-radius:50% 50% 6px 50%}.recent_posts_arlina{float:left;width:100%;margin:0;padding:0;font-size:.9rem}ul.recent_posts_arlina li a{font-family:segoe ui;margin-bottom:8px;font-weight:600;line-height:1.2;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;text-transform:capitalize;color:#000;font-size:15px}.item-meta:last-child{display:none}ul.recent_posts_arlina li a:last-child,.item-meta{float:right;text-transform:lowercase;font-family:segoe ui light;font-size:11px;color:#efefef;padding:2px 7px;border-radius:8px}.clearfix:hover ul.recent_posts_arlina li a:last-child,.item-meta:hover{background:#003fa5}ul.recent_posts_arlina li a:hover{color:#06c}.recent_posts_arlina i,.item-snippet{line-height:19px;font-size:90%}</style><script type='text/javascript'>
//<![CDATA[
// Bài viết mới nhất https://www.toilaquantri.com/2019/01/tien-ich-nhan-xet-moi-bai-viet-moi-bai-viet-theo-nhan-blogspot.html
function recentpost(t){document.write('<ul class="recent_posts_arlina">');for(var e=0;e<numposts;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var m=n.link[o].title,u=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var l;try{l=n.media$thumbnail.url}catch(h){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),l=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://2.bp.blogspot.com/-Q6S8qhkE33I/V0VwhvhULoI/AAAAAAAAHfQ/VZkkOgl_wX4X59EP31Jpl1swFsj6-n0TQCLcB/s45/InfoArlina.png"}var w=n.published.$t,f=w.substring(0,4),p=w.substring(5,7),g=w.substring(8,10),v=new Array;if(v[1]="01",v[2]="02",v[3]="03",v[4]="04",v[5]="05",v[6]="06",v[7]="07",v[8]="08",v[9]="09",v[10]="10",v[11]="11",v[12]="12",document.write('<li class="clearfix">'),1==showpostthumbnails&&document.write('<span class="wrapinfo"><img title="'+i+'" alt="'+i+'" class="recent_thumb" src="'+l+'"/></span>'),document.write('<a href="'+r+'" target ="_top" title="'+i+'">'+i+"</a>"),"content"in n)var y=n.content.$t;else if("summary"in n)var y=n.summary.$t;else var y="";var k=/<\S[^>]*>/g;if(y=y.replace(k,""),1==showpostsummary)if(y.length<numchars)document.write("<i>"),document.write(y),document.write("</i>");else{document.write("<i>"),y=y.substring(0,numchars);var _=y.lastIndexOf(" ");y=y.substring(0,_),document.write(y+"..."),document.write("</i>")}var x="",$=0;document.write(""),1==showpostdate&&(x=x+g+"/"+v[parseInt(p,10)]+"/"+f,$=1),1==showcommentnum&&(1==$&&(x+=""),"1"==m&&(m="1"),"0"==m&&(m="0"),m='<a href="'+u+'" target ="_top">'+m+"</a>",x+=m,$=1),1==displaymore&&(1==$&&(x+=""),x=x+'<a href="'+r+'" class="url" target ="_top">More -></a>',$=1),document.write(x),document.write("</li>"),1==displayseparator&&e!=numposts-1&&document.write("<hr size=0.5>")}document.write("</ul>")}
//]]>
</script>
<script style='text/javascript'>
var numposts=10,showpostthumbnails=!0,displaymore=!1,displayseparator=!1,showcommentnum=1,showpostdate=1,showpostsummary=!1,numchars=62;
</script>
<script src='/feeds/posts/summary?orderby=published&alt=json-in-script&callback=recentpost'></script>
Tùy chỉnh: 
- số bài viết muốn hiển thị
  • numposts=10 // mặc định là 10 bài viết
- số kí tự trong mô tả
  • numchars=62; // mặc định hiển thị 62 kí tự
- các thông số khác hiển thị và không hiển thị
  • showpostthumbnails=!0,  (Hiển thị ảnh thumbnails)
  • displaymore=!1, (Không hiển thị chữ xem thêm)
  • displayseparator=!1, (Có hiển thị vách ngăn giữa các bài viết)
  • showcommentnum=1, (Có hiển thị số lượng comment)
  • showpostdate=1, (Có hiển thị ngày tháng năm)
  • showpostsummary=!1, (Có hiển thị mô tả)
Thay đổi các giá trị !0 thành !1 thì giá trị sẽ được ẩn đi

3. Bài viết theo nhãn cho blogspot

Dùng code này nếu bạn vừa dùng cả bài viết mới nhất và bài viết theo nhãn. Vì Css và Javascript đã dùng chung với bài viết mới nhất gần đây nên không cần phải thêm nữa.

Lưu ý đặt tiện ích bài viết theo mới nhất đặt trên bài viết theo nhãn nhé. Cách hiển thị giống như bài viết mới nhất.
<script src='/feeds/posts/summary/-/nhan-cua-ban?orderby=published&alt=json-in-script&callback=recentpost'></script>
Tùy chỉnh
- thay lại nhãn muốn hiển thị
  • nhan-cua-ban  

Hoặc dùng code đầy đủ khi bạn không dùng bài viết mới nhất

<style>ul.recent_posts_arlina li:hover,.PopularPosts ul li:hover{box-shadow:0 0 25px rgba(0,0,0,0.15)}ul.recent_posts_arlina li:last-child,.widget-content.list-label-widget-content ul li:last-child{border:0!important}.recent_posts_arlina .wrapinfo{display:inline-block;margin:0 0 0 10px;overflow:hidden;position:relative;float:right}ul.recent_posts_arlina li img.recent_thumb{border:1px solid #ccc;box-shadow:0 0 2px #999;float:left;width:45px;height:45px;border-radius:50% 50% 6px 50%}.recent_posts_arlina{float:left;width:100%;margin:0;padding:0;font-size:.9rem}ul.recent_posts_arlina li a{font-family:segoe ui;margin-bottom:8px;font-weight:600;line-height:1.2;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;text-transform:capitalize;color:#000;font-size:15px}.item-meta:last-child{display:none}ul.recent_posts_arlina li a:last-child,.item-meta{float:right;text-transform:lowercase;font-family:segoe ui light;font-size:11px;color:#efefef;padding:2px 7px;border-radius:8px}.clearfix:hover ul.recent_posts_arlina li a:last-child,.item-meta:hover{background:#003fa5}ul.recent_posts_arlina li a:hover{color:#06c}.recent_posts_arlina i,.item-snippet{line-height:19px;font-size:90%}</style><script type='text/javascript'>
//<![CDATA[
// Bài viết mới nhất https://www.toilaquantri.com/2019/01/tien-ich-nhan-xet-moi-bai-viet-moi-bai-viet-theo-nhan-blogspot.html
function recentpost(t){document.write('<ul class="recent_posts_arlina">');for(var e=0;e<numposts;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var m=n.link[o].title,u=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var l;try{l=n.media$thumbnail.url}catch(h){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),l=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://2.bp.blogspot.com/-Q6S8qhkE33I/V0VwhvhULoI/AAAAAAAAHfQ/VZkkOgl_wX4X59EP31Jpl1swFsj6-n0TQCLcB/s45/InfoArlina.png"}var w=n.published.$t,f=w.substring(0,4),p=w.substring(5,7),g=w.substring(8,10),v=new Array;if(v[1]="01",v[2]="02",v[3]="03",v[4]="04",v[5]="05",v[6]="06",v[7]="07",v[8]="08",v[9]="09",v[10]="10",v[11]="11",v[12]="12",document.write('<li class="clearfix">'),1==showpostthumbnails&&document.write('<span class="wrapinfo"><img title="'+i+'" alt="'+i+'" class="recent_thumb" src="'+l+'"/></span>'),document.write('<a href="'+r+'" target ="_top" title="'+i+'">'+i+"</a>"),"content"in n)var y=n.content.$t;else if("summary"in n)var y=n.summary.$t;else var y="";var k=/<\S[^>]*>/g;if(y=y.replace(k,""),1==showpostsummary)if(y.length<numchars)document.write("<i>"),document.write(y),document.write("</i>");else{document.write("<i>"),y=y.substring(0,numchars);var _=y.lastIndexOf(" ");y=y.substring(0,_),document.write(y+"..."),document.write("</i>")}var x="",$=0;document.write(""),1==showpostdate&&(x=x+g+"/"+v[parseInt(p,10)]+"/"+f,$=1),1==showcommentnum&&(1==$&&(x+=""),"1"==m&&(m="1"),"0"==m&&(m="0"),m='<a href="'+u+'" target ="_top">'+m+"</a>",x+=m,$=1),1==displaymore&&(1==$&&(x+=""),x=x+'<a href="'+r+'" class="url" target ="_top">More -></a>',$=1),document.write(x),document.write("</li>"),1==displayseparator&&e!=numposts-1&&document.write("<hr size=0.5>")}document.write("</ul>")}
//]]>
</script>
<script style='text/javascript'>
var numposts=10,showpostthumbnails=!0,displaymore=!1,displayseparator=!1,showcommentnum=1,showpostdate=1,showpostsummary=!1,numchars=62;
</script>
<script src='/feeds/posts/summary/-/nhan-cua-ban?orderby=published&alt=json-in-script&callback=recentpost'></script>
Tùy chỉnh
- thay lại nhãn muốn hiển thị.
  • nhan-cua-ban 

19/12/2018

Tạo Password cho bài viết bất kì trong Blogger/blogspot

Tạo Password cho bài viết bất kì trong Blogger/blogspot

Vì nhiều lí do bạn muốn hạn chế người dùng xem 1 bài viết nào đó và chỉ cho phép người dùng có passwords mới xem được, thì ta sẽ cài đặt passwords cho bài viết đó.

Demo dễ thấy nhất là để xem được bài viết này bạn phải nhập đúng passwords là sđt của mình vậy. OK vậy là chúng ta cùng tiến hành thực hiện.


Tạo Password cho bài viết bất kì trong Blogger/blogspot

Tạo password cho bài viết blogger/blogspot

1. Chèn code sau trên thẻ </head>

<b:if cond='data:blog.url == &quot;Thay_url_cua_ban&quot;'><script language='JavaScript'>var password;var pass1=&quot;0932913631&quot;;password=prompt(&#39;Nhập Password để xác minh truy cập vì nội dung hạn chế!&#39;,&#39;&#39;);if (password==pass1)alert(&#39;Password chính xác! Click để tiếp tục!&#39;);else{window.location=&quot;https://www.toilaquantri.com&quot;;}</script>  </b:if>

2. Thay lại các trường thông tin sau

  • Thay_url_cua_ban (Dán vào url bạn muốn đặt pass)
  • 0932913631 (là password để xem nội dung)
  • https://www.toilaquantri.com (Nếu nhập password sai sẽ chuyển tiếp về trang này). Bạn có thể tạo 1 trang nào đó để thông báo cho người dùng về việc nhập pass để truy cập.

3. Đặt password cho các trang còn lại

Bạn chỉ cần thay lại thẻ điều kiện bên dưới để có thể đặt password cho các trang khác như trang nhãn, trang index...vvv

<b:if cond='data:blog.url == &quot;Thay_url_cua_ban&quot;'>
....

Trường hợp áp dụng cho nhiều bài viết bạn sử dụng lệnh or trong thẻ điều kiện kết hợp nâng cao.

Lưu ý:

Điểm yếu của phương pháp này là chỉ cần Ctrl + U là ta dễ dàng dò được password. 

Do vậy bạn nên dùng thêm công cụ để mã hóa thêm đoạn code trên trước khi thêm vào blog là an toàn nhất nhé!.

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

07/12/2018

Cắt tiêu đề thành 2,3 dòng với Website/Blogspot

Cắt tiêu đề thành 2,3 dòng với Website/Blogspot

Trong quá trình xuất bản và đặt tiêu đề bài viết, không ít bài viết có tiêu đề quá dài làm mất cân đối trên Website. Hoặc đơn giản là bạn muốn Website bạn đồng bộ hơn trong gọn gàng hơn thì ta tiến hành tự động cắt tiêu đề cho ngắn lại.

Minh họa cắt tiêu đề thành 2 dòng


Thủ thuật cắt tiêu đề này chỉ sử dụng CSS có thể áp dụng cho hầu hết tất cả các website. Bây giờ chúng ta sẽ tiến hành nhé!

23/09/2018

Tạo live chat Facebook mới nhất 2018 cho Blogspot

Tạo live chat Facebook mới nhất 2018 cho Blogspot

 live chat Facebook mới nhất 2018 cho Blogspot

Đây là chat Facebook mới nhất 2018 được Facebook hỗ trợ với ưu điểm chat trực tiếp và nhận trả lời trực tiếp trong hộp thoại chat.
Khi người dùng rời khỏi website vẫn có thể trò chuyện tiếp tục trên facebook với tư cách Fanpage.

Ưu điểm: Vì không phải lúc nào mình cũng trực hộp chat trên fanpage hoặc online nên Live chat Fanpage là phù hợp với mục đích sử dụng của mình!

18/07/2018

Hướng dẫn thiết kế 2 giao diện (Mobile/Desktop) cho Blogger

Hướng dẫn thiết kế 2 giao diện (Mobile/Desktop) cho Blogger

Đối với Blogger khi truy cập trên thiết bị có độ phân giải màn hình từ 600px trở xuống sẽ chuyển ngay sang truy cập link trên mobile có dạng url.html?m=1

Đối với giao diện này các điều kiện trên mobile bắt đầu hoạt động.
<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'><!-- nội dung muốn hiển thị trên di động --></b:if>

<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'><!-- Nội dung không muốn hiển thị trên di động --></b:if>

Do vậy khi khi xem trên máy tính với kích thước màn hình lớn thì không thể nào tự chuyển sang url?m=1 được mà ta phải có button cho chuyển 2 chế độ. Sẽ được thêm ?m=1 vào cuối url.


Như cách mình làm thì ở chế độ Mobile sẽ tự động ẩn Sidebar-wrapper đi và để #main-wrapper{width:100%!important}

17/03/2018

Javascript Click to add class (Click để thêm class) cho blogger và ứng dụng

Javascript Click to add class (Click để thêm class) cho blogger và ứng dụng

Bài viết này nằm trong Serie Javascript Blogger.
Trong các bài viết trước đây mình đã chia sẻ một số javascript
Hôm nay mình hướng dẫn một Javascript mới là click thể thêm class/id và cách mình ứng dụng nó vào lập trình web.

Cách ứng dụng Click to add class

Click to add class áp dụng cho trang web tinhdauonline.com.vn

15/03/2018

Javascript click change text cho blogspot (Đổi chữ khi click)

Javascript click change text cho blogspot (Đổi chữ khi click)

Khi click chuột vào 1 id hoặc class chứa text thì text (chữ) sẽ chuyển thành text khác.
Thủ thuật click change text này được mình sử dụng cho trang web https://www.tinhdauonline.com.vn và chỉ sử dụng một đoạn javascript nhỏ!

Được minh họa như sau (Click change text)

Javascript click change text cho blogspot (Đổi chữ khi click)
Hiện text ĐÃ THÊM +1 để xác nhận thao tác click thành công!

05/03/2018

Tạo Banner quảng cáo có nút tắt (x) cho blogspot

Tạo Banner quảng cáo có nút tắt (x) cho blogspot

Việc tạo banner quảng cáo để phục vụ các hoạt động quảng cáo tìm kiếm lợi nhuận là điều mà nhiều Webmaster/Blogger mong muốn.

Và dưới thủ thuật sau đây sẽ giúp bạn tạo 1 banner đồng thời có nút button (x) để người dùng có thể tắt để ngừng xem quảng cáo để tránh ảnh hưởng đến trãi nghiệm trên website/blog chúng ta.

Qua thủ thuật tạo banner quảng cáo này chúng ta cũng sẽ học về 1 chút javascript rất hữu ích.

Banner được trên menu và nó button tắt (x)

28/12/2017

Nâng cấp chuẩn https (bảo mật) cho blogspot

Nâng cấp chuẩn https (bảo mật) cho blogspot

Trước đây trong nền tảng blogger (blogspot). Google chỉ áp dụng xanh | Bảo mật cho tên miền miễn phí dạng .blogspot.com có chuẩn https (bảo mật) nhưng với tên miền tùy chỉnh vẫn được hiện được https nhưng không hiển thị được xanh bảo mật. Chữ s xuất hiện ở cuối https:// là viết tắt của chữ Secure = Bảo mật để xác nhận là trang đã bật chuẩn mã hóa để bảo vệ người dùng là trang an toàn.

Vậy là đến nay thì cuối cùng Google đã nâng cấp chuẩn xanh  https cho đứa con cưng blogger của mình dành cho tên miền tùy chỉnh trong suốt 1 năm nay hiện diện.

Về mặt SEO web chuẩn https sẽ giúp website của bạn tối ưu trên công cụ tìm kiếm vỏn vẹn ~ 1% nhưng động thái này đã cho thấy chuẩn này đang được Google đánh giá cao.

HTTPS bảo mật trong web toilaquantri.com
HTTPS Bảo mật trong web toilaquantri.com

15/12/2017

Tạo hiệu ứng tuyết rơi ngày Noel cho blogspot

Tạo hiệu ứng tuyết rơi ngày Noel cho blogspot

Noel 24-25/12 mỗi năm sắp đến. Đây là dịp đi chơi và cũng như cho các blogger chúng ta trang hoàn cho blog của mình.
Đơn giản cho việc trang trí blog là tạo hiệu ứng tuyết rơi cho hợp với không khí Noel.

Chúng ta cùng tiến hành!

Chỉ cần 1 bước và chèn code cài đặt bên dưới trước thẻ /body là chúng ta sẽ có ngay hiệu ứng này.
[code]


02/12/2017

Điều kiện ẩn hiện kết hợp nâng cao trong blogger

Điều kiện ẩn hiện kết hợp nâng cao trong blogger

Bài viết trước chia sẻ cho bạn các điều kiện xuất hiện hoặc chặn xuất hiện ở 1 trang nào đó trong blogger tiếp tục bài viết này là các thẻ điều kiện kết hợp cho các bạn áp dụng 2 hoặc 3 trang...

Xem lại: Điều kiện ẩn hiện trong blogger (cơ bản)
điền kiện ẩn hiện trong blogspot
Điều kiện ẩn hiện kết hợp nâng cao trong blogger

28/11/2017

Fix lỗi trùng lặp tiêu đề/nội dung nền tảng Blogger

Fix lỗi trùng lặp tiêu đề/nội dung nền tảng Blogger

Điểm yếu của Blogger thường xảy ra khi phân tích Google Webmaster Tool về trùng lặp nội dung/tiêu đề vì Blogger có 2 phần giao diện trên smartphone và desktop khi xuất hiện các đuôi đằng sau tên miền.

Fix lỗi trùng lặp tiêu đề/nội dung nền tảng Blogger
Fix lỗi trùng lặp tiêu đề/nội dung nền tảng Blogger

19/10/2017

Tạo ngày tháng, tác giả, chia sẻ liên kết giống Facebook cho Blogspot

Tạo ngày tháng, tác giả, chia sẻ liên kết giống Facebook cho Blogspot

Tạo ngày tháng, tác giả, chia sẻ liên kết giống Facebook cho Blogspot
Tạo ngày tháng, tác giả, chia sẻ liên kết giống Facebook cho Blogspot

Thủ thuật tạo thông tin tác giả chia sẻ liên kết và ngày tháng năm giống như trên facebook. Thông tin tương đối gọn gàn và đầy đủ chi tiết để có thể áp dụng được cho Blogspot. Chúng ta có 4 bước để thực hiện.

Điều đầu tiên trước khi thực hiện thủ thuật này là bạn cần xóa bỏ đi code cũ có trong blogspot từ trước để tránh trùng lặp.

29/09/2017

So sánh về ưu nhược điểm của wordpress và blogspot

So sánh về ưu nhược điểm của wordpress và blogspot

Có rất nhiều câu hỏi về ưu nhược điểm của wordpress và blogspot. Nền tảng cái nào tốt hơn? Cái nào SEO web tốt hơn? Cái nào dễ tùy biến sử dụng hơn?... Bài viết này chia sẻ cho các bạn hiểu rõ hơn về wordpress và blogspot.
ưu nhược điểm của wordpress và blogspot


Khái niệm



Blogspot và Wordpress là 2 nền tảng trang web phổ biến nhất. Với blogspot là thuộc sở hữu của Google mà bất cứ một Seoer, blogger nào cũng không thể bỏ qua. Còn WordPress là một mã nguồn mở và phần mềm viết blog miễn phí. Vì vậy ưu nhược điểm của wordpress và blogspot là đều có.

Về ưu nhược điểm của wordpress và blogspot

ưu nhược điểm của wordpress và blogspot


Blogspot có những ưu và nhược điểm gì ?

Ưu điểm:

- Đó là 100% miễn phí và được sở hữu bởi Google. Đây là điều tuyệt vời nhất khi bạn chọn Blogger, bạn sẻ được sử dụng Host miễn phí và cực kỳ mạnh mẻ từ Google. Nhờ thế bạn không phải lo nghĩ gì về lỗi, hay các vấn đề khác như DDOS...

- Nó rất dễ dàng để thiết lập và quản lý một blog Blogspot.

- Xuất bản nội dung là đơn giản. Được xây dựng trong các tính năng mạng xã hội.

- Sản phẩm khác của Google được tích hợp: Một trong những lợi thế lớn khi sử dụng sản phẩm của Google là bạn có thể dễ dàng sử dụng sản phẩm khác của Google với một tài khoản gmail. Bạn có thể dễ dàng truy cập và tích hợp YouTube, Google Webmaster Tools, Google Analytics, Google Plus và nhiều hơn nữa.

- Nó rất đáng tin cậy và Đảm bảo an toàn bảo mật. Vì đây thuộc sở hữu của Google không ai có thể hack tài khoản blogspot của bạn dễ dàng được.

- Không cần đến cơ sở dữ liệu sao lưu. 

- Bài viết của bạn sẽ được tự động lập chỉ mục của Google. Và 100% quảng cáo miễn phí.



Nhược điểm

- Nếu blogspot của bạn có bài viết hay hình ảnh vi phạm nội quy thì họ có thể xóa blog của bạn mà không cần báo trước. Đây là điều bất lợi nhất khi sử dụng Blogspot. Nếu tuân thủ các quy định của Google thì bạn hãy chọn nền tảng này.
- Hỗ trợ SEO khá kém
- Ngoài file hình ảnh ra thì bạn không thể upload bất cứ file gì lên host được.
- Giới hạn Blog: Bạn chỉ có thể có 100 blog cho mỗi tài khoản
- Blogspot cho phép các trang web có dung lượng dưới 1 MB như Trang chủ, Trang lưu trữ vvv ,Nếu trang được hơn 1 GB, bạn sẽ nhận được lỗi "006"
- Tối đa chỉ 100 thành viên viết bài trên mỗi blog
- Không hỗ trợ FTP.

WordPress - Ưu điểm và khuyết điểm (Đối với bản miễn phí)

ưu nhược điểm của wordpress và blogspot

Ưu điểm:

- Đây là một hệ thống CMS sử dụng nhiều nhất trên thế giới với nhiều ưu điểm vượt trội.
- WordPress là rất đơn giản để sử dụng tuy nhiên phải mất một thời gian để tìm hiểu và khám phá các chức năng giao diện.
- Đó là sử dụng 100% miễn phí.
- Nó rất là thân thiện với công cụ tìm kiếm. Hỗ trợ SEO website tốt. Bạn có thể thiết lập tùy chỉnh thẻ meta của riêng bạn
- Nó chỉ mất vài phút để thiết lập blog của bạn. WordPress là rất linh hoạt vì nó là mã nguồn mở. Vì vậy, bạn có thể tùy chỉnh blog của bạn theo cách bạn muốn.
- Bạn sở hữu các blog và bạn có toàn quyền kiểm soát blog của bạn
- Bạn có thể cài đặt bất kỳ chủ đề hoặc bổ sung. Có sử dụng miễn phí và có phí cho các chủ đề - WordPress và các plugins. Có thể làm 1 website chuyên nghiệp.
- Không giới hạn số lượng thành viên.

Nhược điểm:


- WordPress phát hành bản cập nhật thường xuyên, do đó bạn phải cập nhật các phần mềm mỗi khi họ phát hành một phiên bản mới (nhưng nó đòi hỏi chỉ vài cú nhấp chuột).
- Chi phí đầu tư cho hosting cao: Bạn phải đầu tư Hosting  và chi phí bảo trì khá cao
- Khi sử dụng WordPress, bạn không được phép để kiếm tiền từ blog WordPress.com của bạn bằng cách sử dụng Google AdSense, Chitika, Amazon, biểu ngữ, vv
- Cần phải cài đặt, tạo database ban đầu. Cần phải có kỹ năng lập trình để có thể chỉnh sửa template
- Hỗ trợ hạn chế về chủ đề và bổ sung.
- Không có FTP Access.
- Sẽ hiển thị quảng cáo, trừ khi bạn mua opt cho phiên bản quảng cáo miễn phí mà chi phí $ 29,97 hàng năm.
- Bạn phải lấy thường xuyên sao lưu cơ sở dữ liệu.
- Dễ bị tấn công bởi Hacker

Trên đây là một số ưu nhược điểm của wordpress và blogspot. Nếu bạn không giỏi về lập trình, code. Với nguồn tài chính hạn hẹp và không có dự định phát triển đầu tư mạnh , mục đích chỉ muốn tạo blog nho nhỏ thôi thì hãy chọn Blogspot. Ngược lại, nếu bạn am hiểu về Code, nhiều vốn có định chiến lược đầu tư kinh doanh thì hãy chọn WordPress.

19/07/2017

Sửa breadcumbs hiển thị trên Google theo Label (Nhãn) cho Blogspot

Sửa breadcumbs hiển thị trên Google theo Label (Nhãn) cho Blogspot

Giải đáp thắc mắc cho các bạn tại sao url không hiển thị theo label khi search trên google. Điều này hoàn toàn phụ thuộc vào template blogspot mà bạn đang sử dụng.

Bản thân trang web toilaquantri.com đã qua nhiều đợt thay đổi template và kết quả mình quan sát là kết quả hiển thị nào phụ thuộc vào code breadrumbs của template đó.


Nhiều bạn thích url hiển thị theo dạng Domain > label 1 > label 2 > label 3.... hơn là dạng Domain > url. Do vậy mình sẽ hướng dẫn bạn fix lại dạng này.

Vậy để làm Breadcumbs hiển thị trên Google theo Label (Nhãn) cho Blogspot bạn làm theo hướng dẫn sau.

Trong Mẫu:

Bước 1: Xóa CSS và HTML của Breadcumbs cũ

Bạn tìm theo chữ breadcumb và xóa code cũ trong web của bạn đi nhé!
Phần này mình sẽ không hướng dẫn nhiều nhé (riêng bạn nào mới chơi blog không biết code kiết là gì thì để lại bình luận bên dưới mình hd riêng.)

Bước 2: Chèn CSS dưới trên /b:skin

.breadcrumbs{background: #e8e8e8; word-wrap: break-word;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;margin: -7px -10px 0px -10px;padding: 8px 12px; font: normal 14px Roboto}
.breadcrumbs a{color:#666;font-weight:bold}.breadcrumbs a:hover{color:#777}.breadcrumbs-labelname{margin:0 0 0 1px;padding-left:5px;background:url(https://lh3.googleusercontent.com/-g87OuZZgpXQ/TwqVubNjytI/AAAAAAAABgs/cfgKRZ3CmTc/s5/arrow%2520%25281%2529.png) left center no-repeat}

Bước 3: Chèn HTML breabcumbs tại vị trí hiển thị

Chèn code breamcumbs bên dưới trên của tiêu đề bài viết (Nếu chèn breabcumbs trên tiêu đề).

<b:if cond='data:blog.pageType == &quot;item&quot;'>
               <div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
                 <span typeof='v:Breadcrumb'><a class='bhome' expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span> <brc>/</brc>
                 <b:loop values='data:posts' var='post'>
                   <b:if cond='data:post.labels'>
                     <b:loop values='data:post.labels' var='label'>
                       <span typeof='v:Breadcrumb'>
                         <a expr:href='data:label.url + &quot;?&amp;max-results=10&quot;' property='v:title' rel='v:url'><data:label.name/></a></span>
                       <b:if cond='data:label.isLast != &quot;true&quot;'><brc>/</brc></b:if>
                     </b:loop>
                     <b:else/>
                     Unlabelled
                   </b:if>
                   <brc>/</brc> <span><data:post.title/></span>
                 </b:loop>
               </div>
</b:if>

Bước 4: Cho Google index lại toàn bộ trang và chờ kết quả

Chúc bạn thành công!
Tôi Là Quản Trị

14/07/2017

Hiệu ứng rê chuột vào ảnh chuyển thành màu xám âm bản cho blogspot

Hiệu ứng rê chuột vào ảnh chuyển thành màu xám âm bản cho blogspot

Khi rê chuột vào ảnh bất kì màu ảnh sẽ chuyển sang màu xám xám, giúp hình ảnh trên blogspot có hiệu ứng dễ chịu.
Hãy thử rê chuột vào 1 ảnh bất kì trên trang blog này bạn sẽ thấy hiệu ứng tương tự