KD-DT

Bài 3: SỬ DỤNG CÁC LỆNH CƠ BẢN PLC

20:55 |

1 CÁC LỆNH VÀO / RA

OUTPUT: Sao chép nội dung của bit đầu tiên trong ngăn xếp vào bit được chỉ định trong lệnh. Nội dung của ngăn xếp không thay đổi.

2 CÁC LỆNH GHI / XOÁ GIÁ TRỊ CHO TIẾP ĐIỂM

Lệnh SET ( S )

Dùng để đặt trạng thái của ngõ ra lên 1 vĩnh viễn, cho dù đã cắt nguồn ngõ vào. Trong chương trình Ladder lệnh SET luôn nằm ở cuối nhánh phía bên phải và phải có ngõ vào hoặc một lệnh đặc biệt phía trước.

Muốn chọn lệnh SET, tiến hành các bước như sau:

Ø Chọn ngõ vào: Từ Network 1 click chuột trái vào mũi tên sẽ hiện ô vuông như hình vẽ.

Sau đó click chuột trái vào biểu tượng contact, chọn một lệnh theo yêu cầu thiết kế. Ví dụ ở đây chọn tiếp đểm thường mở thì màn hình sẽ xuất hiện như sau.

Tên ngõ vào : Có tên từ I0.0 ¸ I0.7 & I1.0 ¸ I1.5

Ø Chọn ngõ ra : Di chuyển chuột ra cuối nhánh phía bên phải như hình.

Sau đó click chuột trái vào biểu tượng Coil từ bàn phím, gõ chữ S sau đó click chuột trái vào chữ S sẽ xuất hiện màn hình.

Ngõ vào: Có thể chọn từ I0.0 ¸ I0.7 & I1.0 ¸ I1.5

Ngõ ra: Có thể chọn từ Q0.0 ¸ Q0.7 & Q1.0 ¸ Q1.1

Số lượng ngõ ra cần SET: Số này là tùy người viết chương trình cần SET bao nhiêu ngõ ra trong một lần SET.

Ví dụ: Muốn cho 5 ngõ ra hoạt động là Q0.0, Q0.1, Q0.2, Q0.3, Q0.4 thay vì SET từng ngõ ra thì chỉ việc đặt số lượng ngõ ra cần SET là 5.

Lưu ý :

Số lượng SET được tính từ tên ngõ ra đặt đến số lượng ngõ ra cần SET (nhưng số lượng cần SET ≤ 255). Tên ngõ ra đặt được tính là 1 cho số lượng ngõ ra cần xuất.

Ví dụ : Cần SET 2 ngõ ra là Q0.5 & Q0.6 thì phải đặt như hình dưới đây:

Số lượng ngõ ra cần SET chỉ áp dụng khi các ngõ ra phải có thứ tự tên liên tục (Q0.0, Q0.1, Q0.2 hoặc Q0.5, Q0.6, Q0.7) còn nếu số lượng ngõ ra cần SET khi các ngõ ra không có thứ tự tên liên tục thì không thể áp được, nếu áp dụng sẽ dẫn đến sai theo yêu cầu

Ví dụ : Khi Cần SET 3 ngõ ra có tên Q0.0, Q0.2, Q0.4 thì không thể đặt số lượng cần SET ngõ ra là 3 như hình sau, mà phải SET từng ngõ ra một

Lệnh RESET (R)

Dùng để đặt trạng thái của ngõ ra xuống 0 vĩnh viễn. Trong chương trình Ladder lệnh RESET luôn nằm ở cuối nhánh phía bên phải và trước nó phải có ngõ vào hoặc một lệnh đặc biệt.

Muốn chọn lệnh RESET tiến hành các bước tương tự như lệnh SET. Thay vì vào biểu tượng coil chọn S thì như lệnh SET thì phải chọn R:

Như vậy lệnh RESET & lệnh SET có các bước thao tác tương tự nhau, nhưng chỉ khác nhau ở chức năng của từng lệnh.

Số lượng RESET được tính từ tên ngõ ra đặt đến số lượng ngõ ra cần RESET (nhưng số lượng cần RESET ≤ 255). Tên ngõ ra đặt được tính là 1 cho số lượng ngõ ra cần xóa.

Ví dụ mô tả các lệnh vào ra và S, R :

Giản đồ tín hiệu thu được ở các lối ra theo chương trình trên như sau :

LỆNH CỜ M & V :

Cờ M & V có chức năng như một rơ le trung gian có nghĩa là nó có cuộn dây và các tiếp điểm thường mở, thường đóng như các công tắc tơ thông thường, nhưng không thể xuất ra ngoài để điều khiển các cơ cấu chấp hành như các ngõ ra Q mà chỉ giả lập trong chương trình. Cách lấy cờ M & V tương tự như các bước lấy ngõ ra Q

Lưu ý :

§ Cờ M & V cũng có thể là ngõ ra bình thường hoặc có thể dùng lệnh SET, RESET như ngõ ra Q.

BÀI TẬP ỨNG DỤNG

1. Mạch khởi động sao /tam giác

Yêu cầu công nghệ

Nhấn nút mở máy S1, CTT K1 và CTT K2 có điện, đóng lại cấp nguồn cho động cơ hoạtđộng ở chế độ sao. Sau thời gian nhấn nút S2, CTT K2 mở ra, CTT K3 đóng lại, động cơ chuyển sang chế độ tam giác. Nhấn nút nhấn dừng S3, động cơ ngừng hoạt động.

2. Mạch khởi động qua điện trở phụ

Yêu cầu công nghệ

Nhấn nút mở máy S1, CTT K1 đóng lại cấp nguồn cho động cơ hoạt động qua điện trở phụ. Sau thời gian nhấn nút S2, CTT K1 mở ra, CTT K2 đóng lại, động cơ hoạt động bình thường không qua điện trở. Nhấn nút nhấn dừng S3 hoặc tiếp điểm role nhiệt hoạt động, động cơ ngừng. Viết chương trình điều khiển hệ thống trên.

3. Mạch đảo chiều động cơ

Yêu cầu công nghệ

Nhấn nút mở máy S1, CTT K1 đóng lại cấp nguồn cho động cơ hoạt động theo chiều thuận. Nhấn nút S2, CTT K1 mở ra, CTT K2 đóng lại, động cơ hoạt động theo chiều nghịch. Nhấn nút nhấn dừng S3 hoặc tiếp điểm role nhiệt hoạt động, động cơ ngừng. Viết chương trình điều khiển hệ thống trên.

Read more…

Tạo hộp thoại thông báo cho blog

22:35 |

[SN-MS]- Việc tạo 1 hộp thoại nhỏ cho blog để thông báo 1 sự kiện hoặc 1 vấn đề nào đó cho blog xem ra cũng khá cần thiết cho blog. Có nó ta sẽ không phải mất công viết hẳn 1 bài viết để thông báo (nếu như nó sự kiện đó không cần phải dùng 1 bài viết để thông báo). Thay vào đó ta chỉ cần hiển thị 1 đoạn text nhỏ là được.

Có 1 số bạn xin code phần thông báo của mình, mình đã ok. Còn 1 số khác thì chưa rành việc view code nên có yêu cầu mình chia sẻ đoạn code của hộp thoại thông báo này. Hôm nay mình viết hẳn 1 bài viết để chia sẻ nó. Demo ngay trên dầu của site này
Một vài thông tin về hộp thông báo nhỏ này:
- Hiển thị được nhiều thông báo.
- Các thông báo sẽ hiển thị random (ngẫu nhiên) sau mỗi lần load trang.
- Có button cho phép đóng phần thông báo lại.

Hình ảnh minh họa từ blog của mình:

- Để cho chọn vị trí hợp lý, mình khuyên các bạn nên đặt hộp thông báo này ở phần header của blog.
- Sau khi xác định được vị trí đặt hộp thông báo, các bạn tạo 1 widget HTML/Javascript và dán code bên dưới vào :

- Đầu tiên là việc chỉnh sửa lại code CSS:
Các bạn có thể xem hình minh họa bên dưới rồi thay đổi lại các giá trị của nó để cho hộp thông báo phù hợp với blog của bạn, chủ yếu là chỉnh lại các giá trị màu sắc và kích thước.

- Tiếp theo là chỉnh lại code javascript:
Ta thấy có đoạn code như thế này :

thbao = new Array(3);
thbao[0]='{Nội dung đoạn thông báo thứ 1}';
thbao[1]='{Nội dung đoạn thông báo thứ 2}';
thbao[2]='{Nội dung đoạn thông báo thứ 3}';
thbao[3]='{Nội dung đoạn thông báo thứ 4}';

Tất cả nội dung của thông báo phải cho vào dấu nháy đơn. Nội dung hiển thị thông báo cho phép sử dụng thẻ HTML. Ở trên là code mẫu cho 4 đoạn thông báo, nếu là 5 đoạn các bạn chỉ việc thêm vào như code bên dưới :

thbao = new Array(4);
thbao[0]='{Nội dung đoạn thông báo thứ 1}';
thbao[1]='{Nội dung đoạn thông báo thứ 2}';
thbao[2]='{Nội dung đoạn thông báo thứ 3}';
thbao[3]='{Nội dung đoạn thông báo thứ 4}';
thbao[4]='{Nội dung đoạn thông báo thứ 5}';

Như vậy đã hoàn thành. Chúc các bạn thành công.

Theo fandung.com

Read more…

Auto Readmore cho Blogspot

05:56 |

Auto Readmore với ảnh 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. 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.

Bây giờ chúng ta bắt đầu thủ thuậ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 == "item"'><data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'><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'> Đọc tiếp… </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 = "float" ;
summary_noimg = 430; // Số ký tự hiển thị khi không có ảnh
summary_img = 340; // Số ký tự hiển thị khi bài viết có ảnh
img_thumb_height = 100; // Chiều cao của ảnh
img_thumb_width = 120; // Bề rộng của ảnh
</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/AVvXsEijEtrqstsA8kqnAO6GbV4Z847xjyqXUm-9JsYc22AsLr9KUlhDXj6jr89fJ6Aeuj58GKbpbVbQRWI4b3HxxWWB5Ay0HZnPHvaLh7Ez-3OqvLqtfry5gsYCBBvoS-S1uVJczCNRy7sajD8U/" 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 đã thêm ảnh mặc định cho những bài viết không có ảnh, Căn cứ vào các chú thích để chỉnh sửa cho phù hợp với blog.
Bước 4 : Save template .

Read more…

Phần mềm đọc trị số tụ điện

04:45 |

Với phần mền đọc tụ điện này, bạn chỉ cần nhập các kí hiệu của tụ vào, trị và sai số của tụ sẽ hiển trị.

Tải về máy tại đây

Read more…

Phần mềm đọc điện trở

04:18 |

(SN-MS) - Là một phần mền khá gọn, Resistor color code giúp xác định trị số điện trở. Nhập vào mầu ta được trị số điện trở hoặc ngược lại nhập vào trị số điện trở thu được code màu tương ứng.

Đối với loại vạch mầu có 4 mầu thì 2 màu đầu là hệ số, vạch thứ 3 là số mũ cơ số 10, vạch thứ 4 là sai số. Còn loại có 5 mầu thì 3 vạch đầu là hệ số, vạch thứ 4 là mũ cơ số 10 còn vạch 5 là sai số.

Download phần mềm đọc điện trở (103k) tại đây hoặc tại đây

Read more…

Phân trang cho blog - Page Navigation

01:23 |

Page Navigation đối với đa số các website là một công cụ không còn xa lạ. Nhưng với blogger thì công cụ này vẫn chưa được hỗ trợ mạnh lắm. Chỉ có nút Next và Preview thôi. Tham khảo ở một số nơi mình đã chế biến lại cái navipage cho blog của mình. Bạn có thể làm theo hướng dẫn dưới đây.

1. Trước tiên việc bạn cần làm là chọn 1 trong các mẫu phía dưới.

.pagenavi{background:#f1f1f1;clear:both;margin:30px auto 20px;text-align:center;border:1px solid #bfbfbf;padding:3px 0}
.pagenavi span,.pagenavi a{border:1px solid #f1f1f1;padding:1px 4px;color:#000;margin:2px;font-size:12px}
.pagenavi span{color:#3a3a3a}
.pagenavi a:hover,.pagenavi .current{border:1px solid #bfbfbf;background:#fffdf0;color:#000;text-decoration:none}
.pagenavi .pages{color:#666}

.pagenavi{background:#3498b9;clear:both;margin:30px auto 20px;text-align:center;border:1px solid #2f7a93;padding:4px 0}
.pagenavi span,.pagenavi a{font-weight:bold;padding:7px 8px;color:#fff;margin:1px;font-size:11px}
.pagenavi span{color:#3a3a3a}
.pagenavi a:hover,.pagenavi .current{background:#236e8f;color:#fff;text-decoration:none}
.pagenavi .pages{color:#fff}

.pagenavi{clear:both;margin:30px auto 20px;text-align:center}
.pagenavi span,.pagenavi a{background:-moz-linear-gradient(center top,#96aeba,#536a75) repeat scroll 0 0 transparent;border:1px solid #616e76;padding:4px 8px;color:#fff;margin:2px;font-size:12px;-moz-border-radius:4px}
.pagenavi span{color:#3a3a3a}
.pagenavi a:hover,.pagenavi .current{color:#fff;background:#c70e0c;border:1px solid #782f28;text-decoration:none}
.pagenavi .pages{color:#fff}

.pagenavi{clear:both;margin:30px auto 20px;text-align:center}
.pagenavi span,.pagenavi a{background:#24bde2;border:1px solid #4adcff;padding:3px 8px;color:#fff;margin:2px;font-size:12px}
.pagenavi span{color:#3a3a3a}
.pagenavi a:hover,.pagenavi .current{color:#fff;background:#ff6734;border:1px solid #ddd;text-decoration:none}
.pagenavi .pages{display:none}

.pagenavi{clear:both;margin:10px auto;text-align:center}
.pagenavi span,.pagenavi a { font-size:12px;padding: 2px 4px 2px 4px;margin: 2px;border: 1px solid #dfdfdf;color:#000;}
.pagenavi a:visited{}
.pagenavi a:hover,.pagenavi .current{color: #FFF;background-color: #e81d1d;border: 1px solid #fb1515;text-decoration:none;}

.pagenavi{clear:both;margin:30px auto 20px;text-align:center}
.pagenavi span,.pagenavi a{background:#1dc1ff;padding:6px 6px;color:#fff;margin:2px;font-size:12px;-moz-border-radius:5px}
.pagenavi span{color:#3a3a3a}
.pagenavi a:hover,.pagenavi .current{background:#ff9200;color:#fff;text-decoration:none}
.pagenavi .pages{display:none}

.pagenavi{clear:both;text-align:right;margin:25px 0 10px 0;font-size:.714em;font-weight:600;line-height:1.4em}
.pagenavi span,.pagenavi a{background:#e1e1e1;border:1px solid #555;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;-moz-box-shadow:0 1px 0 #FFF;-webkit-box-shadow:0 1px 0 #FFF;box-shadow:0 1px 0 #FFF;color:#555;margin-left:5px;padding:4px 6px 3px;text-shadow:0 1px 0 #C2C2C2}
.pagenavi span{color:#3a3a3a}
.pagenavi a:hover,.pagenavi .current{background:-moz-linear-gradient(center top,#45bc3f,#1c6318) repeat scroll 0 0 transparent;border:1px solid #00203B;text-shadow:0 -1px 0 #00203B;color:#fff;text-decoration:none}
.pagenavi .pages{background:none;border:none}

.pagenavi{clear:both;margin:10px auto;text-align:left}
.pagenavi span,.pagenavi a {background:#0e0f10;font-size:12px;padding: 3px 5px;margin: 2px;border: 1px solid #333;color:#fff;}
.pagenavi a:visited{}
.pagenavi a:hover,.pagenavi .current{color: #FFF;background-color: #33393f;border: 1px solid #444;text-decoration:none;}

Vào Thiết kế → chỉnh sửa HTML → Mở rộng tiện ích mẫu. Chèn đoạn code bạn đã chọn vào phía trên thẻ ]]></b:skin>

2. Tiếp tục tìm đoạn code sau:

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

Lưu ý đối với 1 số blog thì chữ Blog Posts được thay bằng Bài đăng trên Blog. Bạn chèn sau nó đoạn code sau.

<b:includable id='page-navi'>
<div class="pagenavi">
<script type="text/javascript">
var pageNaviConf = {
perPage: 5,
numPages: 5,
firstText: "First", 
lastText: "Last", 
nextText: &quot;&#187;&quot;,
prevText: &quot;&#171;&quot;
}
</script>
<script type="text/javascript" src="http://voquocan.googlecode.com/files/pagenavi.min.js"></script>
<div class="clear" />
</div>
</b:includable>

3. Tiếp tục tìm đoạn code sau:

<!-- navigation -->
<b:include name='nextprev'/>

Thay đoạn code trên bằng đoạn code dưới đây:

<b:if cond='data:blog.pageType == "index"'>
<b:include name='page-navi' />
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<b:include name='page-navi' />
</b:if>
</b:if>

Lưu template lại là xong.
Chú ý trong đoạn code trên.
perPage là số bài hiển thị trên 1 trang.
numPages là số trang hiển thị ra nút bấm
chữ First Last có thể thay thế bằng chữ khác tùy thích.

Nguồn bài viết: voquocan.com

Read more…

Tiện ích Bài viết mới Recent Posts giống vnexpress.net

05:42 |

Từ sau khi hoàn thiện thủ thuật "Recent posts" hiện thị giống trang tin247.com, mình nảy ý định hiển thị nhiều kiểu khác nhau cho các bài viết trong widget "Recent posts". Tức là bài này hiển có kèm ảnh thumbnail , bài khác thì chỉ hiển thị tiêu đề... Với cách này, tiện ích Recent posts của chúng ta sẽ không còn đơn điệu nữa.

Đây là hình ảnh minh họa mình đã thực hiện:

☼ Và đây là toàn bộ code của thủ thuật :
- Chỉ việc tạo 1 widget HTML/Javascript và dán tất cả code bên dưới vào:

Để hiểu rõ hơn cho việc chỉnh sửa độ rộng của khung, các bạn xem hình bên dưới:

- Tùy chỉnh lại số bài viết để việc hiển thị được hợp lý nhất.
- Tùy chỉnh lại các độ rộng theo ý bạn.
- Lưu ý với việc điều chỉnh độ rộng của class bottom-news , độ rộng của class này phải lớn hơn con số : 4x(botwidth + 2px + 4px) + 4x5px = 444px (vớibotwidth=100px), nếu độ rộng của class này nhỏ hơn con số trên, các bài viết sẽ bị tràn xuống hàng ở class bottom-news.
- Độ rộng của class bottom-news-item : botwidth + 2px + 4px = 106px;
- Link JS dự phòng :

☼ Cập nhật bản khác của thủ thuật (bản hiển thị 3 bài viết ở class bottom-news):

Hình minh họa:

- Code của thủ thuật : ở đây mình sẽ đưa code đã chỉnh sửa sẵn, cho các bạn tiện sử dụng.

- Nhưng code màu đỏ là nhưng chỗ mà mình đã chỉnh sửa lại.
- link file JS dự phòng:

☼ Bản nâng cao của thủ thuật
- Với bản nâng cao này, các bạn có thể tùy chỉnh số bài viết ở class bottom-news.
- Code của thủ thuật sẽ thay đổi 1 chút như bên dưới:

...
...
...
summaryPost = 100;
summaryFontsize = 12;
summaryColor = "#000";

botnum = 3;
numposts = 16;
label = "Love";
home_page = "http://fandung.blogspot.com/";

</script>
<script src="http://data.fandung.com/blog/demo/vne-recent/vne-recent-adv.js" type="text/javascript"></script>

- với code botnum = 3; là code điều chỉnh số bài viết hiển thị ở class bottom-news
- Với bản nâng cao này, đòi hỏi bạn phải chỉnh sửa nhiều về phần kích thước trong code CSS để có được hiển thị như mong muốn.

- Xem hình minh họa bên dưới:

- link file JS dự phòng:

Một hướng dẫn khác:

Hôm nay Chip giới thiẹu chia sẻ cho các bạn thủ thuật recent Post mà Chip đang áp dụng trên Blog Điện Tử | Tin Học.share luôn cho bác Quangpro

►Thực hiện cách 1 nhanh gọn nhưng load chậm trang:

1. Vào Thiết kế > Phần tử trang

2. Tạo một widget HTML/JavaScripts và chèn vào đoạn code bên dưới

#cotent-news {

border:#999 solid 1px;

width: 650px;

}

#top-news {

width: 440px;

height:166px;

padding:5px;

border:#bbb solid 1px;

background:#eee;

font-size:12px;

}

#bottom-news {

width: 444px;

padding:5px;

}

#bottom-news-item {

width: 106px;

margin-right:5px;

float:left;

}

#left-news {

padding:5px;

border-left:2px dotted #ccc;

}

</style>

imgr = new Array();

imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";

imgico= "http://farm3.static.flickr.com/2426/3638176588_31366a6822_o.gif";

showRandomImg = true;

topwidth = 160;

topheight = 160;

botheight = 100;

botwidth = 100;

fntsize = 12;

vnesize = 18; //kích thước của tiêu đề bài viết trong class "top-news"

acolor = "#555";

cmcolor = "#555";

topcolor = "#f00";

aBold = true;

text = "comments";

showPostDate = true;

summaryPost = 250;

summaryFontsize = 12;

summaryColor = "#000";

botnum = 4;

numposts = 14;

label = "Hardware";

home_page = "http://www.chipkool.blogspot.com/";

</script>

* Trong đoạn code trên :

o width: 650px; : chiều rộng của widget

o botnum = 4; : số bài viết hiển thị ở class bottom-news

· numposts = 14; : số bài viết hiển thị ở class left-news

· label = "Hardware"; : nhãn/ trương mục ( Label ) sẽ được hiển thị

Các bạn có thể xem hình minh họa bên dưới để hiểu rõ layout của widget :

Bạn chú ý: thay Link http://chipkool.blogspot.com thành link blog của bạn:

* Cách tính chiều rộng :

o bottom-news = 4x(botwidth + 2px + 4px) + 4x5px = 444px

· bottom-news-item = botwidth + 2px + 4px = 106px

* Nếu bạn muốn widget hiển thị những bài cho Label thì thay code

https://sites.google.com/site/itechroot/javascripts/vne-recent-adv-all-posts.txt

thành :

https://sites.google.com/site/itechroot/javascripts/vne-recent-adv.txt

►Thực hiện cách 2 load nhanh hơn:

B1:Vào chỉnh sửa Html -Chọn mở rộng mẫu tiện ích - nhấn Ctr+F - Tìm mã code sau:]]></b:skin>

B2:copy hết code sau và chèn lên phía trên code vừa tìm được:

#cotent-news {

border:#999 solid 1px;

width: 650px; }

#top-news {

width: 440px;

height:166px; padding:5px;

border:#bbb solid 1px;

background:#eee;

font-size:12px;

}

#bottom-news {

width: 444px; padding:5px;

}

#bottom-news-item {

width: 106px;

margin-right:5px;

float:left;

}

#left-news {

padding:5px;

border-left:2px dotted #ccc;

}

B3:Tạo một widget HTML/JavaScripts và chèn vào đoạn code bên dưới :

imgr = new Array();

imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";

imgico= "http://farm3.static.flickr.com/2426/3638176588_31366a6822_o.gif";

showRandomImg = true;

topwidth = 160;

topheight = 160;

botheight = 100;

botwidth = 100;

fntsize = 12;

vnesize = 18; //kích thước của tiêu đề bài viết trong class "top-news"

acolor = "#555";

cmcolor = "#555";

topcolor = "#f00";

aBold = true;

text = "comments";

showPostDate = true;

summaryPost = 250;

summaryFontsize = 12;

summaryColor = "#000";

botnum = 4;

numposts = 14;

label = "Hardware";

home_page = "http://www.chipkool.blogspot.com/";

</script>

Style 2 : Recent Post mang phong cách VNExpress

Thực hiện cách 1 khó sửa khi sai xót nặng temple:

1. Vào Thiết kế > Chình sửa HTML

2. Chèn đoạn code bên dưới vào trước thẻ đóng</head>

.fl {float:left;}

.fr {float:right;}

.folder, .folder-title, .folder-content, .folder-bottom, .folder-header, .folder-top, .folder-news {position:relative;}

.folder-content {background-color:#ffffff;}

.other-folder {width:100%;}

.folder, .folder-title, .folder-content, .folder-bottom, .folder-header, .folder-top, .folder-news {overflow:hidden;}

.folder, .folder-title, .folder-bottom {width:500px;}

.folder-bottom {background:#f5f5f6 url('http://vnexpress.net/Images/Background/bg_vne.gif') repeat-x 0px -73px;}

.folder {margin-bottom:5px;}

.folder-title {height: 21px;}

.folder-active, .subfolder {height: 17px;}

.folder-title {font:11px arial; color:#868d9d; background:#f5f5f6 url('http://vnexpress.net/Images/Background/bg_repeat.gif') repeat-x scroll 0px 0px;}

.folder-active {padding: 2px 9px; background:#f5f5f6 url('http://vnexpress.net/Images/Background/bg_repeat.gif') repeat-x 0px -23px;}

.folder-content {width:478px; padding:5px 10px 5px;font:12px arial; border-left:1px solid #d5d8de; border-right:1px solid #d5d8de;}

.folder-bottom {height:5px;}

.folder-topnews {width:298px; padding-right:20px;}

.folder-othernews {width:160px;}

.folder-news {width:478px; padding:0px 11px; margin-bottom:10px;}

.folder-news p{padding:0; margin-top:0px; margin-bottom:5px;}

.subfolder {padding: 3px 5px 1px;}

.link-folder {font:bold 12px arial; color:#8a0000; text-decoration:none;}

.link-subfolder {font:11px arial; color:#003f7a; text-decoration:none;}

.link-title {font:bold 13px arial; text-decoration:none; color:#000000;}

.link-title:visited {color:#004080;}

.link-othernews {text-decoration:none; color:#000000;font:12px arial;}

.link-othernews:visited {color:#004080;}

.link-othernews:hover {text-decoration:underline;}

.folder-content p{margin-top:0px;margin-bottom:4px;}

.folder-content ul {list-style:none;margin:0;padding:0;}

.folder-content li {

padding-left:6px;

background-image:url('http://vnexpress.net/Images/Background/black-square.gif'); background-repeat:no-repeat;

background-position: 0 7px;

}

.other-folder {margin-bottom:5px;}

.img-subject {height:100px; border:1px solid #a5a5a5; margin-right:8px; margin-top:2px;}

.img-other {width:53px; height:53px; border:1px solid #a5a5a5; margin-right:5px;}

.folder-activeleft{width:2px; height:21px; background:#f4f5f6 url('http://vnexpress.net/Images/Background/bg_corner.gif') no-repeat -5px -0px;}

.folder-activeright{width:2px; height:21px; background:#f4f5f6 url('http://vnexpress.net/Images/Background/bg_corner.gif') no-repeat -5px -23px;}

.Lead1 { font-family: 'Arial'; font-size: 11px; color: #919090; font-weight: bold }

</style>

rdlabels = new Array(3);

//Nhãn thứ 1 : Kiến thức căn bản

rdlabels[0] = "\<script\>label = 'OSystemK'\;\</script\>";

//Nhãn thứ 2 : Thủ thuật

rdlabels[1] = "\<script\>label = 'OSystemT'\;\</script\>";

//Nhãn thứ 3 : Phần mềm

rdlabels[2] = "\<script\>label = 'Download'\;\</script\>";

//Nhãn thứ 4 : Phần mềm bản quyền

rdlabels[3] = "\<script\>label = 'License'\;\</script\>";

index = Math.floor(Math.random() * rdlabels.length);

</script>

3. Tạo một widget HTML/JavaScripts và chèn vào đoạn code bên dưới :

<div class="folder-active fl"><a class="link-folder" href="http://www.itechplus.info/search/label/OSystem?max-results=10">Windows</a></div>

<a class="link-subfolder" href="http://www.itechplus.info/search/label/OSystemK?max-results=10">Kiến thức</a> | <a class="link-subfolder" href="http://www.itechplus.info/search/label/OSystemT?max-results=10">Thủ thuật</a> | <a class="link-subfolder" href="http://www.itechplus.info/search/label/Download?max-results=10">Phần mềm</a> | <a class="link-subfolder" href="http://www.itechplus.info/search/label/License?max-results=10">Free License</a>

</div>

</div>

document.write(rdlabels[index]);

</script>

imgr = new Array();

imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";

showRandomImg = true;

aBold = false;

summaryPost = 247;

sumPost = 147;

numposts = 6;

home_page = "http://www.itechplus.info/";

</script>

</div>

</div>

Trong 2 đoạn code trên :

o width:500px; : chiều rộng của cả widget

o width:478px; : chiều rộng phần nội dung widget

o width:298px; : chiều rộng phần nội dung bên trái

o width:160px; : chiều rộng phần nội dung bên phải

o height:100px; : chiều rộng ảnh bài viết mới nhất

o width:53px; height:53px; : chiều rộng & chiều cao ảnh bài viết đầu tiên bên phải

o rdlabels[x] : tên của mảng tương ứng với Label. Nếu bạn không gán cụ thể, nội dung của tiện ích sẽ hiển thị một cách ngẫu nhiên theo nhãn.

· summaryPost = 247; : số ký tự đoạn mô tả bài viết chính

· sumPost = 147; : số ký tự tiêu đề bài viết

· numposts = 6; : tổng số bài viết được hiển thị trên mỗi widget

Để hiểu rõ hơn bố cục của Widget, các bạn có thể xem hình dưới :

Thực hiện cách 2 đẹp hơn,có thêm nút xem thêm tạo cho nhiều label trên trang chủ:

B1:Vào Chỉnh sửa html - Mở rộng mẫu tiện ích- nhấn ctrl + F - tìm code sau]]></b:skin>

B2:Copy hết code sau và chèn lên phí trên code vừa tìm được:

.fl{float:left}

.fr{float:right}
.folder{width:516px; margin-bottom:8px; overflow:hidden; line-height:1.5em;font:normal 12px arial;border-left:1px solid #ddd;border-right:1px solid #ddd;border-bottom:1px solid #ddd;}
.folder-title{height:26px; border-bottom:1px solid #eee; overflow:hidden; background:url(http://goo.gl/CyQBL)repeat-x}
.folder-active{height:24px; padding:4px 10px; background:url(http://goo.gl/EgxmY) repeat-x; font-weight:bold}
.link-folder:link, .link-folder:visited{color:#fff}
.subfolder{height:24px; padding:5px 5px 0 15px; background:url(http://goo.gl/Z29yN) no-repeat}
.folder-content{width:500px; background:#fff url(http://goo.gl/qy9iZ) repeat-x left bottom; padding:10px 6px 2px 10px; overflow:hidden}
.folder-content p{margin:0}
.folder-content ul{list-style:none; margin:0; padding:0}
.folder-content li{padding:0 0 4px 6px; background:url(http://goo.gl/4OvNo) no-repeat 0 8px}
.folder-topnews{width: 398px; padding-right:10px}
.folder-othernews{width:220 px}
.other-folder{margin:0}
.img-subject{height:85px; width:110px; border:1px solid #a5a5a5; margin-right:8px}
.img-other{width:60px; height:50px; border:1px solid #a5a5a5; margin:0 5px 4px 0}
.xemthem{float:right; display:block; margin:0; padding:5px}

B3:Tạo 1 Javar/script rồi chèn code sau vào:

<div class="folder-active fl"><a class="link-folder" href="http://www.chipkool.tk/search/label/Th%E1%BB%A7%20Thu%E1%BA%ADt%20Vi%20t%C3%ADnh?max-results=10">Thủ thuật vi tính</a></div>

<a class="link-subfolder" href="http://www.chipkool.tk/search/label/S%E1%BB%A9c%20m%E1%BA%A1nh%20s%E1%BB%91?max-results=10">Sức mạnh số</a> |

<a class="link-subfolder" href="http://www.chipkool.tk/search/label/th%E1%BB%A7%20thu%E1%BA%ADt%20internet?max-results=10">Internet</a> |

<a class="link-subfolder" href="http://www.chipkool.tk/search/label/Di%E1%BB%87t%20virut?max-results=10">Diệt Virut</a> | <a class="link-subfolder" href="http://www.chipkool.tk/search/label/clip%20th%E1%BB%A7%20thu%E1%BA%ADt?max-results=10">Video - clip</a>| <a class="link-subfolder" href="http://www.chipkool.tk/search/label/windows%207?max-results=10

">Windows 7</a>| <a class="link-subfolder" href="http://www.chipkool.tk/search/label/windows%208?max-results=10">Windows 8</a>| <a class="link-subfolder" href="http://www.chipkool.tk/search/label/windows%20XP?max-results=10">Windows XP</a>

</div>

</div>

document.write(rdlabels[index]);

</script>

imgr = new Array();

imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzYmG4HO4SBcos7_FyAmuFJABtQCZCd2De2_V6xnWKq4wyVnbaXirhud4ftkO3CnrMAwci5m4MM0bPdpMUuh9hgwuVxee-NbxK5ddr0P6_g4pN-CH4-XFZcGTHSaECS-ZBnpjnfA2XkHgM/";

showRandomImg = true;

aBold = false;

summaryPost = 247; //số ký tự của bài viết hiển thị (bài tóm tắt)

sumPost = 147;

numposts = 5; //số bài được hiển thị

label = "Th%E1%BB%A7%20Thu%E1%BA%ADt%20Vi%20t%C3%ADnh";

home_page = "http://www.chipkool.blogspot.com/";

</script>

</div>

</div>

<div class="folder-active fl"><a class="link-folder" href="http://www.chipkool.tk/search/label/M%E1%BA%A1ch%20Vi%20%C4%91i%E1%BB%81u%20khi%E1%BB%83n?max-results=10">Mạch vi điều khiển</a></div>

<a class="link-subfolder" href="http://www.chipkool.tk/search/label/Ph%E1%BA%A7n%20m%E1%BB%81m%20%C4%91i%E1%BB%87n%20t%E1%BB%AD?max-results=10">Phần mềm điện tử</a> |

<a class="link-subfolder" href="http://www.chipkool.tk/search/label/%C4%90i%E1%BB%87n%20t%E1%BB%AD%20c%C6%A1%20b%E1%BA%A3n?max-results=5">Điện tử cơ bản</a> |

<a class="link-subfolder" href="http://www.chipkool.tk/search/label/M%E1%BA%A1ch%20%C4%91i%E1%BB%87n%20c%C6%A1%20b%E1%BA%A3n?max-results=10">Mạch điên cơ bản</a> |

<a class="link-subfolder" href="#">All datasheet</a>

</div>

</div>

document.write(rdlabels[index]);

</script>

imgr = new Array();

showRandomImg = true;

aBold = false;

summaryPost = 247; //số ký tự của bài viết hiển thị (bài tóm tắt)

sumPost = 147;

numposts = 5; //số bài được hiển thị

label = "M%E1%BA%A1ch%20Vi%20%C4%91i%E1%BB%81u%20khi%E1%BB%83n";

home_page = "http://www.chipkool.blogspot.com/";

</script>

</div>

</div>

<a class="link-subfolder" href="http://www.chipkool.tk/search/label/th%E1%BB%A7%20thu%E1%BA%ADt%20word?max-results=10">Thủ thuật word</a> |

<a class="link-subfolder" href="http://www.chipkool.tk/search/label/th%E1%BB%A7%20thu%E1%BA%ADt%20mobile?max-results=5">Thủ thuật mobile</a> |

</div>

</div>

document.write(rdlabels[index]);

</script>

imgr = new Array();

showRandomImg = true;

aBold = false;

summaryPost = 247; //số ký tự của bài viết hiển thị (bài tóm tắt)

sumPost = 147;

numposts = 5; //số bài được hiển thị

label = "Ph%E1%BA%A7n%20m%E1%BB%81m%20vi%20t%C3%ADnh";

home_page = "http://www.chipkool.blogspot.com/";

</script>

</div>

</div>

<div class="folder-active fl"><a class="link-folder" href="http://www.chipkool.tk/search/label/ebook%20%C4%91i%E1%BB%87n%20t%E1%BB%AD?max-results=10">Ebook điện tử</a></div>

<a class="link-subfolder" href="http://www.chipkool.tk/search/label/Ebook%20%C4%90%E1%BA%A1i%20H%E1%BB%8Dc?max-results=10">Ebook Đại Học</a> |

<a class="link-subfolder" href="http://www.chipkool.tk/search/label/Ebook%20Tin%20H%E1%BB%8Dc?max-results=10">Ebook tin học</a> | <a class="link-subfolder" href="http://www.chipkool.tk/search/label/Ebook%20Web?max-results=10">Ebook Lập trình Web</a>

</div>

</div>

document.write(rdlabels[index]);

</script>

imgr = new Array();

showRandomImg = true;

aBold = false;

summaryPost = 247; //số ký tự của bài viết hiển thị (bài tóm tắt)

sumPost = 147;

numposts = 5; //số bài được hiển thị

label = "ebook%20%C4%91i%E1%BB%87n%20t%E1%BB%AD";

home_page = "http://www.chipkool.blogspot.com/";

</script>

</div>

</div>

<div class="folder-active fl"><a class="link-folder" href="http://www.chipkool.tk/search/label/th%E1%BB%A7%20thu%E1%BA%ADt%20blogger?max-results=10">Thủ thuật blogger</a></div>

<a class="link-subfolder" href="http://www.chipkool.tk/2010/11/bang-ma-mau-hexa.html">Bảng mã màu </a> |

<a class="link-subfolder" href="http://www.chipkool.tk/2010/12/xem-ma-nguon-1-website-bat-ky.html">Xem mã nguồn website</a> | <a class="link-subfolder" href="http://ha-escapexml.blogspot.com/">Mã hóa code</a>

</div>

</div>

document.write(rdlabels[index]);

</script>

imgr = new Array();

showRandomImg = true;

aBold = false;

summaryPost = 247; //số ký tự của bài viết hiển thị (bài tóm tắt)

sumPost = 147;

numposts = 5; //số bài được hiển thị

label = "th%E1%BB%A7%20thu%E1%BA%ADt%20blogger";

home_page = "http://www.chipkool.blogspot.com/";

</script>

</div>

</div>

<a class="link-subfolder" href="http://www.chipkool.tk/search/label/l%E1%BA%ADp%20tr%C3%ACnh%20c%2B%2B">Lập trình C</a> |

<a class="link-subfolder" href="http://www.chipkool.tk/search/label/l%E1%BA%ADp%20tr%C3%ACnh%20asembly">Lập trình Asembly</a> | <a class="link-subfolder" href="http://www.chipkool.tk/search/label/Gi%E1%BA%A3i%20thu%E1%BA%ADt%20C%2B%2B">Giải thuật C</a> | <a class="link-subfolder" href="http://www.chipkool.tk/search/label/L%E1%BA%ADp%20tr%C3%ACnh%20Robot?max-results=10">lập trình robocon</a>

</div>

</div>

document.write(rdlabels[index]);

</script>

imgr = new Array();

showRandomImg = true;

aBold = false;

summaryPost = 247; //số ký tự của bài viết hiển thị (bài tóm tắt)

sumPost = 147;

numposts = 5; //số bài được hiển thị

label = "Gi%E1%BA%A3i%20thu%E1%BA%ADt%20C%2B%2B";

home_page = "http://www.chipkool.blogspot.com/";

</script>

</div>

</div>

Style 3 : Recent Post mang phong cách Quantrimang

Thực hiện :

1. Tạo 1 widget HTML\JavaScript và dán code bên dưới vào :

.wbox {background-color:#ffffff;width:auto;height:auto;}

.wbox.Cat {width:500px;height:auto;margin-bottom:5px;}

.wbox .tl {

background:url(http://quantrimang.com.vn/App_Themes/default/images/left_wbox_03.jpg) no-repeat left top;

padding-left:3px;

}

.wbox .tr {

background:url(http://quantrimang.com.vn/App_Themes/default/images/right_wbox_03.jpg) no-repeat right top;

padding-right:3px;

}

.wbox .tc {

background:url(http://quantrimang.com.vn/App_Themes/default/images/mid_wbox_03.jpg) repeat-x left top;

height:23px;

color:#246296;

font-size:12px;

text-transform:uppercase;

font-weight:bold;

padding-top:5px;

padding-left:7px;

}

.wbox .tc a {text-decoration:none;color:#246296;}

.wbox .ml {

background:url(http://quantrimang.com.vn/App_Themes/default/images/left_contannerbox.jpg) repeat-y left top;

padding-left:3px;

}

.wbox .mr

{

background:url(http://quantrimang.com.vn/App_Themes/default/images/right_contannerbox.jpg) repeat-y right top;

padding-right:3px;

}

.wbox .mc {background-color:#FFFFFF;}

.wbox .bl

{

background:url(http://quantrimang.com.vn/App_Themes/default/images/bottomLeft_wbox.jpg) no-repeat left top;

padding-left:3px;

height:5px;

}

.wbox .br

{

background:url(http://quantrimang.com.vn/App_Themes/default/images/bottomright_wbox.jpg) no-repeat right top;

height:5px;

padding-right:3px;

}

.wbox .bc

{

background:url(http://quantrimang.com.vn/App_Themes/default/images/bottomMiddle_wbox.jpg) repeat-x left top;

height:5px;

font-size:0;

line-height:5px;

}

.Tin_lienquan ul,.Tin_lienquan li {list-style:none}

.Title_article {

color:#246296;

font-size:12px;

font-weight:bold;

padding-top:10px;

padding-bottom:10px;

padding-left:5px;

}

.Title_article {text-decoration:none;color:#246296;}

.Title_article a {text-decoration:none;color:#303030;}

.Title_article a:hover {color:#990000; text-decoration:none;}

.imgModule {padding-left:5px;}

.imgModule img {width:120px; margin-right:5px;}

.imgModule a {text-decoration:none;}

.Tin_lienquan {

color:#797979;

font-size:11px;

padding-top:15px;

font-family:Tahoma;

padding-left:5px;

}

.Tin_lienquan a {text-decoration:none; color:#004784;}

.Tin_lienquan a:hover {text-decoration:none;color:#CC3300;}

</style>

home_page = "http://itechplus.info/";

label = "Office";

numposts = 6;

list1 = 1;

sumPosts = 268;

mode = "label";

</script>

<div class="tl"><div class="tr"><div class="tc"><a href="http://itechplus.info/search/label/Office">Tin học văn phòng</a></div></div></div>

</div>

</div>

Thay đoạn code in đậm cho phù hợp với Blog bạn, cần lưu ý :

- list1 : số bài viết có hiện ảnh thumbnail kèm trích dẫn

- mode :

o mode=”label” : áp dụng cho Label

o mode=”blog” : áp dụng cho cả Blog

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

Nguồn : chipkool.tk và một số trang khác.

Read more…

Photoshop

Dựng Phim

Thủ thuật

Kho template

Văn phòng

Mạng máy tính

Blogspot

Photoshop

Blogspot

Photoshop

Blogspot

Photoshop

Công cụ 1

Công cụ 2

Popular Posts

KD-DT

Giới thiệu về tôi

Lưu trữ Blog

Bài 3: SỬ DỤNG CÁC LỆNH CƠ BẢN PLC

Tạo hộp thoại thông báo cho blog

Auto Readmore cho Blogspot

Phần mềm đọc trị số tụ điện

Với phần mền đọc tụ điện này, bạn chỉ cần nhập các kí hiệu của tụ vào, trị và sai số của tụ sẽ hiển trị.

Phần mềm đọc điện trở

Phân trang cho blog - Page Navigation

Tiện ích Bài viết mới Recent Posts giống vnexpress.net

Một hướng dẫn khác:

Hot