Mặc định kích thước hình ảnh khi đăng bài trên blogger

LongAnIT 3/18/2019 Bình luận
Thông thường khi post bài lên blogger, bạn sẽ up kèm một vài hình ảnh lên bài đăng. Trong blogger có một tính năng rất hay đó là sau khi upload tấm hình lên bài đăng bạn chỉ cần click vào bức ảnh khi đó bạn sẽ có các tùy chỉnh ảnh: Ảnh nhỏ, ảnh trung bình, ảnh lớn, ảnh rất lớn và cả kích thước ảnh ban đầu. Tuy nhiên tính năng này có những hạn chế nhất định của nó đó chính là tùy chỉnh kích thước theo ý muốn về chiều rộng và chiều cao của bức ảnh.
ảnh thumbnail trong blogspot
Thay đổi kích thước ảnh thumbnail trong blogspot

Trong trường hợp ảnh có kích thước quá lớn có thể dẫn đến tràn bề ngang của trang blog, gây mất thẩm mỹ. Trong bài viết này tôi sẽ hướng dẫn các bạn cách tùy chỉnh mặc định kích thước hình ảnh khi đăng bài trên blogger một cách đơn giản nhất bằng cách tùy chỉnh CSS. Thực hiện các bước sau đây để tiến hành

Bướ 1: Đăng nhập vào quản trị Blogger --> Chủ đề --> Chỉnh sửa HTML
Bước 2: Copy đoạn code CSS bên dưới vào trước thẻ  ]]></b:skin>

.post img {
max-width:800px;
min-width:600px;
 }

Điều chỉnh lại max-with và min-with cho phù hợp. Lưu ý rằng mỗi template có cấu trúc CSS khác nhau tùy vào người viết bạn chỉnh lại sao cho nó phù hợp với code trên

Giải thích: 

  1. max-width: 800px: Chiều rộng tối đa bức ảnh là 800px
  2. min-width:600px : Chiều rộng tối thiểu của bức ảnh là 600px


Nếu bạn muốn tất cả các hình ảnh hiển thị trong phần bài viết có kích thước cố định là 800 x 600 thì bạn có thể sử dụng code sau đây
.post img {   
width:800px;     
height:600px;     
 }
Kết luận: Như vậy qua bài viết trên tôi đã hướng dẫn các bạn cách set mặc định kích thước hình ảnh khi đăng bài trên blogger với CSS căn bản. Ngoài ra bạn có thể sử dụng tính năng Reponsive hình ảnh trong blogger với code tại đây 

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

Thuộc tính con trỏ chuột trong CSS

LongAnIT 3/09/2019 Bình luận
Thuộc tính trỏ chuột có chức năng quyết định cách hiển thị của con trỏ khi di qua một thành phần nào đó, trong bài viết này tôi sẽ hướng dẫn các bạn cách hiển thị các kiểu con trỏ trong CSS Blogger.

Minh họa thuộc tính con trỏ chuột
Minh họa thuộc tính con trỏ chuột

Bước 1: Bạn truy cập vào blog hay trang web của bạn
Bước 2: Click chuột phải vào vùng trống trên trang web sau đó chọn "kiểm tra" hoặc bạn có thề truy cập nhanh bằng việc nhấn phím nóng F12 thần chưởng quá dễ đúng không. Sau khi vào màn hình dành cho nhà phát triển bạn chọn như hình

Thuộc tính con trỏ chuột trong CSS
Thuộc tính con trỏ chuột trong CSS
Ở đây tại thẻ Body CSS mình thêm vào đoạn "cursor:" khi đó trình duyệt sẽ hiện ra các kiểu con trỏ như bên dưới.
auto
alias
crosshair
col-resize
default
e-resize
help
move
n-resize
ne-resize
nw-resize
not-allowed
no-drop
pointer
progress
row-resize
s-resize
se-resize
sw-resize
text
w-resize
wait
Tất cả các trình duyệt phổ thông gồm Chrome, FireFox, Opera, Safari và IE đều hỗ trợ các thuộc tính liên quan đến con trỏ. Bạn có thể thay đổi các thông số con trỏ chuột như tôi liệt kê bên dưới để xem nó thay đổi thế nào nhé

Kết luận: Qua bài viết trên tôi đã hướng dẫn các bạn cách tìm hiểu về thuộc tính các kiểu con trỏ chuột trong CSS hi vọng sẽ giúp ích được cho các bạn.


CSS căn bản cách đổi màu link liên kết trên website

LongAnIT 3/09/2019 Bình luận
Khi bạn online trên internet hoặc bản thân là quản trị một trang web khi truy cập vào các đường link trong trạng thái tĩnh hay động bạn sẽ thấy có hiệu ứng màu link

Hiệu ứng màu link nó được tạo ra ừ CSS áp dụng cho tất cả link liên kết của website, blog của bạn. Tạo hiệu ứng thay đổi màu sắc phân biệt rõ ràng cho khách truy cập.
CSS căn bản cách đổi màu link liên kết trên web
CSS căn bản cách đổi màu link liên kết trên web

Phân biệt link đã truy câp, link chưa truy cập và di chuột vào sẽ thay đổi thành màu sắc khác nhau. Trong bài viết này tôi sẽ hướng dẫn các bạn tìm hiểu về cách thay đổi các màu link này theo ý mình

Ví dụ: Tôi có đoạn code CSS như sau:

/* màu Link khi chưa truy cập*/
a:link {
color:#3366ff;
text-decoration:none;
}
/*Màu Link khi đã truy cập*/
a:visited {
color:#cccccc;
text-decoration:none;
}
/*Màu link khi rê chuột vào*/
a:hover {
color:#339966;
text-decoration:underline;
}

Như đoạn code trên tôi chia làm 3 trường hợp

  1. Trường hợp 1: màu link chi chưa truy cập 
  2. Trường hợp 2: màu link khi đã truy cập
  3. Trường hợp 3: màu link khi rê chuột vào
Nói thì có vẻ mông lung thật ra dành cho những bạn chưa biết thôi chứ những bạn đã biết về HTML và CSS thì cái này nó rất cơ bản. Vậy để hiểu rõ hơn bạn hãy truy cập vào web của mình nhé. Chúc các bạn có một ngày cuối tuần vui vẻ nhé


Reponsive hiển thị bài viết theo nhãn Blogger dạng tab

LongAnIT 3/09/2019 Bình luận
Với thời điểm hiện nay các trang blogger ngày càng đẹp và  hoàn thiện  hơn, nhiều trang nhìn đẹp và chuyên nghiệp không khác gì các trang web được code chuẩn từ các mã nguồn Wordpress, Joomla..., 

Hôm nay quay trở lại trong mục bài viết Widget Blogger tôi sẽ hướng dẫn các bạn cách tạo Widget hiển thị bài viết theo nhãn với nhiều tab và mỗi tab chứa một nhãn như hình bên dưới

Widget bài viết theo nhãn dạng tab
Widget bài viết theo nhãn dạng tab

Không nói vòng vo nữa, chúng ta bắt đầu ngay thôi nhé

Bước 1: Đăng nhập vào Blogger - Chủ đề - Chỉnh sửa HTML copy toàn bộ đoạn code bên dưới vào trước thẻ đóng  ]]></b:skin>
/* Recent Post Label */
.recent-labpost{margin:20px;}
.rctab-button > span{padding:15px 20px;cursor:pointer;position:relative;color:#222;display:inline-block;font-size:120%;font-weight:700;}
.rctab-button > span.active{color:#222;background:rgba(0,0,0,0.05)}
.rctab-button > span.active:before{content:'';top:0;opacity:1}
.rctab-content{padding:15px;background:rgba(0,0,0,0.05);position:relative;min-height:100px;overflow:auto}
.rctab-item{float:left;width:48%;margin:10px 1%;background:#fff;border:1px solid rgba(0,0,0,0);transition:all .3s;}
.rctab-item:hover{border:1px solid rgba(0,0,0,0.1);}
.rctab-item-inner{padding:10px}
.rctab-item img{float:left;width:120px;height:auto;}
.rctab-item h3{float:right;width:calc(100% - 130px);height:20px;margin:10px 0;font-size:120%}
.rctab-item h3 a{color:#222}.rctab-item h3 a:hover{color:#e74c3c}
.loader{position:absolute;left:50%;top:50%;margin-left:-27.5px;margin-top:-27.5px;transition:all .3s linear}
.hide-load .loader{opacity:0}
.squarin{background:#374140;width:15px;height:15px;float:left;top:-10px;margin-right:5px;margin-top:5px;position:relative;opacity:0;-webkit-animation:enter 6s infinite;animation:enter 6s infinite}
.enter{top:0;opacity:1}
.squarin:nth-child(1){-webkit-animation-delay:1.8s;-moz-animation-delay:1.8s;animation-delay:1.8s}
.squarin:nth-child(2){-webkit-animation-delay:2.1s;-moz-animation-delay:2.1s;animation-delay:2.1s}
.squarin:nth-child(3){-webkit-animation-delay:2.4s;-moz-animation-delay:2.4s;animation-delay:2.4s;background:#09c}
.squarin:nth-child(4){-webkit-animation-delay:0.9s;-moz-animation-delay:0.9s;animation-delay:0.9s}
.squarin:nth-child(5){-webkit-animation-delay:1.2s;-moz-animation-delay:1.2s;animation-delay:1.2s}
.squarin:nth-child(6){-webkit-animation-delay:1.5s;-moz-animation-delay:1.5s;animation-delay:1.5s}
.squarin:nth-child(8){-webkit-animation-delay:0.3s;-moz-animation-delay:0.3s;animation-delay:0.3s}
.squarin:nth-child(9){-webkit-animation-delay:0.6s;-moz-animation-delay:0.6s;animation-delay:0.6s}
@media screen and (max-width:768px) {
.rctab-item{float:left;width:100%;}
.rctab-item {margin:10px auto;}}

Bước 2:  Tiếp tục tìm đến thẻ </head> và chèn đoạn code sau vào phía trước nó
<script type='text/javascript'>
//<![CDATA[
function getMeImg(a){var t=[a,a,!1];return void 0!==a?-1!==a.url.indexOf("img.youtube")?(t[0]=a.url.replace("default.jpg","hqdefault.jpg"),t[1]=a.url.replace("default.jpg","mqdefault.jpg"),t[2]=!0):(t[0]=a.url.replace("s72-c","w100-h75-c"),t[1]=a.url.replace("s72-c","s500-c")):(t[0]="https://4.bp.blogspot.com/-THLip_5EXck/V4zK2o3lA6I/AAAAAAAAJfg/RG-Qo6D73z0zLAigWBEdfnFveop1IIa5gCLcB/s1600/thumb.png",t[1]="https://4.bp.blogspot.com/-THLip_5EXck/V4zK2o3lA6I/AAAAAAAAJfg/RG-Qo6D73z0zLAigWBEdfnFveop1IIa5gCLcB/s1600/thumb.png"),t}function load_w_tab(a){var t=a.find(".rctab-content>.active"),e=t.attr("data-load");$.ajax({type:"GET",url:"/feeds/posts/summary/-/"+e+"?max-results=6&alt=json-in-script",async:!1,contentType:"application/json",dataType:"jsonp",success:function(a){if(a.feed.entry){t.append('<div class="wtab-inner"></div>');for(var e=0;e<a.feed.entry.length;e++){for(var i=a.feed.entry[e],d=0;d<a.feed.entry[e].link.length;d++)if("alternate"==a.feed.entry[e].link[d].rel){var s=a.feed.entry[e].link[d].href;break}var n=i.title.$t,l=getMeImg(i.media$thumbnail),r='<div class="rctab-item"><div class="rctab-item-inner"><a href="'+s+'"><img src="'+l[0]+'"/></a><h3><a href="'+s+'">'+n+'</a></h3><div style="clear:both"></div></div></div>';t.find(".wtab-inner").append(r)}t.addClass("hide-load")}}})}function getwtabs(e){for(var labelArr=eval(e.attr("data-label")),html='<div class="rctab-button">',i=0;i<labelArr.length;i++)html+='<span data-target="'+labelArr[i]+'-genova">'+labelArr[i]+"</span>";html+='</div><div class="rctab-content">';for(var i=0;i<labelArr.length;i++)html+='<div data-load="'+labelArr[i]+'" data-container="'+labelArr[i]+'-genova">'+loaderHTML+"</div>";html+="</div>",e.append(html),e.find(".rctab-button>span").first().addClass("active"),e.find(".rctab-content>div").hide(0),e.find(".rctab-content>div").first().show(0).addClass("active loaded"),setTimeout(function(){load_w_tab(e)},500),e.find(".rctab-button>span").click(function(){var a=$(this).attr("data-target"),t=$(this),i="";e.find(".rctab-content>div").each(function(){$(this).attr("data-container")==a&&(e.find(".rctab-button>span").removeClass("active"),t.addClass("active"),e.find(".rctab-content>div").removeClass("active").hide(0),$(this).fadeIn().addClass("active"),i=$(this))}),i.hasClass("loaded")||(i.addClass("loaded"),setTimeout(function(){load_w_tab(e)},500))})}var loaderHTML='<div class="loader"> <div class="squarin" ></div> <div class="squarin"></div> <div class="squarin last"></div> <div class="squarin clear"></div> <div class="squarin"></div> <div class="squarin last"></div> <div class="squarin clear"></div> <div class="squarin "></div> <div class="squarin last"></div> </div>';$(function(){getwtabs($(".recent-labpost"))});
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
function getMeImg(a){var t=[a,a,!1];return void 0!==a?-1!==a.url.indexOf("img.youtube")?(t[0]=a.url.replace("default.jpg","hqdefault.jpg"),t[1]=a.url.replace("default.jpg","mqdefault.jpg"),t[2]=!0):(t[0]=a.url.replace("s72-c","w100-h75-c"),t[1]=a.url.replace("s72-c","s500-c")):(t[0]="https://4.bp.blogspot.com/-THLip_5EXck/V4zK2o3lA6I/AAAAAAAAJfg/RG-Qo6D73z0zLAigWBEdfnFveop1IIa5gCLcB/s1600/thumb.png",t[1]="https://4.bp.blogspot.com/-THLip_5EXck/V4zK2o3lA6I/AAAAAAAAJfg/RG-Qo6D73z0zLAigWBEdfnFveop1IIa5gCLcB/s1600/thumb.png"),t}function getauthor(a){for(var t=0;t<a.length;t++)var e="<span class='author'>&#xf007; "+a[t].name.$t+"</span>";return e}function getmeta(a){var t=[];t[1]="Jan",t[2]="Feb",t[3]="Mar",t[4]="Apr",t[5]="May",t[6]="Jun",t[7]="Jul",t[8]="Aug",t[9]="Sep",t[10]="Oct",t[11]="Nov",t[12]="Dec";var e=a.substring(0,4),s=a.substring(5,7),n=a.substring(8,10),i="<span class='date'>&#xf017; "+t[parseInt(s,10)]+" "+n+" "+e+"</span>";return i}function t(a){var a,t,e=[];for(t=0;a>t;t++)e.push(t);return shuffle(e)}function getmashrandom(a){var e="/feeds/posts/summary/?max-results=500&alt=json-in-script",s=a.find("div.tab-mash-random");s.find("span#tab-mash-random").addClass("loaded"),s.append('<ul class="random-inner"></ul>'),$.ajax({type:"GET",url:e,async:!0,contentType:"application/json",dataType:"jsonp",success:function(a){s.addClass("hide-load");for(var e=a.feed.entry,n=e.length,i=t(n),r=0;5>r;r++){for(var d=0;d<a.feed.entry[i[r]].link.length;d++)if("alternate"==e[i[r]].link[d].rel){var l=a.feed.entry[i[r]].link[d].href;break}var c=getMeImg(e[i[r]].media$thumbnail),o=e[i[r]].title.$t,u=e[i[r]].published.$t,h=getmeta(u),f=getauthor(e[i[r]].author),m='<li><a href="'+l+'"><img  class="toLoad" src="'+c[0]+'"/></a><div class="recent-list-c"><h3><a href="'+l+'">'+o+'</a></h3><div class="meta">'+f+" "+h+"</div></div></li>";s.find("ul").append(m)}}})}function getmashrecent(a){a.find("span#tab-mash-recent").addClass("loaded"),$.ajax({type:"GET",url:"/feeds/posts/summary?max-results=6&alt=json-in-script",async:!1,contentType:"application/json",dataType:"jsonp",success:function(t){if(t.feed.entry){a.find("div.tab-mash-recent").append('<ul class="recent-post-list"></ul>');for(var e=0;e<t.feed.entry.length;e++){for(var s=t.feed.entry[e],n=0;n<t.feed.entry[e].link.length;n++)if("alternate"==t.feed.entry[e].link[n].rel){var i=t.feed.entry[e].link[n].href;break}var r=s.title.$t,d=getmeta(s.published.$t),l=getauthor(s.author),c=getMeImg(s.media$thumbnail),o="<li class='recent-post-item'><a href='"+i+"'><img src='"+c[0]+"'/></a><div class='recent-list-content'><h3><a href='"+i+"'>"+r+"</a></h3><div class='recent-list-meta'>"+d+l+"</div></div></li>";a.find("div.tab-mash-recent ul").append(o)}}}})}var loaderHTML='<div class="loader"> <div class="squarin" ></div> <div class="squarin"></div> <div class="squarin last"></div> <div class="squarin clear"></div> <div class="squarin"></div> <div class="squarin last"></div> <div class="squarin clear"></div> <div class="squarin "></div> <div class="squarin last"></div> </div>';shuffle=function(a){for(var t,e,s=a.length;s;t=parseInt(Math.random()*s),e=a[--s],a[s]=a[t],a[t]=e);return a},$(function(){$(".thetabs").each(function(){var a=$(this);a.append("<div class='tab-mash-outer'><div class='tab-mash-button'><span class='active' id='tab-mash-recent'><i class='fa fa-rss'></i> Recent</span><span id='tab-mash-random'><i class='fa fa-random'></i> Random</span></div><div class='tab-mash-content'><div class='tab-mash-recent min-height-need'></div><div class='tab-mash-random min-height-need' style='display:none;'>"+loaderHTML+"</div></div></div>"),getmashrecent(a),a.find(".tab-mash-button>span").click(function(){var t=$(this),e=a.find(".tab-mash-content>div");e.each(function(){$(this).hasClass(t.attr("id"))?($(this).fadeIn(),a.find(".tab-mash-button>span").removeClass("active"),t.addClass("active"),t.hasClass("loaded")||("tab-mash-random"==t.attr("id")?(t.addClass("loaded"),setTimeout(function(){getmashrandom(a)},500)):"tab-mash-comment"==t.attr("id")&&(t.addClass("loaded"),setTimeout(function(){getmashcomment(a)},2e3)))):$(this).hide(0)})})})});
//]]>
</script>
Bước 3: Tìm vị trí để đặt khung chứa Tab bài viết hiển thị, phần này thì tùy bạn, có thể đặt em nó dưới thẻ <header>. Copy toàn bộ đoạn code bên dưới và dán vào

 <b:if cond='data:blog.url == data:blog.homepageUrl'><!-- Nội dung chỉ hiển thị trên trang chủ -->
<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'><!-- Nội dung không hiển thị trên Mobile -->
<div class='container'>
<div class='row'>
<div class='col-xs-12 col-sm-12 col-md-12 col-lg-12'><!-- Bạn phải có thư viện bootstrap để sử dụng code này nhé -->
<div class='recent-labpost' data-label='[&quot;SEO&quot;,&quot;SEO Onpage&quot;,&quot;SEO Offpage&quot;,&quot;Blogging tips&quot;,&quot;Computer Tricks&quot;]'/></div>
</div>
</div>
</b:if></b:if>

Bước 4: Tiến hành thay đổi các nhãn: SEO, SEO Onpage, SEO Offpage, Blogging tips, Computer Tricks thành thành nhãn mà bạn muốn hiển thị phù hợp trong blog của bạn.

Lưu ý: Nếu máy bạn chưa có thư viện boostrap thì bạn hãy nhúng nó vào nhé vì phần tạo widget này mình tạo dựa trên nó mục đích là Reponsive trên các thiết bị.

Kết luận: Như vây qua bài này chúng ta lại có một cái nhìn nữa về tính đa dạng của Blogger trong việc hiển thị nhãn bài viết hi vọng các bạn có những trải nghiệm tốt sau khi thực hành cùng tôi.

Chúc các bạn thành công và đừng quên để lại comment bên dưới để trao đổi cũng như là hỗ trợ nhé.

Cách chia cột tương tác với tỷ lệ màn hình trong bootstrap

LongAnIT 3/04/2019 2 Bình luận
Trong bài viết trước mình đã hướng dẫn các bạn cách nhúng Bootstrap vào Blogger và một bài giới thiệu hệ thống lưới trong bootstrap. trong bài viết ngày hôm nay mình sẽ hướng dẫn các bạn cách chia cột tương tác tỷ lệ màn hình một cách nhanh chóng, tương tác tốt với các thiết bị khác nhau như: desktop (máy bàn), laptop (máy tính xách tay), tablet (máy tính bảng), smart phone (điện thoại thông minh).
Cách chia cột tương tác với tỷ lệ màn hình trong bootstrap
Cách chia cột tương tác với tỷ lệ màn hình trong bootstrap

Chúng ta cần nhớ các lệnh cơ bản như sau trong hệ thống lưới:
  • Lớp .col-xs-* sử dụng tương thích với màn hình smart phone (< 768px)
  • Lớp .col-sm-* sử dụng tương thích với màn hình tablet (>= 768px)
  • Lớp .col-md-* sử dụng tương thích với màn hình laptop, desktop (>= 992px)
  • Lớp .col-lg-* sử dụng tương thích với màn hình desktop (>= 1200px)

Ví dụ 1: Sử dụng bootstrap, chia 2 cột với tỉ lệ bằng nhau:
<div class="container">
 <div class="row">
             <div class="col-sm-6">
                    <div class="mauxanh">Cột thứ 1</div>
             </div>
             <div class="col-sm-6">
                    <div class="mauhong">Cột thứ 2</div>
             </div>
    </div> 
</div>

Ví dụ 2: Sử dụng bootstrap, chia 2 cột với tỉ lệ 1:2
<div class="container">
 <div class="row">
     <div class="col-sm-4">
         <div class="nenxanh">Cột thứ 1 tỉ lệ 1</div>
        </div>
        <div class="col-sm-8">
         <div class="nenhong">Cột thứ 2 tỉ lệ 2</div>
        </div>
    </div> 
</div>
Ví dụ 3: Chia 3 cột có tỷ lệ bằng nhau trong Bootstrap cũng tương tự như chia 2 cột.
<div class="container">
 <div class="row">
     <div class="col-md-4">
         <div class="nenxanh">Cột thứ 1</div>
        </div>
        <div class="col-md-4">
         <div class="nenhong">Cột thứ 2</div>
        </div>
        <div class="col-md-4">
         <div class="nenvang">Cột thứ 3</div>
        </div>
    </div> 
</div>
Ví dụ 4: Để chia 3 cột có tỷ lệ khác nhau, các bạn làm tương tự như ví dụ 3, chỉ việc thay chỉ số sau .col-md-*, luôn nhớ tổng các giá trị này là 12.
<div class="container">
 <div class="col-md-2">
         <div class="nenxanh">Cột thứ 1</div>
        </div>
        <div class="col-md-8">
         <div class="nenhong">Cột thứ 2</div>
        </div>
        <div class="col-md-2">
         <div class="nenvang">Cột thứ 3</div>
        </div>
</div>
Ví dụ 5: Sử dụng bố cục kết hợp trên nhiều thiết bị di động như desktop, laptop, tablet, smart phone. 
  • Thiết bị có độ phân giải từ 1024x728 trở lên, bố cục được chia thành 3 cột (hình 8)
  • Thiết bị có độ phân giải 728x1280, bố cục được chia thành 2 cột (hình 9)
  • Thiết bị có độ phân giải nhỏ hơn 728, bố cục được chia thành 1 cột (hình 10)
<div class="container">
 <div class="row">
     <div class="col-sm-3 col-md-2">
         <div class="nenxanh">Cột thứ 1</div>
        </div>
        <div class="col-sm-9 col-md-8">
         <div class="nenhong">Cột thứ 2</div>
        </div>
        <div class="col-sm-12 col-md-2">
         <div class="nenvang">Cột thứ 3</div>
        </div>
    </div> 
</div>

Hướng dẫn tích hợp Customer Chat Facebook vào website

LongAnIT 2/22/2019 1 Bình luận
Trong bài viết hôm trước tôi đã có giới thiệu với các bạn cách tích hợp live chat facebook vào trong blogspot đây là code mà mình lấy nguồn từ bạn Nguyễn Cao Tú chia sẻ trên site.

Trong bài viết hôm nay mình sẽ tiếp tục hướng dẫn các bạn thêm một cách tích hợp "Live chat Facebook" version 2 vào trong web của mình. Trước tiên mình xin giới thiệu đôi chút về plugin này
Live chat Facebook version 2
"Live chat Facebook" version 2

Customer Chat Facebook là plugin do chính Facebook phát hành, giúp các webmaster có thể tạo khung live chat nhanh chóng, hỗ trợ khách hàng đối với doanh nghiệp cũng như là các site cá nhân. Tuy vẫn còn một số hạn chế về Customize nhưng tất cả những thứ mà mà plugin này mang lại còn hơn cả mong đợi.

Ưu điểm:

  • Hoàn toàn miễn phí (Không cần phải trả phí như một số Live chat khác)
  • Dễ cài đặt và vận hành.
  • Hỗ trợ người dùng nhanh chóng thông qua Facebook messenger.
  • Customer Chat Facebook hiển thị, hoạt đông tốt trên mọi loại trình duyệt trên PC, Mobile và Tablet.

Nhược điểm:

  • Người dùng cần có một tài khoản Facebook để đăng nhập.
  • Chưa thật sự có nhiều tùy biến.
  • Không thể theo dõi người dùng có đang truy cập Online hay không.
  • Các bước tích hợp Customer Chat Facebook vào website:
  • Yêu cầu cơ bản để tích hợp được Customer Chat Facebook vào website là:
  • Bạn phải có một tài khoản Facebook và có một trang Fanpage.
  • Bạn phải có 1 App Facebook để lấy ID cho phần source code của plugin có thể hoạt động.
  • Bước 1: Cấu hình plugin Customer Chat Facebook từ cài đặt của Fanpage Facebook.
  • Đầu tiên, bạn vào trang Fanpage Facebook, nhấn vào Cài đặt nằm ở góc phải trên màn hình. Tiếp theo là chọn Nền tảng Messenger nằm bên thanh menu bên trái. Nhấn chọn tiếp “Chuyển đển phần” Plugin Chat với khách hàng.

Các bước tích hợp Customer Chat Facebook vào website:

Bước 1: Vào trang Fanpage Facebook, nhấn vào "Cài đặt" nằm ở góc phải trên màn hình.

Giao diện cài đặt của trang Fanpage facebook
Giao diện cài đặt của trang Fanpage facebook

Tiếp theo là chọn Nền tảng Messenger nằm bên thanh menu bên trái. Nhấn chọn tiếp “Chuyển đển phần” Plugin Chat với khách hàng như hình.

Plugin Chat với khách hàng
Plugin Chat với khách hàng

Tại khung Plugin chat với khách hàng chọn thiết lập:

Tại cửa sổ Setup Customer Chat chọn Next:

Setup Customer Chat Facebook
Setup Customer Chat Facebook
Tiếp theo bạn cần thiết lập vài thông số cho plugin:
  • Ngôn ngữ: Bạn có thể thiết lập ngôn ngữ tùy ý.
  • Lời chào: Để mặc định hoặc muốn tùy chỉnh bạn có thể nhấn vào “Thay đổi”.


Thiết thông thông số ngôn ngữ và lời chào cho live chat
Thiết thông thông số ngôn ngữ và lời chào cho live chat

Sau đó nhấn “Tiếp” để chuyển sang bước tiếp theo.

Bước 2: Bạn có thể thay đổi màu khung chat, thời gian phản hồi và nhấn “Tiếp” để chuyển đến bước cuối cùng.

Thay đổi màu khung hộp thoại chat

Bước 3: Bước cuối cùng của phần thiết lập
  • Thêm tên miền trang web của bạn vào và nhấn “Lưu”.
  • Copy đoạn code mà Facebook cung cấp.


Thiết lập tên miền và sao chép code vào trong website
Thiết lập tên miền và sao chép code vào trong website

Nhấn “Hoàn tất” để hoàn thành việc thiết lập

Hoàn tất thiết lập Facebook live chat
Hoàn tất thiết lập Facebook live chat 

Sau khi hoàn tất xong bạn đăng nhập vào Blogger và dán đoạn code vào trước thẻ đóng </body> thế là xong

Nếu bạn nào lười thì có thể dùng code bên dưới nhớ sửa Page ID thành Page ID của FB bạn nhé
<div id='fb-root'/>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      xfbml            : true,
      version          : &#39;v3.2&#39;
    });
  };
  (function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = &#39;https://connect.facebook.net/vi_VN/sdk/xfbml.customerchat.js&#39;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>
<!-- Your customer chat code -->
<div attribution='setup_tool' class='fb-customerchat' page_id='328582747712453'>
</div>


Kết luận: Qua bài viết trên tôi đã hướng dẫn các bạn cách tích hợp Customer Chat Facebook (LiveChat Facebook) vào website trong quá trình thực hiện nếu có báo lỗi hay code không chạy vui lòng comment bên dưới để được hỗ trợ.


Đoạn code Javascript chống Ctrl + U và F12

LongAnIT 2/15/2019 Bình luận
Xin chào các bạn. Như chúng ta đã biết Mã nguồn Blogger thiết kế dựa trên CSS , HTML và Javascript vì vậy việc Viewsourse ( Ctrl + U) cũng như là sử dụng phím F12 để kiểm tra hoặc xem mã nguồn trên web là rất dễ dàng.

Code chống F12, Ctrl + U cho blog
Code chống F12, Ctrl + U cho blog

Thật ra đối với Site longanit.com của mình thì không dùng cách chống này các bạn có thể tự do xem mã nguồn cũng như Script vì thật ra bản thân mình cũng không phải là dân lập trình ra code mà cũng đi lượm lặt code của các bạn trên cộng đồng Blogger cũng như các site khác chia sẻ.

Tuy nhiên nếu bạn không muốn cho người khác Viewsourse khi nhấn F12 và Ctrl+U của Blogsot thì dưới đây mình xin chia sẻ một code đơn giản để chống lại các thao tác trên.

Bước 1: Đăng nhập vào Blogger - Chủ đề - Chỉnh sửa HTML
Bước 2: Chèn đoạn Code bên dưới vào trên thẻ đóng </head>
<script type='text/javascript'>
//<![CDATA[
shortcut={all_shortcuts:{},add:function(a,b,c){var d={type:"keydown",propagate:!1,disable_in_input:!1,target:document,keycode:!1};if(c)for(var e in d)"undefined"==typeof c[e]&&(c[e]=d[e]);else c=d;d=c.target,"string"==typeof c.target&&(d=document.getElementById(c.target)),a=a.toLowerCase(),e=function(d){d=d||window.event;if(c.disable_in_input){var e;d.target?e=d.target:d.srcElement&&(e=d.srcElement),3==e.nodeType&&(e=e.parentNode);if("INPUT"==e.tagName||"TEXTAREA"==e.tagName)return}d.keyCode?code=d.keyCode:d.which&&(code=d.which),e=String.fromCharCode(code).toLowerCase(),188==code&&(e=","),190==code&&(e=".");var f=a.split("+"),g=0,h={"`":"~",1:"!",2:"@",3:"#",4:"$",5:"%",6:"^",7:"&",8:"*",9:"(",0:")","-":"_","=":"+",";":":","'":'"',",":"<",".":">","/":"?","\\":"|"},i={esc:27,escape:27,tab:9,space:32,"return":13,enter:13,backspace:8,scrolllock:145,scroll_lock:145,scroll:145,capslock:20,caps_lock:20,caps:20,numlock:144,num_lock:144,num:144,pause:19,"break":19,insert:45,home:36,"delete":46,end:35,pageup:33,page_up:33,pu:33,pagedown:34,page_down:34,pd:34,left:37,up:38,right:39,down:40,f1:112,f2:113,f3:114,f4:115,f5:116,f6:117,f7:118,f8:119,f9:120,f10:121,f11:122,f12:123},j=!1,l=!1,m=!1,n=!1,o=!1,p=!1,q=!1,r=!1;d.ctrlKey&&(n=!0),d.shiftKey&&(l=!0),d.altKey&&(p=!0),d.metaKey&&(r=!0);for(var s=0;k=f[s],s<f.length;s++)"ctrl"==k||"control"==k?(g++,m=!0):"shift"==k?(g++,j=!0):"alt"==k?(g++,o=!0):"meta"==k?(g++,q=!0):1<k.length?i[k]==code&&g++:c.keycode?c.keycode==code&&g++:e==k?g++:h[e]&&d.shiftKey&&(e=h[e],e==k&&g++);if(g==f.length&&n==m&&l==j&&p==o&&r==q&&(b(d),!c.propagate))return d.cancelBubble=!0,d.returnValue=!1,d.stopPropagation&&(d.stopPropagation(),d.preventDefault()),!1},this.all_shortcuts[a]={callback:e,target:d,event:c.type},d.addEventListener?d.addEventListener(c.type,e,!1):d.attachEvent?d.attachEvent("on"+c.type,e):d["on"+c.type]=e},remove:function(a){var a=a.toLowerCase(),b=this.all_shortcuts[a];delete this.all_shortcuts[a];if(b){var a=b.event,c=b.target,b=b.callback;c.detachEvent?c.detachEvent("on"+a,b):c.removeEventListener?c.removeEventListener(a,b,!1):c["on"+a]=!1}}},shortcut.add("Ctrl+U",function(){top.location.href="https://www.longanit.com/p/rules.html"}),shortcut.add("F12",function(){top.location.href="https://www.longanit.com"}),shortcut.add("Ctrl+Shift+I",function(){top.location.href="https://www.longanit.com/"}),shortcut.add("Ctrl+S",function(){top.location.href="https://www.longanit.com/"}),shortcut.add("Ctrl+Shift+C",function(){top.location.href="https://www.longanit.com/"});
//]]>
</script>
Thêm đoạn code chống chuột phải nữa nhé
<script type='text/javascript'>
//<![CDATA[
// JavaScript Document
var message="NoRightClicking"; function defeatIE() {if (document.all) {(message);return false;}} function defeatNS(e) {if (document.layers||(document.getElementById&&!document.all)) { if (e.which==2||e.which==3) {(message);return false;}}} if (document.layers) {document.captureEvents(Event.MOUSEDOWN);document.onmousedown=defeatNS;} else{document.onmouseup=defeatNS;document.oncontextmenu=defeatIE;} document.oncontextmenu=new Function("return false")
//]]>
</script>
Chú ý: Thay đổi link màu đỏ trên thành link mà bạn muốn chuyển hướng đến nhé

Bước 3: Tiến hành save lại và xem kết quả

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

Hướng dẫn gửi sơ đồ web mới nhất lên google

LongAnIT 2/13/2019 Bình luận
Xin chào các bạn trong bài viết trước tôi có hướng dẫn các bạn cách để chúng ta submit một trang web lên google.

Hướng dẫn gửi sơ đồ website mới nhất lên google Google trên nền tảng Blogger
Hướng dẫn gửi sơ đồ website mới nhất lên google Google trên nền tảng Blogger

Trong bài viết này tôi sẽ hướng dẫn các bạn một số cách để chúng ta gửi một sơ đồ web lên google master tools đồng thời kiểm tra kết quả của quá trình gửi sitemaps – cấu trúc site cho Google thông qua công cụ Google Search Console.

Do mình sử dụng Blogger nên mình sẽ hướng dẫn trên nền tảng này. Chúng ta cần chú ý 3 vấn đề

  1. Sitemap.xml
  2. Sitemap Atom
  3. Robots.txt

1. KHAI BÁO SITEMAP TRONG ROBOTS.TXT

Việc khai báo file robots.txt trên trang web các bạn có thể tham khảo bài viết cũ của mình tại đây 


Các thành phần khai báo về Sitemap như sau:

Sitemap: https://www.longanit.com/sitemap.xml
Sitemap:https://www.longanit.com/p/sitemap.html
Sitemap:https://www.longanit.com/atom.xml?redirect=false&start-index=1&max-results=500
Sitemap: https://www.longanit.com/atom.xml?redirect=false&start-index=501&max-results=500

 Như trích dẫn ở trên thì chúng ta có đến 4 link sitemap nhưng có 3 loại sitemap mà mình dùng ở trên:


  1. Đầu tiên là: sitemap xml
  2. Thứ 2 là sitemap cho người xem.
  3. Thứ 3 và 4 là Sitemap Atom (Do có những site có nhiều hơn 500 bài viết nên mình dùng thêm sitemap thứ 4 để khai báo)


Thời gian gần đây Blogger mới cập nhật sitemap mới có dạng như sau: https://www.longanit.com/sitemap.xml (Sitemap.xml) trước đây gần như là không có.

2. Phần này là sitemap cho người dùng xem. Tại đây cập nhật tất cả bài viết trên trang của mình với rất nhiều liên kết nên mình sẽ khai báo cho Google vào đọc từ đó bò đến các link ở nhiều bài viết khác nhau các bạn có thể xem link tại đây nhé: https://www.longanit.com/p/sitemap.html


Chú ý: Sitemap cho người xem thì Google cho là không chuẩn cấu trúc Sitemap.

3. Sitemap có các định dạng như sau: XML, RSS hoặc Atom. Do gần đây Google mới cập nhật sitemap.xml trên Blogger nên trước đó ai cũng sử dụng Atom cả.

Ưu điểm là Sitemap Atom được Google cập nhật thường xuyên hơn sitemap.xml vì dung lượng nhỏ hơn.

Mỗi lần khai báo bằng Atom Feed thì tối đa 500 bài nên cấu trúc:

https://www.longanit.com/atom.xml?redirect=false&start-index=1&max-results=500  

và cấu trúc

https://www.longanit.com/atom.xml?redirect=false&start-index=501&max-results=500 sẽ khai báo từ bài 501 + thêm 500 bài nữa tức là 501 đến 1001 dành cho website nhiều bài viết hơn.

2. HƯỚNG DẪN GỞI SITEMAP LÊN GOOGLE WEBMASTER TOOLS

Đăng nhập vào google master tools - Thu Thập Dữ Liệu -> Sơ đồ trang web - Thêm/Kiểm tra sơ đồ trang web và thực hiện giống như hình bên dưới

Hướng dẫn Submit Google Sitemap lên google
Hướng dẫn Submit Google Sitemap lên google 


Lưu ý: Bạn không cần phải copy chứa cả tên miền khi gởi lên. 

Thông thường, thì Google sẽ trả về ngay kết quả index sitemap như trên hình vẽ, bao gồm số lượng nội dung đã được lập chỉ mục và số lượng nội dung đã gửi. Công việc cần làm sau khi gửi sơ đồ trang lúc này của bạn đó là tìm và khắc phục các nguyên nhân khiến cho một số nội dung trên trang chưa được lập chỉ mục.

3. KẾT LUẬN: Như vậy qua bài viết trên tôi đã hướng dẫn các bạn cách gửi sitemap – sơ đồ trang web lên Google. 

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

Hướng dẫn Cấu trúc lại dữ liệu theo chuẩn trên nền tảng Blogger

LongAnIT 2/12/2019 Bình luận
Hello! Các bạn .Trong 2 bài viết trước tôi đã có bài giới thiệu về dữ liệu có cấu trúc trên nền tản Blogger. Trong bài này tôi sẽ hướng dẫn bạn cách xóa cấu trúc cũ và tạo lại cấu trúc mới cũng từ template các bạn đang sử dụng theo đúng chuẩn.

Triển khai dữ liệu có cấu trúc và thẻ rich cho nền tảng blogger
Triển khai dữ liệu có cấu trúc trên nền tảng blogger

Trước tiên bạn hãy backup lại template để tránh trường hợp làm xong bị lỗi thì chúng ta có thể Restore lại nhanh chóng vì như mình nói mỗi template thì cấu trúc khác nhau nó tùy thuộc vào người tạo ra nó. Ok chúng ta bắt đầu tiến hành

Như chúng ta đã biết Template blogger đa phần sử dụng dữ liệu cấu trúc dạng Microdata, qua việc sử dụng các thuộc tính itemprop, itemscope, itemtype nên việc xóa đi rất đơn giản để cấu trúc  lại một template blogger cho đúng chuẩn cấu trúc như gợi ý từ google master tools

- Đầu tiên chúng ta lần lượt tìm các với 3 từ khóa itemprop, itemscope, itemtype

+ Nếu là tag HTML

Ví dụ <div id='xxx' itemprop='publisher' itemscope='' itemtype='https://schema.org/Organization'> thì xóa hết thuộc tính chỉ để lại div,id,class.. hoặc bất kì thuộc tính nào không liên quan tới 3 từ khóa trên.

Kết quả <div id='xxx'>

+ Nếu là thẻ meta thì xóa luôn thẻ meta

+ Để xóa hvcard tìm class='fn' và xóa đi ví dụ <span class='fn'...> thì xóa thành <span...>

+ Để xóa hatom tìm class hfeed và xóa đi ví dụ <div class='post hfeed'...> thì xóa thành <div class='post'...>

+ Để xóa hentry tìm class hentry và xóa đi ví dụ <div class='post hentry'...> thì xóa thành <div class='post'...>

Như vậy với cách trên thì các bạn đã hoàn toàn xóa hết các thuộc tính râu ria của template. Bây giờ thì chúng ta tiến hành tạo lại cấu trúc. Tôi sẽ để code bên dưới theo trình tự bạn chỉ cần Search trong template của mình các code tương ứng và thay thế là xong.

Header

Code ban đầu:
<div class='header-wrap' id='header-wrap'>
Code tạo cấu trúc:
<div class='header-wrap' id='header-wrap' itemscope='itemscope' itemtype='http://schema.org/WPHeader'>

Sidebar


Code ban đầu:
 <div class='sidebar-wrapper' id='sidebar-wrapper'>
Code tạo cấu trúc:
<div class='sidebar-wrapper' id='sidebar-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPSideBar'>


Footer

 Code ban đầu:
<div class='lowerbar-wrapper' id='lowerbar-wrapper'>
Code tạo cấu trúc:
<div class='lowerbar-wrapper' id='lowerbar-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPFooter'>

Main Wrapper hoặc Content Wrapper

 Code ban đầu:
<div class='body-row' id='content-wrapper'>
Code tạo cấu trúc:
<div class='body-row' id='content-wrapper' itemscope='itemscope' itemtype='http://schema.org/Blog' role='main'>

Menu


 Code ban đầu:
<div class='tm-menu' id='tm-menu'>
Code tạo cấu trúc:
 <div class='tm-menu' id='tm-menu' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>

Sau khi đã tạo cấu trúc cho các thành phần xong bạn lại tiếp tục tạo cấu trúc cho các thành phần con của chúng  bạn có thể tham khảo trực tiếp tại link trang chủ
http://schema.org/SiteNavigationElement
Đây là link cung cấp tất cả các thứ liên quan đến Schema website tuy nhiên nếu bạn nào chưa rành về nó thì nhìn nó như đám rừng. Nếu như không hiểu về code cũng như lập trình thì bạn có thể tìm search trên mạng rồi sau đó fix dần các lỗi cấu trúc.

Kết luận: Với cách trên tôi đã hướng dẫn các bạn tái cấu trúc lại một template blogger theo chuẩn. Trong các bài viết sau tôi sẽ hướng dẫn các bạn cấu trúc lại các thành phần con bên trong của nó.

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

Tìm hiểu về dữ liệu có cấu trúc trong blogger

LongAnIT 1/29/2019 Bình luận
Hello các bạn! chúng ta lại gặp nhau trong bài viết thảo luận về triển khai dữ liệu có cấu trúc trong website.

Đầu tiên mình nói sơ qua về Cấu trúc schema là gì? nó có tác dụng gì trong SEO? Chắc nhiều bạn cũng đặt câu hỏi tương tự như thế này, bài viết này tôi sẻ giới thiệu cho bạn sơ qua về cấu trúc blogger chuẩn SEO Schema.org.

Tìm hiểu về dữ liệu có cấu trúc trong blogger
Tìm hiểu về dữ liệu có cấu trúc trong blogger

Schema được hiểu đơn giản là cấu trúc dữ liệu trên website mà bạn muốn khai báo với các công cụ tìm kiếm. Mỗi thành phần trên website sẻ có một đoạn mã, đoạn mã đó được khai báo để cho các bot của google biết rằng đây là phần nào trên website, và nó quan trọng hay không, phần chính hay phụ...

Như vậy bạn có thể hiểu nếu bạn khai báo càng chi tiết thì bot càng hiểu về website của bạn và nó thu thập được các dữ liệu xác đáng nên sẻ hiện thị chuẩn xác hơn nó giống như việc bạn đi xin việc thì cần phải khai báo sơ yếu lý lịch vậy đơn giản thế thôi.

Làm thế nào để kiểm tra website đã chuẩn SEO dữ liệu cấu trúc hay chưa? Tôi cung cấp cho bạn một công cụ chuẩn đoán của google có tên là  google Structured Data Testing Tool tại địa chỉ:

https://developers.google.com/structured-data/testing-tool/ 

Mình xin nói thêm với các bạn là tool này nó sẽ giúp bạn fix dần các cấu trúc bị lỗi, ngoài ra muốn chính xác hơn thì bạn nên vào google webmaster tool phần cấu trúc dữ liệu mà bot thu thập sẻ chi tiết hơn như hình bên dưới

Chọn mục tìm nạp URL gõ địa chỉ trang web của bạn vào đây
Chọn mục tìm nạp URL gõ địa chỉ trang web của bạn vào đây
Sau đó click vào chạy thử nghiệm để kiểm tra lỗi cấu trúc

Kết quả thu được sau khi kiểm tra cấu trúc
Kết quả thu được sau khi kiểm tra cấu trúc
Theo như hình trên thì không có lỗi xảy ra. Dĩ nhiên là tôi đã sửa lỗi cấu trúc trước đó rồi. Bây giờ bạn hãy thử kiểm tra xem web của mình có bị lỗi cấu trúc không nhé. Trong bài viết tiếp theo tôi sẽ hướng dẫn cho các bạn cách triển khai dữ liệu cấu trúc chuẩn cho website trên nền tản blogspot, mời các bạn đón xem nhé.

Chúc thành công!

Hướng dẫn chuyển hướng Redirect 301 trong Blogger

LongAnIT 1/11/2019 Bình luận
Chuyển hướng Redirect 301 nói chung là thuật ngữ để chỉ việc chuyển hướng từ một liên kết cũ sang liên kết mới, giúp chuyển hướng người dùng và cũng giúp cho bọ  tìm kiếm từ đường dẫn cũ sang đường dẫn mới. Nó rất đơn giản như bạn chuyển nhà đi nơi khác, hay thay đổi số điện thoại rồi sau đó bạn phải thông báo cho bạn bè biết vậy.

Bạn sẽ nghĩ thế nào nếu như khi người dùng tìm kiếm một bài viết liên quan đến site của bạn nhưng khi họ truy cập vào thì không thấy bài viết đó đâu cả việc này dẫn đến nguyên nhân trải nghiệm người dùng xấu và google cũng đánh giá site của bạn tệ. Trong bài viết hôm nay tôi sẽ hướng dẫn cho các bạn cách chuyển hướng Redirect 301 trong Blogger từ liên kết cũ sang liên kết mới.

Như bạn đã biết là Blogger là web vệ tinh 2.0 mạnh nhất hiện tại bởi vì sau. Bởi vì những tùy chỉnh của nó trong thiết lập là vô cùng tuyệt vời cho SEO.

Chuyển hướng Redirect 301 trong Blogger cũng tương tự như các chuyển hướng 301 ở nền tảng khác, kết quả tìm kiếm được giữ nguyên. Bạn có thể áp dụng cách này để thay đổi đường dẫn các bài viết đẹp hơn, chuyển hướng khá dễ dàng giúp cho các liên kết nội bộ cũng như bên ngoài của bạn không bị gãy.

Tôi có ví dụ như sau: Trước đó tôi có tạo một bài đăng với nhãn là SEO vậy khi search bài viết theo nhãn SEO nó sẽ thế này

https://www.longanit.com/search/label/SEO
Hôm nay tôi tôi đổi nhãn cho bài viết từ SEO thành Thủ thuật SEO vậy đường dẫn mới nó sẽ có dạng thế này

https://www.longanit.com/search/label/Thủ thuật SEO
Tuy nhiên sau khi đổi xong thì liên kết cũ https://www.longanit.com/search/label/SEO đã không thể tìm thấy các bài viết theo nhãn SEO nữa. Vậy tôi cần chuyển hướng 301 sang link mới
https://www.longanit.com/search/label/Thủ thuật SEO
Ok chúng ta tiến hành ngay chuyển hướng như ví dụ trên để hiểu rõ hơn nhé. Thực hiện các bước như hướng dẫn sau đây:

Bước 1: Đăng nhập vào Blogger - Cài đặt - Tùy chỉnh tìm kiếm như hình bên dưới

Chuyển hướng tùy chỉnh trong phần cài đặt của Blogger
Chuyển hướng tùy chỉnh trong phần cài đặt của Blogger

Bước 2: Trong mục chuyển hướng tùy chỉnh bạn click vào chỉnh sửa như hình trên chúng ta sẽ chuyển sang giao diện như sau

Giao diện thiết lập chuyển hướng 301
Giao diện thiết lập chuyển hướng 301

Như hình trên tôi có tạo 4 chuyển hướng 301. Bạn tiếp tục click vào "chuyển hướng mới" để bắt đầu thiết lập chuyển hướng tùy chỉnh 301.

Thiết lập đường dẫn cho link cần chuyển hướng sang link  mới
Thiết lập đường dẫn cho link cần chuyển hướng sang link  mới


 Giao diện trang chuyển hướng như trên chúng ta có 2 forum

  1. Forum đầu tiên bạn để link của đường dẫn cũ
  2. Forum thứ 2 bạn để link đường dẫn mới (Link cần chuyển hướng 301)
Lưu ý: Là link sẽ có dạng như sau: 

Cú pháp thêm link cũ và link mới trong chuyển hướng 301
Cú pháp thêm link cũ và link mới trong chuyển hướng 301


Như hình trên thì bạn có thể thấy là tôi chuyển hướng 301 cho nhãn bài viết. Nếu bạn muốn chuyển hướng một liên kết cố định thì cách làm vẫn tương tự bạn chỉ cần bỏ miền đằng trước ra là ok nhé.

Bước 3: Sau khi thay đổi xong bạn tiến hành lưu thay đổi là xong

Kết luận: Như vậy qua bài viết trên tôi đã hướng dẫn các bạn cơ bản cách chuyển hướng 301 tùy chỉnh trong blogger hi vọng là qua bài viết này có thể giúp được các bạn hiểu rõ hơn về tính năng này. Chúc các bạn SEO nhanh lên top nhé.


Script tạo hiệu ứng chữ chạy trên thanh tiêu đề cho Blog

LongAnIT 12/29/2018 Bình luận
Đây là hiệu ứng tạo chữ chạy trên thanh tiêu đề cho Blog của trang chạy qua lại trông rất bắt mắt, với đoạn code tôi chia sẻ bên dưới sẽ giúp cho các bạn thực hiện được hiệu ứng ấy một cách dễ dàng trên Blogger.
Script tạo hiệu ứng chữ chạy trên thanh tiêu đề cho Blog
Script tạo hiệu ứng chữ chạy trên thanh tiêu đề cho Blog

Thật ra thì code kiểu này có từ rất lâu rồi, nhiều bạn chuyên về thiết kế Web hoặc Blog thì nó quá đơn giản rồi đúng không nào. Tuy nhiên đối với những bạn mới bước vào nghề thì hơi bị khó đấy. Qua đây  mình cũng xin giới thiệu lại cho một số bạn mới đến với Blogger cũng như những bạn mới học thiết kế Web như mình đoạn coe này trên nền tản CSS và HTML. Các bạn thực hiện theo các bước sau nhé.


  1. Đăng nhập vào Blogger - Chủ đề - Chỉnh sửa HTML
  2. Tìm đến thẻ </head> và thêm đoạn code  bên dưới vào ngay bên trên nó


<script type="text/javascript">
var txt="Chào mừng bạn đến với Longanit.com. Chúc các bạn có những giây phút vui vẻ";
var espera=150;
var refresco=null;
function rotulo_title() {
document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
refresco=setTimeout("rotulo_title()",espera);
}
rotulo_title();
</script>

3. Bạn thay thế dòng text: Chào mừng bạn đến với longanit.com thành nội dung mà bạn muốn hiển thị trên thanh chạy.

Kết luận: Như vậy qua bài viết trên tôi đã hướng dẫn các bạn thủ thuật tạo chữ chạy trên thanh tiêu đề cho Blog của mình rồi đấy. Hy vọng thủ thuật này sẽ giúp làm đẹp thêm cho 'ngôi nhà' của bạn.

Hướng dẫn tạo thanh cuộn Scrollbar bằng CSS cho Blogger

LongAnIT 12/29/2018 Bình luận
Khi bạn viết bài trên blog, đôi khi nội dung một trang quá dài hoặc các tiêu đề trên widget quá nhiều. Biện pháp tạo thanh cuộn (Scrollbar) là một giải pháp để rút ngắn không gian trình bày giúp cho blog của bạn thêm chuyên nghiệp và đẹp hơn.

Trong bài viết này longanit.com sẻ hướng dẫn cho các bạn cách tạo Scrollbar cho blogger cũng như một số tiện ích (Widget).

1. Tạo thanh cuộn cho Widget

Trường hợp 1: Scrollbar cho tất cả các Widget Blogger


  •  Đăng nhập vào Blogger - Chủ đề - Chỉnh sửa HTML 
  • Chèn đoạn code bên dưới vào trước thẻ ]]></b:skin> 
.sidebar .widget{
max-height:300px;
max-width:300px;
overflow:auto;
}

 Trường hợp 2: Scrollbar cho một widget cố định

Trong trường hợp này bạn cần xác định ID của Widget mà bạn cần tạo Scrollbar. Cách xác định ID bạn làm như sau:

Đăng nhập vào Blogger - Bố cục như hình bên dưới.

Trang quản lý các Widget trong blogger
Trang quản lý các Widget trong blogger  
Như hình trên tôi chọn một Widget bất kỳ sau đó click vào chỉnh sửa. Một Popup mở ra trên thanh address bạn rê chuột vào cuối thanh địa chỉ để xem ID của Widget như hình bên dưới thì Widget ID là "Label1"

Lưu ý: Mỗi Widget sẻ có một ID riêng biệt. Trong blogger thường có tên là : HTML1, HTML2, HTML3...,

Xem thông tin ID của Widget trên Bloggger
Xem thông tin ID của Widget trên Bloggger

 Sau khi xác định được Id của Widget bạn vào Chủ đề - Chỉnh sửa HTML sau đó chèn  đoạn code bên dưới vào trước thẻ đóng  ]]></b:skin>
#Label1{
    max-height:300px;
    max-width:300px;
    overflow:auto;
    }

Giải thích: Trong  đoạn code trên thì mình sử dụng các thuộc tính sau:

  • max-height:300px; chiều cao tối đa của tiện ích, nếu muốn không muốn tạo thanh cuộn theo chiều dọc thì bạn bỏ thuộc tính này.
  • max-width:300px; chiều rộng tối đa của tiện ích, nếu muốn không muốn tạo thanh cuộn theo ngang dọc thì bạn bỏ thuộc tính này.
  • overflow:auto là thanh cuộn xuất hiện khi chiều cao tiện ích vượt chiều cao tối đa.

 Nếu Widget là các liên kết thì đoạn mã có dạng như sau:
#LinkList1 ul{
height:300px;
overflow:auto;
}

2. Tương tự như vậy cho các Widget khác cũng như các tiện ích trên Blogger ví dụ như sau:


Tạo thanh cuộn cho phần comment tìm trong CSS đoạn code sau
#comments-block {.....}
Tạo thanh cuộn cho đoạn văn bản dài bạn sử dụng cú pháp CSS như sau
.scrollingtext {
height:200px;
width:500px;
border:0;
overflow:auto;
}
Bạn có thể điều chỉnh chiều cao (height:200) và chiều rộng (width:500) tùy ý.
Mỗi khi đăng bài thì bạn nhập văn bản vào giữa 2 phần cú pháp định dạng (lưu ý đăng bài ở dạng Chỉnh sửa HTML) như sau:
<div class="scrollingtext">
Văn bản của bạn....
</div>

Kết luận: Qua bài viết trên tôi đã hướng dẫn cho các bạn cách tạo thanh Scrollbar cho Blog cũng như các tiện ích Widget. Cảm ơn các bạn đã quan tâm theo dõi nếu có thắc mắc vui lòng để lại comment bên dưới để góp ý hoặc trao đổi.

Hướng dẫn tạo comments backlink trên Blogger

LongAnIT 12/22/2018 1 Bình luận
Hướng dẫn tạo comments backlink trên Blogger
Hướng dẫn tạo comments backlink trên Blogger 

Hello ! Xin chào các bạn. Nếu bạn nào đã tạo blog bằng blogger thì luôn biết đến comments system của Blog. Có thể nhiều bạn sẽ chê comment system mặc định của blogger vì sao ư? vì nó load chậm. Hãy bỏ qua những nhược điểm của blog comments ở đây mình chỉ nhắc đến ưu điểm của nó

Giúp cho việc tương tác với nhau giữa các blogger khi comment từ đó giúp cho blog của bạn có nhiều người biết đến hơn, chưa cần biết là comment đó là góp ý xây dựng hay spam
Tạo backlink cực tốt nếu như bạn là một SEOer đi backlink trên blogger là cực tốt ...

Có mấy cách comment trong Blogger. Cái này theo tôi là do người quản trị đó set mà thôi. Ví dụ tôi set tất cả ai cũng có thể comment trong blog thì khi bạn vào một bài viết trên blog tôi trong khung comment bạn sẽ nhìn thấy như sau:

Hệ thống comment mặc định trong Blogger

Như hình trên thì các bạn có thể thấy chúng ta có 3 tài khoản comment


  • Tài khoản blogger: khi bạn đăng nhập vào blogger 
  • Tài khoản Tên/URL
  • Tài khoản ẩn danh
Trong phần này tôi sẽ hướng dẫn các bạn cách comment kiểu thứ 2 . Đây là kiểu comment rất giống WordPress. Nếu như bạn đã vào các trang có mã nguồn WP thì sẽ không xa lạ với kiểu comment này. Tuy nhiên ở WP thì đa phần nó hiển thỉ khá đầy đủ như

  • Tên hiển thị
  • Địa chỉ email
  • Địa chỉ Website

Chọn kiểu comment với Tên / URL như hình
Chọn kiểu comment với Tên / URL như hình
Sau khi chọn xong blog sẽ hiện thông báo như hình.

Hướng dẫn comment để lại backlink cho blogger
Hướng dẫn comment để lại backlink cho blogger

Nhập thông tin tên và địa chỉ trang web của bạn vào đây. Trong khung nội dung comment bạn viết nội dung mà bạn cần bình luận vào và cuối cùng click vào "xuất bản". Lưu ý URL trong này là không giới hạn bạn có thể đưa link trực tiếp đến bài viết trong blog của bạn.

Kết luận: Như vậy qua bài viết trên tôi đã hướng dẫn cho các bạn cách comment để lại một backlink cực kỳ đơn giản trong blogger. Ngoài ra còn một kiểu comment khác nữa là sử dụng mã HTML để comment, mục đích này của các SEOer cũng là muốn để lại backlink mà thôi. Sau bài viết này chắc nhiều bạn sẽ tự đặt câu hỏi là nếu để comment kiểu này thì rất khó để chống spam đúng không? và tôi xin trả lời với các bạn rằng bạn vẫn còn tính năng kiểm duyệt tuy là hơi phức tạp nhưng nó cũng không phải thừa mà blogger đã có sẵn tùy chỉnh trong quản trị. Rất đơn giản phải không nào. Chúc các bạn SEO nhanh lên Top nhé.

Nguồn: longanit.com  

Hướng dẫn tạo Blog miễn phí từ Blogger

LongAnIT 11/26/2018 Bình luận
Hướng dẫn tạo blog miễn phí by longanit.com
Hướng dẫn tạo blog miễn phí by longanit.com
Ngày nay, việc tạo cho mình một blog cá nhân để chia sẻ các bài viết về kiến thức, kinh nghiệm, kiếm tiền online hay bất cứ điều thú vị gì đó mà bạn thích trở nên vô cùng dễ dàng và nhanh chóng.


Trong bài viết này tôi sẽ hướng dẫn cho bạn cách cơ bản để bạn có thể tạo cho mình 1 Blog cá nhân phục vụ cho những mục đích trên. Hiện tại nếu bạn search trên google với từ khóa Tạo blog miễn phí nó sẽ cho ra nhiều kết quả và tôi quan tâm đến kết quả đầu tiên chính là Tạo blog từ Blogger.com
Hướng dẫn tạo blog miễn phí
Hướng dẫn tạo blog miễn phí by longanit.com

Tại sao tôi chọn blogger mà không chọn Wordpress hay một mã nguồn nào đó thì tôi xin trả lời với các bạn là:

  • Hoàn toàn miễn phí chỉ cần có tài khoản google ( Gmail )
  • Bạn không cần biết lập trình vẫn có thể tạo được
  • Bảo mật tối đa vì là server của Blogger chính là google
  • Tên miền đẹp từ google với đuôi tenban.blogspot.com
  • Cpanel quản trị rất dễ dàng cho dù bạn không phải là người pro về tin học
  • SEO rất dễ lên top nếu bạn biết cách tối ưu ( Vì là con cưng của google )
  • Có thể trỏ tên miền của bên thứ 3 về Blogspot hoàn toàn miễn phí. Ví dụ với WordPress.com thì các bạn sẽ mất phí này... 
  • Còn rất nhiều ưu điểm cũng như những nhược điểm mà trong bài viết sau tôi sẽ đề cập đến. 


 Một trang blog đơn giản đó là blog trên nền Blogspot của Google. Đây là 1 sản phẩm Blogger của Google, ứng với mỗi tài khoản Google mà bạn đã đăng ký, thì bạn có thể tạo cho mình nhiều trang blog cá nhân chuyên nghiệp và nhanh chóng. Chuẩn bị gì khi tạo blog trên nền tảng Blogspot ?

Bước 1: Đăng nhập vào trang chủ của Blogger như hình bên dưới


Đăng nhập vào trang chủ Blogger để tạo blog
Đăng nhập vào trang chủ Blogger để tạo blog 
Bước 2: Click vào chữ Đăng nhập góc phải màn hình như hình trên sau đó trình duyệt sẽ chuyển sang trang yêu cầu đăng nhập như hình bên dưới.
Đăng nhập với tài khoản gmail đề tiến hành tạo blog
Đăng nhập với tài khoản gmail đề tiến hành tạo blog
Bước 3: Tại đây bạn đăng nhập với tài khoản gmail của bạn nhé. Nếu chưa có tải khoản Gmail bạn phải tạo gmail rồi sử dụng tài khoản này đăng nhập. Sau khi đăng nhập xong trình duyệt sẽ chuyển sang trang mới như hình bên dưới
Bắt đầu tạo blog ngay bây giờ by longanit.com
Bắt đầu tạo blog ngay bây giờ by longanit.com




Bước 4: Click vào chữ "Create New Blog" để tạo một Blog mới như hình trên. Bắt đầu xuất hiện màn hình Tạo Blog như hình bên dưới
Tiến hành tạo blog cá nhân với nhiều giao diện đẹp từ blogger
Tiến hành tạo blog cá nhân với nhiều giao diện đẹp từ blogger


Tại đây chúng ta có 2 mục :

  • Title: Bạn gõ tên tiêu đề cho blog của mình ( ví dụ : Blog tin học văn phòng. Tiêu đề bạn có thể thay đổi được sau khi tạo blog nên bạn có thể không quan tâm nhiều)
  • Address: đây chính là phần quan trọng là tên của blog bạn đặt nó sẽ có tên như sau: tenbandat.blogspot.com


Chú ý: Bạn có thể sử dung dấu - ( dấu gạch ngang ) cho việc đặt tên blog của bạn

Ví dụ : tôi đặt tên cho blog là tinhocvanphong thì sẽ hiện ra thông báo có dấu chấm than màu vàng là tên blog bạn đặt đã có người sử dụng. Vì vậy bạn phải chọn cho mình một tên khác
Đặt tên cho blog bạn cần tạo rất đơn giản
Đặt tên cho blog bạn cần tạo rất đơn giản
Ok tôi đặt một tên khác là quochuyz thì ok vậy là tôi có thể tạo một blog mới với tên là quochuyz.blogspot.com
Tiến hành tạo Blog
Tiến hành tạo Blog chỉ mất trong vòng 3-5 giấy
Bước 4: Click bào Create blog! để tiến hành tạo bog và chờ khoảng từ 3- 5 giây để máy chủ tiến hành tạo blog.

Trang quản trị Blog cá nhân của bạn
Trang quản trị Blog cá nhân của bạn

Kết luận: Như vậy trong bài viết trên tôi đã hướng dẫn cho các bạn cách cơ bản để tạo cho mình 1 blog cá nhân trên nền tản Blogger. Quá trình tìm hiểu, quản trị Blog, tạo bài viết các bạn có thể tham khảo các bài viết sau tại longanit.com cũng như là để lại comment bên dưới tôi sẽ hỗ trợ cho các bạn.

Tạo Breadcrumb chuẩn HTML5 cho blogger

LongAnIT 11/21/2018 Bình luận
Breadcrumb là một tập hợp các đường link có phân cấp để người dùng biết mình đang ở đâu để từ đó dễ dàng hơn trong việc sử dụng website mà dịch ra tiếng việt như các bạn hay nói là liên kết bánh mì. ví dụ tại trang longanit Trang chủ » Blogging tips » Breadcrumb đơn giản chuẩn HTML5 ngay phía trên tiêu đề bài đăng.
Tạo Breadcrumb đơn giản chuẩn HTML5 cho blogspot
Tạo Breadcrumb đơn giản chuẩn HTML5 cho blogspot

Nếu blog của bạn chưa có Breadcrumb thì bạn nên thêm thành phần này vào ngay vì nó rất có lợi cho SEO và thân thiện với người dùng. Cách làm lại cực kỳ đơn giản.

Bước 1: Vào chỉnh sửa template rồi tìm đến dòng: ]]></b:skin> rồi thêm vào phía trên nó code css sau:
.breadcrumbs{padding:0px 5px 5px 0;margin-bottom:20px;margin-top:0px;font-size:11px;color:#5B5B5B;border-bottom:1px dotted #bbb;}

 Tiếp tục tìm đến mã này:
<b:includable id='main' var='top'>

 Thay thế nó bằng code bên dưới:

<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Trang chủ</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb trang bài viết -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs'>
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Trang chủ</span></a></span>
<b:loop values='data:post.labels' var='label'>
  &#187; <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span>
</b:loop>
&#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Trang chủ</a></span> &#187; <span>Khác</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb cho trang nhãn và trang tìm kiếm.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Trang chủ</a></span> &#187; <span>Lưu trữ cho <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>Trang chủ</a></span> &#187; <span>Tất cả bài viết</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Trang chủ</a></span> &#187; <span>Bài viết cho nhãn <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>

Cuối cùng là chúc các bạn thành công !