Thứ Bảy, 28 tháng 11, 2015

Code cấm copy bài viết trong blogspot phần 1

Ngăn thao tác quét bài viết là cách chống copy đơn giản nhưng khá hiệu quả. Tuy nó không chống lại được các đối tượng sao chép có chuyên môn về công nghệ thông tin, nhưng với các đối tượng copy thông thường thì rất hữu hiệu.



Trong bài viết này sử dụng CSS kết hợp với JavaScript. Bạn chỉ cần đưa đoạn code sau vào trước thẻ đóng </head> của mẫu HTML trang web của bạn là thành công:

<style>
body{
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
</style>
<script type=”text/JavaScript”>
function killCopy(e){
return false
}
function reEnable(){
return true
}
document.onselectstart=new Function (“return false”)
if (window.sidebar){
document.onmousedown=killCopy
document.onclick=reEnable
}
</script>

Dưới đây là ảnh chụp màn hình cho bạn dễ quan sát hơn vị trí cần cho đoạn code trên:

Vị trí đoạn code chống copy
Đoạn code phải ở sau thẻ mở <head> và ở trước thẻ đóng </head>
Nếu bạn muốn chống thêm cả thao tác chuột phải (hạn chế tình trạng sao chép ảnh và văn bản), thì đây là đoạn code… Vị trí thì vẫn thế, bạn cứ để nó trước thẻ đóng </head>

<script type=”text/JavaScript”>
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>

Nếu có thông báo lỗi khi save template (hay gặp với Blogspot) thì bạn thay bằng dòng code sau:
<script type=”text/JavaScript” src=”https://googledrive.com/host/0BxKUKf8tfKupN3lZMFc3X1FzdTQ/”>
</script>

Và đây là kết quả thực hiện demo trên trang ở liên kết này, bạn sẽ thấy bạn không thể quét được nội dung, cũng như không thể chuột phải để lưu các ảnh động banner ở trang chủ của website trên.

Phần dưới đây mình sẽ giải thích ý nghĩa những dòng code trong bài, nếu bạn không phải là dân công nghệ thông tin thì không cần đọc cho đỡ nhức đầu, đưa các đoạn code trên vào trước thẻ </head> là bạn chống hành vi copy được rồi…
Đoạn CSS:
<style>
body{
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 -moz-user-select: none;  
 -ms-user-select: none;    
 -o-user-select: none;
 user-select: none;
 }
</style>
Ở trên là đoạn CSS3 chống copy, -webkit, -moz, -ms, -o là để tương thích với các trình duyệt khác nhau, vì là CSS3 nên nếu trình duyệt nào chưa hỗ trợ đầy đủ thì nó không hoạt động, nghĩa là đối tượng vẫn copy được! Do vậy ta mới cần thêm JavaScript – cái này thì hoạt động tốt trên hầu hết trình duyệt. Tuy nhiên JavaScript lại có điểm yếu là đối tượng có thể chủ động tắt JavaScript của trình duyệt để copy… Và đó là lý do ta nên kết hợp cả hai, vì CSS thì đối tượng lại không thể tự tắt. Phối hợp cả 2 làm cho chúng bù lấp các điểm yếu của nhau.
Chúc các bạn thành công

Thứ Sáu, 27 tháng 11, 2015

Tự động thêm thuộc tính Nofollow và _blank cho liên kết ngoài (Link Out) Blogspot

Link Out trong làm seo, vẫn là điều đáng bàn cãi… Vậy có khi nào các bạn tự hỏi: Link Out là gì? Tại sao bạn nên Link Out đến Blog/Website khác? Sử dụng Link Out như thế nào để đạt hiểu quả cao nhất cho SEO?





☼ Mình xin đi qua vài vấn đề cơ bản trước khi thực hiện thủ thuật:

1. Link Out là gì?

Link out có thể thể hiểu là một loại link từ trang của bạn trỏ đến một trang khác. Trong trường ngược lại một site khác trỏ link về site của bạn thì nó là link out của site kia nhưng lại là backlink của bạn.

2. Tại sao bạn nên Link Out đến Blog/Website khác?

Ø  Việc bạn đi Link Out đến các nguồn uy tín sẽ làm tăng mức độ tin cậy của bạn đối với độ giả (Thu hút được độc giả và Blog/Website của bạn một cách tự nhiên).

Ø  Về mặt logic, khi liên kết đến Blog/Website khác sẽ làm cho Site của bạn kế thừa được Pagerank Authority của site đó. Do đó bạn có thể thấy lợi ích rõ ràng của việc Link (liên kết) tới các Blog/Website có chất lượng cao (Cải thiện được thứ hạn Site).

3. Sử dụng Link Out như thế nào để đạt hiểu quả cao nhất cho SEO?

Ø  Thứ nhất, Khi đặt link trỏ tới Blog/Website khác, luôn nhớ phải đặt thuộc tính “target=_blank” cho tất cả Link Out. Hiểu đơn giản, khi Bạn click chuột vào các Link Out thì trình duyệt sẽ mở ra một tab mới thay vì trình duyệt sẽ “bay” thẳng vào trang khác như các Link Out thông thường. Cách này có một điểm lợi đó là không làm mất Visitor đang truy cập Site của bạn vì khi có thao tác click vào Link Out, trang của bạn vẫn xuất hiện trên trình duyệt, ngược lại nó sẽ bay sang trang đích mà mất hiển thị trang của bạn.

Ø  Thứ hai, bạn nên đặt thuộc tính Nofollow cho Link Out. Việc này nhằm mục đích để Bot của Google nó không đi theo link và ra khỏi trang Blog/Website của bạn. Sẽ là không tốt vì đang dò tìm trên nhà của bạn mà lại chạy sang nhà người khác rồi lại tìm đường quay lại nhà của bạn, nếu Bot không tìm được đường trở lại nhà bạn đó là một đều rất tại hại.

ð Vậy cách sử dụng link Out tốt nhất là nên dùng cả 2 thuộc tính trên cho mỗi Link Out.

Bạn nên dùng thủ thuật tự động thêm thuộc tính Nofollow và _blank cho liên kết ngoài khi Blog/Website của bạn đi khá nhiều Link Out. Chẳng hạn, như Blog tài liệu miễn phí của mình. Nhược điểm của thủ thuật này là dùng jQuery điều này sẽ ảnh hưởng đến một phần nhỏ thời gian tải trang => Do đó mình khuyên các bạn nên thực hiện thủ công nếu Link Out trên Site của Bạn không đang kế.

☼ Giờ bắt đầu thủ thuật cùng Windows2it.

Vào Blog => Mẫu => Chỉnh sửa HTML. Nhấn tổ hợp phím Ctrl + F và tìm đến thẻ </head>. Sau đó dán đoạn mã Code sau lên phía trên thẻ </head> và Lưu mẫu.


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js' type='text/javascript'></script> <script type="text/javascript"> jQuery(document).ready(function () { jQuery('a[href*="http://"]:not([href*="http://designtuyetminhportfolio.blogspot.com/"])').attr('rel', 'nofollow');
jQuery('a[href*="https://"]:not([href*="http://designtuyetminhportfolio.blogspot.com/"])').attr("target", "_blank"); }); </script>  
☼ Tùy chỉnh:

Ø  Nếu Blog của bạn đã sử dụng thư viện jQuery thì bỏ đoạn Code mà đỏ đi.

Ø  Sửa lại liên kết http://designtuyetminhportfolio.blogspot.com/ thành URL của Blog/Website bạn và Lưu lại Template sau đó kiểm tra kết quả nhé. Với thủ thuật này nó sẽ tự động thêm thuộc tính Nofollow và thẻ “target=_blank” cho tất cả các liên kết ngoài giúp bạn tiết kiệm được nhiều thời gian.

Nếu bạn thích bài viết này, hãy subscribe blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất qua email nhé. Cảm ơn rất nhiều.

Hướng dẫn cách tắt video tự đội trên facebook

Hieenj nay Facebook có tính năng tự chạy video làm bạn khó chịu. Chỉ với vài thao tác tắt video tự động trên facebook, bạn có thể giair quyết chúng rên cả điện thoại và máy tính của mình để “lướt” Facebook thoải mái hơn.
Một điều cực kỳ khó chịu với mình là khi mình sử dụng 3G tính theo dung lượng trên điện thoại để truy cập vào Facebook thì các video có trên new feed của Facebook cứ ầm ầm đua nhau tự chạy. Vèo tí hết tiền + hết dung lượng.
Bạn có buồn khi gặp tình trạng giống mình không? Đừng lo, làm theo dưới đây bạn sẽ giải quyết được nỗi buồn ấy.


Video tự động chạy trên Facebook không chỉ làm chậm việc truy cập mạng mà còn tiêu tốn khá nhiều dữ liệu của bạn để tải Video. Đặc biệt đối với những người dùng điện thoại, việc này gây ra không ít khó chịu khi đang “lướt” Facebook. Tuy nhiên, chỉ với vài giây thao tác, bạn có thể tắt chế độ tự động chạy Video một cách dễ dàng.
Hướng dẫn cách tắt chế độ tự động chạy Video trên Facebook 

Đối với iPhone, bạn hãy vào Settings rồi kéo xuống để tìm Facebook. Nhấn vào Settings của phần Facebook. Tiếp đó, nhấn vào Auto-play ở mục Video và chọn Wi-Fi only hoặc Off để tắt chế độ tự chạy Video.

Vài bước đơn giản để tắt chế độ tự chạy Video trên iPhone.

Đối với các dòng máy Android, bạn vào Settings trên chính ứng dụng Facebook. Bỏ chọn ở ô Auto-play videos on Wi-Fi only để tắt chế độ tự chạy Video.


Bỏ chọn ở mục Auto-play videos on Wi-Fi only để chuyển về chế độ Off.

Đối với máy tính, bản mở Facebook và nhấn vào mũi tên hướng xuống ở góc trên bên phải màn hình, chọn Settings.



Nhấn vào biểu tượng mũi tên hướng xuống và chọn Settings.

Tiếp đó, bạn vào Videos và chọn Off ở mục Auto-Play Videos.


Chuyển chế độ Auto-Play Videos sang Off.

Share code SlideShow trình chiếu ảnh tuyệt đẹp cho blogspot

 Việt lự chọn code SlideShow trình chiếu ảnh tuyệt đẹp cho blogspot nó làm nổi bật nội dung của một Blog/Website thường đặt ở ngoài trang chủ. Ngoài ra một số Blog thường dùng các SlideShow để trao quảng ở các cột sitebar. Hoàn toàn dùng Javascript không dùng Jquery và Flash.

Mình sẽ hướng dẫn các bạn cách chằn một SlideShow vào cột Sitebar và trực tiếp vào trong template (nơi mà bạn muốn chằn vào). Bắt đầu thủ thuật !


Chằn vào cột sitebar (vô cùng đơn giản) thường dùng cho quảng cáo

Đầu tiên bạn vào Blog => Bố cục => Thêm tiện ích => HTML/JavaScript và dán đoạn mã code dưới đây vào và Lưu lại.

<script type="text/javascript">
// Banner Rotation Script by Bloggerism
var ban = new Array();
var link = new Array();
var index = 0;
ban[0] = new Image();
ban[0].src = "URL_banner_0";
link[0] = "URL_link_0";
ban[1] = new Image();
ban[1].src = "URL_banner_1";
link[1] = "URL_link_1";
ban[2] = new Image();
ban[2].src = "URL_banner_2";
link[2] = "URL_link_2";
index = Math.random() * (ban.length);
index = Math.floor(index);
function rotator()
{if (index == ban.length) index = 0;
if (document.images) {
document.images.rotation.src = ban[index].src;
}
else {
document.getElementById('rotation').src=ban[index].src;
}
index++;
setTimeout('rotator()',3000);
}
function go() {window.open(link[index-1]);}
</script>
<img id="rotation" style="cursor:pointer;" src="" onclick="go();"/>
<script type="text/javascript">rotator();</script>

Chằn trực tiếp vào trong template làm nổi bật giao diện Blog/Website

Thay đoạn code SlideShow trong Blog/Website của bạn bằng đoạn Code dưới đây: (đoạn code SlideShow thường nằm giữa thẻ mở <body> và thẻ đóng </body>)

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type="text/javascript">
// Banner Rotation Script by Bloggerism
var ban = new Array();
var link = new Array();
var index = 0;
ban[0] = new Image();
ban[0].src = "URL_banner_0";
link[0] = "URL_link_0";
ban[1] = new Image();
ban[1].src = "URL_banner_1";
link[1] = "URL_link_1";
ban[2] = new Image();
ban[2].src = "URL_banner_2";
link[2] = "URL_link_2";
index = Math.random() * (ban.length);
index = Math.floor(index);
function rotator()
{if (index == ban.length) index = 0;
if (document.images) {
document.images.rotation.src = ban[index].src;
}
else {
document.getElementById('rotation').src=ban[index].src;
}
index++;
setTimeout('rotator()',3000);
}
function go() {window.open(link[index-1]);}
</script>
<img id="rotation" style="cursor:pointer;" src="" onclick="go();"/>
<script type="text/javascript">rotator();</script></b:if>


☼ Tùy chỉnh

Thay URL_banner_0, URL_banner_1, URL_banner_2 thành URL của hình ảnh bạn muốn hiển thị trên banner

Thay URL_link_0, URL_link_1, URL_link_2 thành linh liên kết tới trang cần quảng cáo tương ướng với mỗi bức ảnh ở bên trên.

 Chú ý số 3000 ám chỉ 3000 mili giây, tương đương 3 giây chỉ khoảng cách giữa các lần chuyển banner. Bạn có thể điều chỉnh con số này tùy ý.

Bạn muốn thêm báo nhiêu Ảnh cũng được nhé ! với cú pháp
ban[n] = new Image();
ban[n].src = "URL_banner_n";
link[n] = "URL_link_n";
☼ Kết luận

Dễ dàng tùy biến, Code gọn đơn giản dể sửa và đặc biệt hoạt động tốt trên mọi trình duyệt.

Đặc biệt không dùng Flash thuận lợi cho việc đăng ký Google Asen
Chúc các bạn thành công

Thứ Hai, 23 tháng 11, 2015

Phương pháp tối ưu SEO cho robot.txt

 Phương pháp tối ưu SEO cho robot.txt là phương pháp cần thiết đề google dễ dàng tìm đến blogspot của bạn.  Phương pháp tối ưu SEO cho robot.txt mình hướng dẫn rất cụ thể các bạn chỉ việc làm theo nó không khó.
Robots.txt là gì?

·   Robots Exclusion Standard được phát triển từ năm 1994, nhằm giúp các webmaster có thể “tư vấn” cho các công cụ tìm kiếm cách thu thập thông tin từ Blog/Website của họ. Nó hoạt động theo cách tương tự như các “Thẻ tiêu đề robot tùy chỉnh”. Điểm khác biệt chính giữa chúng là các tập tin “Robots.txt tùy chỉnh” sẽ ngăn cản việc công cụ tìm kiếm truy cập vào một trang hoặc thư mục, trong khi các “Thẻ tiêu đề robot tùy chỉnh” chỉ kiểm soát việc lúc nào thì trang hoặc thư mục đó được lập chỉ mục (index).

·   Chức năng “Robots.txt tùy chỉnh” và “Thẻ tiêu đề robot tùy chỉnh” được Blogger đưa ra rất lâu rồi. Đây là chức năng được các Chuyên gia SEO đánh giá rất cao tuy nhiên các Blog Việt chưa biết các sử dụng nó (thường để ở dạng mặc định). Hôm nay Windows2it viết bài này để hướng dẫn các bạn. Dưới đây là cài đặt chuẩn nhất hiện nay mà được các Blog Việt sử dụng, mình cũng đã áp dụng cài đặt này trên Blog tài liệu miễn phí của mình.

☼ Hướng dẫn tối hóa cho file Robot.txt

Bạn vào Blog => Cài đặt => Tùy chọn tìm kiếm (“Robots.txt tùy chỉnh” và “Thẻ tiêu đề robot tùy chỉnh”)



“Robots.txt tùy chỉnh” và “Thẻ tiêu đề robot tùy chỉnh”
1. Code tối ưu “Robots tùy chỉnh” Chọn chỉnh sửa => Yes => Paste đoạn Code dưới đây và Lưu thay đổi.
User-agent: Mediapartners-Google
Disallow: 
User-agent: *
Allow: /
Disallow: /search
Disallow: /*?updated-max=*
Disallow: *archive.html 
Sitemap: http://designtuyetminhportfolio.blogspot.com/feeds/posts/default?orderby=UPDATED
Tag
Ý nghĩa
User-agent: *
Xác định các công cụ tìm kiếm mà quy tắc được áp dụng.
Disallow: /
Báo cho công cụ tìm kiếm biết nó không nên "Lục lọi" ở những file này.
Allow: /
Cho phép công cụ tìm kiếm index đọc tất cả các nội dung.
http://designtuyetminhportfolio.blogspot.com/
Thay thành địa chỉ trang của các Bạn.
Thay thành địa chỉ trang của các Bạn.

2. Cài đặt tối ưu cho “Thẻ tiêu đề robot tùy chỉnh” Chọn chỉnh sửa => Yes => thiết lập như hình bên dưới và Lưu thay đổi.

Cài đặt tối ưu cho “Thẻ tiêu đề robot tùy chỉnh”
TagÝ nghĩa
all
Cho phép công cụ tìm kiếm lập chỉ mục.
noindex
Không hiển thị trang này trong kết quả tìm kiếm.
nofollow
Thông báo cho công cụ tìm kiếm không nên lần theo các liên kết này.
none
Tương tự như nonidex và nofollow.
noarchive
Không hiển thị một liên kết "Cached" trong kết quả tìm kiếm.
nosnippet
Không hiển thị một đoạn mã trong kết quả tìm kiếm cho trang này.
noodp
Không sử dụng dữ liệu từ các dự án Open Directory (DMOZ) cho tiêu đề hoặc đoạn hiển thị cho trang này.
notranslate
Không cung cấp bản dịch của trang này với các ngôn ngữ khác trong kết quả tìm kiếm.
noimageindex
Không lập chỉ mục cho hình ảnh trên trang này.
unavailable_after
Không hiển thị trang này trong kết quả tìm kiếm sau khi ngày/thời gian quy định. Ngày/thời phải được xác định trong các định dạng RCF 850.
Không hiển thị trang này trong kết quả tìm kiếm sau khi ngày/thời gian quy định. Ngày/thời phải được xác định trong các định dạng RCF 850.
☼ Kết luận: Quá trình cài đặt file Robot.txt cũng không quá khó. Nhưng chủ yếu là các bạn biết cách dùng sao cho phù hợp với nội dung Blog/Website của Bạn.

Thứ Sáu, 20 tháng 11, 2015

Ẩn liên kết trong Comment (Bình luận) trên blogspot

Hiện nay có quều nhiều ban spam trong cooment blogspot. Bài viết này giúp các bạn tránh khỏi những phiền toái đó bằng cách ẩn liên kết trong comment trên blogspot.
Mục đích của việc “xóa” link liên kết trong Comment Blogspot: Nhằm ngăn chặn việc người dùng đăng quảng cáo sản phẩm hay quảng bá Blog/Website của họ dưới dạng textlink làm lệch lạc nội dung bài viết => đây gọi là hiện tượng Spam Comment.

Cũng có nhiều bài viết hướng cách ngăn chặn Spam Comment trong Blogspot (Mặc dù Blogspot cũng có bộ lọc Spam Comment). Chẳng hạn có bài hướng dẫn ẩn những comment chứa liên kết (textlink) nhưng thủ thuật này quá “mạo hiện”. Tại sao mình nói quá “mạo hiển” vì nếu Comment Spam thì việc ẩn Comment đó là hoàn toán chính đáng, nhưng nếu Comment đó chưa liên kết có “lợi” nhằm làm rõ nội dung Comment (bình luận) => Vậy việc ẩn comment này quả là một đều đáng tiếc.

            

Ngoài ra, nếu một Blog hay một Website hay một Diễn đàn chứa quá nhiều Spam Comment gây ra hiện tượng giảm Trust Rank (mức độ uy tín) của Site trong mắt Google và các bộ máy tìm kiếm khác.

Chú ý: Bài viết này mình chỉ nói Spam Comment (theo nghĩa hẹp), theo nghĩa rộng thì Spam có 2 hình thức chủ yếu: Spam nội dung và Spam trên mạng xã hội.

Chính vì các lý do trên, hôm nay mình viết thủ thuật “Ẩn liên kết trong Comment Blogspot” (Mình muốn nhấn mạnh ở đây là ẩn liên kết chứa trong Comment chứ không phải ẩn Comment. Đều này lợi thế hơn nhiều số với việc ẩn Comment.

☼ Mình xin lấy một VD nói sơ qua thủ thuật “Ẩn liên kết trong Comment Blogspot” cho các bạn dễ hình dung chức năng của thủ thuật này.

·        Nếu Blog chưa thuật hiện thủ thuật này khi độc giả comment: --Đây là Blog tài liệu của mình các bạn ủng hộ nhé @!-- (thì link chứa trong cụm từ Blog tài liệu không ẩn đi vậy khi người dùng click vào cụm từ Blog tài liệu nó sẽ trỏ về liên kết chưa trong cụm từ Blog tài liệu)

·        Nếu Blog đã thực hiện thủ thuật này khi độc giả comment: --Đây là Blog tài liệu của mình các bạn ủng hộ nhé @!-- (thì link chứa trong cụm từ Blog tài liệu sẽ ẩn đi vậy khi người dùng click vào cụm từ Blog tài liệu nó sẽ không có liên kết trỏ về)

ð Đây là cách chống Spam Comment cho Blogspot tối ưu nhất hiện nay.

☼ Giờ bắt đầu thủ thuật

Bước 1: Vào Blog => Mẫu => Chỉnh sửa HTML. Nhấn tổ hợp phím Ctrl + F và tìm đến thẻ <head>. Sau đó dán đoạn mã Code sau ở phía trên thẻ <head>.


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" />  
Bước 2: Vào Blog => Mẫu => Chỉnh sửa HTML. Nhấn tổ hợp phím Ctrl + F và tìm đến thẻ </body>. Sau đó dán đoạn mã Code sau ở phía trên thẻ </body> và Lưu mẫu.


<script type="text/javascript"> $("#comments p a").each(function () { $(this).replaceWith($(this).text()); }); </script>  
Thủ thuật này đơn giản chỉ vậy thôi @! Các bạn thực hiện là thấy ngay kết quả nên Mình không để DEMO.

. Sau đó dán đoạn mã Code sau ở phía trên thẻ . Thủ thuật này đơn giản chỉ vậy thôi @! Các bạn thực hiện là thấy ngay kết quả nên Mình không để DEMO. Nếu bạn thích bài viết này, hãy subscribe blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất qua email nhé.
Nếu bạn thích bài viết này, hãy subscribe blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất qua email nhé.

Thứ Hai, 2 tháng 11, 2015

Tạo nút buttom top tiện ích cho blogspot

 Tạo nút buttom top tiện ích cho blogspot Lên đầu trang là ứng dụng khá tiện lợi khi độc giả đọc hết bài viết của bạn có nội dung tương đối dài, thay vì độc giả phải cuộn chuột hoặc kéo thanh trượt dọc để về trang đầu khá mắc công…



Nút Lên đầu trang thường được tạo ra bởi 2 cách: Sử dụng CSS hoặc Sử dụng Jquery (Ở 2 cách trên đề có 2 cách nhỏ: Sử dụng chữ hoặc hình ảnh để là “biểu tượng” cho nút Back to top).


Đến với hôm nay sẽ hướng dẫn các bạn cả 2 cách để tạo nút Back to top và cả hai cách này đều sử dụng ảnh để là biểu trượng cho nút Back to top.

☼ Cách tiến hành:

Chỉ cần chèn đoạn mã sau đây vào một Widget HTML/Javascript là Oke

Đầu tiên bạn vào Blog => Bố cục => Thêm tiện ích => HTML/JavaScript và dán đoạn mã code dưới đây vào và Lưu lại.

Cách 1: Sử dụng CSS


<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img src="http://2.bp.blogspot.com/- ExomXm9BGFw/UmFqgFo-rFI/AAAAAAAAAE4/JMc1KSveWco/s1600/Top.png"/></a>  

Cách 2: Sử dụng Jquery

<script type='text/javascript'> $(function(){$(window).scroll (function(){if($(this).scrollTop()!=0){$("#noop-top"). fadeIn()}else{$("#noop-top").fadeOut()}});$("#noop-top"). click(function(){$("body,html").animate({scrollTop:0},800); return false})});</script><a href="http://www.windows2it.com/"> </a><a id='noop-top' style='display: none; position: fixed; bottom: 1px; right:1%; cursor:pointer;font:12px arial;'> <img src='http://2.bp.blogspot.com/- ExomXm9BGFw/UmFqgFo-rFI/AAAAAAAAAE4/JMc1KSveWco/s1600/Top.png'/></a>
☼ Tùy chỉnh

·        800 là tốc độ khi cuộn trang, các bạn cũng có thể tùy chỉnh theo ý muốn.

·        Thay đổi link ảnh màu xanh thành link ảnh bạn mong muốn, dưới đây mình cũng sưu tâm một số ảnh thích cái nào thì tải về upload lên, rồi lấy link hình thay vào lưu lại là oke nhé @!





☼ Kết luận

·        Tiện tích này quá đơn giản nên mình không DEMO ngoài chỉ để DEMO trực tiếp ở bài viết cho các bạn tham khảo.

·        Tiện ích Back to top (Lên đầu trang) các bạn có thể chèn trực tiếp vào template nhé! Mình lại thích hướng các bạn chèn vào 1 tiện ích HTML/Javascrip có sẵn. <Khi chèn vào template bạn nên cẩn thận kẻo lỗi template>

·        Đối với cách 1 sử dụng CSS thì tốc độ load site của bạn sẽ nhanh hơn rất nhiều so với cách 2 sử dụng Jquery (xử lý Jquery). Nhưng cách 1 cách lại không có hiệu ứng đối với cách 2 lại có hiệu ứng cuộn lên khá đẹp.