Thế Giới Em Và Tôi

Wednesday, 11 May 2011

Album Kiếp Tằm (Vol.3)-Khưu Huy Vũ

Monday, 9 May 2011

Bảo vệ Gmail với 2 cấp mật khẩu

Google vừa cho ra mắt một tính năng mới , giúp bạn có thể bảo tài khoản của bạn một cách có thể nói là rất an toàn, nó được ví như là một “Pháo đài số ” . Với việc sử dụng tính năng này thì cho dù bạn bị đánh cắp mật khẩu cũng không lo bị người khác đọc thư và chiếm đoạt tài khoản Gmail.
Chỉ với 10 bước sau đây tài khoản của bạn sẽ được bảo đảm an toàn ngay cả khi bị đánh cắp mật khẩu.

Bước 1 :

Sau khi đăng nhập vào Gmail bạn cần phải vào phần cài đặt và chọn lại ngôn ngữ là tiếng anh

Chọn lại ngôn ngữ

Bước 2 :

Sau khi thay đổi lại ngôn ngữ, bạn vào lại phần Setting và chọn Accounts and Import tiếp theo là chon Other Google account settings

Chọn Other Google Account Settings

Bước 3 :

Sau khi chọn, trình duyệt sẽ đưa bạn sang một trang mới. và chọn Using 2-step Vertification

Chọn Using 2-step Vertification

Bước 4:

Tiếp tục chọn Set up 2-step verification

Chọn Set up 2-step verification

Bước 5:

Trang web tiếp tục hiện ra và bạn hãy điền số điện thoại của mình vào và chọn dạng gửi code là SMS text . Tiếp tục bấm vào phần Send code, và đợt hệ thống gửi mã xác nhận tới máy di động của bạn và điền mã đó vào ô thứ 2 rồi chọn Verify

Điền số điện thoại và xác nhận

Bước 6:

Khi trang web chuyển sang phần tiếp theo . Hệ thống hỏi bạn có muốn tạo code dự phòng không. Và bạn hãy chọn Next để tiếp tục

Bước 7:

Sau khi bấm vào Next . Hệ thống sẽ tạo cho mạn 10 mã số ngẫu nhiên , bạn hãy lưu hoặc in nó ra giấy .

Lưu mã hoặc in ra giấy

Bước 8:

Tiếp tục điền một số điện thoại khác vào để đề phòng khi điện thoại của bạn không liên lạc được hoặc bị mất. ( Nên chọn số máy bàn). Tiếp theo bạn chọn Automated voice message. Chọn Send code , Google sẽ tự động thực hiện một cuộc gọi đến máy bàn của bạn và đọc 5 số để xác nhận. Sau khi điền xong 5 số bạn hãy bấm vào Verify và tiếp tục bấm Next

Chọn máy bàn

Bước 9:

Một bảng thiết lập thành công , và bạn tiếp tục chọn NEXT

Thiết lập thành công

Bước 10:

Sau đó, hệ thống sẽ hiển thị nút chức năng Turn on 2-step verification . Một bảng thông báo hiện ra hỏi bạn có muốn sử dụng chức năng này không. Thì bạn hãy bấm vào OK

Kích hoạt chức năng

Cuối cùng hệ thống sẽ đưa bạn sang trang đăng nhập. Sau khi đăng nhập hệ thống tiếp tục gửi 1 mã để xác minh qua điện thoại di động của bạn và hãy điền mã số đó vào .

Sau khi xác minh , trang web sẽ đưa bạn đến phần cấu hình cho tài khoản của bạn. Bao gồm số điện thoại và 10 mã ngẫu nhiên.

Cấu hình

Như vậy chỉ sau 10 bước làm đơn giản tài khoản của bạn đã được bảo vệ bằng hai lớp mật khẩu chắc chắn. Kẻ xâm nhập khó lòng mà nhăm nhe tài khoản của bạn cho dù kẻ đó biết mật khẩu của bạn là gì.

Chú ý

Nếu như bạn không nhận được tin nhắn SMS hoặc điện thoại hãy làm theo cách sau

Chọn Other ways to get a verification code

và một bảng thông báo nữa hiện ra. Bạn hãy lữa chọn cái nào thích hợp với mình nhất ( Nên sử dụng mã dự phòng)

Nguồn Skynetvn.com

Friday, 6 May 2011

Tạo kiểu menu đẹp với DD Tabe Menu Script

- Tôi làm việc trong lĩnh vực tài chính nên thường xuyên đọc tin tức trên trang Stockbiz.vn. Và tôi lại thích webdesign nên từ lâu đã nghía đến kiểu menu đẹp tại trang này. Vì thế hy vọng một ngày nào đó sẽ giới thiệu cho bạn đọc cách tạo kiểu menu như vậy. Khi tìm hiểu ngọn nguồn mới biết đó là DD Tab Menu do Dynamic Drive phát triển. Bạn có thể xem trang Demo của Dynamic Drive ở đây.
Qua quá trình nguyên cứu tôi đã chỉnh code từ Menu của trang Stockbiz.vn cho gọn gàng hơn, chuyên nghiệp hơn và đặc biệt là dễ cài đặt đối với người chưa biết nhiều về webdesign. Bạn có thể xem Demo của tôi ở đây.
Sau đây là các bước thực hiện.
Bước 1. Đặt đoạn code dưới đây vào trước thẻ </head>.

<script src="http://hacodeproject.googlecode.com/files/ddtabmenu.js" type="text/javascript"></script>
<script type="text/javascript">
//SYNTAX: ddtabmenu.definemenu("tab_menu_id", integer OR "auto")
ddtabmenu.definemenu("ddtabs", 0) //initialize Tab Menu with ID "ddtabs1" and select 1st tab by default
</script>

<style type="text/css">
.basictab{float:left;line-height:normal;/*border-bottom:1px solid #7e9fff;Add border strip to bottom of menu*/}
.basictab ul{list-style-type:none;margin:0;margin-left:5px;/*Left offset of entire tab menu relative to page*/padding:0}
.basictab li{display:inline;margin:0;padding:0}
.basictab a{float:left;background:url(http://bit.ly/hGffu7) no-repeat left top;margin:0;margin-right:5px;/*spacing between each tab*/padding:0 0 0 9px;text-decoration:none}
.basictab a span{float:left;display:block;background:url(http://img411.imageshack.us/img411/421/glowtab.gif) no-repeat right top;padding:5px 12px 3px 3px;font-weight:bold;color:#3B3B3B}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
.basictab a span{float:none}
/* End IE5-Mac hack */
.basictab a:hover span{color:White}
.basictab a.current{/*Selected Tab style*/background-position:0 -82px;/*Shift background image up to start of 2nd tab image*/}
.basictab a.current span{/*Selected Tab style*/background-position:100% -82px;/*Shift background image up to start of 2nd tab image*/color:White}
.basictab a:hover{/*onMouseover style*/background-position:0% -82px;/*Shift background image up to start of 2nd tab image*/text-decoration:none}
.basictab a:hover span{/*onMouseover style*/background-position:100% -82px;/*Shift background image up to start of 2nd tab image*/}
.tabcontainer{clear:left;width:998px;/*width of 2nd level sub menus*/height:1.5em;/*height of 2nd level sub menus. Set to largest's sub menu's height to avoid jittering.*/background:#035EB7;height:30px;font-size:11px}
.tabcontent{display:none;color:White;padding-top:5px;padding-left:13px;float:left}
.tabcontent a{color:White;font-size:12px;padding:4px 7px 0 7px;text-decoration:none}

.haSearch{float:right;font-weight:bold;padding-right:5px;padding-top:4px}
.haSearchInput{-moz-background-clip:border;-moz-background-inline-policy:continuous;-moz-background-origin:padding;height:16px;padding:3px;text-align:left;width:200px;font-size:11px;background-color:White}
.haSearchTextBox{border:0 none;float:left;font-size:11px;height:14px;left:24px;width:100px}
.btn{height:15px;width:15px;border-width:0;float:right}
</style>

Trong đoạn code CSS ở trên, bạn cần điều chỉnh tham số width:998px cho phù hợp với chiều rộng phần main của trang web.

Bước 2. Thiết lập cấu trúc HTML như dưới đây và đặt trong phần thân trang web, giữa 2 thẻ <body>, </body>.

<div id="ddtabs" class="basictab">
<ul>
<li><a href='#' rel='sc1'><span>Trang chủ</span></a></li>
<li><a href='#' rel='sc2'><span>Menu I</span></a></li>
<li><a href='#' rel='sc3'><span>Menu II</span></a></li>
<li><a href='#' rel='sc4'><span>Menu III</span></a></li>
<li><a href='#' rel='sc5'><span>Menu IV</span></a></li>
<li><a href='#' rel='sc6'><span>Menu V</span></a></li>
</ul>
</div>

<div class="tabcontainer">

<div id='sc1' class='tabcontent'><a style ='color :#CCCCCC; font-size:12px;' href='/rss.xml'>RSS <img src='http://bit.ly/hjpshO' /></a>
       
<a href='#'>Giới thiệu </a>  |  <a href='#'>Liên hệ</a></div>

<div id='sc2' class='tabcontent'><a style ='color :#CCCCCC; font-size:12px;' href='/rss.xml'>RSS <img src='http://bit.ly/hjpshO' /></a>
       
<a href='#'>Submenu I.1</a> |
<a href='#'>Submenu I.2</a> |
<a href='#'>Submenu I.3</a> |
<a href='#'>Submenu I.4</a> |
<a href='#'>Submenu I.5</a> |
<a href='#'>Submenu I.6</a> |
<a href='#'>Submenu I.7</a></div>

<div id='sc3' class='tabcontent'><a style ='color :#CCCCCC; font-size:12px;' href='/rss.xml'>RSS <img src='http://bit.ly/hjpshO' /></a>
       
<a href='#'>Submenu II.1</a> |
<a href='#'>Submenu II.2</a> |
<a href='#'>Submenu II.3</a> |
<a href='#'>Submenu II.4</a> |
<a href='#'>Submenu II.5</a> |
<a href='#'>Submenu II.6</a> |
<a href='#'>Submenu II.7</a></div>

<div id='sc4' class='tabcontent'><a style ='color :#CCCCCC; font-size:12px;' href='/rss.xml'>RSS <img src='http://bit.ly/hjpshO' /></a>
       
<a href='#'>Submenu III.1</a> |
<a href='#'>Submenu III.2</a> |
<a href='#'>Submenu III.3</a> |
<a href='#'>Submenu III.4</a> |
<a href='#'>Submenu III.5</a> |
<a href='#'>Submenu III.6</a> |
<a href='#'>Submenu III.7</a></div>

<div id='sc5' class='tabcontent'><a style ='color :#CCCCCC; font-size:12px;' href='/rss.xml'>RSS <img src='http://bit.ly/hjpshO' /></a>
       
<a href='#'>Submenu IV.1</a> |
<a href='#'>Submenu IV.2</a> |
<a href='#'>Submenu IV.3</a> |
<a href='#'>Submenu IV.4</a> |
<a href='#'>Submenu IV.5</a> |
<a href='#'>Submenu IV.6</a> |
<a href='#'>Submenu IV.7</a></div>

<div id='sc6' class='tabcontent'><a style ='color :#CCCCCC; font-size:12px;' href='/rss.xml'>RSS <img src='http://bit.ly/hjpshO' /></a>
       
<a href='#'>Submenu V.1</a> |
<a href='#'>Submenu V.2</a> |
<a href='#'>Submenu V.3</a> |
<a href='#'>Submenu V.4</a> |
<a href='#'>Submenu V.5</a> |
<a href='#'>Submenu V.6</a> |
<a href='#'>Submenu V.7</a></div>

<div class="haSearch">
<div class="haSearchInput">
<form action='http://www.google.com/custom' id='searchform' method='get' style='display:inline;'>
<input type="hidden" name="sitesearch" value="huynh-nhat-ha.blogspot.com" />
<input class="haSearchTextBox" name='q' onblur='if (this.value == "") {this.value = "Nhập từ cần tìm...";}' onfocus='if (this.value == "Nhập từ cần tìm...") {this.value = ""}' type='text' value='Nhập từ cần tìm...'/>
<input class='btn' name='' src='http://bit.ly/hSgufo' type='image' value='Go'/>
</form>
</div>
</div>
</div>

Trong cấu trúc HTML ở trên, bạn cần đặt tên Menu, Submenu và URL (thay vào vị trí các dấu #) tương ứng.
Kiểu menu này có thể cài đặt cho Blogger dễ dàng tương tự như cách cài đặt đối với website thông thường.
THEO: http://www.bloggerism.tK

Thursday, 5 May 2011

Tạo Contact Form cho blog với Foxyform

Trên Blogger, bạn không thể tạo một Contact Form một cách độc lập mà phải nhờ đến các website chuyên cung cấp dịch vụ tạo Contact Form miễn phí. Ở đây tôi xin giới thiệu trang FoxyForm.
Vào trang http://www.foxyform.com/. Chọn các option như hình bên dưới.

Điền địa chỉ email của bạn để dùng cho việc nhận email liên hệ. Sau đó nhấn nút Create Formular. Bạn sẽ được chuyển đến trang lấy code cho Contact Form. Đoạn code đó thường có dạng như sau:


<table cellspacing="0" cellpadding="0" border="0"><tr><td><iframe width="400" height="490" frameborder="0" src="http://www.foxyform.com/form.php?id=XXXXX&sec_hash=XXXXXXXXXXX"></iframe></td></tr><tr><td align="center"><a style="font:8px Arial;color:#5C5C5C;" href="http://www.foxyform.com">foxyform.com</a></td></tr></table>

Tạo trang diễn đàn cho Blogger

Diễn đàn (Forum) hoàn toàn khác với Blog. Diễn đàn là nơi người đọc có thể liên hệ tương tác với nhau, tạo các chủ đề thảo luận để cùng chia sẻ thông tin hữu ích một cách dễ dàng.

Xem Demo.

Trên Blogger, bạn không được phép tạo tên miền phụ hay thư mục mới để mà có thể thiết kế được một diễn đàn. Vì thế nếu bạn muốn có một trang diễn đàn trên Blogger thì bạn phải cần một thủ thuật nào đó. Và thủ thuật sau đây sẽ giúp bạn thực hiện được yêu cầu này.

1. Sau khi đăng nhập Blogger, bạn cần tạo một trang tĩnh (static page). Vào Design >> Posting >> Edit Pages >> New Page và tạo một trang có tiêu đề là forum. Ghi nhớ liên kết của trang forum có dạng như thế này:

http://yourblogname.blogspot.com/p/forum.html.

2. Tạo một diễn đàn miễn phí tại Nabble: Bạn điền thông tin cá nhân vào Form đăng ký, quan trọng nhất là địa chỉ email và mật khẩu đăng nhập. Nabble sẽ gửi email kích hoạt xác nhận vào địa chỉ email mà bạn đăng ký. Đăng nhập vào tài khoản email của bạn, vào hộp mail (có thể nằm trong họp thư rác) rồi kích vào link xác nhận để kích hoạt tài khoản Nabble của bạn. Bạn cần ghi nhớ mật khẩu đăng nhập.

Trong quá trình tạo tài khoản, bạn cần đặt một cái tên cho diễn đàn của bạn, ví dụ như: My Blogger Forum chẳng hạn. Sau khi đăng ký và kích hoạt thành công, bạn đăng nhập vào tài khoản Nabble và chọn Embedding Options. Copy đoạn code HTML.

3. Tại tài khoản Blogger, vào Design >> Edit HTML và chọn "Expand Widget Templates".

Nhấn phím kết hợp Ctrl + F và tìm dòng code: <div id='content-wrapper'>

Dán đoạn code sau đây vào trên dòng code nói trên.

<b:if cond='data:blog.url == "http://yourblogname.blogspot.com/p/forum.html"'>
Đoạn code từ Nabble lấy được ở bước 2
</b:if>

4. Bước kế tiếp là dấu một số thành phần trên Blog của bạn khi hiển thị trang forum. Dán đoạn code như dưới đây vào sau dòng ]]></b:skin>.
<b:if cond='data:blog.url == "http://yourblogname.blogspot.com/p/forum.html"'>
<style type='text/css'>
#content-wrapper {
display:none !important;
}
</style>
</b:if>
Lưu Template là xong. Bây giờ bạn có thể dành thời gian mời bạn bè tham gia diễn đàn của bạn được rồi đấy.

Chú ý: Nếu bạn muốn tạo một diễn đàn độc lập trên Blogger thì bạn phải tạo một Blog mới. Sau đó vào chỉnh sửa Template, xóa toàn bộ phần code giữa 2 thẻ <body>, </body> và thay bằng đoạn code lấy được trên Nabble ở bước 2.

Nếu bạn có một tên miền tùy chỉnh thì có thể tạo một subdomain dưới dạng http://forum.yourdomain.com/ cũng là một giải pháp tốt.

Tuesday, 3 May 2011

Tạo tiện ích Bài viết mới nhất sử dụng hiệu ứng Simple jQuery Spy

Tại trang Jqueryfordesigners đã thử nghiệm hiệu ứng Simple jQuery Spy khá độc đáo. Kiểu hiệu ứng trượt này đem đến vẻ mượt mà và bắt mắt đối với người đọc. Hiệu ứng này có thể được sử dụng cho Blogger trong tiện ích Bài viết mới nhất và hy vọng bài viết này sẽ giúp các Blogger có thêm một kiểu tiện ích hay.

Xem Demo.
Nếu bạn thấy thích tiện ích này thì tiến hành theo các bước sau:
Đăng nhập Blogger Dashboard. Dán toàn bộ đoạn code dưới đây vào một tiện ích HTML/JavaScript.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">

</style>

<script language='JavaScript'>
imgr = new Array();
imgr[0] = "http://i977.photobucket.com/albums/ae255/h3n6r4/Others/orpg0m.jpg";
imgr[1] = "http://i977.photobucket.com/albums/ae255/h3n6r4/Others/orpg0m.jpg";
imgr[2] = "http://i977.photobucket.com/albums/ae255/h3n6r4/Others/orpg0m.jpg";
imgr[3] = "http://i977.photobucket.com/albums/ae255/h3n6r4/Others/orpg0m.jpg";
imgr[4] = "http://i977.photobucket.com/albums/ae255/h3n6r4/Others/orpg0m.jpg";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "nhận xét";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 7;
home_page = "http://tranphucminh.blogspot.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js' type='text/javascript'></script>
</div>

Bạn cần điều chỉnh thông số ở những dòng đánh dấu màu đỏ cho phù hợp với Blog của bạn.