Tích hợp hiệu ứng hộp đèn (Lightbox) cho hình ảnh trong Blogger

Bài viết này mình sẽ hướng dẫn các bạn tích hợp hiệu ứng hộp đèn cho blog. Hiệu ứng hộp đèn nó trông như ảnh này nhé



Bình thường, để thêm hiệu ứng hộp đèn cho blog, bạn chỉ cần làm như sau:
Đăng nhập Blogger ~> Vào Cài đặt ~> chọn Bài đăng và nhận xét ~> Tại cột Hiển thị hình ảnh với hiệu ứng Hộp đèn, chọn Có ~> Sau đó Lưu cài đặt

Tuy nhiên đối với những blog sau khi làm vậy vẫn không hiển thị hiệu ứng hộp đèn thì bạn làm thêm bước nữa:

Vào Mẫu ~> Chỉnh sửa HTML
Tìm đến thẻ <data:post.body/> (Đây là thẻ hiển thị nội dung bài viết)
Với những template mặc định thì <data:post.body/> thường được bao bởi thẻ div này
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'>
<data:post.body/>
</div>

  Nguyên nhân blog của bạn không hiển thị được hiệu ứng hộp đèn là do template thiếu class='post-body'. Giờ bạn chỉ cần thêm class='post-body' bao quanh thẻ <data:post.body/> là xong
<div class='post-body'>
<data:post.body/>
</div>

Làm xong thì Lưu mẫu lại và xem kết quả nhé.

Chia sẻ bộ thẻ Meta full cho blogger năm 2018

Đây là bộ thẻ Meta Full năm 2018 dành cho blogger bộ thẻ này mình sưu tầm được nên post lên cho các bạn nào cần. Một số thẻ khá mới các bạn có thể tra trên google để tìm hiểu nhé.


<meta charset='utf-8'/>
<meta content='width=device-width,minimum-scale=1,initial-scale=1' name='viewport'/>
<meta content='blogger' name='generator'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<link expr:href='data:blog.url' rel='canonical'/>
<meta content='8E9FA6B68F4DC51D2E4130F5237F1DC3' name='msvalidate.01'/>
<meta content='uaJPi95ua-Gq8fhf8PYmJVfehY' name='alexaVerifyID'/>
<meta content='bqCvQd96fKEsDINdw8IsohwclFYFVWsaiGO7zZ1Zfcg' name='google-site-verification'/>
<meta content='de2d42a190998ae52a42b8fcd7f05c12' name='p:domain_verify'/>
<meta content='blogger' name='generator'/>
<meta content='index,follow' name='Googlebot'/>
<meta content='index,follow,noodp' name='robots'/>
<meta content='noodp' name='robots'/>
<link href='/favicon.ico' rel='icon' type='image/x-icon'/>
<meta content='https://www.facebook.com/huynhphung.websfy' property='article:publisher'/>
<meta content='https://www.facebook.com/huynhphungblogger' property='article:author'/>
<link href='https://plus.google.com/u/0/114911979260821967359/posts' rel='publisher'/>
<link href='https://plus.google.com/u/0/114911979260821967359/about' rel='author'/>
<link href='https://plus.google.com/u/0/114911979260821967359' rel='me'/>
<meta content='309376869532794' property='fb:app_id'/>
<meta content='100002919372380' property='fb:admins'/>
<meta content='Copyright @ Tôi Là Quản Trị 2014-2017 © All Rights Reserved.' name='copyright'/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<title><data:blog.pageName/></title>
<meta content='index,follow' name='robots'/>
<meta content='noodp' name='robots'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
</b:if>
<!-- DNS Prefetch -->
<link href='//1.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//2.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//3.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//4.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//www.blogger.com' rel='dns-prefetch'/>
<link href='//maxcdn.bootstrapcdn.com' rel='dns-prefetch'/>
<link href='//fonts.googleapis.com' rel='dns-prefetch'/>
<link href='//use.fontawesome.com' rel='dns-prefetch'/>
<link href='//ajax.googleapis.com' rel='dns-prefetch'/>
<link href='//resources.blogblog.com' rel='dns-prefetch'/>
<link href='//www.facebook.com' rel='dns-prefetch'/>
<link href='//plus.google.com' rel='dns-prefetch'/>
<link href='//twitter.com' rel='dns-prefetch'/>
<link href='//www.youtube.com' rel='dns-prefetch'/>
<link href='//feedburner.google.com' rel='dns-prefetch'/>
<link href='//www.pinterest.com' rel='dns-prefetch'/>
<link href='//www.linkedin.com' rel='dns-prefetch'/>
<link href='//feeds.feedburner.com' rel='dns-prefetch'/>
<link href='//github.com' rel='dns-prefetch'/>
<link href='//player.vimeo.com' rel='dns-prefetch'/>
<link href='//platform.twitter.com' rel='dns-prefetch'/>
<link href='//apis.google.com' rel='dns-prefetch'/>
<link href='//connect.facebook.net' rel='dns-prefetch'/>
<link href='//cdnjs.cloudflare.com' rel='dns-prefetch'/>
<link href='//www.google-analytics.com' rel='dns-prefetch'/>
<link href='//pagead2.googlesyndication.com' rel='dns-prefetch'/>
<link href='//googleads.g.doubleclick.net' rel='dns-prefetch'/>
<link href='//www.gstatic.com' rel='preconnect'/>
<link href='//www.googletagservices.com' rel='dns-prefetch'/>
<link href='//static.xx.fbcdn.net' rel='dns-prefetch'/>
<link href='//tpc.googlesyndication.com' rel='dns-prefetch'/>
<link href='//syndication.twitter.com' rel='dns-prefetch'/>
<!-- End DNS Prefetch -->
<!-- Full Meta SEO START -->
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<title>Page Not Found - <data:blog.title/></title>
<script type='text/javascript'>
BSPNF_redirect = setTimeout(function()
{location.pathname= &quot;&quot;}, 7000); </script>
</b:if>
<!-- TRANG LABEL -->
<b:if cond='data:blog.searchLabel'>
<title><data:blog.pageName/></title>
<meta expr:content='data:blog.metaDescription' name='Description'/>
<meta content='index,follow' name='robots'/></b:if>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<meta expr:content='data:blog.metaDescription' name='description'/>
<meta content='noodp,noydir' name='robots'/>
<meta content='website' property='og:type'/>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.metaDescription' name='og:description'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:else/>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
<title><data:blog.pageName/></title>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta content='noodp' name='robots'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<meta expr:content='data:blog.metaDescription' name='description'/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
<meta expr:content='data:blog.postImageUrl' itemprop='image'/></b:if>
<meta content='data:blog.pageName' property='og:site_name'/>
<meta content='article' property='og:type'/>
</b:if>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<meta expr:content='data:blog.pageName + &quot;, &quot; + data:blog.pageTitle + &quot;, &quot; + data:blog.title' name='keywords'/></b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.postImageThumbnailUrl'><link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/></b:if></b:if>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<link expr:href='data:blog.url' expr:title='data:blog.pageName' rel='openid.delegate'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default?alt=rss&quot;' expr:title='data:blog.title + &quot; - RSS&quot;' rel='alternate' type='application/rss+xml'/>
<link expr:href='&quot;http://www.blogger.com/feeds/&quot; + data:blog.blogId + &quot;/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<link expr:href='data:blog.canonicalHomepageUrl' hreflang='vi' rel='alternate'/></b:if>
<b:else/>
<b:if cond='data:blog.pageTitle != data:blog.title'>
<link expr:href='data:blog.canonicalUrl' hreflang='vi' rel='alternate'/>
</b:if></b:if>
<!-- Full Meta SEO END -->

<!-- Local SEO meta start -->
<meta content='Vietnamese' name='geo.country'/>
<meta content='VN-SG' name='geo.region'/>
<meta content='14.058324;108.277199' name='geo.position'/>
<meta content='14.058324, 108.277199' name='ICBM'/>
<meta content='Vietnam' name='geo.placename'/>
<meta content='en_US' property='og:locale'/>
<meta content='vi_VN' property='og:locale:alternate'/>
<meta content='all' name='audience'/>
<meta content='all' name='robots'/>
<meta content='vi' http-equiv='content-language'/>
<meta content='Vietnamese' name='language'/>
<meta content='vi-VN' name='language'/>
<meta content='Vietnamese' name='country'/>
<meta content='VN' name='language'/>
<meta content='Ho Chi Minh' name='city'/>
<meta content='Viet Nam' name='country'/>
<meta content='Ho Chi Minh' name='geo.placename'/>
<meta content='#4080ff' name='theme-color'/>
<meta content='#4080ff' name='msapplication-navbutton-color'/>
<meta content='yes' name='apple-mobile-web-app-capable'/>
<meta content='#4080ff' name='apple-mobile-web-app-status-bar-style'/>
<!-- Local SEO meta end -->
<!-- [ Social Media meta tag ] -->
<meta content='@pc8x' name='twitter:site'/>
<meta content='@pc8x' name='twitter:creator'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<b:if cond='data:blog.postImageUrl'>
<meta content='summary_large_image' name='twitter:card'/>
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
<b:else/>
<meta content='summary' name='twitter:card'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image'/>
</b:if>
</b:if>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
</b:if>
<!-- [ Social Media meta tag end ] -->
Nguồn: https://www.toilaquantri.com

[Bootstrap] Phần 2: Hệ thống lưới trong Bootstrap



Nội dung của phần này là về hệ thống lưới được sử dụng trong Bootstrap. Như các bạn đã biết, độ rộng màn hình 1 trang web dùng Bootstrap là tương đối, tức là độ rộng này tùy thuộc theo kích thước màn hình.

Hệ thống lưới của Bootstrap chia thành 12 cột theo chiều rộng của trang. Chúng ta có thể gom các cột lại với nhau để tạo thành vùng lớn hơn, chẳng hạn 4 cột có độ rộng 1 được gom thành 1 cột có độ rộng 4.

Khi thiết kế giao diện, người thiết kế phải đảm bảo độ rộng của các cột tạo thành luôn là 12 để giao diện không bị bể (hiển thị sai). Các trường hợp thiết kế:

  • span 3 – span 9: OK
  • span 4 – span 8: OK
  • span 5 – span 7: OK
  • span 3 – span 4 – span 5: OK
  • span 4 – span 6 – span 2: OK
  • span 8 – span 6: không OK, vì tổng số cột là 14, lớn hơn số cột tối đa là 12

Các lớp lưới
Trong Bootstrap, có 4 lớp lưới chính như sau:

  • xs (dùng cho di động): có chiều rộng màn hình nhỏ hơn 768px
  • sm (dùng cho tablet): có chiều rộng màn hình từ 768px trở lên
  • md (dùng cho desktop): có chiều rộng màn hình từ 992px trở lên
  • lg (dùng cho desktop có kích thước lớn): có chiều rộng màn hình từ 1200px trở lên

Tùy theo thiết kế, bạn có thể chọn các loại lớp lưới phù hợp với màn hình thiết bị hiển thị. Ngày nay, do xu hướng sử dụng điện thoại di động và tablet phổ biến, cho nên bạn nên dùng 2 lớp sm hoặc md.

Cấu trúc cơ bản của lưới Bootstrap
Chúng ta xét đến 1 đoạn mã sau để thấy rõ cấu trúc lưới của Bootstrap.
<div class="row">
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
  ...
</div>
Đầu tiên, chúng ta phải tạo 1 dòng (thông qua đoạn mã). Sau đó, thêm số cột mong muốn vào dòng này (thông qua các lớp .col-*-* với * đầu tiên là loại xs, sm, md, lg và * thứ 2 là số cột). Lưu ý tổng số cột trên 1 cùng 1 row phải luôn là 12.

Tạo 3 vùng bằng nhau


Để tạo 1 dòng chứa 3 vùng bằng nhau có giao diện khớp với tablet trở lên, chúng ta sử dụng đoạn mã sau:

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
</div>
Trong đoạn mã trên, chúng ta thấy có 3 lớp col-sm-4 tức là 3 lớp này sử dụng cho màn hình Tablet, Desktop và Desktop có kích thước lớn. Mỗi lớp có 4 cột như vậy, với 3 lớp, chúng ta có 12 cột, đúng theo yêu cầu của hệ thống lưới Bootstrap.

Tạo 2 vùng không bằng nhau


Tiếp đến chúng ta sẽ tạo giao diện với 2 vùng không bằng nhau với vùng trái có kích thước 4 cột, và vùng phải có kích thước 8.

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>
</div>
Tóm lại, bài viết này giúp các bạn nắm kiến thức cơ bản về hệ thống lưới của Bootstrap cũng như cách phân vùng cho các giao diện Bootstrap đơn giản.

Tìm hiểu về Bootstrap3



I. Tổng quan

1. Bootstrap là gì?

Bootstrap là Front-end framework, là một bộ sưu tập miễn phí các công cụ để tạo ra các trang web và các ứng dụng web. Nó chứa HTML và CSS dựa trên các mẫu thiết kế cho kiểu chữ (typography), các form, các nút (button), tables, modals, v.v... chuyển hướng và các thành phần giao diện khác, cũng như mở rộng JavaScript tùy chọn.

Bootstrap được phát triển bởi Mark Otto và Jacob Thornton tại Twitter như một framework, một công cụ để phục vụ công việc nội bộ của Twitter. Trước khi phát triển Bootstrap, có nhiều thư viện khác nhau đã được sử dụng để phát triển giao diện, dẫn đến mâu thuẫn, xung đột. Bootstrap ra đời để khắc phục những yếu tố này, cũng như giúp các nhà phát triển, lập trình tại Twitter có thể triển khai công việc nhanh hơn, tiện lợi và đồng bộ hơn.

Bootstrap tương thích với các phiên bản mới nhất của tất cả các trình duyệt nổi tiếng trên thế giới như Chrome, Firefox, IE, Opera.... Kể từ phiên bản 2.0 trở l nó cũng hỗ trợ Responsive Web Design. Thiết kế và bố trí của các trang web tự động điều chỉnh, tự động tương thích các thiết bị được sử dụng (máy tính để bàn, máy tính bảng, điện thoại di động).

2. Tại sao bạn nên sử dụng Bootstrap?

  • Rất dễ để sử dụng: Nó đơn giản vì nó được base trên HTML, CSS và Javascript nên chỉ cần biết sơ qua HTML, CSS, Javascript, Jquery là bạn có thể sử dụng Bootstrap để tạo nên một trang web sang trọng và đầy đủ. Nhưng lại không cần code quá nhiều CSS.
  • Tính năng Responsive: Bootstrap’s xây dựng sẵn responsive css trên các thiết bị phones, tablets, và desktops. Do có sử dụng Grid System nên Bootstrap mặc định hỗ trợ Responsive.
  • Mobile: Bootstrap được viết theo xu hướng Mobile First tức là ưu tiên giao diện trên Mobile trước. Nên việc sử dụng Bootstrap cho website của bạn sẽ phù hợp với tất cả kích thước màn hình.
  • Tương thích với trình duyệt: Nó tương thích với tất cả các trình duyệt (Chrome, Firefox, Internet Explorer, Safari, and Opera) nhưng cần lưu ý đối với IE phiên bản cũ (làm việc không tốt với IE này) vì thế việc từ IE9 hay IE8 trở xuống không support là chuyện bình thường. Các bạn có dùng nên lưu ý điểm này, nó support tuyệt vời trên IE10 trở lên. - Xem thêm: http://vnfit.com/bootstrap-la-gi-gioi-thieu-ve-bootstrap-va-hoc-bootstrap-bootstrap-tutorial/#sthash.HTnRtQ3o.dpuf
  • Được viết bởi những người có óc thẩm mỹ và tài năng trên khắp thế giới. Sự tương thích của trình duyệt với thiết bị đã được kiểm tra nhiều lần nên có thể tin tưởng kết quả mình làm ra và nhiều khi không cần kiểm tra lại. Vì vậy, giúp cho dự án của bạn tiết kiệm được thời gian và tiền bạc.
  • Đội ngũ phát triển Bootstrap đã bổ sung thêm tính năng Customizer. Giúp cho designer có thể lựa chọn những thuộc tính, component phù hợp với project của họ. Chức năng này giúp ta không cần phải tải toàn bộ mã nguồn về máy.
Lấy Bootstrap từ đâu? Có 2 cách để bạn có thể sử dụng Bootstrap trên web của bạn.

Download Bootstrap từ getbootstrap.com

  • Thêm Bootstrap từ CDN
  • Note: nên “Thêm nó từ CDN” vì theo như các diễn đàn chia sẻ thì nó có sẵn các cơ chế cache trên máy như thế sẽ không mất thời gian tải lại file nữa mà dùng luôn, còn không thì mỗi lần vào site mình lại phải tải bootstrap về sẽ mất time load trang.

3. Bootstrap 3 có gì hot?
  • Không như các phiên bản trước đây thì ở bản bootstrap 3 thì mặc định đã hỗ trợ Responsive(Các phiên bản 2.x.x thì phải chèn thêm bootstrap-responsive.css nếu muốn sử dụng Responsive).
  • Ở bản bootstrap 3 font glyphicons-halflings-regular được thay thế cho glyphicons-halflings.png.( vì sao lại dùng font icon)
  • Responsive nhiều kích thước màn hình khác nhau:
Còn nữa

Widget Recent post đẹp cho blogspot


1. Đăng nhập blogger - Bố cục - thêm tiện ích - HTML Javascript

Copy đoạn code bên dưới dán vào


<style scoped='' type='text/css'>
#recent-posts{color:#999;font-size:12px}
#recent-posts img{background:#fafafa;float:left;height:60px;margin-right:8px;width:60px;border-radius:4px}
#recent-posts ul{margin:0;padding:0}
#recent-posts ul li{margin:0 0 10px 0;padding:0 0 10px 0;border-bottom:1px solid rgba(0,0,0,0.1)}
#recent-posts ul li:last-child{border-bottom:0}
#recent-posts ul li a{display:block;color:#222;font-weight:700;text-decoration:none;font-size:14px;margin:0 0 10px 0;line-height:normal}
</style>
<div id='recent-posts'>
<script type='text/javaScript'>
var rcp_numposts=5;
var rcp_snippet_length=150;
var rcp_info='yes';
var rcp_comment='Comments';
var rcp_disable='T?t Nh?n xét';
function recent_posts(json){var dw='';a=location.href;y=a.indexOf('?m=0');dw+='<ul>';for(var i=0;i<rcp_numposts;i++){var entry=json.feed.entry[i];var rcp_posttitle=entry.title.$t;if('content'in entry){var rcp_get_snippet=entry.content.$t}else{if('summary'in entry){var rcp_get_snippet=entry.summary.$t}else{var rcp_get_snippet="";}};rcp_get_snippet=rcp_get_snippet.replace(/<[^>]*>/g,"");if(rcp_get_snippet.length<rcp_snippet_length){var rcp_snippet=rcp_get_snippet}else{rcp_get_snippet=rcp_get_snippet.substring(0,rcp_snippet_length);var space=rcp_get_snippet.lastIndexOf(" ");rcp_snippet=rcp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rcp_commentsNum=entry.thr$total.$t+' '+rcp_comment}else{rcp_commentsNum=rcp_disable};if(entry.link[j].rel=='alternate'){var rcp_posturl=entry.link[j].href;if(y!=-1){rcp_posturl=rcp_posturl+'?m=0'}var rcp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rcp_thumb=entry.media$thumbnail.url}else{rcp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-qfW77njb0Lw7Mn35W7sudkUF6c2dlKTe493Weknb8TvIEN_ksi8BZobMtG8_R7dU3k5Q8E4unciYAu-Jm-tSRwp_vbzruHtyg-gKruhKgo65Sna3paaLIjUZoSMEvPYaFNaEmM58FfKF/"};}};dw+='<li>';dw+='<img alt="'+rcp_posttitle+'" src="'+rcp_thumb+'"/>';dw+='<div><a href="'+rcp_posturl+'" rel="nofollow" title="'+rcp_snippet+'">'+rcp_posttitle+'</a></div>';if(rcp_info=='yes'){dw+='<span>'+rcp_postdate.substring(8,10)+'/'+rcp_postdate.substring(5,7)+'/'+rcp_postdate.substring(0,4)+' - '+rcp_commentsNum+'</span>';};dw+='<div style="clear:both"></div></li>';};dw+='</ul>';document.getElementById('recent-posts').innerHTML=dw;};document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results='+rcp_numposts+'&callback=recent_posts\"><\/script>');
</script>
</div>
Save và hưởng thành quả!

Hướng dẫn sao lưu dữ liệu email từ Gmail vào máy tính


Một thủ thuật nhỏ dành cho người thường xuyên dùng Gmail để trao đổi
Chẳn ai có thể chắc chắn được độ an toàn của dữ liệu của bạn, và nếu như là một người thường xuyên dùng email để trao đổi và làm việc thì chắc hẳn mỗi email là tài sản khá quan trọng đối với bạn.


Một lời khuyên mà tôi muốn gửi đến bạn là hãy sao lưu tất cả các dữ liệu nếu có thể! Vì chẳng ai biết trước được điều gì có thể xảy ra. Và email là thứ mà tôi nói đến trong bài viết này. Thế làm sao để có thể sao lưu dữ liệu email? Mà cụ thể ở đây là email trong dịch vụ Gmail của Google? Mời bạn tham khảo cách làm sao đây.

Trước tiên bạn cần đăng nhập vào tài khoản Gmail (tài khoản Google) mà mình cần sao lưu email tại đây, sau đó truy cập tiếp vào đây. Đây là trang sao lưu dữ liệu tài khoản người dùng của Google, và cụ thể ở đây là tùy chọn sao luu email Gmail và Calendar.
Nếu chỉ muốn sao lưu email, bạn chỉ cần đánh dấu ở tùy chọn Gmail. Sau đó hãy nhấn Create Archive. Google sẽ tiến hành quét và nén tất cả dữ liệu email của bạn (bao gồm cả trong Spam và Thùng rác). Người dùng có thể theo dõi tiến trình ở trang kế đến mà Google mở ra. Tùy theo dung lượng lưu trữ mà Gmail đang lưu trữ dữ liệu email của bạn mà thời gian nén có thể ngắn hay dài.
Sau khi quá trình nén kết thúc, Google sẽ cung cấp cho bạn liên kết tải về. Bạn hãy nhấn vào Download để tải

Nếu bạn chờ lâu mà chưa thấy hiện Download, bạn có thể tắt máy hoặc làm công việc gì đó. Vì sau khi nén xong, Google sẽ gửi cho bạn một email thông báo kèm đường dẫn Download bên trong.

Ok, thế là xong, chúc bạn thành công.

– Bước 2: Chúng ta sẽ sử dụng một phần mềm có tên là MBOX File Viewer. Phần mềm này có cả phiên bản miễn phí và phiên bản trả phí, nhưng mình thấy dùng bản miễn phí đã rất OK rồi.

Trang chủ của phần mềm: www.freeviewer.org/mbox/

=> Sau khi tải xong thì cài đặt phần mềm vào máy tính.

– Bước 3: Mở phần mềm ra => nhấn vào Add File => chọn đến file có đuôi .MBOX thế là xong

Lời kết

Như vậy là mình đã hướng dẫn rất chi tiết cho các bạn cách sao lưu toàn bộ thư Gmail vào máy tính cực kỳ an toàn rồi đó. Và qua bài viết này thì bạn cũng có thể biết được cách đọc file Backup của Gmail rồi, cụ thể là bạn có thể đọc và quản lý file MBOX một cách cực kỳ đơn giản và hiệu quả.

Chú ý: Nếu tệp tải về thư mục tiếng việt chứa file vui lòng đổi tên thành không dấu khi mở thư mục chứa file nhé.