Kết bạn cùng KhanhNguyen's blog

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

, Facebook Comment Không có nhận xét nào


Để 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:
Read More
Nguyễn Đạt Khánh | Chủ Nhật, tháng 4 10, 2016 | | Be the first to comment!
author

Được viết bởi Khánh Nguyễn

Blog của tôi, Nguyễn Đạt Khánh là tên của tôi :
Nghề nghiệp: IT Computer Networking - Kỹ thuật viên Mạng máy tính Viễn thông
Bạn đang xem Blog của tôi. Đừng quên nhấn Like và Share để ủng hộ. Một điều tốt nhất mà tôi mong đợi, là những dòng Comments thiện chí với nhau. Xin chân thành cảm ơn tất cả các bạn.
Nơi truy cập vào Nick của Tôi trên mạng:

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

, Facebook Comment Không có nhận xét nào
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:
Read More
Nguyễn Đạt Khánh | Chủ Nhật, tháng 4 10, 2016 | | Be the first to comment!
author

Được viết bởi Khánh Nguyễn

Blog của tôi, Nguyễn Đạt Khánh là tên của tôi :
Nghề nghiệp: IT Computer Networking - Kỹ thuật viên Mạng máy tính Viễn thông
Bạn đang xem Blog của tôi. Đừng quên nhấn Like và Share để ủng hộ. Một điều tốt nhất mà tôi mong đợi, là những dòng Comments thiện chí với nhau. Xin chân thành cảm ơn tất cả các bạn.
Nơi truy cập vào Nick của Tôi trên mạng:

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

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

, , Facebook Comment Không có nhận xét nào
23:40 Vantu Odecca 




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:
Read More
Nguyễn Đạt Khánh | Thứ Bảy, tháng 4 09, 2016 | | | Be the first to comment!
author

Được viết bởi Khánh Nguyễn

Blog của tôi, Nguyễn Đạt Khánh là tên của tôi :
Nghề nghiệp: IT Computer Networking - Kỹ thuật viên Mạng máy tính Viễn thông
Bạn đang xem Blog của tôi. Đừng quên nhấn Like và Share để ủng hộ. Một điều tốt nhất mà tôi mong đợi, là những dòng Comments thiện chí với nhau. Xin chân thành cảm ơn tất cả các bạn.
Nơi truy cập vào Nick của Tôi trên mạng:




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