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

Thứ Năm, 3 tháng 1, 2019

Cách dùng fontawesome cho blogger blogspot 2019

Fontawesome là bộ font biểu tượng được sử dụng phổ biến trên nhiều website. Fontawesome an toàn, ít lỗi và hiện thị mượt mà với mọi thiết bị. 

Cách dùng fontawesome cho blogger blogspot 2019

Hiện nay fontawesome chỉ cung cấp miễn phí dạng fas và fab do vậy nếu web/blog của bạn đang sử dụng phiên bản miễn phí mà chọn kiểu khác 2 kiểu trên thì fontawesome sẽ không hiển thị.

Cách dùng fontawesome cho blogger blogspot 2019

Cách cài đặt fontawesome cho blogspot

- Bạn vào bảng điều khiển HTML và tìm đoạn code tương tự
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }

loadCSS("https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i");loadCSS("https://fonts.googleapis.com/css?family=Lobster");loadCSS("https://fonts.googleapis.com/icon?family=Material+Icons");loadCSS("https://use.fontawesome.com/releases/v5.6.3/css/all.css");
Và thêm fontawesome dưới dạng
loadCSS("("https://use.fontawesome.com/releases/v5.6.3/css/all.css");
Và đây là cách thêm css tối ưu nhất blogspot nhiều người sử dụng.
Cách dùng fontawesome cho blogger blogspot 2019

Cách sử dụng fontawesome cho blogspot

Như đã nêu ở trên, các bạn chỉ tìm kiếm fontawesome tại đây có dạng là fas và fab, cú pháp với blogspot là
<i class='ten fontawesome'/>
Ví dụ thêm fontawesome  cho facebook
<i class='fab fa-facebook'/>
Cụ thể:
<li><a class='ripplelink external external-link' href='https://facebook.com/nhatthienktblog' rel='nofollow' target='_blank'><i class='fab fa-facebook'/></a></li>
Kết quả: 
Cách dùng fontawesome cho blogger blogspot 2019
Chúc các bạn thành công!

Thứ Ba, 2 tháng 10, 2018

Tạo sitemap blogger blogspot khai báo lên google search console cập nhật 2019

Khai báo sơ đồ trang web/blog nền tảng blogger (blogspot) lên Google search console để google index toàn bộ bài viết trên web/blog của bạn liên tục và nhanh chóng. Mọi người sẽ tìm thấy bài viết của bạn qua công cụ tìm kiếm google. Thật tuyệt đúng không nào.

Để khai báo sơ đồ (sitemap) lên google search console ta làm 3 bước sau:

Bước 1: Truy cập trang Blogger Sitemap Link tại đây

Bước 2: Nhập url (địa chỉ blog) của bạn và nhấp nút Generate Sitemap

Tạo sitemap bloger blogspot khai báo lên google search console cập nhật 2019

Bước 3: Copy toàn bộ nội dung sitemap có được ở bước 2 như dưới đây

Tạo sitemap bloger blogspot khai báo lên google search console cập nhật 2019

Bước 4: Truy cập vào trang blogger vào Cài đặt - Tùy chọn và tìm kiếm - Robots.txt tuy chỉnh

Tạo sitemap bloger blogspot khai báo lên google search console cập nhật 2019

Bước 5: Truy cập trang Google search console 

Tạo sitemap bloger blogspot khai báo lên google search console cập nhật 2019

Bài viết dưới 500 bài
atom.xml?redirect=false&start-index=1&max-results=500
Bài viết từ 501 đến 1000
atom.xml?redirect=false&start-index=501&max-results=500
Bài viết từ 1001 đến 1500
atom.xml?redirect=false&start-index=1001&max-results=500
.....
Vậy là OK nhé. chúc các bạn thành công!

Phần mềm chụp màn hình được tải về nhiều nhất năm 2018

Chào các bạn trong trong bài viết này mình sẽ dẫn cho các bạn về phần mềm chụp màn hình làm việc máy vi tính.  Mục đích của việc chụp màn hình như chúng ta đã biết đó là Chụp lại màn hình làm việc để lưu thành file  hình ảnh như là jpg, png,..  và sử dụng hình ảnh này trong các bài viết, làm tiểu luận,  làm blog chia sẻ và hướng dẫn một cách dễ hiểu và nguồn đáng tin cậy.

Trong một số phần mềm chụp màn hình sẽ có sẵn trong đĩa hệ điều hành Windows (Paint) thì đa số người dùng vẫn sử dụng phần mềm Lightshot,  đây là có thể chụp màn hình và hỗ trợ chèn ký tự, các nút biểu tượng chỉ dẫn một cách nhanh chóng dễ dàng và rõ ràng.
Lightshot  là một trong những phần mềm được sử dụng phổ biến hiện nay bởi đặc điểm ưu việt nhất là cực kì dễ sử dụng, gọn nhẹ và hoàn toàn miễn phí.
Phần mềm chụp màn hình được tải về nhiều nhất năm 2018

Một số tính năng của Lightshot

Chụp ảnh màn hình có thể tùy chỉnh: Chụp chỗ nào, vị trí nào ta kéo chọn vị trí đó.
Nhấp phím PrtSCR là chụp được ngay
Chia sẻ ảnh chụp màn hình qua Internet: Tải ảnh chụp màn hình của bạn lên máy chủ và nhận liên kết ngắn ngay lập tức.
Trình chỉnh sửa mạnh mẽ: Bạn có thể chỉnh sửa ảnh chụp màn hình ngay lập tức khi chụp hoặc quay lại bằng trình chỉnh sửa trực tuyến mạnh mẽ.
Tìm kiếm hình ảnh tương tự: Tìm hình ảnh tương tự. Chọn bất kỳ hình ảnh nào trên màn hình của bạn và tìm thấy hàng tá hình ảnh tương tự.
Nền tảng khác nhau: Lightshot chạy tốt trên hệ điều hành Windows/Mac, Chrome, Firefox, IE và Opera .

Link tải

Download Lightshot cho Windows
Download Lightshot cho Mac

Thứ Ba, 18 tháng 9, 2018

Code Chuyển hướng tạm thời cho blogspot sang địa chỉ mới

Chuyển hướng tạm thời nhằm sủa lỗi theme hoặc các vấn đề liên quan đến một địa chỉ tên miền không muốn người đọc xem những sự thay đổi trong quá trình sửa lỗi hoặc cập nhật.
Đoan code dưới đây sẽ giúp các bạn thực hiện chuyển tiếp từ một tên miền đang sử dụng sang một tên miền bất kỳ của nền tảng Blogger.

Và đây là đoạn code


<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>

<script type='text/javascript'>
var time = 5; //How long (in seconds) to countdown
var page =
&quot;https://tip.vanphongit.com/&quot;; //The page to redirect to
function countDown(){
time--;
gett(
&quot;container&quot;).innerHTML = time;
if(time == -1){
window.location = page;
}
}
function gett(id){
if(document.getElementById) return document.getElementById(id);
if(document.all) return document.all.id;
if(document.layers) return document.layers.id;
if(window.opera) return window.opera.id;
}
function init(){
if(gett(
&#39;container&#39;)){
setInterval(countDown, 1000);
gett(
&quot;container&quot;).innerHTML = time;
}
else{
setTimeout(init, 50);
}
}
document.onload = init();
</script>

<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>

<b:skin><![CDATA[/*
-----------------------------------------------
////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////
----------------------------------------------
]]></b:skin>

</head>
<body>
<center><h1> Hiện tại trang <span style='color: white; background-color: red'><code><i> nhatthienkt.net</i></code></span> sẽ được </h1></center>
<center><h1> Chuyển hướng đến <mark>tip.vanphongit.com</mark> để hỗ trợ tốt hơn </h1></center>
<center><h1> Trân trọng thông báo! </h1></center>

<h2>chuyển hướng sau <span id='container'/> second(s)!</h2>

<!--S-->
<div style='margin-top:300px; '>
<center>
<p class='author'>&#169; <b>Copyright by </b><a href='https://tip.vanphongit.com/'> Nhatthienkt </a></p></center></div>



<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'/>

<!-- Credits intact-->
</body>
</html>
Thay https://tip.vanphongit.com thành địa chỉ bạn muốn chuyển hướng đến.

Thứ Hai, 18 tháng 12, 2017

Chia sẻ cách đăng ký thành công Google adsense 2018 cập nhật

Nhatthienkt - Trong bài viết này mình sẽ trao đổi những kinh nghiệm của bản thân khi tham gia mạng quảng cáo Google Adsense (viết tắt: GA), hơn cả là đăng ký thành công tài khoản GA VIỆT NAM  như bao người khác mà không phải mua hoặc sử dụng GA nước ngoài.

Lưu ý bài viết này là kinh nghiệm của mình, mình chia sẻ những gì mình biết, mọi đóng góp thêm của các bạn hãy comment dưới bài viết nhé.

1. Những sai lầm của bản thân khi cố gắng cải thiện blog để GA chấp thuận.

- Có thể nói mình đã đầu tư khá nhiều thời gian để thay đổi giao diện, thay đổi nội dung bài viết, thay đổi chính sách blog,... nhưng những cái đó chẳng cần thiết.
- Hãy nhớ rằng nếu blog của bạn vi phạm bản quyền và bị từ chối vài lần thì khả năng GA chấp thuận là thấp. Mặc khác nếu tên miền nằm vào sổ đen thì khỏi phải đăng ký GA làm gì vì không bao giờ được chấp thuận và cũng không nên mua TK GA làm gì vì đặt lên được thời gian cũng chết TK (rất là đau)

2. Những nguyên nhân gây chết TK GA

- Đầu tiên phải nói đến đó là do click bậy (kể cả người nào đó cố ý click nhiều lần thì TK cũng nguy hiểm)
- Do thay đổi tên miền bị cấm sang các đuôi khác nhau và chuyển hướng nó. Ví dụ thế này bạn có tên miền abc.com (bị GA block, khóa miền) bạn lại chuyển sang abc.net rồi abc.org và thực hiện thủ thuật chuyển từ abc.com sang abc.net hoặc abc.org hoặc abc.xxx đều là vi phạm chính sách GA.
- Tên miền (blog) của bạn có đặt các quảng cáo gây chuyển hướng, popup (tạo hộp nổi) khả năng Google đưa vào website không an toàn và TK trên miền này cũng  dể ra đi.
- Do người dùng phản hồi về chất lượng blog của bạn cũng là một nguyên nhân.
- Cuối cùng là do bạn làm quá lố, chia sẻ rầm rộ blog, up lên tuốt các diễn dàn mà không có chọn, kéo lượt truy cập mà không thuyết minh được số liệu thống kê của Google thì cũng chết TK GA.

3. Chia sẻ cách đăng ký thành công Google adsense 2018 cập nhật

Đây là phần tâm điểm của bài viết này. Và mình sẽ nói ngắn gọn trong các ý sau đây. 
a. Đầu tiên bạn hãy chuẩn bị một tên miền mới gì cũng được .com, .net, .info, ...
b. Kiếm một theme sạch, sạch ở đây là bạn làm chủ được theme đó. Không nên lấy theme chưa link gây chuyển hướng hoặc code mã hóa quá nhiều. Nói tóm lại theme cho giao diện dể điều hướng, có các thành phần cụ thể và cho nội dung bài viết dể đọc, dể xem. Tốc độ OK chút là tuyệt vời (trên theme Sora toàn theme nhẹ, lươt nhanh)
c. Đăng khoản 20 bài viết trở lên, có thể copy nhưng edit lại chút (sử dụng notepad để xóa mọi định dạng trên web sau đó dán vào bài viết của bạn, điều này có thể tránh được thuật toán của Google). Tốt hơn bạn nên tự viết.
Viết gì nào: Viết hướng dẫn sử dụng các ứng dụng, hướng dẫn nghiệp vụ, hướng dẫn tập  luyện bộ môn thể nào đó, hoặc về cảnh quan, về ăn uống, sức khỏe, du lịch. Tuyệt đối không nên viết bài up/download phần mềm, cho dù đó là phần mềm miễn phí.
d. Chuẩn bị những gì để đăng ký
- TK gmail: gmail mới với tên của bạn
- SĐT: không được trùng với sđt trên gmail đã bị chết TK GA
- Địa chỉ: Nhà bạn hoặc đâu mà bạn có thể nhận PIN được.
Đơn giản với blogger bạn để tên đăng ký cũng là tên admin của blog đó. Vậy là mọi thứ trùng khớp Google dể chấp nhận hơn.
e. Thời gian đăng ký. Cái này chẳng ai biết được, tốt nhất là vài tuần để Google Index được tên miền của bạn cái đã.
f. Lượt truy cập thì sao: Không cần thiết nhé, vì đơn giản nếu bạn không cố gắng cải thiện website/blog thì chả ai thèm vào web/blog của bạn và có đặt GA cũng chả có kết quả gì. Nên vấn đề này tất nhiên là bạn phải tự cố gắng thuyết phục người đọc và những lợi ích gì từ blog của bạn đem lại cho họ.
g. Bao lâu thì nhận được thông báo chấp thuận: Bây giờ chỉ cần 24h, thậm chí vài giờ bạn sẽ nhận được kết quả từ phía GA.
Tạm thời viết từng nấy vấn đề về GA, có gì mới bổ sung sau, chúc các bạn sớm nhận được thư chúc mừng.
Chia sẻ cách đăng ký thành công Google adsense 2018 cập nhật

Thứ Năm, 21 tháng 9, 2017

Seo blogspot sitemap.xml, Robots.txt, điều hướng 404 năm2017

Nhatthienkt - Nền tảng blogger-blogspot không có dể dàng seo tự động như Worpress do không có các plugins hỗ trợ seo. Chính vì lý do này ta phải làm thủ công thôi. Với các khai báo sitemap.xml, Robots.txt cho website blog thì các bạn cũng biết rồi nó giúp công cụ tìm kiếm biết và hiện thị web/blog của chúng ta trong kết quả tìm kiếm trên Google. 

Web/blog càng được máy tìm kiếm google lập chỉ mục nhiều điều đó là tuyệt vời, web/blog của bạn sẽ được nhiều đối tượng biết đến và đem lại hiệu quả thiết thực. Bài viết này sẽ gợi ý cách tạo sitemap.xml, Robots.txt chuẩn cập nhật năm 2017.

1. Gửi sơ đồ blogspot lên Google index

- Bước đầu tiên bạn truy cập trang www.xml-sitemaps.com tạo sitemap miễn phí
- Truy cập https://www.google.com/webmasters/tools/sitemap-list thêm sitemap như sau:

a. Thêm cấu trúc /atom.xml

  • /atom.xml?redirect=false&start-index=1&max-results=150
  • /atom.xml?redirect=false&start-index=151&max-results=150
  • /atom.xml?redirect=false&start-index=301&max-results=150
  • /atom.xml?redirect=false&start-index=451&max-results=150
  • /atom.xml?redirect=false&start-index=601&max-results=150

......
Hãy thêm tùy số lượng bài viết hiện có trên blog của bạn

b. Thêm cấu trúc /sitemap.xml

  • /sitemap.xml
  • /sitemap.xml?page=1
  • /sitemap.xml?page=2
  • /sitemap.xml?page=3
  • /sitemap.xml?page=4

.....
Hãy thêm tùy số lượng bài viết hiện có trên blog của bạn
Sau một vài tuần bạn sẽ nhận được kết quả google lập chỉ mục
Seo blogspot sitemap.xml, Robots.txt, điều hướng 404 năm2017

2. Tùy chỉnh file Robots.txt  blogspot lên Google index

Robots.txt  là file cực quan trọng, nó là bức tường cho phép hoặc cấm các con bọ tìm kiếm lập chỉ mục cho website/blog
Với blogspot ta chỉ việc thêm Robots.txt  đơn giản như sau.
Seo blogspot sitemap.xml, Robots.txt, điều hướng 404 năm2017



  • User-agent: *
  • # Block
  • Disallow: /search
  • Allow: /search/label/
  • # Google AdSense
  • User-agent: Mediapartners-Google
  • Disallow:
  • # Refers to the Homepage
  • Allow: /
  • # Sitemap 1
  • Sitemap: http://www.nhatthienkt.net/atom.xml?redirect=false&start-index=1&max-results=500
  • # Sitemap 2
  • Sitemap: http://www.nhatthienkt.net/atom.xml?redirect=false&start-index=501&max-results=1000

3. Tùy chỉnh 404 về trang chủ

Seo blogspot sitemap.xml, Robots.txt, điều hướng 404 năm2017

Bạn vừa nhấn vào một liên kết bị hỏng hay đã loại bỏ, vui lòng sử dụng  tính năng tìm kiếm hoặc liên hệ admin để báo lỗi và được giải thích!
Bạn đang được chuyển hướng về trang chủ...
<script type = "text/javascript">
setTimeout(function()
{
location.pathname= "/"
},5000);

</script>
Chúc các bạn thành công! 

Thứ Tư, 31 tháng 5, 2017

Chia sẻ code liên hệ nhanh tuyệt đẹp cho blogspot

Nhatthienkt - Code liên hệ nhanh phát triển bởi traidatmui, thấy đẹp nên mình chia sẻ lại cho những ai thích.

Để thực hiện các bạn chèn các đoạn code sau vào trong theme
Chia sẻ code liên hệ nhanh tuyệt đẹp cho blogspot

1. Chèn CSS

Chèn code sau trên thẻ ]]></b:skin>


.quick-alo-phone.quick-alo-static {
  opacity:.6;
}
.quick-alo-phone.quick-alo-hover,
.quick-alo-phone:hover {
  opacity:1;
}
.quick-alo-ph-circle {
  width:160px;
  height:160px;
  top:20px;
  left:20px;
  position:absolute;
  background-color:transparent;
  -webkit-border-radius:100%;
  -moz-border-radius:100%;
  border-radius:100%;
  border:2px solid rgba(30,30,30,0.4);
  border:2px solid #bfebfc 9;
  opacity:.1;
  -webkit-animation:quick-alo-circle-anim 1.2s infinite ease-in-out;
  -moz-animation:quick-alo-circle-anim 1.2s infinite ease-in-out;
  -ms-animation:quick-alo-circle-anim 1.2s infinite ease-in-out;
  -o-animation:quick-alo-circle-anim 1.2s infinite ease-in-out;
  animation:quick-alo-circle-anim 1.2s infinite ease-in-out;
  -webkit-transition:all .5s;
  -moz-transition:all .5s;
  -o-transition:all .5s;
  transition:all .5s;
  -webkit-transform-origin:50% 50%;
  -moz-transform-origin:50% 50%;
  -ms-transform-origin:50% 50%;
  -o-transform-origin:50% 50%;
  transform-origin:50% 50%;
}
.quick-alo-phone.quick-alo-active .quick-alo-ph-circle {
  -webkit-animation:quick-alo-circle-anim 1.1s infinite ease-in-out !important;
  -moz-animation:quick-alo-circle-anim 1.1s infinite ease-in-out !important;
  -ms-animation:quick-alo-circle-anim 1.1s infinite ease-in-out !important;
  -o-animation:quick-alo-circle-anim 1.1s infinite ease-in-out !important;
  animation:quick-alo-circle-anim 1.1s infinite ease-in-out !important;
}
.quick-alo-phone.quick-alo-static .quick-alo-ph-circle {
  -webkit-animation:quick-alo-circle-anim 2.2s infinite ease-in-out !important;
  -moz-animation:quick-alo-circle-anim 2.2s infinite ease-in-out !important;
  -ms-animation:quick-alo-circle-anim 2.2s infinite ease-in-out !important;
  -o-animation:quick-alo-circle-anim 2.2s infinite ease-in-out !important;
  animation:quick-alo-circle-anim 2.2s infinite ease-in-out !important;
}
.quick-alo-phone.quick-alo-hover .quick-alo-ph-circle,
.quick-alo-phone:hover .quick-alo-ph-circle {
  border-color:#00aff2;
  opacity:.5;
}
.quick-alo-phone.quick-alo-green.quick-alo-hover .quick-alo-ph-circle,
.quick-alo-phone.quick-alo-green:hover .quick-alo-ph-circle {
  border-color:#75eb50;
  border-color:#baf5a7 9;
  opacity:.5;
}
.quick-alo-phone.quick-alo-green .quick-alo-ph-circle {
  border-color:#00aff2;
  border-color:#bfebfc 9;
  opacity:.5;
}
.quick-alo-phone.quick-alo-gray.quick-alo-hover .quick-alo-ph-circle,
.quick-alo-phone.quick-alo-gray:hover .quick-alo-ph-circle {
  border-color:#ccc;
  opacity:.5;
}
.quick-alo-phone.quick-alo-gray .quick-alo-ph-circle {
  border-color:#75eb50;
  opacity:.5;
}
.quick-alo-ph-circle-fill {
  width:100px;
  height:100px;
  top:50px;
  left:50px;
  position:absolute;
  background-color:#000;
  -webkit-border-radius:100%;
  -moz-border-radius:100%;
  border-radius:100%;
  border:2px solid transparent;
  opacity:.1;
  -webkit-animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out;
  -moz-animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out;
  -ms-animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out;
  -o-animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out;
  animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out;
  -webkit-transition:all .5s;
  -moz-transition:all .5s;
  -o-transition:all .5s;
  transition:all .5s;
  -webkit-transform-origin:50% 50%;
  -moz-transform-origin:50% 50%;
  -ms-transform-origin:50% 50%;
  -o-transform-origin:50% 50%;
  transform-origin:50% 50%;
}
.quick-alo-phone.quick-alo-active .quick-alo-ph-circle-fill {
  -webkit-animation:quick-alo-circle-fill-anim 1.7s infinite ease-in-out !important;
  -moz-animation:quick-alo-circle-fill-anim 1.7s infinite ease-in-out !important;
  -ms-animation:quick-alo-circle-fill-anim 1.7s infinite ease-in-out !important;
  -o-animation:quick-alo-circle-fill-anim 1.7s infinite ease-in-out !important;
  animation:quick-alo-circle-fill-anim 1.7s infinite ease-in-out !important;
}
.quick-alo-phone.quick-alo-static .quick-alo-ph-circle-fill {
  -webkit-animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out !important;
  -moz-animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out !important;
  -ms-animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out !important;
  -o-animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out !important;
  animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out !important;
  opacity:0 !important;
}
.quick-alo-phone.quick-alo-hover .quick-alo-ph-circle-fill,
.quick-alo-phone:hover .quick-alo-ph-circle-fill {
  background-color:rgba(0,175,242,0.5);
  background-color:#00aff2 9;
  opacity:.75 !important;
}
.quick-alo-phone.quick-alo-green.quick-alo-hover .quick-alo-ph-circle-fill,
.quick-alo-phone.quick-alo-green:hover .quick-alo-ph-circle-fill {
  background-color:rgba(117,235,80,0.5);
  background-color:#baf5a7 9;
  opacity:.75 !important;
}
.quick-alo-phone.quick-alo-green .quick-alo-ph-circle-fill {
  background-color:rgba(0,175,242,0.5);
  background-color:#a6e3fa 9;
  opacity:.75 !important;
}
.quick-alo-phone.quick-alo-gray.quick-alo-hover .quick-alo-ph-circle-fill,
.quick-alo-phone.quick-alo-gray:hover .quick-alo-ph-circle-fill {
  background-color:rgba(204,204,204,0.5);
  background-color:#ccc 9;
  opacity:.75 !important;
}
.quick-alo-phone.quick-alo-gray .quick-alo-ph-circle-fill {
  background-color:rgba(117,235,80,0.5);
  opacity:.75 !important;
}
.quick-alo-ph-img-circle {
  width:60px;
  height:60px;
  top:70px;
  left:70px;
  position:absolute;
  background:rgba(30,30,30,0.1) url("http://i.imgur.com/YWJeVO2.png") no-repeat center center;
  -webkit-border-radius:100%;
  -moz-border-radius:100%;
  border-radius:100%;
  border:2px solid transparent;
  opacity:.7;
  -webkit-animation:quick-alo-circle-img-anim 1s infinite ease-in-out;
  -moz-animation:quick-alo-circle-img-anim 1s infinite ease-in-out;
  -ms-animation:quick-alo-circle-img-anim 1s infinite ease-in-out;
  -o-animation:quick-alo-circle-img-anim 1s infinite ease-in-out;
  animation:quick-alo-circle-img-anim 1s infinite ease-in-out;
  -webkit-transform-origin:50% 50%;
  -moz-transform-origin:50% 50%;
  -ms-transform-origin:50% 50%;
  -o-transform-origin:50% 50%;
  transform-origin:50% 50%;
}
.quick-alo-phone.quick-alo-active .quick-alo-ph-img-circle {
  -webkit-animation:quick-alo-circle-img-anim 1s infinite ease-in-out !important;
  -moz-animation:quick-alo-circle-img-anim 1s infinite ease-in-out !important;
  -ms-animation:quick-alo-circle-img-anim 1s infinite ease-in-out !important;
  -o-animation:quick-alo-circle-img-anim 1s infinite ease-in-out !important;
  animation:quick-alo-circle-img-anim 1s infinite ease-in-out !important;
}
.quick-alo-phone.quick-alo-static .quick-alo-ph-img-circle {
  -webkit-animation:quick-alo-circle-img-anim 0s infinite ease-in-out !important;
  -moz-animation:quick-alo-circle-img-anim 0s infinite ease-in-out !important;
  -ms-animation:quick-alo-circle-img-anim 0s infinite ease-in-out !important;
  -o-animation:quick-alo-circle-img-anim 0s infinite ease-in-out !important;
  animation:quick-alo-circle-img-anim 0s infinite ease-in-out !important;
}
.quick-alo-phone.quick-alo-hover .quick-alo-ph-img-circle,
.quick-alo-phone:hover .quick-alo-ph-img-circle {
  background-color:#00aff2;
}
.quick-alo-phone.quick-alo-green.quick-alo-hover .quick-alo-ph-img-circle,
.quick-alo-phone.quick-alo-green:hover .quick-alo-ph-img-circle {
  background-color:#75eb50;
  background-color:#75eb50 9;
}
.quick-alo-phone.quick-alo-green .quick-alo-ph-img-circle {
  background-color:#00aff2;
  background-color:#00aff2 9;
}
.quick-alo-phone.quick-alo-gray.quick-alo-hover .quick-alo-ph-img-circle,
.quick-alo-phone.quick-alo-gray:hover .quick-alo-ph-img-circle {
  background-color:#ccc;
}
.quick-alo-phone.quick-alo-gray .quick-alo-ph-img-circle {
  background-color:#75eb50;
}
@-moz-keyframes quick-alo-circle-anim {
  0% {
    -moz-transform:rotate(0) scale(.5) skew(1deg);
    opacity:.1;
    -moz-opacity:.1;
    -webkit-opacity:.1;
    -o-opacity:.1;
  }
  30% {
    -moz-transform:rotate(0) scale(.7) skew(1deg);
    opacity:.5;
    -moz-opacity:.5;
    -webkit-opacity:.5;
    -o-opacity:.5;
  }
  100% {
    -moz-transform:rotate(0) scale(1) skew(1deg);
    opacity:.6;
    -moz-opacity:.6;
    -webkit-opacity:.6;
    -o-opacity:.1;
  }
}
@-webkit-keyframes quick-alo-circle-anim {
  0% {
    -webkit-transform:rotate(0) scale(.5) skew(1deg);
    -webkit-opacity:.1;
  }
  30% {
    -webkit-transform:rotate(0) scale(.7) skew(1deg);
    -webkit-opacity:.5;
  }
  100% {
    -webkit-transform:rotate(0) scale(1) skew(1deg);
    -webkit-opacity:.1;
  }
}
@-o-keyframes quick-alo-circle-anim {
  0% {
    -o-transform:rotate(0) kscale(.5) skew(1deg);
    -o-opacity:.1;
  }
  30% {
    -o-transform:rotate(0) scale(.7) skew(1deg);
    -o-opacity:.5;
  }
  100% {
    -o-transform:rotate(0) scale(1) skew(1deg);
    -o-opacity:.1;
  }
}
@-moz-keyframes quick-alo-circle-fill-anim {
  0% {
    -moz-transform:rotate(0) scale(.7) skew(1deg);
    opacity:.2;
  }
  50% {
    -moz-transform:rotate(0) -moz-scale(1) skew(1deg);
    opacity:.2;
  }
  100% {
    -moz-transform:rotate(0) scale(.7) skew(1deg);
    opacity:.2;
  }
}
@-webkit-keyframes quick-alo-circle-fill-anim {
  0% {
    -webkit-transform:rotate(0) scale(.7) skew(1deg);
    opacity:.2;
  }
  50% {
    -webkit-transform:rotate(0) scale(1) skew(1deg);
    opacity:.2;
  }
  100% {
    -webkit-transform:rotate(0) scale(.7) skew(1deg);
    opacity:.2;
  }
}
@-o-keyframes quick-alo-circle-fill-anim {
  0% {
    -o-transform:rotate(0) scale(.7) skew(1deg);
    opacity:.2;
  }
  50% {
    -o-transform:rotate(0) scale(1) skew(1deg);
    opacity:.2;
  }
  100% {
    -o-transform:rotate(0) scale(.7) skew(1deg);
    opacity:.2;
  }
}
@-moz-keyframes quick-alo-circle-img-anim {
  0% {
    transform:rotate(0) scale(1) skew(1deg);
  }
  10% {
    -moz-transform:rotate(-25deg) scale(1) skew(1deg);
  }
  20% {
    -moz-transform:rotate(25deg) scale(1) skew(1deg);
  }
  30% {
    -moz-transform:rotate(-25deg) scale(1) skew(1deg);
  }
  40% {
    -moz-transform:rotate(25deg) scale(1) skew(1deg);
  }
  50% {
    -moz-transform:rotate(0) scale(1) skew(1deg);
  }
  100% {
    -moz-transform:rotate(0) scale(1) skew(1deg);
  }
}
@-webkit-keyframes quick-alo-circle-img-anim {
  0% {
    -webkit-transform:rotate(0) scale(1) skew(1deg);
  }
  10% {
    -webkit-transform:rotate(-25deg) scale(1) skew(1deg);
  }
  20% {
    -webkit-transform:rotate(25deg) scale(1) skew(1deg);
  }
  30% {
    -webkit-transform:rotate(-25deg) scale(1) skew(1deg);
  }
  40% {
    -webkit-transform:rotate(25deg) scale(1) skew(1deg);
  }
  50% {
    -webkit-transform:rotate(0) scale(1) skew(1deg);
  }
  100% {
    -webkit-transform:rotate(0) scale(1) skew(1deg);
  }
}
@-o-keyframes quick-alo-circle-img-anim {
  0% {
    -o-transform:rotate(0) scale(1) skew(1deg);
  }
  10% {
    -o-transform:rotate(-25deg) scale(1) skew(1deg);
  }
  20% {
    -o-transform:rotate(25deg) scale(1) skew(1deg);
  }
  30% {
    -o-transform:rotate(-25deg) scale(1) skew(1deg);
  }
  40% {
    -o-transform:rotate(25deg) scale(1) skew(1deg);
  }
  50% {
    -o-transform:rotate(0) scale(1) skew(1deg);
  }
  100% {
    -o-transform:rotate(0) scale(1) skew(1deg);
  }
}
.quick-alo-phone {
    position: fixed;
    background-color: transparent;
    width: 200px;
    height: 200px;
    cursor: pointer;
    z-index: 200000 !important;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    -webkit-transition: visibility .5s;
    -moz-transition: visibility .5s;
    -o-transition: visibility .5s;
    transition: visibility .5s;
    right: 150px;
    top: 30px;
}

2. Chèn file .js sau thẻ <head>

<script async="async" src="http://data-traidatmui.appspot.com/scripts/hover_textcolor.js" type="text/javascript">

3. Chèn thông tin liên hệ trước thẻ  </body>

<div class='quick-alo-phone quick-alo-green quick-alo-show' id='quick-alo-phoneIcon' style='right: 10px; top: 20%;'>
  <a href='https://web.facebook.com/nhatthienktblog' target='_blank' title='Liên hệ nhanh'>
  <div class='quick-alo-ph-circle'/>
  <div class='quick-alo-ph-circle-fill'/>
  <div class='quick-alo-ph-img-circle'/>
  </a>
</div>

  • Thay nick facebook nhatthienktblog thành của bạn.
  • right: 10px; Hiện thị bên trái thì thay Right  thành Left

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

Thứ Năm, 18 tháng 5, 2017

Tạo mục lục bài viết (Table of Contents) blogspot 2017

Nhatthienkt.net - Mục lục trong bài viết giúp người đọc nắm bắt được bố cục khái quát chung của một bài viết, giúp người đọc chuyển đến một vị trí (mục) cần xem trong một bài viết chỉ bằng một nhấp chuột. Với blogspot chúng ta sẽ làm thủ công nhưng cũng không mất quá nhiều thời gian nếu bạn xác định được cấu trúc để tạo mục lục. Và trong bài viết này sẽ hướng dẫn bạn thực hiện ngay và thành công.

Đây là Demo

Tạo mục lục bài viết (Table of Contents) blogspot 2017

Các bước tiến hành tạo mục lục tự động.

1. CSS tạo khung 

Bạn copy đoạn CSS dưới đây và chèn vào trước thẻ ]]></b:skin>

#toc_container{background: #f9f9f9;border: 1px solid #aaa;padding: 0 10px;margin-bottom: 1em;font-size:95%;}p.toc_title,ul.toc_list {margin: 5px;padding-left: 0;}.toc_list li {list-style: none;margin-top: 0px; margin: 0!important;}#toc_container a {text-decoration: none;text-shadow: none;color: black;font-weight: 400;}#toc_container a:hover {color: #E9573F;text-decoration: underline;}span.accordion{cursor: pointer;}div.panel {padding: 0 18px;max-height: 0;overflow: hidden;opacity: 0;}div.panel.show {opacity: 1;max-height:500px;}
Bạn  tùy chỉnh cho phù hợp với độ rộng của trang web/blog của bạn

2. Javascript

Bạn copy đoạn Javascript  dưới đây và chèn vào sau thẻ <head> hoặc trước thẻ </body>

<script>
var acc = document.getElementsByClassName(&quot;accordion&quot;);
var i;
for (i = 0; i &lt; acc.length; i++) {
acc[i].onclick = function(){
this.classList.toggle(&quot;active&quot;);
this.nextElementSibling.classList.toggle(&quot;show&quot;);
}
}
</script>

3. Tạo mục lục trong bài viết blogspot

3.1. Sử dụng thẻ H3 (Tiêu đề con)

- Sử dụng tiêu đề con để phân thành từng mục để tạo mục lục
- Ví dụ: Bài viêt "Chia sẻ cách SEO blogspot 2017 cực dể và hiệu quả" mình có tạo 6 mục chính là tiêu đề con (thẻ H3) để làm viết rõ hơn cho từng nội dung.
1. Tổng quát
2. Tùy chỉnh Robots.txt
3. Tối ưu các file .js .css (JavaScript và CSS )
4. Tối ưu hình ảnh
5. Lách các nhà mạng chặn hiện thị hình ảnh
6. Tìm chọn và thiết kế theme blogspot chuẩn responsive
- Để tạo thẻ H3 các bạn chỉ việc chọn mục (để trỏ lên dòng văn bản đó hoặc bôi đen văn bản đó) và chọn "tiêu đề con"
Tạo mục lục bài viết (Table of Contents) blogspot 2017

3.2. Thêm ID cho từng mục của thẻ H3

Bạn bấm chế độ bài viết dạng HTML và tìm đến các thẻ H3 vừa tạo và tạo id theo cấu trúc sau
<h3 id="phan-1">Phần 1: abc</h3>
Nội dung phần
1
<h3 id="phan-2">Phần 2: xyz</h3>
Nội dung phần
2
Ví dụ:

<h3 id="1"> 1. Tổng quát</h3>
<h3 id="2"> 2. Tùy chỉnh Robots.txt</h3>
<h3 id="3"> 3. Tzi ưu các file .js .css (JavaScript và CSS )</h3>
<h3 id="4"> 4. Tối ưu hình ảnh</h3>
<h3 id="5"> 5. Lách các nhà mạng chặn hiện thị hình ảnh</h3>
<h3 id="6"> 6. Tìm chọn và thiết kế theme blogspot chuẩn responsive</h3>

3.3. Chọn vị trí phù hợp để chèn khung với mục lục được tạo

Bạn thay đổi id và nội dung phù hợp với bài viết của bạn.
<div id="toc_container">
Nội dung chính <span class="accordion active"></span>
<div class="panel show">
<ul class="toc_list">
<li><a href="#1"> 1. Tổng quát</a></li>
<li><a href="#2"> 2. Tùy chỉnh Robots.txt</a></li>
<li><a href="#3"> 3. Tối ưu các file .js .css (JavaScript và CSS)</a></li>
<li><a href="#4"> 4. Tối ưu hình ảnh</a></li>
<li><a href="#5"> 5. Lách các nhà mạng chặn hiện thị hình ảnh</a></li>
<li><a href="#6"> 6. Tìm chọn và thiết kế theme blogspot chuẩn responsive</a></li>
</ul>
</div>
</div>

Ví dụ chèn sau mục đầu tiên
Tạo mục lục bài viết (Table of Contents) blogspot 2017

3.4. Xuất bản bài viết

Vậy là xong, chúc các bạn thành công!

Thứ Ba, 16 tháng 5, 2017

Chia sẻ cách SEO blogspot 2017 cực dể và hiệu quả

Nhatthienkt.net - SEO lên top Google thì mình không dám nói ở đây nhưng SEO blogspot SEO blogger để web/blog của bạn ổn định về lượt truy cập cũng như đáp ứng tiêu chuẩn chung của một web/blog có mặt trên trang tìm kiếm Google thì bài viết này sẽ có ích để bạn xem qua.

1. Tổng quát

Với blogger/blogspot bạn còn viết bài, bạn còn chăm sóc blog thì thứ hạng của trang blog của bạn luôn tăng và ngược lại. Thật dể hiểu và thật khó khăn với những ai không có nhiều thời gian để viết bài cũng như tối ưu web/blog. Hãy nhớ hãy viết bài đều đặn (tự viết hoặc biên tập không copy nội dung) theo lịch hay không theo cũng chả sao, miễn là mỗi tuần có 1 đến 2 bài viết cũng OK. Khi đó Google không để web/blog của bạn bị "lạc trôi".
- Con bọ BOT của Google sẽ tìm được bài viết của bạn cũng như index nhanh bài viết của bạn lên Google khi bạn cung cấp cho nó thứ nó đang tìm. Với blogspot chỉ việc đơn giản vào mục CÀI ĐẶT/TÙY CHỌN TÌM KIẾM/ROBOTS.TXT
Chia sẻ cách SEO blogspot 2017 cực dể và hiệu quả
Copy và thay link blog của bạn
User-agent: *
Allow: /
Disallow: /search
Disallow: /*?updated-max=*
Sitemap: http://
nhatthienkt.net/sitemap.xml

3. Tối ưu các file .js .css (JavaScript và CSS )

- Hãy đặt tất cả các file .css và font (màu đỏ) theo cấu trúc sau. Đặt nó sau thẻ <head>
<script type='text/javascript'>//<![CDATA[function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");loadCSS("http://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i");//]]></script>
- Với .js thì chỉ cần thêm như sau:
<script async='async' src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'/>
Hoặc
<script async='async' src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js' type='text/javascript'/>

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

- Tối ưu hình ảnh được sử dụng phổ biến hiện nay bởi phương pháp Lazy Load. Hãy copy đoạn code sau và đặt nó trên thẻ </body>

<script type='text/javascript'>//<![CDATA[// Lazy Load
(function(a){a.fn.lazyload=function(b){var c={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(b){a.extend(c,b)}var d=this;if("scroll"==c.event){a(c.container).bind("scroll",function(b){var e=0;d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){}else if(!a.belowthefold(this,c)&&!a.rightoffold(this,c)){a(this).trigger("appear")}else{if(e++>c.failurelimit){return false}}});var f=a.grep(d,function(a){return!a.loaded});d=a(f)})}this.each(function(){var b=this;if(undefined==a(b).attr("original")){a(b).attr("original",a(b).attr("src"))}if("scroll"!=c.event||undefined==a(b).attr("src")||c.placeholder==a(b).attr("src")||a.abovethetop(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)){if(c.placeholder){a(b).attr("src",c.placeholder)}else{a(b).removeAttr("src")}b.loaded=false}else{b.loaded=true}a(b).one("appear",function(){if(!this.loaded){a("<img />").bind("load",function(){a(b).hide().attr("src",a(b).attr("original"))[c.effect](c.effectspeed);b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.expr[":"],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container: window})"})})(jQuery);$(function(){$("img").lazyload({placeholder:"http://2.bp.blogspot.com/-M1hvJF4KQx0/VtV91N12opI/AAAAAAAAABs/_BMWfkJOvQI/s60/wahyupratama.gif",effect:"fadeIn",threshold:"-50"})});
//]]></script>

5. Lách các nhà mạng chặn hiện thị hình ảnh 

Load mọi hình ảnh lưu trữ tải lên trực tiếp tại blogspot không lo bị VNPT chặn, copy code dưới và đặt nó lên trên thẻ </body>
<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>

6. Tìm chọn và thiết kế theme blogspot chuẩn responsive

Tham khảo một số theme tại blog này. Link: Theme Blogspot

7. Còn nữa sẽ câp nhật tiếp theo.....

Thứ Năm, 4 tháng 5, 2017

Code thời gian ngày giờ tháng năm chuẩn blogger blogspot

Nhatthienkt.net - Bộ code ngày giờ làm đẹp và thú vị hơn cho blog của bạn. Với blogger/blogspot thì các bạn sẽ gặp một số rắc  rối về chuẩn code. Sau đây mình chia sẻ lại một số code làm thời gian thực theo thời gian hệ thống hiện thị giờ phút giây, ngày tháng năm cho blogspot.
Code thời gian ngày giờ tháng năm chuẩn blogger blogspot

1. Code mẫu 1 thời gian chèn trong theme

Mẫu:


<script language="javascript" type="text/javascript"> 
dayName = new Array ("Chủ nhật","Thứ hai","Thứ ba","Thứ tư","Thứ năm","Thứ sáu","Thứ bảy")
monName = new Array ("1","2","3","4","5","6","7","8","9","10","11","12")
now = new Date
document.write("<font color=#FF6600><b>"+now.getHours()+ ":" +now.getMinutes()+ " phút - " +dayName[now.getDay()]+ ", " +now.getDate()+ "-" +monName[now.getMonth()]+ "-" +now.getFullYear()+ "</b></font>")
</script>

2. Mẫu 2:

Đang tải...

<center>
<div id="clock" class="smallfont" style="margin-left:5px;">Đang tải...</div>
<script type="text/javascript">
function refrClock()
{
var d=new Date();
var s=d.getSeconds();
var m=d.getMinutes();
var h=d.getHours();
var day=d.getDay();
var date=d.getDate();
var month=d.getMonth();
var year=d.getFullYear();
var days=new Array("Chủ nhật,","Thứ 2,","Thứ 3,","Thứ 4,","Thứ 5,","Thứ 6,","Thứ 7,");
var months=new Array("tháng 1,","tháng 2,","tháng 3,","tháng 4,","tháng 5,","tháng 6,","tháng 7,","tháng 8,","tháng 9,","tháng 10,","tháng 11,","tháng 12,");
var am_pm;
if (s<10) {s="0" + s}
if (m<10) {m="0" + m}
if (h>12) {h-=12;am_pm = "Chiều"}
else {am_pm="Sáng"}
if (h<10) {h="0" + h}
document.getElementById("clock").innerHTML=days[day] + " ngày " + date + " " + months[month] + " " + year + ", " + h + ":" + m + ":" + s + " " + am_pm;
setTimeout("refrClock()",1000);
}
refrClock();
</script>
</center>
Chúc các bạn thành công!

CẬP NHẬT TẠI VANPHONGIT