Tạo sidebar trượt cho blogspot sử dụng Mootools

Người đăng: yeu mai em on Thứ Hai, 24 tháng 1, 2011

Lúc trước mình đã từng giới thiệu kiểu sidebar menu trượt sử dụng thư viện Scriptaculous. Hôm nay xin tiếp tục giới thiệu kiểu menu trượt độc đáo này nhưng sử dụng thư viện Mootools áp dụng cho Blogger.

Tác giả của kiểu menu trượt này là Andrew Sellick, bạn có thể xem bài viết giới thiệu tại đây. Sau khi nghiên cứu tôi đã thử nghiệm thành công cho blogspot và giới thiệu cách cài đặt để quý bạn đọc cùng chia sẻ.

Trước khi cài đặt, chúng ta cần tìm hiểu một số điều kiện. Trong Template chuẩn của Blogger có thể thấy phần outer-wrapper bao lấy tất cả các thành phần như header-wrapper, content-wrapper và footer-wrapper. Phần content-wrapper lại chứa main-wrapper (phần bố trí các bài viết) và sidebar. Để áp dụng thủ thuật sidebar trượt ẩn về bên phải màn hình thì phải đặt chiều rộng của phần content-wrapper bằng với chiều rộng của phần main-wrapper và đặt chiều rộng tự động cho phần sidebar.

Nào, chúng ta xem Demo và bắt đầu thực hiện như sau.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML.

Trong Template trước dòng ]]></b:skin> tìm đến đoạn code CSS liên quan đến phần bao chứa các bài viết (Blog Posts) và sidebar, xóa toàn bộ đoạn code đó và thay vào đó là đoạn code bên dưới.

#content-wrapper{ width:550px; margin: 0 auto;}
#main-wrapper {
width: 550px;
margin-top: 10px;
padding: 20px 0 20px 0;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar {
background-color: #fff;
height: auto;
position: absolute;
right: 0px;
top: 180px;
width: auto;
}
#sideBarTab{
cursor: pointer;
float: left;
height: 137px;
width: 28px;
}
#sideBarTab img{
border: none;
margin: 0;
padding: 0;
}

Bước 2. Đặt đoạn code sau đây vào trước thẻ </head>.

<script src='http://hacodeproject.googlecode.com/files/mootools.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
var isExtended = 0;
var height = 2500;
var width = 230;
var slideDuration = 500;
var opacityDuration = 1000;

function extendContract(){
if(isExtended == 0){
sideBarSlide(0, height, 1, width);
sideBarOpacity(0, 1);
isExtended = 1;
}
else{
sideBarSlide(height, 0, width, 1);
sideBarOpacity(1, 0);
isExtended = 0;
}
}

function sideBarSlide(fromHeight, toHeight, fromWidth, toWidth){
var myEffects = new Fx.Styles('sideBarContents', {duration: slideDuration, transition: Fx.Transitions.linear});
myEffects.custom({
'height': [fromHeight, toHeight],
'width': [fromWidth, toWidth]
});
}

function sideBarOpacity(from, to){
var myEffects = new Fx.Styles('sideBarContents', {duration: opacityDuration, transition: Fx.Transitions.linear});
myEffects.custom({
'opacity': [from, to]
});
}

function init(){
$('sideBarTab').addEvent('click', function(){extendContract()});
}

window.addEvent('load', function(){init()});
//]]>
</script>

Bước 3. Sau thẻ <body>, tìm đến đoạn code HTML cho phần chứa main-wrapper và sidebar rồi thay toàn bộ đoạn code đó bằng đoạn code bên dưới.

<div id='content-wrapper'>

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Bài đăng trên Blog' type='Blog'/>
</b:section>
</div>

<div id='sidebar'>
<div id='sideBarTab'>
<img alt='sideBar' src='http://bit.ly/gON0ET' title='sideBar'/>
</div>
<b:section class='sideBarContents' id='sideBarContents' preferred='yes'>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
</b:section>
</div>

<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'>&#160;</div>

</div> <!-- end content-wrapper -->

Lưu Template là OK.

* Chú ý đối với Template Simple sẳn có của Blogger thì tìm thay đoạn code:

<div class='columns-inner'>

<div class='column-center-outer'>
<div class='column-center-inner'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Bài đăng trên Blog' type='Blog'/>
</b:section>
</div>
</div>

<div class='column-left-outer'>
<div class='column-left-inner'>
<aside>
<macro:include id='main-column-left-sections' name='sections'>
<macro:param default='0' name='num'/>
<macro:param default='sidebar-left' name='idPrefix'/>
<macro:param default='sidebar' name='class'/>
<macro:param default='true' name='includeBottom'/>
</macro:include>
</aside>
</div>
</div>

<div class='column-right-outer'>
<div class='column-right-inner'>
<aside>
<macro:include id='main-column-right-sections' name='sections'>
<macro:param default='2' name='num'/>
<macro:param default='sidebar-right' name='idPrefix'/>
<macro:param default='sidebar' name='class'/>
<macro:param default='true' name='includeBottom'/>
</macro:include>
</aside>
</div>
</div>

</div>
More about →

Tạo Read More tự động không dùng Javascript

Người đăng: yeu mai em

Phần lớn các blogspot hiện nay đều áp dụng thủ thuật tạo Read More tự động để hiển thị các bài viết mới nhất trên trang chủ, các trang nhãn và lưu trữ theo định dạng gồm ảnh đại diện và phần mô tả tóm tắt bài viết. Và chúng ta đều biết thì thủ thuật này phải dùng đến Javascript nên ít nhiều cũng ảnh hưởng đến tốc độ load trang.

Một bữa nọ ghé sang thăm blog của bạn Duy Phạm thấy có bài viết Auto readmore không sử dụng javascript cho Blogger. Tôi thấy tò mò nên đọc xem. Thì ra thủ thuật này tùy biến từ code của tiện ích Popular Posts của Blogger. Tôi nhận thấy đây cũng là một cách hay và cũng muốn phổ biến cho cộng đồng Blogger Việt. Tuy nhiên code của tôi khác một chút so với code của bạn Duy Phạm. Hy vọng với nỗ lực của Duy Phạm và Huỳnh Nhật Hà, từ nay cộng đồng Blogger sẽ phổ biến thuật ngữ Auto Readmore without Javascript. :68)

Dưới đây là hình minh họa kết quả sau khi áp dụng thủ thuật này.



Để làm được như vậy, bạn hãy thực hiện như sau. (Lưu ý nếu bạn đã áp dụng cách tạo Read More tự động sử dụng Javascript thì tháo nó ra khỏi Template trước khi áp dụng thủ thuật này)

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates.

Đặt đoạn code sau đây trước dòng ]]></b:skin>.

.item-thumbnail {float:left;margin-right:15px;width:75px;height:70px}
.item-snippet {color: #999; font-family:Arial; font-size: 12px;text-align:justify}
.jump-link {float:right}
.jump-link a,.jump-link a:visited{background:#444343;margin-right:4px;padding:4px 8px;color:#FFF;text-shadow:1px 1px 1px #000;text-decoration:none;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}
.jump-link a:hover,.jump-link a:active{background:#006666;color:#FFF;text-decoration:none;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}

Bước 2. Tìm <data:post.body/> và thay nó bằng đoạn code bên dưới.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div>
<b:if cond='data:post.thumbnailUrl'>
<img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/>
<b:else/>
<img alt='no image' class='item-thumbnail' src='http://lh4.ggpht.com/_u7a1IFxc4WI/TTjruHJjcfI/AAAAAAAAAk0/i11Oj6i_bHY/no-image.png'/>
</b:if>
<div class='item-snippet'><data:post.snippet/></div>
</div>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<span class='post-comment-link'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</span>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>

Lưu Template là OK.

Nếu bạn muốn ảnh đại diện nằm bên phải thì thay dòng

.item-thumbnail {float:left;margin-right:15px;width:75px;height:70px}

Bằng dòng

.item-thumbnail {float:right;margin-left:15px;width:75px;height:70px}

Điểm chú ý trong code của tôi tùy biến là phần mô tả tóm tắt bài viết (snippet), văn bản được căn đều hai bên (nhờ sử dụng class item-snippet có định dạng text-align:justify).
More about →

Tạo menu ngang trên phần Header

Người đăng: yeu mai em on Chủ Nhật, 23 tháng 1, 2011

Các Tempplate cơ bản của Blogger thường không có thanh menu ngang trên phần Header. Một kiểu menu như vậy giúp bạn có thêm không gian web để bố trí các liên kết cần thiết cho blog.

Để tạo kiểu menu này, bạn hãy thực hiện như sau.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML. Đặt đoạn code CSS sau đây vào trước dòng ]]</b:skin>.

/* ----- LINKBAR ----- */
#linkbar {
margin: 6px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 100%;
position: relative;
background: #000;
border: 1px solid #000;
border-bottom: 0;
}
#linkbar ul {
margin: 0px 0px 0px 0px;
padding: 5px 5px 7px 5px;
text-align: left;
list-style-type:none;
}
#linkbar li {
display: inline;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#linkbar h2 {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
display: none;
visibility: hidden;
}
#linkbar a {
clear: both;
margin: 0px -4px 0px 0px;
padding: 3px 20px 3px 20px;
width:100%;
text-decoration:none;
font-family: arial, sans-serif;
font-weight: bold;
font-size: 12px;
color: #fff;
border-right: 1px solid #fff;
}
#linkbar a:hover {
color: #000;
background: #fff;
}

Bước 2. Tìm dòng <div id='header-wrapper'> và đặt trước nó với đoạn code bên dưới. (Đối với Template Simple sẵn có của Blogger hiện nay thì đặt trước thẻ <header>).

<div id='linkbar-wrapper'>
<b:section class='linkbar' id='linkbar' showaddelement='no'>
<b:widget id='LinkList1' locked='true' title='Linkbar' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>
</b:section>
</div>

Lưu Template.

Bước 3. Vào Page Elements. Bạn sẽ nhìn thấy trên đỉnh Template có một tiện ích tên là Linkbar nằm trên phần Header, nhấn vào nút Edit. Tại cửa sổ mới, bạn lần lượt thêm các URL và tên cho các liên kết.

More about →

Tạo thêm phần Crosscol dưới phần Header

Người đăng: yeu mai em

Ở một số Template của Blogger có thể thấy dưới phần Header là một thành phần bố trí một tiện ích Feature có hiệu ứng slide để tạo sự nổi bật cho blog. Thành phần đó là crosscol. Thông thường phần crosscol chỉ có một cột. Và phần này có thể được điều chỉnh để chia thành hai cột và có thể thêm một cột ở dưới hai cột này.



1. Thêm Crosscol phía dưới phần Header (trên phần Blog Posts).

Đăng nhập Blogger, vào Design >> Edit HTML.

a. Đối với các Template dạng Layout. Tìm dòng <div id='content-wrapper'> và đặt trước nó với đoạn code bên dưới.

<div id='crosscol-wrapper' style='text-align:justify'>
<b:section class='crosscol' id='crosscol' showaddelement='yes'/>
</div>

b. Riêng đối với các Template mới nhất sẵn có của Blogger (như mẫu Simple) thì đã có sẳn phần Crosscol và code của nó như sau:

<div class='region-inner tabs-inner'>
<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'/>
<b:section class='tabs' id='crosscol-overflow' showaddelement='no'/>
</div>

2. Chia phần Crosscol thành hai cột.
a. Đối với Template dạng Layout. Thay đoạn code ở phần 1.a bằng đoạn code bên dưới.

<div id='crosscol-wrapper' style='text-align:justify'>
<b:section class='crosscol' id='crosscol-left' preferred='yes' showaddelement='yes'/>
<b:section class='crosscol' id='crosscol-right' preferred='yes' showaddelement='yes'/>
<div style='clear: both;'/>
</div>

b. Đối với các Template mới nhất sẵn có của Blogger thì thay đoạn code ở phần 1.b bằng đoạn code bên dưới.

<div class='region-inner tabs-inner'>
<b:section class='tabs' id='crosscol-left' maxwidgets='' showaddelement='yes'/>
<b:section class='tabs' id='crosscol-right' showaddelement='yes'/>
<div style='clear: both;'/>
</div>

3. Thêm một thành phần Crosscol có hai cột dưới một Crosscol có sẵn.
a. Đối với Template dạng Layout.
Thay đoạn code ở phần 1.a bằng đoạn code bên dưới.

<div id='crosscol-wrapper' style='text-align:justify'>
<b:section class='crosscol' id='crosscol' maxwidgets='1' showaddelement='yes'/>
<b:section class='crosscol' id='crosscol-left' maxwidgets='' showaddelement='yes'/>
<b:section class='crosscol' id='crosscol-right' showaddelement='yes'/>
<div style='clear: both;'/>
</div>

b. Đối với Template mới nhất sẵn có của Blogger.
Thay đoạn code ở phần 1.b bằng đoạn code sau đây.

<div class='region-inner tabs-inner'>
<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'/>
<b:section class='tabs' id='crosscol-left' maxwidgets='' showaddelement='yes'/>
<b:section class='tabs' id='crosscol-right' showaddelement='yes'/>
<div style='clear: both;'/>
</div>

Đối với các mục 2 và 3 thì cần phải thêm code CSS.

Đối với mục 2.a và 3.a thì thêm đoạn code CSS sau đây vào trước dòng ]]></b:skin>.

#crosscol-left {width:40%;display:inline-block;_float:left;}
#crosscol-right {width:40%;display:inline-block;float:right;padding: 15px}
#crosscol-right .widget {margin:0;}
body#layout #crosscol-left {width: 50%; float: left;}
body#layout #crosscol-right {width: 50%; float: right;}

Đối với mục 2.b và 3.b thì thêm đoạn code sau đây vào trước dòng ]]></b:skin>.

#crosscol-left {width:40%;display:inline-block;_float:left;}
#crosscol-right {width:40%;display:inline-block;float:right;padding: 15px}
#crosscol-right .widget {margin:0;}

Sau đó đặt trước dòng ]]</b:template-skin> với đoạn code bên dưới.

#layout #crosscol-left {width: 50%; float: left;}
#layout #crosscol-right {width: 50%; float: right;}

Lưu Template là OK.

* Giải đáp yêu cầu riêng của bạn BB từ trang Baoblog.net.

Bạn BB yêu cầu được tôi xử lý giúp, thêm một cột ngang dưới phần Feature Content (slide) trên blog của bạn ấy. Quả thật chắc chắn bạn ấy có vọc cả tháng cũng không thể nào thêm được một cột như thế bởi vì Template này được design rất khác biệt so với những Template thông thường.

Để thêm một cột ngang có 3 phần bằng nhau (như các mục TIN TỨC – XÃ HỘI – PHÓNG SỰ) dưới phần Feature Conent thì bạn BB phải thực hiện như sau.

Bước 1. Đăng nhập Blogger, vào Design >> Edit Template, chọn Expand Widget Templates.

Tìm dòng <!--end: contentwide--> và đặt sau nó với đoạn code bên dưới.

<div id="contentwide2">
<div style="padding-left: 0pt;" class="catbox left">
<script>
document.write('&lt;div class=&quot;category&quot;&gt;&lt;a href=&quot;/search/label/'+label11+'?max-results=10&quot;&gt;'+Title11+'&lt;/a&gt; &lt;/div&gt;');
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/&quot;+label1+&quot;?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>
<!--end: catbox-->

<div class="catbox left">
<script>
document.write('&lt;div class=&quot;category&quot;&gt;&lt;a href=&quot;/search/label/'+label12+'?max-results=10&quot;&gt;'+Title12+'&lt;/a&gt; &lt;/div&gt;');
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/&quot;+label2+&quot;?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>
<!--end: catbox-->

<div style="padding-right: 0pt; border-right: 0pt none;" class="catbox left">
<script>
document.write('&lt;div class=&quot;category&quot;&gt;&lt;a href=&quot;/search/label/'+label13+'?max-results=10&quot;&gt;'+Title13+'&lt;/a&gt; &lt;/div&gt;');
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/&quot;+label3+&quot;?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>
<!--end: catbox-->
</div>
<!--end: contentwide2-->

Bước 2. Đặt đoạn code sau đây vào trước dòng ]]></b:skin>.

#contentwide2{background:#FFF;float:left;width:940px;margin:5px 0 0;padding:10px}
#contentwide2 h2{margin:5px 0;font-size:12px;font-weight:bold}
#contentwide2 ul{margin:10px;padding:10px;border-top:1px dashed #CCC}
#contentwide2 li{background:#FFF url(http://bit.ly/hGi23S) no-repeat 1px 4px;padding:0 0 5px 10px}
#contentwide2 li a{}

Bước 3. Tìm sau thẻ </head> đến đoạn code như bên dưới. Phần được đánh dấu màu đỏ là phần cần được thêm vào. Bạn cần thay tên các chuyên mục 11, 12, 13 tương ứng với các nhãn mới mà bạn áp dụng cho cột nằm ngang này.

label1 = "tintuc";
Title1 = "TIN TỨC";

label2 = "xahoi";
Title2 = "XÃ HỘI";

label3 = "phongsu";
Title3 = "PHÓNG SỰ";

label4 = "baoblog";
Title4 = "CHỈ CÓ Ở BÁO BLOG";

label5 = "biendong";
Title5 = "TIN BIỂN ĐÔNG - BAUXITE";

label6 = "nguoiviet";
Title6 = "NGƯỜI VIỆT XẤU XÍ";

label7 = "hautruong";
Title7 = "HẬU TRƯỜNG SAO";

label8 = "xicangdan";
Title8 = "XÌ CĂNG ĐAN";

label9 = "video";
Title9 = "VIDEO HOT";

label10 = "feature";
Title10 = "feature";

label11 = "chuyenmuc11";
Title11 = "CHUYÊN MỤC 11";


label12 = "chuyenmuc12";
Title12 = "CHUYÊN MỤC 12";


label13 = "chuyenmuc13";
Title13 = "CHUYÊN MỤC 13";

Lưu Template là OK.

Phù, mệt bở hơi tai rồi. :58) May mà thành công.
More about →

Tiện ích Bài viết ngẫu nhiên luân phiên

Người đăng: yeu mai em on Thứ Bảy, 22 tháng 1, 2011

Bài viết ngẫu nhiên luân phiên là một kiểu tiện ích hiển thị 1 bài viết một cách ngẫu nhiên rồi tự động chuyển sang bài viết khác. Tiện ích này hiển thị tiêu đề bài viết, tác giả, ngày đăng bài viết và một phần tóm tắt bài viết.

Bạn có thể xem Demo ở cuối bài viết này.

Tiện ích này sử dụng Feed Atom nên blog của bạn phải đăng ký với Feedburner của Google.

Để cài đặt tiện ích này, bạn cần có một điều kiện là API Key của AJAX. Để lấy API Key cho blog của bạn, vào trang này để đăng ký. Bạn nhập địa chỉ blog rồi nhấn Generate API Key.



Tiếp theo bạn đăng nhập tài khoản Google bằng địa chỉ gmail để chuyển đến trang lấy API Key. Đó là một chuỗi dài gồm các chữ cái và con số lộn xộn, bạn hãy copy chuỗi số đó rồi lưu lại.



Đã có API Key, vậy chúng ta bắt đầu cài đặt tiện ích này như sau.

Đăng nhập Blogger, vào Design >> Page Elements. Đặt đoạn code sau đây vào một tiện ích HTML/JavaScript.

<style type="text/css">
#feedGadget {margin: 0 auto;width: 350px;}
.gfg-root {background-color: #234;border: 1px solid #456;font-family: Arial,sans-serif;font-size: 12px;height: auto;overflow: hidden;padding: 4px;position: relative;text-align: center;}
.gfg-title {background-color: #456;color: #CDE;font-size: 16px;font-weight: bold;line-height: 1.4em;overflow: hidden;white-space: nowrap;}
.gfg-subtitle {background-color: #456;font-size: 14px;line-height: 1.4em;overflow: hidden;white-space: nowrap;}
.gfg-entry {height:9.9em;overflow:hidden;position:relative;text-align:left;width:100%;}
.gfg-root .gfg-entry .gf-result {background-color:#123;height:100%;padding:0 10px;position:relative;width:auto;}
.gfg-root .gfg-entry .gf-result .gf-title {color:#ABC;display:block;font-size:13px;font-weight:bold;line-height:1.2em;margin-top:5px;overflow:hidden;white-space:nowrap;}
.gfg-root .gfg-entry .gf-result .gf-snippet {color:#AAA;font-size:12px;line-height:1.3em;margin-top:5px;}
.clearFloat {clear:both;}
.gfg-list {display:none !important;}
</style>
<script src="http://www.google.com/jsapi/?key=API Key" type="text/javascript"></script>
<script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script>
<script type="text/javascript">
function showGadget() {
var feeds = [{title:'Huynh Nhat Ha on Blogger', url:'http://huynh-nhat-ha.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=999'},];
new GFdynamicFeedControl(feeds, 'feedGadget', {numResults : 1000, stacked : true, title: "Bài viết ngẫu nhiên luân phiên"});
}
google.load("feeds", "1");
google.setOnLoadCallback(showGadget);
</script>
<div id="feedGadget">Loading ...</div>
<div style='clear: both;'></div>

Trong đoạn code trên, bạn cần điều chỉnh width: 350px sao cho tương thích với chiều rộng vùng bố trí tiện ích này, thay API Key của bạn vừa đăng ký, thay Huynh Nhat Ha on Blogger bằng tiêu đề blog của bạn, thanh huynh-nhat-ha bằng tên blogspot của bạn.

Lưu tiện ích là OK. :55)

Tiện ích này do Blogdoctor.me phát triển. Tôi có điều chỉnh một chút để code trở nên ngắn gọn hơn rất nhiều.




Loading ...
More about →

Làm thế nào để quản lý Gmail hiệu quả

Người đăng: yeu mai em on Thứ Sáu, 21 tháng 1, 2011

Hầu hết người dùng e-mail đều mơ ước có được một hộp thư đến (Inbox) rỗng - bởi ai cũng đã đọc và xóa (hoặc đã điền thêm) tất cả email được gửi đến trước đó. Bởi cung cấp đến trên 60GB dung lượng lưu trữ, nên đối với Gmail - dịch vụ email trên nền web khá thông dụng hiện nay - thì bạn chỉ cần xóa những email không thực sự quan trọng hoặc không bao giờ muốn đọc lại lần nữa.

A0805 LTN 151 1 Làm thế nào để quản lý  Gmail hiệu quả

Để trục xuất các email ra khỏi hộp thư đến nhưng vẫn giữ chúng trong tầm tay, bạn đánh dấu chọn vào hộp thoại trước mỗi thư và sau đó nhấn chọn Archive. Tác vụ này sẽ giấu đi các email mà bạn không muốn xóa bỏ vĩnh viễn.

Để dễ tìm lại những email ẩn này, bạn nên sử dụng nhãn để phân loại chúng theo chủ đề, dự án hoặc những chủng loại khác. Hầu hết các ứng dụng thư điện tử đều cho phép bạn sắp xếp email nhận được vào từng thư mục cụ thể, tuy nhiên nhãn của Gmail sẽ làm cho các thư mục này trở nên vô cùng hữu hiệu: Thay vì yêu cầu email đi vào một thư mục, các nhãn này cho phép bạn gán cùng lúc nhiều chủng loại cho một (nhiều) email. Ví dụ, một email đồng thời thuộc về cả hai dự án A (Project A) và B (Project B) có thể xuất hiện trong danh sách có nhãn "Project A" cũng như trong nhóm "Project B".

Để phân loại một email, bạn mở email đó và chọn một trong các nhãn trên trình đơn More Actions, hoặc đánh dấu lên một hay nhiều email có trong danh sách email nhìn thấy, rồi chọn nhãn từ trình đơn More Actions. Bạn cũng có thể tạo ra các nhãn mới trong quá trình này bằng cách nhấn vào nút New Label trong trình đơn đó.

Để chỉnh sửa các nhãn của mình, bạn chọn Setting.Labels ở phần trên bên phải của màn hình. Thao tác này sẽ mở ra một trang web nơi mà bạn có thể thay đổi tên hoặc loại bỏ các nhãn, hiển thị danh sách các email ứng với từng nhãn, hoặc có thể tạo một nhãn mới. Không như việc xóa một thư mục trong ứng dụng thư điện tử chuẩn, quá trình xóa nhãn không thể làm biến mất hoàn toàn các email được gắn nhãn đó, do đó bạn được tự do xóa những nhãn không cần dùng đến.

Bạn cũng có thể gỡ bỏ nhãn khỏi email mà không phải cần thực hiện thao tác xóa nhãn. Trước hết, hãy mở một email hoặc chọn nhiều email trong danh sách, sau đó chọn More Actions. Tiếp đó, cuộn và chọn nhãn không cần thiết bên dưới mục Remove Label. Để tìm các email đã lâu không còn được gắn nhãn, nhấn All Mail, và bạn sẽ thấy tất cả email của mình được liên kết lại với nhau.

Phục hồi thẻ

Hộp thư đến của Gmail đơn giản chỉ là loại nhãn được mặc định gán cho các email đến. Nếu lưu trữ sai một email (gỡ bỏ nhãn Inbox), bạn có thể đưa email này quay về lại hộp thư Inbox bằng cách nhấn chọn All Mail, chọn email đó và nhấn chuột Move to Inbox. Một phương pháp tương tự sẽ cho phép bạn tìm lại các bức thư đã vô tình gửi đến thư mục Trash (vứt bỏ). Thói quen của Gmail là gom các cuộc trao đổi vào trong các dòng email, có nghĩa là các email đã xếp lưu trữ sẽ quay trở lại hộp thư đến của bạn khi có ai đó gửi email trả lời cho một email trước đây cũng trong dòng email này. Nếu không còn thú vị gì với cuộc chuyện trò này, bạn có thể ngăn không cho những email này xuất hiện trong hộp thư đến của mình bằng cách đánh dấu chọn lên email đó rồi chọn Mute từ trình đơn More Actions.

Lệnh run cho trình đơn Start của Vista

Bạn cảm thấy quá chán nản bởi Windows Vista không cung cấp lệnh Run tin cậy mà nhiều người dùng rất ưa thích trong Windows XP? Hãy bình tĩnh, sau đây là cách khắc phục nhanh đối với thiếu sót của tùy chọn quan trọng này. Nếu bạn dùng trình đơn Start mặc định trong Vista (bởi không thích dạng trình đơn Classic) thì lệnh Run sẽ không xuất hiện. Để khắc phục tình trạng này, bạn nhấn phải chuột lên nút Start rồi chọn Properties. Ở thẻ Start Menu, bạn nhấn chuột lên nút Customize ở góc trên bên phải. Sau đó, cuộn qua danh sách các tùy chọn và đánh dấu lên mục Run Command (xem hình 2). Nhấn chuột OK hai lần. Từ bây giờ, lệnh Run sẽ xuất hiện ở góc dưới cùng bên phải của trình đơn Start

Bùi Xuân Toại
Theo pcworld

Nguồn: Làm thế nào để quản lý Gmail hiệu quả

More about →

Cách kết nối USB modem 3G trên Linux

Người đăng: yeu mai em

Việc truy cập Internet qua mạng điện thoại di động 3G với thiết bị USB đang ngày càng phổ biến và chỉ cần một thiết bị 3G nhỏ gọn hoặc thẻ ExpressCard, bạn đã có thể vi vu trên mạng mọi lúc, mọi nơi với tốc độ tương đương ADSL.

Tuy nhiên hiện nay phần lớn các thiết bị USB đều được đóng gói và cung cấp trọn bộ bởi các nhà dịch vụ mạng (Vinaphone, Mobifone, Viettel) và chỉ có phần mềm chạy trên hệ điều hành Windows. Vậy với người dùng các hệ điều hành khác như Linux thì sao? Một băn khoăn hợp lý vì nhiều người có "ấn tượng" về Linux như là hệ điều hành không hỗ trợ nhiều loại thiết bị và không có trình điều khiển thích hợp. Đã có không ít người "đau đầu" khi tìm cách cho thiết bị mạng chạy trên Linux.

Nhưng bạn hãy yên tâm vì chúng ta sẽ cùng giải quyết nỗi băn khoăn này.

a1010 112a Cách kết nối USB modem 3G trên Linux

Trên thực tế, có một điều may mắn cho chúng ta là trình điều khiển các loại USB modem 3G đều được tích hợp sẵn trong nhân Linux các bản Debian. Phổ biến là trình điều khiển "usbserial". Về lý thuyết, chúng ta chỉ cần cắm thiết bị vào và Linux sẽ tự động nhận ra, chúng ta chỉ cần tạo thông số kết nối của nhà mạng và đã có thể lên mạng bình thường.

Tuy nhiên, vấn đề nằm ở chỗ khác. Đó là hiện nay đa số các thiết bị USB đóng gói sẵn của nhà mạng đều là loại "không cần đĩa driver", nghĩa là về thực chất bản thân các thiết bị đó dành một phần nhất định dung lượng bộ nhớ flash nằm trong thiết bị nhằm lưu trữ trình điều khiển của chính thiết bị. Đây gọi là loại usb "lai". Khi bạn cắm vào Windows, phần bộ nhớ flash này sẽ hiện ra là một ổ đĩa usb nhỏ, chỉ đọc, lưu giữ trình điều khiển của nhà mạng (như D-com của Viettel) và sẽ tự động cài đặt trình điều khiển cho thiết bị này. Sau đó Windows mới nhận ra được đúng thiết bị.

a1010 112b 1 Cách kết nối USB modem 3G trên Linux

Trong Linux bạn hoàn toàn không cần thiết (hay nói chính xác là hầu như không thể) dùng được trình điều khiển và phần mềm của nhà mạng vốn dĩ chỉ dành cho Windows. Tuy nhiên vấn đề ở đây là đối với loại USB "lai" này thì mặc định khi cắm vào Linux sẽ chỉ "nhìn thấy" phần bộ nhớ flash nhỏ của nó mà thôi (hiện ra dưới trình điều khiển "usb-storage", phần thiết bị modem thật sự đã bị "che" đi. Mấu chốt ở đây là làm sao để Linux "nhìn thấy" được phần thiết bị modem "usbserial" của USB.

Giải pháp ở đây vô cùng đơn giản, bạn chỉ cần cài thêm gói "usb-modeswitch" vào hệ thống của mình. Đối với các hệ thống Ubuntu thì gói này đã có sẵn trong kho phần mềm chính thức. Bạn có thể chạy dòng lệnh như sau:

$sudo apt-get install usb-modeswitch

a1010 112c Cách kết nối USB modem 3G trên Linux

Đây là một gói phần mềm nhỏ với kích thước chưa đến 300kb và cài một lần duy nhất. Sau đó mọi thứ sẽ được hệ thống xử lý ngầm một cách xuyên suốt không cần tác động từ người dùng. Sau đó mỗi khi bạn cắm thiết bị USB vào thì hệ thống sẽ nhận diện đúng cả 2 thiết bị "usb-storage" và "usbserial".

Vấn đề tiếp theo là thiết lập thông số mạng để kết nối vào mạng di động 3G. Do không dùng phần mềm của nhà dịch vụ mạng nên chúng ta phải tự tay nhập các thông số theo đúng yêu cầu của mạng di động đang sử dụng.

Tôi xin minh họa từng bước với hệ điều hành Ubuntu 10.04, bản tiếng Việt, usb D-com 3G E1750 và sim của Viettel Telecom. Các hệ khác, usb khác và sim khác cũng tương tự.
Sau khi cài đặt gói usb-modeswitch, bạn khởi động lại máy để bảo đảm hệ thống hoạt động đúng đắn.

a1010 112e Cách kết nối USB modem 3G trên Linux


Cắm USB vào máy rồi quan sát biểu tượng Kết nối mạng trên vùng thông báo (bạn cũng có thể thao tác từ trình đơn Hệ thống > Tùy thích > Kết nối mạng).

Bạn sẽ thấy như sau:

Nhìn chuột phải vào biểu tượng, chọn Sửa kết nối. Trong cửa sổ hiện ra bạn sẽ thấy tên thiết bị USB 3G của bạn được chọn sẵn, trong trường hợp E1750 của tôi là "HUAWEI Technology HUAWEI Mobile". Bạn nhấp Tiếp tục, chọn quốc gia Vietnam và lại nhấn Tiếp. Vào thời điểm bài viết này thì trong ứng dụng này đã có sẵn cấu hình của hầu hết các mạng di động phổ biến trong nước, bạn hãy chọn mạng di động ứng với sim của bạn rồi nhấp Tiếp (tôi chọn Viettel Mobile).

Ở mục tiếp sẽ hiện ra tên điểm truy cập (APN) của mạng di động đó. Nếu chưa đúng thì bạn hãy chọn sửa lại ở phần chọn Kế hoạch là "Kế hoạch của tôi không được liệt kê ..." và gõ APN của mạng vào ô bên dưới (tôi sửa "v-internet" là APN của dịch vụ Mobile Internet thành "e-connect" là APN của dịch vụ D-com 3G).

a1010 112f Cách kết nối USB modem 3G trên Linux

Sau đó nhấn Tiếp và Áp dụng. Cửa sổ Chỉnh sửa thông tin kết nối hiện ra để bạn tinh chỉnh chi tiết hơn về thông số kết nối. Vì kết nối 3G của Viettel không yêu cầu tên người dùng và mật khẩu nên tôi để trống. Số gọi *99# đã đúng. Tôi chỉ đặt sử dụng OpenDNS (208.67.222.222, 208.67.220.220) trong phần Cài đặt Ipv4. Tôi chọn thêm Kết nối tự động. Nếu các bạn sử dụng sim của mạng di động khác vui lòng xem bảng bên dưới cuối bài để nhập vào cho đúng. Sau khi xong, nhấp Áp dụng để lưu thay đổi và đóng cửa sổ này lại.

Nhấn chuột phải vào biểu tượng và bỏ chọn (nếu có), bảo đảm rằng tùy chọn "Bật mạng không dây di động" không được chọn.

Cuối cùng bạn nhấn vào biểu tượng Kết nối mạng, chọn tên kết nối bạn đã tạo hoặc chọn lúc nãy và chờ thiết bị kết nối đến mạng di động đó.

Đây là hình minh họa kết nối hoàn tất đến mạng di động của Viettel.

Sau đây là bảng thông số kết nối 3G cho 3 mạng di động phổ biến.

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

Theo pcworld

Nguồn : Cách kết nối USB modem 3G trên Linux

More about →