Bạn đang xem chuyên mục "Javascript"

Chia sẻ code mã hóa ký tự HTML của KslZone.NET

Đã lâu lắm rồi không đụng đến blog của mình, điều thực sự dẫn đến lý do này là mình lười tìm ý tưởng để chế tác ra những thủ thuật mới để chia sẻ với mọi người quá. Thôi thì bữa nay tiếp tục chia sẻ những cái hiện có trên blog mình đi cho đỡ buồn. Bữa trước cũng có người hỏi mình về trang mã hóa code HTML của mình, thế nên hôm nay tiện viết một bài nhỏ để chia sẻ với mọi người code mã hóa mà mình đang sử dụng nhé.

Chia sẻ code mã hóa ký tự HTML của KslZone.NET
Khung mã hóa code của KslZone.NET
Đoạn mã này giúp các bạn chuyễn những ký tự đặc biệt về dạng ASCII. Mình thường sử convert như bằng nó để dán vào khung nhận xét nó hiện ra đoạn mã mà mình muốn chia sẻ chứ không bị ẩn đi. Để hiểu rõ hơn bạn có thể thảm khảo tại trang "Chuyễn mã HTML" dán một mã HTML bất kì và bỏ vào phần nhận xét trên blog bạn sẽ thấy nó hiện ra một cách bình thường.

Chuyển ký tự đặc biệt HTML qua ASCII

Ok bây giờ tơi phần code đây, bây giờ bạn chỉ cần sao chép đoạn mã này vào nơi mà bạn muốn hiện. Nó có 2 khung, khung trên điền và khung thứ 2 sẽ convert trực tiếp theo thời gian thực.
<script type="text/javascript">
function $(esc_tool){
 return document.getElementById(esc_tool)
}
var char2entity = { "'" : '&#39;', '"' : '&quot;',  '<' : '&lt;', '>' : '&gt;',  '&' : '&amp;'};
function escape_entities(str) {
 var rv = '';
 for (var i = 0;i < str.length; i++) {
 var ch = str.charAt(i);
 rv += char2entity[ch] || ch;
 }
 return rv;
}
function do_escape(e){
 document.getElementById('escaped').value = escape_entities(e.value)
}
</script>

<textarea onchange="do_escape(this)" onkeyup="do_escape(this)" rows="10" style="font-family: ‘courier new’,monospace; height: 10em; width: 100%;"></textarea>

<textarea id="escaped" onclick="this.select()" readonly="readonly" rows="10" style="font-family: ‘courier new’,monospace; height: 10em; width: 100%;"></textarea>
bạn có thể kết hợp đoạn mã này với thủ thuật "Spoiler cho Blogger" để thu gọn nó và nhét xuống vị trí khung comment để người dùng tiện sử dụng. Đoạn mã này có thể đơn giản hơn nhiều so với những blog khác nhưng mình cảm thấy chỉ như vầy là đủ.

Đoạn Javascript trên thì khá là đơn giản rồi nên mình cũng không giải thích thêm về nó nữa, mọi thắc mắc cần thiết, hoặc vị trí mà bạn muốn chèn vào blog mà không biết phải chèn sao thì cứ để lại nhận xét cho mình ở phía dưới nhé.

Nút trở về đầu trang thô bằng Javascript cho Blogger

Nút trở về đầu trang là một trong những nút rất hữu ích và lượng người tương tác vào nút này cũng khá nhiều. Từ lúc thay giao diện hiện tại bây giờ đang sử dụng trên blog của mình đây, mình rất phân vân việc chèn jQuery vào chỉ để làm cái nút này cho blog vì việc sử dụng jQuery cho blog làm tương đối xấu đi điểm số ở trên Google PageSpeed Insight.

Nút trở về đầu trang thô bằng Javascript cho Blogger
Nút trở về đầu trang bằng Javascript
Thế là mình cũng có thời gian ngắn tìm hiểu coi trên mạng có cái nào đoạn Javascript nào viết được cái nút này không. Và mình đã tìm được một cái mặc dù là không được toàn bộ tính năng cũng như độ mượt nhìn cho thật đẹp mắt, nhưng nó đủ nhu cầu hiện tại của mình. Thì ở đây mình xin chia sẻ với những bạn có nhu cầu cái nút trở về đầu trang thô bằng Javascript mà blog mình đang sử dụng.

Thêm nút trở về đầu trang thô vào Blogger

Nếu bạn nào đang tìm kiếm nút trở về đầu trang mượt mà bằng jQuery thì trước đây mình cũng đã có một bài viết chia sẻ "Thêm nút trở về đầu trang vào Blogger" mời các bạn xem qua. Chúng tiếp tục với nút trở về đâu trang thô ở đây thôi.

Đầu tiên các bạn chèn đoạn Javascript sau đây lên trên thẻ </head>
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
var appended = false, bookmark = document.createElement("div");
bookmark.id = "arrowUp";
bookmark.innerHTML = "<a href=\"#\" title=\"Trở về đầu trang\">&uarr;<\/a>";

onscroll = function() {
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  if (scrollTop > 500) {
    if (!appended) {
      document.body.appendChild(bookmark);
      appended = true;
    }
  } else {
    if (appended) {
      document.body.removeChild(bookmark);
      appended = false;
    }
  }
};
}
//]]></script>
đoạn Javascript này rất đơn giản, khi mà trình duyệt cuộn xuống dưới 500px kẻ tử đầu trang, đoạn mã này sẽ tạo ra một thẻ như thế này
<div id="arrowUp"><a href="#" title="Trở về đầu trang">↑</a></div>
thông thường thì với thẻ a mà bạn đặt cho thuộc tính href của nó là "#" có nghĩa là không có gì hết, và khi người dùng nhắp vào nó sẽ tự động nhảy lên đầu trang web.

Tiếp tục thôi, sau khi chèn xong đoạn Javascript thì tiếp đến bạn chèn đoạn css sau đây lên trên thẻ ]]></b:kin>
#arrowUp {
  position: fixed;
  height: auto;
  width: auto;
  right: 15px;
  bottom: 10px;
  font-size: 48px;
}
#arrowUp a {
  text-decoration: none;
  color: black;
  font-weight: bold;
  font-family: serif;
}
bạn có thể dùng css để thay thế hình ảnh hiển thị của cái nút trở về đầu trang. Ở trên đây mặc định đoạn Javascript tạo ra ký tự mũi tên, và đoạn css này chỉ có tác đụng căn chỉnh màu sắc, kích thước và vị trí của nút trở về đầu trang thôi. Bạn có thể dễ dàng thay thế nút này bằng hình ảnh bằng việc sử dụng thuộc tính background trong css.

Lời kết

Đối với với điểm số trên Google PageSpeed mặc dù là thế, mình cũng thích để đẹp cho mấy bác xem thôi, chứ đối với tốc độ thực tế thì nếu bạn không lạm dụng jQuery nhiều quá, chỉ sử dụng một số tính năng cần thiết và nhỏ như nút trở về đầu trang thì thôi thì nó hoàn toàn không làm giảm tốc độ tải trang là bao nhiêu cả.

Prism Syntax Highlighter nhẹ và nhanh cho Blogger

Syntax Highlighter là một plugin giúp chúng ta thực hiện công việc Highlight những đoạn code mà chúng ta chia sẻ, bằng việc thêm vào những màu sắc đặt trưng cho từng kiểu mã. Bằng việc highlight những đoạn mã của chúng ta, nó sẽ giúp cho cả ta và người đọc dễ dàng nhìn và hiểu đoạn mã đó hơn. Hiện tại thì có rất nhiều dạng Highlighter được chia sẻ trên mạng Internet, từ nặng đến nhẹ từ nhiều tính năng đến ít tính năng.

Prism Syntax Highlighter nhẹ và nhanh cho Blogger

Sau một thời gian tìm kiếm thì mình đã tìm thấy Prism một Syntax Highlighter khá nhỏ nhẹ, và tính năng cũng tương đối đầy đủ. Nó cũng khá tương tự với Prettify, nhưng có cái mình kết cái giao diện của nó hơn, trông rõ rằng và tinh tế. Thôi không dài dòng nữa vào thẳng vấn đề luôn mình sẽ hướng dẫn các bạn về cách cài đặt plugin này vào Blogger và cách sử dụng cơ bản về nó.

Cài đặt Prism vào Blogger

Để cài đạt Prism khá đơn giản, chỉ cần chèn đoạn script hỗ trợ và phần css của nó vào Blogger Template của bạn là xong rồi. Bây giờ chúng ta tìm đoạn script và css đó ở đâu?

Đối với Javascript
Bạn hãy chèn mã nhúng Javascript của nó vào trước thẻ </body> trong template là được. Về mặt đoạn Javascript đó, có 2 lựa chọn cho bạn.

Lựa chọn đầu tiên là lên website chính thức
Bạn có thể lên trực tiếp website chính thức của nhà phát triển để tải nó về
http://prismjs.com/download.html
tại đây bạn có thể tùy chỉnh tính năng cho nó, thích cái nào thì thêm vào, không thích thì bỏ ra.

Tùy chỉnh và tải về Prism

Rồi sau đó có thể sử dụng một số dịch vụ lưu trữ Google Drive, Google Code, Dropbox,... để nhúng về sử dụng.


Đối với lựa chọn này thì thường tốc độ load không gọi là quá nhanh, nhưng bạn có quyền lựa chọn tính năng.

Lựa chọn thứ 2 sử dụng script các dịch vụ CDN
Sau một ít thời gian lục lọi trên các dịch vụ CDN thì mình tìm thấy 2 dịch vụ đang tồn tại plugin Prism này. CDN là viết tắt của Content Delivery Network, nó là một dải các server cung cấp nội dung từ website dựa trên vị trí hiện tại của người dùng mà chọn server gần nhất để cấp phát. Do đó tốc độ cấp phát dữ liệu của nó cực kì lẹ.

Đầu tiên là CDNJS của Cloudflare, đây là mã nhúng của nó
<script src='//cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.js'/>
đối với thằng này thì nó chọn đủ mọi ngôn ngữ và tính năng cho bạn luôn. Nhưng có một tính năng mình không thích là Auto Linker, tự động chèn link giải thích vào phần đuôi của những đoạn mã cho người dùng tìm hiểu, nghe có vẻ tốt nhưng nó chèn dofollow link chứ không phải nofollow nên rất là không tốt cho SEO tại website.

Dịch vụ CDN tiếp theo có lưu trự nó là jsDelivr, đây là mã nhúng của nó
<script src='//cdn.jsdelivr.net/prism/0.1/prism.js'/>
đối với dịch vụ này thì nó chỉ host những tính năng mặc định thôi và mình đang sử dụng thằng này. Bạn có thể highlighter những đoạn mã cơ bản như các ngôn ngữ Markup, rồi CSS, C-like, và Javascript.

Đối với CSS

Bạn hãy lên website của nó vẫn với đường link cũ
http://prismjs.com/download.html
chọn kiểu mà bạn thích ở thanh bên phải

Xem thử giao diện Prism

bạn sẽ xem được demo của nó ở cuối trang.

Sau khi chọn được một giao diện ưng ý thì bạn lên lại đầu trang chọn đúng tên giao diện đó

Chọn giao diện Prism

sau đó lại tiếp tục kéo xuống cuối trang, tại phần bên phải

Tải về CSS Prism

bạn có thể sao chép toàn bộ đoạn css đó và chèn vào trước thẻ ]]></b:skin>. Hoặc down về, rồi tiếp tục sử dụng Google Drive và nhúng về trên thẻ </head>

Hướng dẫn sử dụng Prism
Sử dụng prism cũng rất là đơn giản, công việc bạn phải làm là lúc đăng bài, hãy chuyển sang soạn thảo HTML và đang theo cấu trúc sau
<pre><code class="language-xxxxxx">
đoạn mã của bạn
</code></pre>
trong đó xxxxxx là tên ngôn ngữ của mã mà bạn đặt bên trong. Mặc định thì có các ngôn ngữ sau "markup", "javascript", "css", "clike". Bạn có thể tìm thấy kí tự thu gọn của ngon ngữ ở đầu cùa phần CSS
/* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript */
bạn thấy các ngôn ngữ cách nhau ở dấu "+" không nó đấy.

Hiểu lầm thường gặp
<pre><code class="language-css">
<style>
.css { background: #FFF }
</style>
</code></pre>
mình đã chọn đúng ngôn ngữ css tại sao nó không highlight lên? Đây là ngôn ngữ Markup bạn nhé, đã có thẻ đóng mở trong trường hợp này là "style", thì nó không được tính là css, nếu bạn bỏ cặp thẻ "style" ra thì nó sẽ hoạt động tốt. Tương tự với Javascript và các ngôn ngữ khác nha.

Kết bài

Như vậy là hoàn tất hướng dẫn về việc thêm Prism vào Blogger một Syntax Highlighter nhẹ và nhanh. Nếu bạn có bất kì thắc mắc nào về hướng dẫn trên hoặc góp ý cho nó bạn có thể để lại nhận xét ở dưới.

Tạo link thu gọn bằng Javascript

Hiện tại thì có rất nhiều dịch vụ tạo link thu gọn (URL Shortener) trên mạng. Những dịch vụ này giúp chúng ta thu gọn liên kết bằng địa chỉ liên kết khác, thông thường chúng ta sử dụng dịch vụ này để ẩn đi liên kết (affiliate) dùng để kiếm tiền. Ở ngay các bài viết trước đây thì tôi cũng có hướng dẫn các bạn chuyển hướng, để làm giả liên kết khi người dùng rê chuột vào để. Thì tôi cũng có lưu ý là không nên dùng thủ thuật đó để lừa gạt hoặc hack người khác.

Tạo link thu gọn bằng Javascript

Do đó hôm nay tôi xin giới thiệu đến mọi người một thủ thuật mới chuyên nghiệp hơn giúp bạn thu gọn liên kết bằng domain của chính mình sử dụng Javascript. Bạn có thể thấy ở rất nhiều blog sử dụng Wordpress khác ví dụ như tenmien.com/go/hostgator.

Hướng dẫn tạo link thu gọn bằng Javascript

Đây tiên đây là đoạn Javascript sẽ thực hiện công việc thu gọn liên kết, hay nói chính xác hơn là chuyển hướng liên kết được định sẵn qua liên kết khác. Bạn hãy chèn nó lên trên thẻ </head>
<script language='javascript'>
//<![CDATA[
var key = window.location.href.split("go/")[1].replace("/","")
var urls={
    'fb':'https://www.facebook.com/kslzone',
    'gplus':"https://plus.google.com/+kslzonenetvn",
    'twitter':"https://twitter.com/kieusonlam",
    'hosting':"https://tenmien.com/?rel=kieusonlam" /* 'ký tự thu gọn' : "liên kết chuyển hướng" */
}
if(key){
    if(urls[key]){
        window.location.href=urls[key]
    }else{
        document.write("'"+key+"' not found :(");
    }
}
//]]>
</script>
bạn có thể sửa hoặc thêm bằng cách đổi các ký tự thu gọn kèm theo địa chỉ sẽ được chuyển hướng, và nhớ là mỗi lần liên kết được khai báo được cách nhau bởi dấu "," bạn nhìn trên script trên chắc cũng rõ rồi.

Sau khi hoàn thành xong như đoạn script trên mà mình đã chia sẽ thì mình ví dụ một liên kết
http://kslzone.blogspot.com/go/fb
sẽ được chuyển hướng đến
https://www.facebook.com/kslzone
đơn giản phải không.

Lời kết

Như vậy là sau khi hoàn thành thì những bạn sử dụng Blogger / Blogspot có thể thấy thì có rất nhiều tính năng mà chúng ta có thể thêm vào mã nguồn này, để không thua kém những  nền tảng khác Wordpress, Joomla, chí có một cái là bạn phải chính sửa các đoạn mã một cách thủ công thôi, cơ mà như vậy mới thú vị. Mọi thắc mắc các bạn có thể để lại ở phần nhận xét phía dưới.

Mẹo chuyển hướng liên kết khi click chọn bằng Javascript

Tiêu đề khó hiểu quá nhỉ, chuyển hướng địa chỉ khi click chọn liên kết là thế nào? Đơn giản tương tự như tại bài viết hướng dẫn tạo trang chuyển tiếp tự động cho Blogger vậy, khi người dùng rê chuột vào một liên kết thì tại góc trái sẽ hiện lên địa chỉ liên kết, nhưng khi click chọn vào liên kết đó thì người dùng sẽ được chuyển hướng đến địa chỉ khác.

Mẹo thay đổi địa chỉ khi click chọn liên kết

Có rất nhiều lợi ích có thể tận dụng cho việc chuyển hướng địa chỉ liên kết mà người dùng chọn vào. Đương nhiên mình không khuyến khích các bạn tận dụng nó cho việc lừa đảo đưa người đùng đến những website có mã độc hay v.v.. rồi. Cái mà mình muốn hướng tới là giúp cho những bạn kiếm tiền bằng Affiliates (Giới thiệu sản phẩm) ẩn đi cái đuôi của phần link giới thiệu để người dùng sẵn sàng click vào hơn.

Lý do tại sao lại như thế thì nhiều người chắc cũng sẽ hiểu, có một phần nhỏ người không muốn người khác kiếm được tiền từ họ, mặc dù chã mất mát gì cả. Thì đây là quyền của cá nhân, và muốn kiếm được tiền thì chúng ta phải tìm cách làm cho họ click chọn vào nó thôi. Thì đây mình xin giới thiệu một mẹo nhỏ để tối ưu về vấn đề này.

Hướng dẫn thay đổi liên kết khi người dùng click chọn

Thủ thuật này rất đơn giản, chúng ta sẽ áp dụng javascript trực tiếp trên link mà chúng ta muốn, ví dụ đây là địa chỉ liên kết bình thường
<a href="địa chỉ liên kết">Liên kết</a>
bây giờ để chuyển hướng người dùng đến địa chỉ khách khi người dùng click chọn thì các bạn thêm đoạn javascript nhỏ này vào trực tiếp vào đường dẫn
<a href="địa chỉ liên kết" onclick="this.href = 'địa chỉ chuyển hướng'">Liên kết</a>

Có vẻ tương đối hơi khó hình dung nhỉ, đây là ví dụ thực tế
<a href="http://www.google.com.vn/" onclick="this.href = 'http://kslzone.blogspot.com/2014/08/hien-noi-dung-khi-like-1-va-tweet.html'" rel="nofollow" target="_blank">Liên kết</a>
bây giờ mình sẽ chèn nó vào ngay sau đây. Bạn click chọn thử vào đây nhé. Liên kết.

Như vậy ví dụ như bạn có liên kết affiliate như sau http://kslzone.blogspot.com/?rel=kieusonlam, thì bây giờ bạn chỉ cho người dùng thấy là họ click vào http://kslzone.blogspot.com thôi. Lưu ý là các bạn vẫn nên thêm các rel nofollow với target blank vào những liên kết đi ra ngoài nhé cho dù bạn chuyển hướng nó vào trong website của bạn.

Lời kết

Việc thay chuyển hướng người dùng đến địa chỉ liên kết khác với liên kết đã click chọn thì quá là đơn giản và khá hay cho những bạn đang và muốn kiếm tiền từ affiliates. Không còn gì hơn là chúc các bạn thành công và cảm ơn đã đọc bài viết.

Đánh thứ tự các dòng trong thẻ code

Tiêu đề có vẻ hơi khó hiểu nhỉ, mình cũng không biết phải đặt sao cho đúng nên thôi quất đại haha. Như bạn đã biết thì mấy blog hướng dẫn về tin học khi muốn chia sẻ bất cứ đoạn mã nào thì họ thường cho vào cặp thẻ pre. Thông thường để người dùng dễ nhìn hơn những đoạn mã mà họ chia sẻ, họ thường sử dụng Syntax Highlighter để phân chia màu sắc cũng như đánh số dòng cho đoạn mã đó.

Đánh thứ tự các dòng trong thẻ code

Nhưng mà hầu hết thì những mã nguồn Syntax Highlighter hiện tại thì chã có mấy cái nhẹ mà hoạt động nhanh được. Do đó hôm nay và các ngày sắp tới mình sẽ hướng dẫn các bạn dùng CSS và Javascript nhỏ dùng để những đoạn mã bạn chia sẻ dễ nhìn hơn mà không cần phải sử dụng qua Highlighter.

Đánh thứ tự cho các dòng trong thẻ code

Thực chất thì thủ thuật này các bạn có thể áp dụng cho tất cả mọi loại thẻ, blockquote, pre,.. nhưng mình thích tự tạo ra thẻ mới xài cho nó xôm. Đầu tiên bạn chèn đoạn css sau vào trên thẻ ]]></b:skin>
code {
  font: 12px/19px Consolas,'Andale Mono',Courier,'Courier New',monospace;
  background-color:#eee;
  color:#444;
  overflow:auto;
  margin:1em 0;
  padding:1em;
}
code , code .day-so {
  display:block;
  white-space:pre;
}
code .day-so {
  float:left;
  margin:-1em 1em -1em -1em;
  text-align:right;
  background-color:#f1f1f1;
  color:#acacac;
  padding:1em .2em 1em .2em;
  border-right:1px solid #e0e0e0;
}
code br {
  display:none;
}
code .day-so span {
  display:block;
  padding:0 .7em 0 1em;
}
code .clr {
  display:block;
  clear:both;
}
Sau khi chèn xong, tiếp tục tím đến thẻ </body> và thêm đoạn js này lên trên.
<script type='text/javascript'>
//<![CDATA[
var pre = document.getElementsByTagName('code'),
    pl = pre.length;
for (var i = 0; i < pl; i++) {
    pre[i].innerHTML = '<span class="day-so"></span>' + pre[i].innerHTML + '<span class="clr"></span>';
    var num = pre[i].innerHTML.split(/\n/).length;
    for (var j = 0; j < num; j++) {
        var line_num = pre[i].getElementsByTagName('span')[0];
        line_num.innerHTML += '<span>' + (j+1) + '</span>';
    }
}
//]]>
</script>
Chỉ như vậy là xong rồi đấy.

Lời kết

Nếu bạn không dữ dụng blockquote trong Blogger thì mình thấy bạn nên sử dụng đoạn mã này cho thẻ đó vì khá tiện dụng dễ chèn, nó nằm sẵn trong khung soạn thảo. Đơn giản để thay thế thẻ code bằng bất cứ thẻ nào bạn chỉ việc tìm và thay thế toàn bộ "code" bằng tên thẻ mà bạn muốn.