Cảm nhận tư duy và tổng hợp kiến thức

Chủ Nhật, 10 tháng 4, 2016

Cách tạo hiệu ứng Lá Vàng Rơi - Thật Tuyệt vời



Để tạo được hiệu ứng lá vàng rơi bạn chỉ cần tạo một tiện ích và bỏ code bên dưới vào rồi save lại. Một công việc thật dễ dàng phải không? Các bạn chỉ cần làm theo các trình tự như sau:



Demo
Cách làm:
Mỡ Blogger, vào Bố cục(layout).

Tạo một Widget có tên HTML/JavaScript


Chép Source Code nầy vào trang soạn thảo trong khung HTML/JavaScrip như hình dưới:

Xong nhớ Save lưu lại Widget và cho chạy thử Blogspot nhé các bạn.
CODE



Bạn có thể thử mở thêm trang nầy để chép dán source code trên bài nầy vào kiễm tra thử:
Chúc các bạn thành công! Chỉ có vậy thôi nhưng Blogspot của các bạn sẽ có thêm điều thú vị đấy các bạn ạ.

Bạn có thể tham khảo thêm bài: 

Khanhnguyen' s blog

Share:

Code Con Ruồi Bò Trên Blogspot/Web

Một Source code rất hay từ Doisong.com mình vừa tìm kiếm được. Chẳng qua là thấy là lạ mà thôi, có ai mà thích có con ruồi bò trên màn hình máy vi tính, rất giống thật đó bạn.

Nghĩa là khi khách truy cập blogspot của bạn sẽ thấy 1 con ruồi nó sẽ bò đến mọi nơi(360 độ) trên màn hình của Blogspot/Website. Bản thân mình biết rồi thì thôi, có thể là bạn sẽ vô cùng thích thú với một cảnh vật vô hại do chính mình tạo ra. Có thể sẽ giúp ích rất nhiều cho sự điều tiết mắt, mà không bị nguy hại đến thị giác. Một lợi ích như thế, thiết nghĩ là cần thiết phải không các bạn. Vô tình có ai đó không biết, cũng chẳng nỡ đập cho vỡ màn hình máy vi tính đâu, ngược lại có thể còn là một sự hứng thú bất ngờ nữa đó.


Bạn có thể thấy demo ngay tại bài viết này hay xem qua DEMO ở trang khác bên dưới.
Để tạo được con ruồi như thế bạn chỉ cần sử dụng đoạn code ngắn gọn sẽ trình bầy ngay sau đây.

Bạn có thể tham khảo thêm bài: 

Xem thử
1. Đầu t.iên bạn phải có tài khoản Google Account và truy cập vào trong Blogger bằng công cụ ở phía trên, góc phải màn hình như hình dưới đây:




2. Tiếp tục Click chuột vào khung có mũi tên trỏ và chọn "Template" (Mẫu) như hình dưới đây:.


3. Nào, bây giờ bạn đã thấy khung "Chỉnh sữa HTML" chưa?  Bạn hãy Click chuột vào đây để mỡ Template 



4. Sử dụng tính năng tìm kiếm bằng tổ hợp phím Ctrl+F để tìm hàng chữ   </head>

5. Chép dán đoạn Code dưới đây vào phía trước thể </head>

Code:



Bạn có thể thử mở thêm trang nầy để chép dán source code trên bài nầy vào kiễm tra thử:
Chú thích:
Trong code đó bạn có thể điều chỉnh ở đoạn:
var_1="true" var_2="false" var_3="false"

+ Bạn muốn bật 2,3 con vật bò trên Blog/Website thì thay
- var_2="false" thành true
+ Như code trên thì chỉ có 1 con ruồi bò phía trên của giao diện blogspot nếu muốn ruồi bò toàn bộ giao diện thì thay
- var_3="false" thành true

Bạn cũng có thể thay con ruồi bằng con vật khác bằng cách thay hình ảnh trong file js nếu bạn biết chỉnh sửa file javascript.
Chúc các bạn thành công!

Khanhnguyen' s blog

Share:

Thứ Bảy, 9 tháng 4, 2016

Tiện ích Auto Readmore Hack with Thumbnail for Blogger





Auto Readmore Hack with Thumbnail là tiện ích xuất hiện đã lâu và được cộng đồng Blogspot sử dụng rất phổ biến bởi những lợi ích rất thiết thực mà nó mạng lại.
Tuy Google cũng đã bổ sung JumpLink ( một dạng Readmore ) cho Blogspot nhưng dường như vẫn chưa thỏa mãn yêu cầu của các Blogger, nhất là các WebBlog như iTechPlus. Việc thực hiện thủ công JumpLink cho từng bài post xem ra khá nhọc nhằn đối với những Blog đã có nhiều bài viết.


Vì vậy, tuy Auto Readmore không phải là mới, nhưng nhận thấy nhu cầu sử dụng của các Blogger đối với tiện ích này vẫn còn khá lớn, nên iTechPlus quyết định giới thiệu lại 2 phiên bản phổ biến nhất của tiện ích này dành cho các bạn quan tâm.
1. Auto Readmore v.4.1 by Anhvo ( Vietwebguide.com )
Đây là phiên bản cuối cùng của Anhvo – một Blogger Việt rất nổi tiếng trước đây. Tuy nhiên hiện nay trang web này đã đóng cửa.
Một số đặc điểm của tiện ích :

  • Fix lỗi Width và Height của ảnh Thumbnail. Không giống các bản trước chỉ hiện cố định Width và Height của ảnh, bản 4.1 sẽ kiểm tra kích thước của ảnh và hiện kích thước MaxWidth và MaxHeight nếu ảnh lớn, nếu như ảnh nhỏ thì hiện kích cỡ thật sự của ảnh, cả 2 trường hợp đều giữ đúng tỉ lệ Width và Height.
  • Cải tiến phương pháp lấy đoạn summary (đoạn miêu tả), không còn nối dòng lung tung mà sẽ xuống dòng y chang như bài gốc. Summary tối đa lấy theo lượng từ chứ không còn theo kiểu ký tự nữa.
  • Cải tiến tốc độ Load cho blog. Bản 4.1 đã loại bỏ hoàn toàn việc Load toàn bộ ảnh trong bài, mà sẽ chỉ Load ảnh đầu tiên của bài đó để làm ảnh Thumbnail.
  • Hỗ trợ chế độ Readmore giống Wordpress, đây là tính năng khá thú vị mặc dù nó chỉ là Manual Readmore.
  • Hỗ trợ thụt đầu dòng cho Summary. Khi Summary có 2 đoạn trở lên thì việc thụt đầu dòng sẽ làm cho người đọc thấy rõ từng đoạn.
  • Có thể chọn lựa phương pháp hiện ảnh thumbnail: dồn trái (float, phù hợp cho các blog tin tức) và Gallery (no-float, phù hợp cho các trang có nhiều hình ảnh quảng cáo, trang Softs).
  • Có thể tùy chỉnh kích thước ảnh thumbnail theo ý muốn
  • Có thể chọn lựa giữa phương pháp lấy Summary cổ điển và Summary cải tiến.
Cài đặt :
Bước 1 : Vào Thiết kế > Chỉnh sửa HTML > Mở rộng mẫu tiện ích
Bước 2 : Tìm trong template ( Ctrl + F ) dòng <data:post.body/> và thay thế nó bằng đoạn code bên dưới

<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id' style='display:none;'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<div style="clear:both" align='right' class='rmlink'><a expr:href='data:post.url'>-->đọc tiếp...</a></div>
</b:if></b:if>
* Đoạn code trên iTechPlus đã sửa lại đôi chút để tiện ích không thực thi đối với trang Static Page
Bước 3 : Chèn đoạn code bên dưới vào trước thẻ đóng </head>

<!--
/*****************************************************
Auto-readmore link script, version 4.1 (for blogspot)
(C)2009 by Anhvo
Homepage:  http://vietwebguide.com
Please dont remove this copyright or change it into your own
******************************************************/
-->
<style type="text/css">
.thumbnailimg IMG {
max-width:150px;
   width: expression(this.width > 150 ? 150: true);
   max-height:120px;
   height: expression(this.height > 120 ? 120: true);
}
.thumbnailimg {
float:left;
padding:0px 10px 5px 0px;
}
</style>
<script type='text/javascript'>
var thumbnail_mode = "no-float" ;
var classicMode = false ;
var summary_noimg = 50;
var summary_img = 40;
var indent = 3;
</script>
<script  type='text/javascript'>
//<![CDATA[
function stripHtmlTags(s,max){return s.replace(/<.*?>/ig, '').split(/\s+/).slice(0,max-1).join(' ')}
function getSummaryLikeWP(id) {
        return document.getElementById(id).innerHTML.split(/<!--\s*more\s*-->/)[0];
}
function getSummaryImproved(post,max){
   var re = /<.*?>/gi
   var re2 = /<br.*?>/gi
   var re3 = /(<\/{1}p>)|(<\/{1}div>)/gi
   var re4 = /(<style.*?\/{1}style>)|(<script.*?\/{1}script>)|(<table.*?\/{1}table>)|(<form.*?\/{1}form>)|(<code.*?\/{1}code>)|(<pre.*?\/{1}pre>)/gi
   post = post.replace(re4,'')
   post = post.replace(re3,'<br /> ').split(re2)
   for(var i=0; i<post.length; i++){
    post[i] = post[i].replace(re,'');
   }
var post2 = new Array();
for(var i in post) {
  //if(post[i]!='' && post[i]!=' ' && post[i] != '\n') post2.push(post[i]);
  if(/[a-zA-Z0-9]/.test(post[i])) post2.push(post[i]) ;
}
var s = "";
var indentBlank = "";
for(var i=0;i<indent;i++){
  indentBlank += " ";
}
if(post2.join('<br/>').split(' ').length < max-1 ){
   s = post2.join(indentBlank +' <br/>');
} else {
  var i = 0;
  while(s.split(' ').length < max){
   s += indentBlank + ' ' + post2[i]+'<br/>';
   i++;
  }
}
return s;
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var content = div.innerHTML;
if (/<!--\s*more\s*-->/.test(content)) {
  div.innerHTML = getSummaryLikeWP(pID);
  div.style.display = "block";
}
else {
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
  if(thumbnail_mode == "float") {
   imgtag = '<span class="thumbnailimg"><img src="'+img[0].src+'" /></span>';
   summ = summary_img;
  } else {
   imgtag = '<div class="thumbnailimg" align="center"><img src="'+img[0].src+'" /></div>';
   summ = summary_img;
  }
}
var summary = (classicMode) ? imgtag + '<div>' + stripHtmlTags(content,summ) + '</div>' : imgtag + '<div>' + getSummaryImproved(content,summ) + '</div>';
div.innerHTML = summary;
div.style.display = "block";
}
}
//]]>
</script>
Trong đoạn code trên sẽ có những chỗ bạn cần thay đổi như sau:
  • 150 và 120 lần lượt là rộng và cao của ảnh thumbnail. Các chỗ cần thay đã được tô màu nền nổi, bạn nhớ thay cho đúng, mỗi cái xuất hiện tới 3 lần.
  • Giá trị "no-float" của thumbnail_mode là chế độ hiển thị ảnh theo kiểu Gallery, khi bạn chọn chế độ này, bạn phải thay đổi giá trị left ở trên css thành none. Bạn có thể đổi "no-float" thành "float" để cho ảnh của bạn hiện dồn về trái.
  • Giá trị false của classicMode ý nói là chế độ hiện Summary cổ điển đang tắt (đã cải tiến), bạn có thể thay nó thành true nếu muốn xài Summary kiểu cũ.
  • Giá trị 50 của summary_noimg là số từ tối đa cho Summary khi bài viết không có ảnh nào.
  • Giá trị 40 của summary_img là số từ tối đa cho Summary khi bài viết có ảnh.
  • Giá trị 3 cho indent, tức là thụt vô đầu dòng 3 ký tự của đoạn Summary. Bạn có thể đặt giá trị của nó là 0,1,2,3,4... đều được.
Sau khi thiết lập xong, bạn bấm Save để lưu thay đổi, vào lại blog và kiểm tra xem Auto Readmore chạy thế nào nhé.
* Một tính năng độc đáo mà Anhvo đã giới thiệu ở trên, đó là hiện Readmore giống Wordpress. Cái readmore này có cái lợi là bạn có thể định vị chỗ ngắt Summary, tuy nhiên thêm code rất đơn giản, chỉ cần thêm dòng

<!-- more -->
vào chỗ mà bạn cần ngắt cho Summary, như thế tất cả các định dạng HTML của bạn trong Summary sẽ không thay đổi so với bài gốc. Nhưng hạn chế là bạn phải chèn dòng <!-- more --> bằng tay.
2. Automatic Read More Hack With Thumbnail for Blogger Bug Fixed
Đây là tiện ích do một Blogger nước ngoài “bào chế” mà iTechPlus sưu tầm được đã khá lâu nên cũng không nhớ rõ. Thủ thuật có đôi chút ngắn gọn và đơn giản hơn :
Bước 1 : Vào Thiết kế > Chỉnh sửa HTML > Mở rộng mẫu tiện ích
Bước 2 : Tìm trong template ( Ctrl + F ) dòng <data:post.body/> và thay thế nó bằng đoạn code bên dưới
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> <span class='rmlink' style='float:right;padding-top:10px;'><a expr:href='data:post.url'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmXbMdcBh0CzuqQBUS6dCEop9w19cVeIR0rhX2jm9aJkWRp9gs7OPc_OLH0JWaRyN73QrpHGJntxcZksOrnN4uYb0kVedVoLorJ-9WbTFjOi4Lgjfz3uMbI8v_wAU_Iypv_jrdUJSwfTE/' style='border:none'/></a></span>
</b:if></b:if>
Bước 3 : Chèn đoạn code bên dưới vào trước thẻ đóng </head>
<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></span>';
summ = summary_img;
}
if(img.length<1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdE2pSFa2SBBxROXvmAJ63KT9tolTnq0fFcmJ02iAHTgvhNgWUbqC0nlAeym8lzsuDLgzEjVVZTdbteJ4NFQeMOqSBBZesUAnbzK7QcrtMI7pUltsINjxEaU0nxgBAaydFYAGx8XQH_uh0/" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
* Đoạn code trên iTechPlus đã thêm ảnh mặc định cho những bài viết không có ảnh
Bước 4 : Save template and Done.
Chúc các bạn thành công !

Share:

Thứ Sáu, 8 tháng 4, 2016

Cookie (tin học) nghĩa là gì?

Theo Bách khoa toàn thư mở Wikipedia:
"Cookie is một đoạn văn bản ghi thông tin được tạo ra và lưu trên trình duyệt của máy người dùng. Cookie thường được tạo ra khi người dùng truy cập một website, cookie sẽ ghi nhớ những thông tin như tên đăng nhâp, mật khẩu, các lựa chọn do người dùng lựa chọn đi kèm. Các thông tin này lưu trong máy tính thường được dùng để nhận ra người dùng khi viếng thăm một trang web. Nó là những tập tin mà trang web gửi đến máy tính của người dùng. Nó được gọi theo tên của bánh quy trong tiếng Anh tại Hoa Kỳ.
Khi người dùng truy cập đến một trang web có sử dụng cookie, trang web đó sẽ tự động gửi cookie đến máy tính của người dùng. Những cookie này tự động được tổ chức trong hệ thống máy tính. Khi truy cập đến các trang web sử dụng được cookie đã lưu, những cookie này tự động gửi thông tin của người dùng về cho chủ của nó (người tạo ra cookie). Tuy nhiên những thông tin do cookie ghi nhận không được tiết lộ rộng rãi, chỉ có website chứa cookie mới có thể xem được những thông tin này. Cookie được xem là một thành phần không thể thiếu được với những website có khối lượng dữ liệu lớn, có số lượng người dùng đông, và có những chức năng đi kèm với thành viên đăng kí. Phần lớn các website này là các website thương mại điện tử
Cookie có thể tiết lộ bí mật về người dùng. Các trình duyệt hiện đại cho phép đề phòng việc các cookie tiết lộ bí mật bằng các cài đặt chế độ cấm gửi ngược lại hay là hỏi ý kiến người dùng máy trước khi gửi thông tin cho ai. Tuy khối lượng thông tin mà một cookie nắm không nhiều nhưng lại đóng một vai trò hết sức quan trọng đặc biệt thời đại bùng nổ của Internet marketing."
Do đó, bạn nên định kỳ xóa Cookies và Cache trên trình duyệt để tăng tốc độ tải website cũng như tăng mức độ bảo mật cho máy tính. Trong các ứng dụng lướt Web, các xóa cũng khá đơn giản.

Bất luận người dùng trên mạng nào cũng cần phải có ít nhất một tài khoản. Công việc tạo lập tài khoản quản lý và bảo mật tài khoản người dùng trên mạng luôn luôn là một vấn đề hệ trọng, cấp thiết.
Google Chrome
Bước 1: Mở trình duyệt Google Chrome và chọn nút trình đơn Customize and control Google Chorme góc trên cùng bên phải.
Bước 2: Chọn Tools
Bước 3: Chọn Clear browsing data…

Bước 4: Trên cửa sổ Clear browsing data… trong Obliterate the following items from chọn the beginning of time để xóa tất cả Cookies và Cache tính từ thời điểm bắt đầu sử dụng trình duyệt. Sau đó bạn tick chọn Empty the cache  Delete cookies and other site and plug-in data
Bước 5: Chọn Clear browsing data để hoàn tất quá trình xóa Cookies và Cache trên trình duyệt Google Chrome
Internet Explorer 9
Bước 1: Mở trình duyệt Internet Explorer và chọn Tools (hình bánh răng cưa) ở góc trên cùng bên phải
Bước 2: Chọn Safety
Bước 3: Chọn Delete browsing history…

Bước 4: Trong cửa sổ Delete Browsing History… bỏ tick chọn ở mục Preserve Favorites website data, tick chọnTemporary Internet files  Cookies
Bước 5: Chọn Delete để hoàn tất quá trình xóa Cookies và Cache trên trình duyệt Internet Explorer

Nguồn tham khảo:
  • Bkav.com.vn
  • Bách khoa toàn thư mở Wikipedia
  • Bạn có thể tham khảo thêm ở Trang chính sách Cookie = Microsoft - Việt Nam


Share:


Thống kê Blogspot

Bài có thể xem

Mời tham gia CLB

 
Câu Lạc Bộ Kết bạn & Chia sẻ thông tin
Nhóm Công khai · 1.614 thành viên
Tham gia nhóm
Mục đích phát triển của Câu lạc bộ: - Cảm nhận tư duy và tổng hợp kiến thức.Cùng nhau Kết bạn và chia sẽ những gì tốt đẹp . - Giúp nhau chia sẽ thươn...
 
 
BACK TO TOP