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!