MMO - kiếm tiền online và thủ thuật máy tính


Cộng đồng vui bựa status Tham gia đê

Code share facebook, twitter, google plus dạng text cho blogspot

10:42 |

Không cần plugin, bạn vẫn có thể tạo nút share bài viết lên facebook, twitter, google+ hay những mạng xã hội khác một cách đơn giản.


Code share facebook, twitter, google plus dạng text cho blogspot
Code share facebook, twitter, google plus dạng text cho blogspot

Ưu điểm 
- Nút share có dạng text.
- Không sử dụng plugin nên tốc độ tải trang khá nhanh.
- Giao diện thân thiện, dễ tùy chỉnh.
Yêu cầu : hãy đảm bảo là bạn nắm vững kiến thức về HTML + CSS !

Code share bài viết lên facebook


<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' style='color:#fff; text-align:center; width:50%; float:left; padding:10px 0; background:#3b5998; font-weight:bold; ' target='_blank'>
Share on facebook</a>

Demo

Share on facebook


Code share bài viết lên twitter


<a expr:href='&quot;http://twitter.com/intent/tweet?text=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url' style='color:#fff; text-align:center; width:50%; float:left; padding:10px 0; background:#00acee; font-weight:bold;' target='_blank'>
Share on twitter</a>

Demo

Share on twitter


Code share bài viết lên google plus (google+)


<a expr:href='&quot;https://plusone.google.com/_/+1/confirm?hl=&quot; + &quot;en&amp;url=&quot; + data:post.url' style='color:#fff; text-align:center; width:50%; float:left; padding:10px 0; background:#DC4E41; font-weight:bold;' target='_blank'>Share on google+</a>

Demo

Share on google+


Code share bài viết cho hầu hết các mạng xã hội


Ngoài facebook, twitter hay google+ thì vẫn còn khá nhiều mạng xã hội khác mà chúng ta có thể muốn share bài viết như pinterest, reddit, .... Mình đã tổng hợp lại tất cả trong 1 file text. Sau khi tải về, bạn chỉ việc copy lần lượt 2 thông số và paste đè lên đoạn mã được bôi đậm như bên dưới nhé.

<a expr:href='...' style='color:#fff; text-align:center; width:50%; float:left; padding:10px 0; background:#color; font-weight:bold; ' target='_blank'>
Share on ...</a>




Từ khóa tìm kiếm :

  • nút share facebook, twitter, google+ dạng text
  • nút share mạng xã hội cho blogspot
  • code share bài viết blogspot lên facebook
  • share bài viết blogspot lên mạng xã hội
  • code share facebook, twitter, google cho blogspot
  • code share lên facebook dạng text

Sao lưu, khôi phục data và template blogspot

20:18 |

Trong quá trình xây dựng và phát triển site, không ít blogger đã vô tình gây ra những lỗi cơ bản làm ảnh hưởng đến giao diện (template) hay dữ liệu (data) của blogspot. Hãy sao lưu, khi bạn còn có thể :)


Sao lưu, khôi phục data và template blogspot
Sao lưu, khôi phục data và template blogspot

Sao lưu giao diện blogspot (template)


Trong quá trình thao tác với code, có thể chúng ta sẽ bị lỗi ở phần nào đó mà không thể tìm ra cách giải quyết. Những lúc như này thì việc lôi lại template là cách tốt nhất khiến mọi thứ trở nên ngon lành như ban đầu, tin mình đi :D
Thời gian : tiến hành sao lưu template blogspot trước và sau mỗi lần sửa code.
- Tại menu trái, chọn Mẫu ⇒ Sao lưu / khôi phục

Sao lưu, khôi phục data và template blogspot
Sao lưu template blogspot

- Để sao lưu template, nhấn khung tại ô số 1. File tải về sẽ có đuôi .xml
- Để khôi phục, nhấn Chọn tệp ở ô số 2.

Sao lưu, khôi phục data và template blogspot
2 bước để sao lưu và khôi phục template blogspot

Sao lưu dữ liệu blogspot (data) 


Tải về toàn bộ dữ liệu các bài viết, trang, ... của blogspot. Cách này được áp dụng để bảo vệ blogspot trong trường hợp chúng ta vô tình xóa nhầm bài viết hoặc bị kẻ xấu cố ý phá hoại nội dung. Nếu không sao lưu kịp thời từ trước, dù có cố gắng thì cũng không thể khôi phục lại đâu nhé.

- Tại menu trái, chọn Cài đặtKhác
- Để sao lưu data blogspot, nhấn nút Sao lưu nội dung. File tải về sẽ có đuôi .xml
- Để khôi phục data, chọn Nhập nội dung.

Sao lưu, khôi phục data và template blogspot
Sao lưu dữ liệu blogspot


Từ khóa tìm kiếm :

  • sao lưu và khôi phục blogspot
  • sao lưu khôi phục template blogspot
  • sao lưu khôi phục data blogspot
  • sao lưu phục hồi dữ liệu trong blogger

Tạo sitemap cho blogspot nhanh chóng

19:23 |
Không riêng gì blogspot, với bất cứ website nào thì sitemap luôn được đinh nghĩa là "bản đồ" của một website. Sitemap là nơi tập trung của tất cả các bài viết và được phân thành từng phần cụ thể tuỳ theo mục đích của quản trị viên, chúng ta có thể ví sitemap như mục lục của một cuốn sách vậy.

Tạo sitemap cho blogspot
Hướng dẫn tạo sitemap cho blogspot

Ở bài viết này, mình sẽ chia sẻ với các bạn cách để tạo sitemap trên nền tảng blogger. Xem demo
Bạn có thể sử dụng Trang hoặc Bài Đăng để làm sitemap, nhưng tốt nhất nên sử dụng Trang vì chúng sẽ chuyên nghiệp hơn :)

Tạo sitemap cho blogspot
Bài đăng & Trang

Tạo sitemap cho blogspot


Bước 1 : Bên menu trái blogger, chọn Trang / Trang mới
Bước 2 : Chuyển định dạng soạn thảo từ Viết sang HTML , sau đó copy - paste đoạn mã sau vào nội dung trang.

<style type="text/css">
.post-view ol{padding-left:30px;}
.post-view p a {font:normal 20px helvetica; }
</style>
<script>
 eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('2 4=F M();2 s=F M();2 w=F M();2 q=F M();2 6=F M();2 x=F M();2 8="I";2 11=1F;2 23=1V;2 D="";2 1f=0;9 1T(a){9 b(){3("A"1D a.1h){2 d=a.1h.A.u;1f=d;C=0;B(2 h=0;h<d;h++){2 n=a.1h.A[h];2 e=n.R.$t;2 m=n.1Q.$t.1x(0,10);2 j;B(2 g=0;g<n.N.u;g++){3(n.N[g].1u=="1Y"){j=n.N[g].r;W}}2 o="";B(2 g=0;g<n.N.u;g++){3(n.N[g].1u=="1Z"){o=n.N[g].r;W}}2 c="";3("18"1D n){B(2 g=0;g<n.18.u;g++){c=n.18[g].2s;2 f=c.1A(";");3(f!=-1){c=c.1x(0,f)}6[C]=c;4[C]=e;q[C]=m;s[C]=j;w[C]=o;3(h<10){x[C]=Y}L{x[C]=1F}C=C+1}}}}}b();8="I";O(8);1g();11=Y;1z();i.y(\'</E><a r="1H://2r.2n.1p" 1q="2m-2l: 2k; 1I-2g:2f; 1C: #28;">27 26 25, 22 21</a>\')}9 20(a){1m(0,0);D=a;J(D)}9 1o(){1g();D="";J(D)}9 O(d){9 c(e,g){2 f=4[e];4[e]=4[g];4[g]=f;2 f=q[e];q[e]=q[g];q[g]=f;2 f=s[e];s[e]=s[g];s[g]=f;2 f=6[e];6[e]=6[g];6[g]=f;2 f=w[e];w[e]=w[g];w[g]=f;2 f=x[e];x[e]=x[g];x[g]=f}B(2 b=0;b<4.u-1;b++){B(2 a=b+1;a<4.u;a++){3(d=="I"){3(4[b]>4[a]){c(b,a)}}3(d=="16"){3(4[b]<4[a]){c(b,a)}}3(d=="17"){3(q[b]>q[a]){c(b,a)}}3(d=="X"){3(q[b]<q[a]){c(b,a)}}3(d=="1s"){3(6[b]>6[a]){c(b,a)}}}}}9 1g(){8="1s";O(8);2 a=0;2 b=0;Q(b<4.u){G=6[b];P=a;1v{a=a+1}Q(6[a]==G);b=a;19(P,a);3(b>4.u){W}}}9 19(d,c){9 e(f,h){2 g=4[f];4[f]=4[h];4[h]=g;2 g=q[f];q[f]=q[h];q[h]=g;2 g=s[f];s[f]=s[h];s[h]=g;2 g=6[f];6[f]=6[h];6[h]=g;2 g=w[f];w[f]=w[h];w[h]=g;2 g=x[f];x[f]=x[h];x[h]=g}B(2 b=d;b<c-1;b++){B(2 a=b+1;a<c;a++){3(4[b]>4[a]){e(b,a)}}}}9 J(a){2 l=0;2 h="";2 e="1X 1b";2 m="1c 1d 1W 1U 1S";2 d="1R";2 k="1c 1d 1M 1L 1K";2 c="1J";2 j="";3(8=="I"){m+=" (2h)";k+=" (1j S)"}3(8=="16"){m+=" (1i)";k+=" (1j S)"}3(8=="17"){m+=" (1i)";k+=" (1j S)"}3(8=="X"){m+=" (1i)";k+=" (1N S)"}3(D!=""){j="1c 1d 1O 1P"}h+="<1g>";h+="<k>";h+=\'<5 v="7-U-1e">\';h+=\'<a r="1a:1t();" R="\'+m+\'">\'+e+"</a>";h+="</5>";h+=\'<5 v="7-U-15">\';h+=\'<a r="1a:1l();" R="\'+k+\'">\'+d+"</a>";h+="</5>";h+=\'<5 v="7-U-14">\';h+=\'<a r="1a:1o();" R="\'+j+\'">\'+c+"</a>";h+="</5>";h+=\'<5 v="7-U-13">\';h+="T 24";h+="</5>";h+="</K>";B(2 g=0;g<4.u;g++){3(a==""){h+=\'<k><5 v="7-A-1e"><a r="\'+s[g]+\'">\'+4[g]+\'</a></5><5 v="7-A-15">\'+q[g]+\'</5><5 v="7-A-14">\'+6[g]+\'</5><5 v="7-A-13"><a r="\'+w[g]+\'">T</a></5></K>\';l++}L{z=6[g].1A(a);3(z!=-1){h+=\'<k><5 v="7-A-1e"><a r="\'+s[g]+\'">\'+4[g]+\'</a></5><5 v="7-A-15">\'+q[g]+\'</5><5 v="7-A-14">\'+6[g]+\'</5><5 v="7-A-13"><a r="\'+w[g]+\'">T</a></5></K>\';l++}}}h+="</1G>";3(l==4.u){2 f=\'<h v="7-1E">12 29 \'+4.u+" 1b<E/></H>"}L{2 f=\'<h v="7-1E">12 \'+l+" 2a 2b 2c \'";f+=D+"\' 2d "+4.u+" 2e 1b<E/></H>"}2 b=i.V("7");b.Z=f+h}9 1z(){2 a=0;2 b=0;Q(b<4.u){G=6[b];i.y("<p/>");i.y(\'<p>
<a r="/2i/2j/\'+G+\'">\'+G+"</a></p>
<1y>");P=a;1v{i.y("<1w>");i.y(\'<a r="\'+s[a]+\'">\'+4[a]+"</a>");3(x[a]==Y){i.y(\' - <1r><1n><h 1q="1C: 2o(2p, 0, 0);">2q !</H> </1n></1r>\')}i.y("</1w>");a=a+1}Q(6[a]==G);b=a;i.y("</1y>");19(P,a);3(b>4.u){W}}}9 1t(){3(8=="I"){8="16"}L{8="I"}O(8);J(D)}9 1l(){3(8=="X"){8="17"}L{8="X"}O(8);J(D)}9 1k(){3(11){J(D);2 a=i.V("1B")}L{2t("2u 2v... 2w 2x 2y")}}9 2z(){2 a=i.V("7");a.Z="";2 b=i.V("1B");b.Z=\'<a r="#" 2A="1m(0,0); 1k(); 2B.2C(\\\'7-2D\\\',\\\'2E\\\');">?? 12 2F 2G</a> <2h 2I="1H://2J.2K.1p/2L.2M"/>\'}9 2N(){B(2 a=0;a<1f;a++){i.y("<e>");i.y(\'2O 2P  : <a r="\'+s[a]+\'">\'+4[a]+"</a><e>");i.y(\'T 2Q  : <a r="\'+w[a]+\'">\'+4[a]+"</a><e>");i.y("<e>")}};',62,177,'||var|if|postTitle|td|postLabels|toc|sortBy|function|||||||||document||||||||postDate|href|postUrl||length|class|postMp3|postBaru|write||entry|for|ii|postFilter|br|new|temp1|span|titleasc|displayToc|tr|else|Array|link|sortPosts|firsti|while|title|first|Download|header|getElementById|break|datenewest|true|innerHTML||tocLoaded|Menampilkan|col4|col3|col2|titledesc|dateoldest|category|sortPosts2|javascript|Artikel|Klik|untuk|col1|numberfeed|sortlabel|feed|ascending|newest|showToc|toggleDateSort|scroll|em|allPosts|com|style|strong|orderlabel|toggleTitleSort|rel|do|li|substring|ol|displayToc2|lastIndexOf|toclink|color|in|note|false|table|http|text|Kategori|tanggal|bedasarkan|Sortir|oldest|menampilkan|semua|published|Tanggal|judul|loadtoc|berdasarkan|250|sortir|Judul|alternate|enclosure|filterPosts|Farhan|Abu|numChars|MP3|SaliproPham|by|Designed|ffffff|Semua|artikel|dengan|kategori|dari|Total|none|decoration|descending|search|label|8px|size|font|blogspot|rgb|255|New||term|alert|Just|wait|TOC|is|loading|hideToc|onclick|Effect|toggle|result|blind|Daftar|Isi|img|src|radiorodja|googlepages|new_1|gif|looptemp2|Post|Link|mp3'.split('|'),0,{}))
</script>
<script src="http://www.123itvn.com/feeds/posts/default?max-results=500&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Bước 3
- Phần CSS trên cùng, các bạn có thể bổ sung thêm code để tuỳ chỉnh việc hiển thị của sitemap nếu muốn.
- Thay URL 123itvn.com bằng của URL website của bạn.
- Chuyển định dạng soạn thảo từ HTML về Viết.
- Lưu lại khi hoàn tất.

Lưu ý : Ở mỗi lần chỉnh sửa code trong trang, các bạn nên cut-paste lại đoạn mã trên để sitemap hoạt động bình thường.

Lời kết


Sitemap mà mình chia sẻ có giao diện khá đơn giản, tải nhanh và dễ nhìn. Nếu bạn thích sử dụng sitemap khác độc đáo hơn, hãy sưu tầm thêm trên mạng nhé !
Bài tiếp theo : tạo sitemap cho website trong Google Webmaster (dành riêng cho SEOer)


Từ khóa tìm kiếm :

  • sitemap for blogger
  • hướng dẫn tạo sitemap cho blogspot
  • tạo sitemap trên blogspot
  • sitemap blogspot

Code widget bài viết mới (recent posts) cho blogspot

08:18 |

Widget bài viết mới là một tiện ích mở rộng được sử dụng khá phổ biến trong blogger. Vừa tốt cho SEO, vừa chủ động tăng view cho bài viết.


Code widget bài viết mới (recent posts) cho blogspot
Code widget bài viết mới (recent posts) cho blogspot

Yêu cầu cơ bản
- Hiểu rõ về code.
- Sao lưu template trước khi thao tác, phòng trường hợp lỗi.
- Trong quá trình chèn code, nếu hệ thống báo lỗi, hãy sử dụng bảng convert mã html sang htmlx để chèn thành công nhé.

Cách chèn code vào trong blogspot
- Đăng nhập blogger.
- Bên menu trái, chọn Mẫu / Chỉnh sửa HTML
- Copy - paste code vào vị trí cần đặt.

Thông thường, wiget bài viết mới sẽ không có sẵn trong code blogger (vì nó là tiện ích mở rộng). Do đó, chúng ta sẽ phải tìm kiếm trên mạng và thay đổi code cho phù hợp với giao diện blogspot.
Những đoạn code dưới đây được mình sưu tầm và có chỉnh sửa đôi chút để dễ hiểu hơn. Code ngắn gọn, widget hoạt động tốt, bù lại CSS hơi sơ sài, nếu bạn thích giao diện bắt mắt hơn, hãy bổ sung thêm CSS và nhớ là bạn phải nắm vững về CSS nhé :)

1. Code widget bài viết mới cơ bản (không có hình ảnh)



<div>
<style type="text/css">
.bbrecpost2 {width:100%; box-sizing:border-box; padding:7px; border-bottom:1px solid #d1d1d1;}
.bbrecpost2:last-child {border:none; }
.bbrecpost2 a{color: #004D99; font:bold 13px Helvetica,Arial,san-serif; line-height:1.6em;}
.bbrecpost2 a:hover {color:darkviolet;}
.bbrecpost2 span {font-size:12px;}
</style>
<div style="border: 1px solid #d1d1d1; box-sizing: border-box;">
<script>
//<![CDATA[
function showrecentposts(json) {
  for (var i = 0; i < numposts; i++) {
    var entry = json.feed.entry[i];
    var posttitle = entry.title.$t;
    var posturl;
    if (i == json.feed.entry.length) break;
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        posturl = entry.link[k].href;
        break;
      }
    }
    posttitle = posttitle.link(posturl);
    var readmorelink = "&raquo;&raquo;";
    readmorelink = readmorelink.link(posturl);
    var postdate = entry.published.$t;
    var cdyear = postdate.substring(0,4);
    var cdmonth = postdate.substring(5,7);
    var cdday = postdate.substring(8,10);
    var monthnames = new Array();
    monthnames[1] = "Tháng 1";
    monthnames[2] = "Tháng 2";
    monthnames[3] = "Tháng 3";
    monthnames[4] = "Tháng 4";
    monthnames[5] = "Tháng 5";
    monthnames[6] = "Tháng 6";
    monthnames[7] = "Tháng 7";
    monthnames[8] = "Tháng 8";
    monthnames[9] = "Tháng 9";
    monthnames[10] = "Tháng 10";
    monthnames[11] = "Tháng 11";
    monthnames[12] = "Tháng 12";
    if ("content" in entry) {
      var postcontent = entry.content.$t;}
    else
    if ("summary" in entry) {
      var postcontent = entry.summary.$t;}
    else var postcontent = "";
    var re = /<\S[^>]*>/g;
    postcontent = postcontent.replace(re, "");
    if (!standardstyling) document.write('');
 document.write('<div class="bbrecpost2">');
    document.write('<span>');
    if (standardstyling) document.write('');

    document.write(posttitle);
    if (standardstyling) document.write('');
    if (showpostdate == true) document.write(' - ' + cdday + ' ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdyear);
    if (!standardstyling) document.write('<div class="bbrecpostsum"">');
    if (standardstyling) document.write('');
    if (showpostsummary == true) {
      if (standardstyling) document.write('');
      if (postcontent.length < numchars) {
         if (standardstyling) document.write('<i>');
         document.write(postcontent);
         if (standardstyling) document.write('</i>');}
      else {
         if (standardstyling) document.write('<i>');
         postcontent = postcontent.substring(0, numchars);
         var quoteEnd = postcontent.lastIndexOf(" ");
         postcontent = postcontent.substring(0,quoteEnd);
         document.write(postcontent + '... ' + readmorelink);
         if (standardstyling) document.write('</i>');}
}
    if (!standardstyling) document.write('</div>');
    document.write('</span>');
   document.write('</div>');
    if (standardstyling) document.write('');
}
if (!standardstyling) document.write('<div class="bbwidgetfooter">');
if (standardstyling) document.write('');
document.write('');
if (!standardstyling) document.write('</div>');
}
//]]>
</script>
<script>
var numposts = 5;
var showpostdate = true;
var showpostsummary = true;
var numchars = 100;
var standardstyling = false;
</script>
<script src="https://123itvn.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts"></script>
</div>
</div>

Trong đó, các thuộc tính :
- numposts : số lượng bài viết được hiển thị.
- showpostdate : hiển thị ngày đăng (true - có, false - không).
- showpostsummary : hiển thị mô tả ngắn (true - có, false - không).
- numchars : số ký tự của đoạn mô tả ngắn.
- standardstyling : kiểu hiển thị của đoạn mô tả ngắn (true - viết liền, false - xuống dòng).
- Thay 123itvn.com bằng đường dẫn site của bạn.

Code widget bài viết mới (recent posts) cho blogspot
Bài viết mới (recent posts) cho blogspot dạng 1 (Xem demo)

2. Code widget bài viết mới có hình ảnh và snippet 



<div>
<style type='text/css'>
.danhsach {float:left; width:100%; margin:0; padding:0; font-size:13px; background:#fff; box-shadow: 0 0 1px #d1d1d1; }
.danhsach li {float:left; width: 100%; margin:0 !important; padding-bottom:5px;padding-top:5px;min-height:75px; list-style-type:none !important; line-height:1.5em; border-bottom:1px dotted #d1d1d1;}
.danhsach li:last-child {border:none;}
.danhsach img {padding:0px;width:72px;height:72px;float:left;margin:0 5px;}
.danhsach a {text-decoration:none; font-weight:bold; color:#004D99 !important;}
.danhsach i {font-style:normal; font-size:12px; }
.danhsach strong {font-size:10px;}
.danhsach hr {display:none;}
</style>
<script>
function showrecentpostswiththumbs(json){document.write('<ul class="danhsach">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
{s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}else thumburl='http://www.webaholic.co.in/other/no-image.jpg';}
var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Tháng 1";monthnames[2]="Tháng 2";monthnames[3]="Tháng 3";monthnames[4]="Tháng 4";monthnames[5]="Tháng 5";monthnames[6]="Tháng 6";monthnames[7]="Tháng 7";monthnames[8]="Tháng 8";monthnames[9]="Tháng 9";monthnames[10]="Tháng 10";monthnames[11]="Tháng 11";monthnames[12]="Tháng 12";document.write('<li>');if(showpostthumbnails==true)
document.write('<img class="anh" src="'+thumburl+'"/>');document.write('<b><a href="'+posturl+'" target ="_top">'+posttitle+'</a></b><br>');if("content"in entry){var postcontent=entry.content.$t;}
else
if("summary"in entry){var postcontent=entry.summary.$t;}
else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('<i>');document.write(postcontent);document.write('</i>');}
else{document.write('<i>');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('</i>');}}
var towrite='';var flag=0;document.write('<br><strong>');if(showpostdate==true){towrite=towrite+cdday+' - '+monthnames[parseInt(cdmonth,10)]+' - '+cdyear;flag=1;}
if(showcommentnum==true)
{if(flag==1){towrite=towrite+' | ';}
if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
if(displaymore==true)
{if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">Chi tiết !</a>';flag=1;;}
document.write(towrite);document.write('</strong></li>');if(displayseparator==true)
if(i!=(numposts-1))
document.write('<hr size=0.5>');}document.write('</ul>');}
</script>
<script>
var numposts = 5;
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = true;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = true;
var numchars = 100;</script>
<script src="https://123itvn.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentpostswiththumbs"></script>
</div>

Trong đó, các thuộc tính
- showpostthumbnails : hiển thị hình ảnh (true - có, false - không).
- displaymore : hiển thị nút more.
- showcommentnum : hiển thị số lượng bình luận bằng Google+
- numpostsshowpostdate, showpostsummary, numchars  : giống thằng trên
- Thay 123itvn.com bằng đường dẫn site của bạn.

Code widget bài viết mới (recent posts) cho blogspot
Bài viết mới (recent posts) cho blogspot dạng 2 (Xem demo)


Từ khóa tìm kiếm :

  • bài viết mới nhất có ảnh cho blogspot
  • code bài viết mới nhất trong blogspot
  • code recent posts for blogspot
  • code wigdet bài viết mới có ảnh trong blogspot

Hình ảnh trên blogspot không hiển thị do nhà mạng chặn

11:13 |

Nhà mạng chặn tên miền đuôi blogspot


Thời gian gần đây, khi truy cập vào một số website sử dụng nền tảng blogger, người dùng sẽ không thể nhìn thấy bất cứ hình ảnh nào, thay vào đó là những icon báo lỗi như hình dưới đây.

Hình ảnh trên blogspot không hiển thị do nhà mạng chặn
Hình ảnh không thể hiển thị.

Nguyên nhân : có nhiều lý do để dẫn tới việc hình ảnh không hiển thị trên blogger, trong đó chiếm phần lớn là từ các nhà mạng (VNPT chẳng hạn). Bất cứ đối tượng nào đường dẫn có chứa đuôi blogspot.com như tên miền, hình ảnh ... sẽ đều bị chặn

Khắc phục lỗi blogspot không thể hiển thị hình ảnh


- Đăng nhập blogger, tại menu trái chọn Mẫu / Chỉnh sửa HTML
- Tìm đến thẻ đóng </body> và chèn vào sau đó 1 trong 2 đoạn mã sau.

Cách 1 : Sử dụng javascript


<script type='text/javascript'>
//<![CDATA[
var images = document.getElementsByTagName("img");
for(var i=0;i<images.length;i++)
{images[i].src = images[i].src.replace(/[0-9]+.bp.blogspot.com/,"lh4.googleusercontent.com"); }
//]]>
</script>

Cách 2 : Sử dụng Jquery


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type='text/javascript'>
//<![CDATA[
$("body img").each(function () {$(this).attr("src", $(this).attr("src").replace(/\/[0-9]+(\.bp\.blogspot)?/, "/lh4.googleusercontent")) });
//]]>
</script>

Bạn có thể bỏ dòng đầu tiên nếu thư viện jquery đã từng được khai báo trước đây.


Từ khóa tìm kiếm :

  • khắc phục lỗi hình ảnh không hiển thị trên blogspot
  • blogger không hiển thị hình ảnh do nhà mạng chặn
  • blogspot bị nhà mạng vnpt chặn
  • hiển thị ảnh trên blogspot, blogger không được

Convert mã HTML sang HTMLX để chèn vào blogspot thành công

11:00 |

Một đoạn mã bình thường nhưng bạn không thể chèn vào blogspot ? Bạn không hiểu tại sao dù đã thử mọi cách ? Bài viết này sẽ giúp bạn giải quyết điều đó :)


Convert mã HTML sang HTMLX để chèn vào blogspot thành công
"Sự cố nhỏ" nhưng khá nhiều blogger loay hoay khi mắc phải

Nguyên nhân blogspot chèn mã không thành công


Nguyên nhân chủ quan : Đoạn mã có vấn đề, lỗi ... cái này bỏ qua nhé.
Nguyên nhân khách quan : Blogspot sử dụng ngôn ngữ XHTML 1.0 - phiên bản nâng cao và mở rộng của ngôn ngữ HTML truyền thống hiện nay. Với khả năng cấu trúc chặt chẽ, XHTML đòi hỏi rất cao ở người dùng trong việc khai thác các thẻ cùng những đoạn mã xử lý. Đó là lý do vì sao một đoạn mã bất kỳ khi chèn vào HTML thì okie còn sang XHTML (Blogspot) thì không thể được.

Cách khắc phục


Hướng xử lý đơn giản nhất là sử dụng đến các website chuyển đổi mã. Bạn chỉ việc paste đoạn mã ban đầu vào ô rồi nhấn "Convert" để nhận mã mới. Nhanh chóng, dễ dàng nhưng cực kì hiệu quả :)


Một số trang chuyển đổi mã khác :
- http://www.eblogtemplates.com/blogger-ad-code-converter/
- http://www.hacktrix.com/adsense-code-converter/index.php
- http://html-to-xml-parser.blogspot.com/


Từ khóa tìm kiếm :

  • convert html sang xhtml trong blogspot
  • convert mã html chèn vào blogspot thành công
  • chuyển đổi mã html để chèn vào blogspot
  • blogspot báo lỗi khi chèn mã html
  •  


Khắc phục lỗi bình luận disqus không hiển thị trên blogspot

21:53 |

Sau khi tích hợp thành công bình luận disqus vào trong blogspot, rất nhiều bạn đã gặp phải trường hợp bình luận hiển thị không ổn định. Chúng ta có thể dễ dàng kiểm tra lỗi này bằng cách sau : truy cập một bài viết bất kỳ rồi nhấn F5 để tải lại trang, bình luận disqus sẽ lúc có lúc không.


Khắc phục lỗi bình luận disqus không hiển thị trên blogspot
Khắc phục lỗi bình luận disqus không hiển thị trên blogspot

Nguyên nhân : do tiện ích mở rộng (widget) của disqus với blogspot chưa thực sự đồng bộ khiến cho việc tải mã xử lý bị dừng lại và tất nhiên là chúng ta sẽ không thể thấy được bình luận trong trường hợp này.

Hướng xử lý : thay thế tiện ích này bằng một đoạn mã mới. Hiểu đơn giản hơn, chúng ta sẽ copy - paste y nguyên đoạn mã trong tiện ích ra bên ngoài - phần code của blogspot.

Bước 1 : Xóa bỏ tiện ích mở rộng của disqus


- Bên menu trái của blogger, chọn Bố cục. Khi đó các tiện ích mở rộng sẽ được hiển thị, nhấn vào Chỉnh sửa để tiến hành xóa bỏ tiện ích của disqus.

Khắc phục lỗi bình luận disqus không hiển thị trên blogspot
Các tiện ích đang được sử dụng trên blogspot

- Chọn Xóa bỏ

Khắc phục lỗi bình luận disqus không hiển thị trên blogspot
Xóa bỏ widget mở rộng của  bình luận disqus

- Lưu lại tiện ích.

Bước 2 : Copy mã mới cho bình luận disqus


- Bên menu trái, chọn tiếp MẫuChỉnh sửa HTML
- Copy đoạn mã sau vào chỗ bạn muốn hiển thị bình luận disqus
- Mỗi trang disqus của người dùng đều có tên miền con dạng abc.disqus.com ví dụ 123itvn.disqus.com , hãy thay thế Nam CủPeo trong đoạn mã bên dưới bằng cụm abc đó.
- Lưu template lại.

            <script type='text/javascript'>
                var disqus_shortname = &#39;Nam CủPeo&#39;;
                var disqus_blogger_current_url = &quot;<data:blog.canonicalUrl/>&quot;;
                if (!disqus_blogger_current_url.length) {
                    disqus_blogger_current_url = &quot;<data:blog.url/>&quot;;
                }
                var disqus_blogger_homepage_url = &quot;<data:blog.homepageUrl/>&quot;;
                var disqus_blogger_canonical_homepage_url = &quot;<data:blog.canonicalHomepageUrl/>&quot;;
            </script>
            <b:if cond='data:blog.pageType == &quot;item&quot;'>
                <style type='text/css'>
                    #comments {display:none;}
                </style>
                <script type='text/javascript'>
                    (function() {
                        var bloggerjs = document.createElement(&#39;script&#39;);
                        bloggerjs.type = &#39;text/javascript&#39;;
                        bloggerjs.async = true;
                        bloggerjs.src = &#39;http://&#39;+disqus_shortname+&#39;.disqus.com/blogger_item.js&#39;;
                        (document.getElementsByTagName(&#39;head&#39;)[0] || document.getElementsByTagName(&#39;body&#39;)[0]).appendChild(bloggerjs);
                    })();
                </script>
            </b:if>
                <style type='text/css'>
                    .post-comment-link { visibility: hidden; }
                </style>
                <script type='text/javascript'>
                (function() {
                    var bloggerjs = document.createElement(&#39;script&#39;);
                    bloggerjs.type = &#39;text/javascript&#39;;
                    bloggerjs.async = true;
                    bloggerjs.src = &#39;http://&#39;+disqus_shortname+&#39;.disqus.com/blogger_index.js&#39;;
                    (document.getElementsByTagName(&#39;head&#39;)[0] || document.getElementsByTagName(&#39;body&#39;)[0]).appendChild(bloggerjs);
                })();
                </script>

Nhấn F5 để kiểm tra xem bình luận hiển thị ổn định chưa nhé :)


Từ khóa tìm kiếm :

  • disqus không hiển thị trong blogspot
  • bình luận disqus không hiển thị với blogger
  • khắc phục lỗi hiển thị của bình luận disqus

Tích hợp bình luận disqus vào trong blogspot

20:22 |

Sử dụng dễ dàng, quản lý hiệu quả - đó là những gì mà disqus mang lại khi nó được tích hợp vào trong bình luận của blogspot


Tích hợp bình luận disqus vào trong blogspot blogger
Tích hợp bình luận disqus vào trong blogspot

Disqus là một hệ thống bình luận được sử dụng khá phổ biến ở nhiều website trên thế giới. Với bài viết này thì mình sẽ không phân tích về ưu hay nhược điểm của disqus mà để các bạn tự khám phá trong quá trình sử dụng :) Nhìn chung, disqus tương đối thân thiện với người dùng, hệ thống bình luận này được hỗ trợ cho khá nhiều nền tảng khác nhau, trong đó có blogspot.

Đăng ký tài khoản trên disqus.com


Tài khoản này sẽ được sử dụng như một công cụ để bạn truy cập trang quản lý và thực hiện các thao tác cần thiết trước khi đi vào công việc chính của ngày hôm nay : tích hợp bình luận disqus vào trong blogspot.

Bước 1 : Truy cập trang đăng ký, nhập đầy đủ thông tin rồi nhấn Create Account để tạo tài khoản.

Tích hợp bình luận disqus vào trong blogspot blogger
Đăng ký tài khoản disqus

Bước 2 : Vào email để xác nhận tài khoản.
Bước 3 : Đăng nhập disqus bằng tài khoản vừa tạo và chuẩn bị cho công đoạn tiếp theo.

Tích hợp bình luận disqus vào trong blogspot / blogger


Bước 1 : Tiến hành


Trên thanh menu ngang, chọn Add Disqus to Your Site

Tích hợp bình luận disqus vào trong blogspot blogger

Bước 2 : Tạo trang quản lý trên disqus


Trang quản lý này sẽ là nơi để bạn kiểm soát toàn bộ hệ thống bình luận trên disqus với vai trò của một quản trị viên (admin), bạn cũng có thể phân quyền quản trị cho người khác nếu muốn.

- Site name : tên mà blogspot sẽ được hiển thị trong khung bình luận, ví dụ : 123itvn.com
- Disqus URL : đường dẫn để truy cập vào trang quản lý bình luận, ví dụ : 123itvn.disqus.com
- Category : chuyên mục, nội dung chính của blogspot

Nhấn Finish registration để chuyển sang bước tiếp theo.

Tích hợp bình luận disqus vào trong blogspot blogger
Tạo mới trang quản lý trên disqus

Bước 3 : Lựa chọn nền tảng để tích hợp bình luận disqus


Hiện tại thì disqus đang hỗ trợ cho 9 nền tảng khác nhau, trong đó cái đầu tiên - Universal Code là một website thông thường (asp, aspx, php, ...) Với nội dung của bài viết này, mình sẽ lựa chọn nền tảng blogger.

Tích hợp bình luận disqus vào trong blogspot blogger
9 nên tảng được hỗ trợ bởi hệ thống disqus.com

Bước 4 : Tích hợp bình luận disqus trên nền tảng Blogger (Blogspot)


Tích hợp bình luận disqus vào trong blogspot blogger
3 thao tác cần thiết để tích hợp bình luận disqus

Để đảm bảo cho việc tích hợp bình luận disqus vào trong blogspot thành công, sẽ có 3 thao tác sau đây cần phải thực hiện :

1. Thêm tiện ích mở rộng của disqus vào trong blogspot (bắt buộc)
Trên thực tế, tiện ích mở rộng này chính là toàn bộ code để bình luận disqus hoạt động.

Lưu ý : Việc sử dụng trực tiếp tiện ích mở rộng của disqus đôi khi sẽ khiến cho bình luận không được hiển thị trên blogspot. Đây là một lỗi rất "vớ vẩn" mà nhiều blogger đang gặp phải, trong đó có mình ^.^   Nếu bạn muốn xử lý triệt để sự cố này, hãy làm theo hướng dẫn trong bài viết "Khắc phục lỗi bình luận disqus không hiển thị trên blogspot"

Tích hợp bình luận disqus vào trong blogspot blogger
Thêm tiện ích mở rộng

2. Đồng bộ hóa bình luận giữa disqus và nền tàng blogger (không bắt buộc)
Với thao tác này, hệ thống disqus sẽ yêu cầu bạn phải cấp quyền truy cập cho nó.

Tích hợp bình luận disqus vào trong blogspot blogger
Bạn cso thể cấp quyền truy cập cho disqus hoặc không

3. Bổ sung thẻ <meta> sau vào trong cặp thẻ <head> của blogspot
 <meta content='IE=9; IE=8; IE=7; IE=EDGE; chrome=1' http-equiv='X-UA-Compatible'/>
Thẻ meta này sẽ có tác dụng hỗ trợ cho bình luận disqus hoạt động ổn định trên các trình duyệt khác nhau.

Bước 5 : Kiểm tra bình luận


Hãy truy cập một bài viết bất kỳ trên blogspot và kiểm tra xem bình luận disqus đã được hiển thị  hay chưa ?
Nếu những gì bạn nhìn thấy giống với hình ảnh dưới đây thì chúc mừng, bạn đã tích hợp bình luận disqus vào trong blogspot thành công rồi đấy :)

Tích hợp bình luận disqus vào trong blogspot blogger
Giao diện bình luận disqus trong blogspot 123itvn

Ở bài viết tiếp theo, mình sẽ hướng dẫn rõ hơn về cách quản lý bình luận disqus, cả nhà nhớ đón xem nhé :)


Từ khóa tìm kiếm :

  • tích hợp disqus vào trong blogspot
  • tích hợp bình luận disqus vào nền tảng blogger
  • cách tích hợp bình luận disqus vào blogspot
  • bình luận disqus cho blogspot

Loại bỏ CSS mặc định trong blogspot

00:27 |

Nếu cảm thấy không cần thiết, hãy chủ động loại bỏ CSS mặc định ra khỏi blogspot. Chí ít thì nó cũng sẽ giúp bạn biết cách quản lý tốt hơn mã CSS trong blogspot của mình.


Loại bỏ CSS mặc định trong blogspot
Loại bỏ CSS mặc định trong blogspot

Với hầu hết template hiện nay, mã CSS luôn được gói gọn trong cặp thẻ <b:skin><![CDATA[...]]></b:skin>. Bên cạnh đó thì hệ thống blogger cũng tự động bổ sung thêm 2 đoạn mã CSS khác chạy ở chế độ ngầm hay còn gọi là CSS mặc định để hỗ trợ cho giao diện blogspot trong trường hợp mã CSS do người dùng thiết lập xảy ra sự cố.

Chúng ta sẽ không thể phát hiện được 2 đoạn mã CSS này cho đến khi sử dụng công cụ tăng tốc website Google PageSpeed Insights, và đây chính là 2 đường dẫn ngầm của CSS mặc định trong bảng phân tích trêm blog 123itvn :
- https://www.blogger.com/static/v1/widgets/1535467126-widget_css_2_bundle.css
- https://www.blogger.com/dyn-css/authorization.css?targetBlogID=5928503874529193062&zx=15e8ec81-ae72-43ae-9278-03106cd2b659

Loại bỏ CSS mặc định trong blogspot
CSS mặc định được phát hiện trong phân tích của Google PageSpeed Insights

Trên thực tế, CSS mặc định chỉ là một thành phần bổ trợ và chúng ta có thể loại bỏ hoàn toàn nó ra khỏi template mà không phải lo lắng về những thay đổi trong giao diện blogspot. Tất nhiên, bạn cũng phải là người am hiểu về mã CSS để có thể làm chủ được tình thế :)

Lưu ý : Trước khi đi vào chủ đề chính, các bạn nên sao lưu sẵn cho mình 1 bản template để đề phòng trường hợp blogspot xảy ra sự cố sau khi loại bỏ mã CSS. Làm theo hướng dẫn sau đây :
Tại menu trái, chọn Mẫu ⇒ Sao lưu / Khôi phục ⇒ Tải xuống mẫu hoàn chỉnh.

Loại bỏ CSS mặc định trong blogspot
Tải xuống mẫu template ban đầu

Cách loại bỏ CSS mặc định trong blogspot


Bước 1 : Truy cập trang chỉnh sửa template


Đăng nhập blogspot. Bên menu trái, chọn Mẫu  ⇒ Chỉnh sửa HTML.

Loại bỏ CSS mặc định trong blogspot
Giao diện blogspot

Bước 2 : Loại bỏ CSS mặc định


- Nhấn tổ hợp phím Ctrl + F để bật chức năng tìm kiếm, sau đó tìm đến đoạn mã <b:skin>
- Cắt bỏ toàn bộ đoạn mã CSS nằm trong cặp thẻ <b:skin><![CDATA[...]]></b:skin> sau đó lưu tạm chúng vào file Word hoặc NotePad.
- Thay thế cặp thẻ <b:skin><![CDATA[...]]></b:skin> bằng đoạn mã sau :

&lt;style type=&quot;text/css&quot;&gt;&lt;!-- /*<b:skin><![CDATA[*/]]></b:skin>
<style type='text/css'>/*Code*/</style>

- Tiếp tục thay thế chữ Code bằng đoạn mã CSS mà bạn vừa lưu ở Word hoặc NotePad.

Bước 3 : Lưu và kiểm tra


- Lưu template để hoàn tất việc loại bỏ CSS mặc định.
- Sử dụng công cụ Google PageSpeed Insights để kiểm tra xem CSS mặc định còn tồn tại hay không. Nếu chúng vẫn còn hiển thị, hãy kiểm tra lại chi tiết công đoạn ở bước 2.
- F5 và kiểm tra tổng thể giao diện blogspot (bao gồm cả các trang con), nếu nó thay đổi quá nhiều và bạn không thể kiểm soát được CSS thì tốt nhất là nên sử dụng lại template cũ ^.^  Với template của mình thì nhìn chung mọi thứ vẫn ổn, chỉ có thay đổi 1 chút về các thẻ ul,ol ...

Bên cạnh đó, nếu căn cứ vào PageSpeed Insights  thì chúng ta có thể thấy ngay là tốc độ blogspot đã được cải thiện đáng kể sau khi loại bỏ đi các CSS mặc định, coi như có thêm 1 tác dụng phụ :))


Từ khóa tìm kiếm :

  • loại bỏ css mặc định trong blogspot
  • loai bo css mac dinh cua blogspot