Bổ sung tính năng Gadget cho Windows 10

Vừa xong việc thay thế Start Menu cho Windows 10, nay ta tiếp tục với Gadget.

Windows 8 đánh dấu sự biến mất của tính năng Gadget, vốn khá được nhiều người dùng văn phòng yêu thích. Tuy nhiên, vẫn có các giải pháp giúp đem lại tính năng này lên Windows 8,8.1 và nay là Windows 10.

Vậy làm sao để bổ sung tính năng Gadget cho Windows 10? Đơn giản là bạn chỉ cần tải về gói công cụ có tên gọi là Gadgetarian tại đây.

Sau khi tải về, bạn tiến hành giải nén và khởi chạy tập tin Setup.exe để tiến hành cài đặt phần mềm vào Windows 10.

Trong quá trình cài đặt, một cửa sổ lệnh màu xanh xuất hiện, bạn hãy nhấn một phím bất kỳ để quá trình thiết lập được bắt đầu.

Sau đó tiếp tục nhấn tiếp phím bất kỳ để kết thúc cửa sổ dòng lệnh.

Và chuyển sang cửa sổ cài đặt chính, nhấn Finish để hoàn thành quá trình cài đặt.

Bây giờ bạn hãy nhấn phải chuột vào màn hình desktop thử xem, tùy chọn Gadget đã xuất hiện.

Khi chọn nó, cửa sổ gadget sẽ xuất hiện và cung cấp sẳn cho bạn một số các lựa chọn. Bạn chỉ việc nhấn đôi chuột vào nó để lựa chọn xuất hiện trên màn hình desktop.

Các thao tác chỉnh sửa đều hoàn toàn giống trên Windows 7.

Khá tuyệt phải không?

theo Genk

Để lập trình blogspot tốt


Lập trình Blogger-Blogspot banner
Blog là một cấu trúc như bao ngôn ngữ lập trình khác. Nếu bạn am hiểu một ngôn ngữ nào đó thì việc vọc Blog với bạn đôi khi lại cực kỳ đơn giản. Nhiều bạn khi làm Blog chỉ nghĩ rằng "Blog của anh này đẹp thật." . Rồi lao đầu vào học HTMLCSS. Nhưng quả thực bạn đã giỏi và làm được như họ. Lý do vì đâu ?

Nguyên nhân chính là bạn chưa hiểu gì về Blog, bạn đã bao giờ thử tự hỏi bản thân rằng mình đã làm ra một template mà không cần sự hộ trợ từ một template đã có sẵn, hay các thủ thuật được cung cấp sẵn trên mạng? Bạn đã đạt được bao nhiêu phần trăm nhận thức sau những gì mình đã làm ?

Chắc chưa thể trả lời ngay được, nhưng câu hỏi đơn giản hơn là bạn đã thuộc bao nhiêu thủ thuật bạn copy về, bao nhiêu thuộc tính của một widget... Bạn nghĩ mình cần bổ sung cái gì là cốt lõi. Nhiều bạn mình gặp đều chỉ chăm chăm tập trung làm một cái Blog cho chính mình từ CSS, HTML để được ca ngợi từ mọi người. Nhưng họ không biết làm sao hiển thị được bài đăng ra ngoài trang của Blog. Hay nói dễ hiểu hơn là họ chỉ làm được trang index.

Không phải những người họ đã biết họ không chỉ các bạn, mà là do chính các bạn tự làm lười mình đi. Hãy thử một lần tự mình search, tự mình kiểm tra, tự mình học hỏi. Làm vậy bạn sẽ mau tiến bộ hơn, mau hiểu hơn... Học theo từng bước sẽ làm bạn cảm thấy tự tin hơn khi làm một template. Trước đây mình ít chuyên sâu vào javascript mà chỉ chạy theo hớt ngọn Jquery. Nhiều các chức năng đơn giản mà Javascript thuần có thể mình vẫn dùng Jquery để thực hiện, làm template nặng trịch. Load rất chậm..Tự đợt đó mình dừng tìm hiểu Jquery luôn, quay về học Javascript từ đâu.

Mình khuyên bạn, nên chọn cho mình một ngôn ngữ căn bản để học và nghiên cứu trước khi vọc Blog. Blog là một cấu trúc XML, khi được biên dịch trên host của Google nó sẽ xuất thành các cấu trúc trang HTML (hay còn gọi là phân trang) theo người thiết kế định nghĩa. Trong đó chỉ tồn tại CSS, HTML, Javascript. Vậy chung quy lại để giỏi về Blog bạn nên học JavaScript đâu tiên. JavaScript coi như một công cụ biến hoá các chức năng trong Blog của bạn một cách kì diệu, còn CSS, HTML chỉ như một chiếc áo và những bộ xương bất động.

Hãy học theo các câu hỏi mình đưa ra, bạn xem mình có thay đổi điều gì không.

Blogger là gì ? Là bao gồm các Widget, các thực thể - LayOut Tag nằm trong nó
Feed là gì ? Là cấu trúc XML, các bạn có thể xem thêm về CallbackVí dụ về json blogger
Blogger không hỗ trợ gì sao? Hỗ trợ đầy ra đấy, chẳng qua bạn không chịu đọc thôi

Mình đã đi theo con đường tự mình xây dựng lên, mình nghĩ có lẽ mình đi đúng và mình muốn chia sẻ. Để có người đam mêm, góp sức cùng mình phát triển blogger Việt theo nhiều hướng tốt đẹp.

http://vnbtips.blogspot.com/

Upload file JS (javascripts) và CSS lên host Google Drive

Sau khi đã hoàn thành cho mình một Website, Blog (Blogspot chẳng hạn) thì việc tìm nơi lưu trữ các file Css và Js (Javascripts) là điều tất yếu và cực kỳ cần thiết. Trong bài viết này mình sẽ hướng dẫn các bạn cách upload file Css và Javascripts lên host Google Drive.

Google Drive

Trước đây, khi upload các file Css hay js người ta thường nghĩ ngay đến code.google.com, nhưng hiện nay, dường như Google Codeđã ngừng hỗ trợ việc Upload. Vậy nên Google Drive (Dịch vụ lưu trữ của Google) là lựa chọn số một.

  • Vậy tại sao phải upload những file này lên web host (Google Drive)?
Thứ nhất, thông thường khi download, tải các template từ trên mạng về, các file js và css mặc định đã được upload sẵn lên một trang nào đó, và việc bạn phải dùng chung các file đấy với nhiều người khác sẽ làm chậm tốc độ truy xuất, làm chậm tốc độ tải trang của bạn.

Thứ hai, vào một ngày đẹp trời, Website, hay blogspot của bạn bỗng nhưng gặp hiện thượng lạ, bố cục, layout bị vỡ, hiện thị lung tung, hay các tiện ích javascripts không chạy, nguyên nhân có thể là link đến các file Css hay Javascripts bị die, hoặc chủ sở hữu ngừng chia sẻ, lúc này nếu may mắn bạn vẫn có thể tìm thấy các file đó bằng cách Google search thần chưởng :D còn không thì =,=!

Google Driver của Google nên về độ uy tín thì khỏi phải bàn, cho phép upload 5GB mỗi tài khoản, có nhiều công cụ đi kèm (khá giống như tiện ích addon của Google Chrome hay Firefox), bạn hoàn toàn có thể dễ dàng chia sẻ, chỉnh sửa các file lưu trữ của mình, bảo mật cực tốt, và điều cuối cùng: FREE.

Các bước upload file Css và Javascripts lên Google Drive

Đầu tiên, truy cập vào địa chỉ của dịch vụ Google Drive.
https://drive.google.com/
Đăng nhập bằng tài khoản Gmail, có thể tải xuống phiên bản dành cho máy tính hoặc dùng trực tiếp, riêng mình thích dùng trực tiếp trên Web hơn.
Upload File Css và JS Javascripts lên host Google Drive

Để dễ dàng quản lý, ta nên tạo các thư mục, thông thường mỗi blog mình tạo một thư mục chứa tất cả Css và js cho nó.
Upload File Css và JS Javascripts lên host Google Drive

Đặt tên cho thư mục sao cho dễ dàng quản lý.
Upload File Css và JS Javascripts lên host Google Drive

Sau khi tạo xong, ta có thể dễ dàng vào thư mục theo 2 cách.
Upload File Css và JS Javascripts lên host Google Drive

Có thể upload từng file hoặc cả một thư mục.
Upload File Css và JS Javascripts lên host Google Drive

Sau khi upload thành công, một hộp thoại hiện lên, các bạn chọn chia sẻ để cài đặt sang chế độ public mới có thể sử dụng được.
Upload File Css và JS Javascripts lên host Google Drive

Chọn "công khai trên Web" sau đó lưu lại là xong.
Upload File Css và JS Javascripts lên host Google Drive

Upload File Css và JS Javascripts lên host Google Drive

Dán cái link khi nãy ta copy ở bước 2 của hình trên ra đây, nếu quên bạn có thể copy lại bằng cách click phải vào file, chọn "Chia Sẻ". Mặc định đường dẫn (link) có dạng như sau:
https://docs.google.com/file/d/0B8UNNTwD2bIKVVF6bENDcThLajg/edit?usp=sharing
Để có thể sử file Js và Css mà ta đã upload cho blogspot, ta sửa lại đường dẫn trên thành:
https://googledrive.com/host/0B8UNNTwD2bIKVVF6bENDcThLajg
Chú ý: Chỉ cần thay phần đã được hightlight đỏ. Sau khi đã có link lưu trữ tại host mới, các bạn tiến hành thay lại toàn bộ các link có sẵn trong template nha.

Cú pháp:
<script src="https://googledrive.com/host/0B8UNNTwD2bIKVVF6bENDcThLajg" type="text/javascript"></script>
<link href="https://googledrive.com/host/0B8UNNTwD2bIKVVF6bENDcThLajg" rel="stylesheet" type="text/css"></link>
Have fun!

Nguồn:http://www.cuocsongmuonmau.info

API weather: Dự Báo Thời Tiết


Trang http://openweathermap.org/api cung cấp cho bạn nhiều cách để lấy được những chi tiết đủ để bạn tạo thành một bảng dự báo thời tiết cơ bản thông dụng.
Hôm nay chúng ta thử thao tác cùng với file xml do openweathermap.org cho chúng ta.

http://api.openweathermap.org/data/2.5/weather?q=ha%20noi&mode=xml&appid=8cc0cf33ff7c6ac14e22653a3f1eca9b 

thực tế thì họ cho chúng ta rất nhiều cách để lấy được thông tin, các bạn có thể tìm hiểu thêm tại trang http://openweathermap.org/api 

code html:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body onload="xml_exe('travinh');">

<script src="getweather.js"></script>
<link href="style_weather.css" rel="stylesheet" />

<div id="content">
<input id=txtvalue type="text" value="" placeholder="Nhập tên tỉnh hoặc thành phố vào đây !" />
<button onclick="getvalue();" >Kiểm tra</button>
</div>

<div id="show_weather">
<span id=info></span>
</div>


</body>
</html>
tạo ra file getweather.js nội dung:

function xml_exe(getcity){
document.getElementById("info").innerHTML='';
if (window.XMLHttpRequest)
  {
  xhttp=new XMLHttpRequest();
  }
else // for IE 5/6
  {
  xhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xhttp.open("GET","http://api.openweathermap.org/data/2.5/weather?q="+getcity+"&mode=xml",false);
xhttp.send();
xmlDoc=xhttp.responseXML;
img_icon=xmlDoc.getElementsByTagName('weather')[0].getAttribute('icon');
updated=xmlDoc.getElementsByTagName('lastupdate')[0].getAttribute('value');
clouds=xmlDoc.getElementsByTagName('clouds')[0].getAttribute('value');
wind_speed=xmlDoc.getElementsByTagName('speed')[0].getAttribute('value');
humidity=xmlDoc.getElementsByTagName('humidity')[0].getAttribute('value');

document.getElementById("info").innerHTML += "Đất nước: "+xmlDoc.getElementsByTagName("country")[0].childNodes[0].nodeValue + "<br>";
document.getElementById("info").innerHTML += "Tỉnh,thành phố: "+xmlDoc.getElementsByTagName('city')[0].getAttribute('name') + "<br>";
document.getElementById("info").innerHTML +="<img src='http://openweathermap.org/img/w/"+img_icon+".png' title='' ><br>";
document.getElementById("info").innerHTML += "Mây: "+clouds+"%<br>";
document.getElementById("info").innerHTML += "Tốc độ gió: "+wind_speed+"m/s<br>";
document.getElementById("info").innerHTML += "Độ ẩm: "+humidity+"%<br>";

//document.getElementById("info").innerHTML += "Thời gian cập nhật lần cuối: "+updated+"<br>";

}

function getvalue(){
if(document.getElementById("txtvalue").value.trim() != ''){
//alert(document.getElementById("txtvalue").value);
xml_exe(document.getElementById("txtvalue").value);
}else{
document.getElementById("txtvalue").value='';
}

}

một file css style_weather.css có nội dung:

#content{
height:200px;
background:#ccc;
text-align:center;
border:1px solid #cde;
}
#content input {
margin-top:60px;
padding:0px;
width:300px;
height:40px;
font-size:12pt;
}
#content button{
padding:0px;
margin:0px;
width:100px;
height:40px;
font-size:18pt;

}
#content button:hover {cursor:pointer}
#show_weather{
text-align:center;
width:350px;
border:15px solid grey;
display:block;
margin:0 auto;
margin-top:20px;
font-size:12pt;
font-weight:bold;
padding:15px;

}
xong !

demo:

bandicam portable

https://app.box.com/s/wcwki4ghg9cxl5iawpla3wu711lyvpj6
https://drive.google.com/file/d/0B6XCpb6gYskpaVlvUzAzaHNRSVU/view?usp=sharing

Những thẻ meta cần thiết trong SEO

Những thẻ <meta> cần thiết trong SEO

Thẻ <meta> trong HTML là rất nhiều, lên google tìm và đọc về chúng cũng khá đơn giản, nhưng những thẻ <meta> nào cần thiết trong SEO thì ít người nói đến. Với kinh nghiệm của mình tôi sẽ đưa ra các thẻ <meta> cần thiết nhất trong SEO khi thiết kế web dưới đây.

Những thẻ meta cần thiết trong SEO
1. Meta Title:
<title>tiêu đề</title>
Meta Title là thẻ tiêu đề website, một thẻ chắc chắn không thể thiếu trong công đoạn tối ưu onpage HTML, tiêu đề này sẽ được hiển thị khi tìm kiếm trên Google.
Thẻ Meta Title khi tìm kiếm trên Google nó chỉ hiển thị 65-70 ký tự, trong trường hợp title của bạn >70 ký tự thì cũng không nên cut (...) tiêu đề đó. Chúng ta có thể chấp nhận độ dài 65-100 ký tự để hiển thị đầy đủ tiêu đề có ý nghĩa.
2. Meta Description:
<meta name="descriptioncontent="mô tả" />
Meta Description là thẻ mô tả tóm tắt nội dung của website,  nội dung mô tả này được google hiển thị khi tìm kiếm là khoảng 160 ký tự, nhưng bạn cũng không nên cut (...) mô tả nếu nó dài hơn 160 ký tự. Chúng ta có thể chấp nhận độ dài trong khoảng 160-250 ký tự để hiển thị đầy đủ mô tả.
3. Meta Keywords:
<meta name="keywordscontent="từ khóa" />
 Meta Keywords là thẻ mô tả từ khóa của website, các bộ máy tìm kiếm cũng không đánh giá cao thẻ này vì một lý do thời gian trước các SEO mũ đen đã lạm dụng thẻ này quá. Nhưng bạn vẫn nên có thẻ này, dù sao cũng tường minh và sau này sẽ cần thiết.
4. Meta Robots:
<meta name="robots" content="noodp,index,follow" />
Meta Robots là thẻ khai báo cho bộ máy tìm kiếm nhìn nhận về website của bạn. Dưới đây là các giá trị khai báo:
all
Bọ tìm kiếm đánh chỉ số tất cả (ngầm định).
none
Bọ tìm kiếm không đánh chỉ số gì hết.
index
Đánh chỉ số trang Web.
noindex
Không đánh chỉ số trang, nhưng vẫn truy vấn đường dẫn URL.
follow
Bọ tìm kiếm sẽ đọc liên kết siêu văn bản trong trang và truy vấn, xử lý sau đó.
nofollow
Bọ tìm kiếm không phân tích liên kết trong trang.
noarchive
Không cho máy tìm kiếm lưu vào bộ nhó bản sao trang Web.
nocache
Chức năng như thẻ noarchive nhưng chỉ áp dụng cho MSN/Live.
nosnippet
Không cho bọ tìm kiếm hiển thị miêu tả sinppet của trang trong kết quả tìm kiếm và không cho phép chúng hiển thị trong bộ nhớ (cache hay caching).
noodp
Ngăn máy tìm kiếm khỏi việc tạo các miêu tả description từ các thư mục danh bạ Web DMOZ như là một phần của snippet trong trang kết quả tìm kiếm.
noydir
Ngăn Yahoo khỏi việc trích miêu tả trong danh bạ Web Yahoo! diectory để tạo các phần miêu tả trong kết quả tìm kiếm. Giá trị noydir chỉ áp dụng với Yahoo và không có công cụ tìm kiếm nào khác sử dụng danh bạn Web của Yahoo bởi thế giá trị này không được hỗ trợ cho máy tìm kiếm khác..
Meta Robots bộ mày tìm kiếm hỗ trợ
5. Meta Revisit After:
<meta name='revisit-after' content='1 days' />
Meta Revisit After là thẻ khai báo cho bộ máy tìm kiếm thời gian ghé thăm lại website của bạn.
6. Meta Content Language:
<meta http-equiv="content-languagecontent="vi" />
Meta Content Language là thẻ khai báo ngôn ngữ của website bạn, thẻ này rất cần thiết để bộ máy tìm kiếm biết được ngôn ngữ và hướng người dùng vào website của bạn.
7. Meta Content Type:
<meta http-equiv="Content-Typecontent="text/html; charset=utf-8" />
Meta Content Type là t hẻ mô tả để khai báo mã hiển thị ngôn ngữ cho website.
8. Link Favicon:
<link href="favicon.ico" rel="shortcut icontype="image/x-icon" />
Link  Favicon là thẻ hiển thị icon của website trên trình duyệt, thẻ này cũng khá cần thiết trong SEO.
Kết luận: Sau khi đi qua tìm hiểu các thẻ trên, tổng kết lại website của bên nên có những thẻ sau để các bộ máy tìm kiếm hiểu và index nhanh nhất.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta http-equiv="content-language" content="vi" />
<title>tiêu đề/title>
<meta name="description" content="mô tả" />
<meta name="keywords" content="từ khóa" />
<meta name="robots" content="noodp,index,follow" />
<meta name='revisit-after' content='1 days' />
BiBi Nguyễn - iGoo.vn

pseudo-element: CSS Arrows

Demo 1:
code css:
<style>
#demo {
background-color: #ccc;
height: 100px;
position: relative;
width: 200px;
border:5px solid green;
}
#demo:after,#demo:before{
content: ' ';
height: 0;
width: 0;
position: absolute;
border: 10px solid transparent;
}
#demo:after {
border-top-color: #ccc;
border-width: 15px;
top: 100%;
left:10px;
}
#demo:before {
border-top-color: green;
border-width:22px;
top: 100%;
left:3px;
}
</style>
code html:
<div id="demo">http://www.colaxanh.tk</div>
hình 1.

Demo 2:

 code css:
<style>
#demo {
background-color: #ccc;
height: 50px;
position: relative;
width: 200px;
}
#demo:after,#demo:before{
content: ' ';
height: 0;
width: 0;
position: absolute;
border: 10px solid transparent;
top:100%;
left: 0;
}
#demo:before {
border-width: 50px;
border-top-color: #ccc;
border-left-width: 70px;
border-right-width: 0;
}

#demo:after {
border-width: 2px;
border-top-color:#777;
border-left-width: 70px;
border-right-width: 0;
}
</style>

code html:

<div id="demo"><p>http://www.colaxanh.tk</p></div>

hình 2.