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é.

Threaded Comments for Blogger With Awesome Style

Bài viết hướng dẫn các bạn tạo khung comments system đẹp cho blogspot. Vui lòng làm theo các bước sau đây

Bước 1: Vào chủ đề - Chỉnh sửa HTML tìm code sau:

<b:include data='post' name='comments'/>

Sau đó thay thế bằng code bên dưới

 <b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>

Bước 2: Tìm trong CSS và copy đoạn code bên dưới vào trước thẻ đóng ]]></b:skin>

.comments {
  clear: both;
  margin-top: 10px;
  margin-bottom: 0px;
  line-height: 1em;
}
.comments .comments-content {
  font-size: 12px;
  margin-bottom: 16px;
font-family: Verdana;
font-weight: normal;
text-align:left;
line-height: 1.4em;
}
.comments .continue a, .comments .comment .comment-actions a {
display:inline;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding: 2px 5px;
text-decoration: none;
text-shadow:0 1px 1px rgba(0,0,0,.3);
color:#FFF;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin-right: 10px;
border: 1px solid #3079ED;
background: #0066FF;
background: -webkit-gradient(linear, left top, left bottom, from(#0099FF), to(#009999));
background: -moz-linear-gradient(top, #0099FF, #009999);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#0099FF&#39;, endColorstr=&#39;#009999&#39;);
}
.comments .continue a:hover, .comments .comment .comment-actions a:hover {
  text-decoration: none;
background:#0099FF;
background: -webkit-gradient(linear, left top, left bottom, from(#009999), to(#0099FF));
background: -moz-linear-gradient(top, #009999, #0099FF);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#009999&#39;, endColorstr=&#39;#0099FF&#39;);
}
.comments .continue a:active, .comments .comment .comment-actions a:active {
position: relative;
top:1px;
background: -webkit-gradient(linear, left top, left bottom, from(#0066FF), to(#0099CC));
background: -moz-linear-gradient(top, #0066FF, #0099CC);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#0066FF&#39;, endColorstr=&#39;#0099CC&#39;);
}
.comments .comments-content .comment-thread ol {
  list-style-type: none;
  padding: 0;
  text-align: none;
}
.comments .comments-content .inline-thread {
  padding: 0.5em 1em 0 1em;
}
.comments .comments-content .comment-thread {
  margin: 8px 0px 0px 0px;
}
.comments .comments-content .comment-thread:empty {
  display: none;
}
.comments .comments-content .comment-replies {
  margin-top: 1em;
  margin-left: 40px;   font-size:12px;
}
.comments .comments-content .comment {
  padding-bottom:8px;
  margin-bottom: 0px
}
.comments .comments-content .comment:first-child {
  padding-top:16px;
}
.comments .comments-content .comment:last-child {
  border-bottom:0;
  padding-bottom:0;
}
.comments .comments-content .comment-body {
  position:relative;
}
.comments .comments-content .user {
  font-style:normal;
  font-weight:bold;
}
.comments .comments-content .user a {
  color: #444;
}
.comments .comments-content .user a:hover {
  text-decoration: none;
color: #555;
}
.comments .comments-content .icon.blog-author {
  width: 18px;
  height: 18px;
  display: inline-block;
  margin: 0 0 -4px 6px;
}
.comments .comments-content .datetime {
  margin-left:6px;
color: #999;
font-style: italic;
font-size: 11px;
float: right;
}
.comments .comments-content .comment-content {
font-family: Arial, sans-serif;
font-size: 12.5px;
line-height: 19px;
}
.comments .comments-content .comment-content {
font-family: Arial, sans-serif;
font-size: 12.5px;
line-height: 19px;
  text-align:none;
margin: 15px 0 15px;
}
.comments .comments-content .owner-actions {
  position:absolute;
  right:0;
  top:0;
}
.comments .comments-replybox {
  border: none;
  height: 250px;
  width: 100%;
}
.comments .comment-replybox-single {
  margin-top: 5px;
  margin-left: 48px;
}
.comments .comment-replybox-thread {
  margin-top: 5px;
}
.comments .comments-content .loadmore a {
  display: block;
  padding: 10px 16px;
  text-align: center;
}
.comments .thread-toggle {
  cursor: pointer;
  display: inline-block;
}
.comments .comments-content .loadmore {
  cursor: pointer;
  max-height: 3em;
  margin-top: 3em;
}
.comments .comments-content .loadmore.loaded {
  max-height: 0px;
  opacity: 0;
  overflow: hidden;
}
.comments .thread-chrome.thread-collapsed {
  display: none;
}
.comments .thread-toggle {
  display: inline-block;
}
.comments .thread-toggle .thread-arrow {
  display: inline-block;
  height: 6px;
  width: 7px;
  overflow: visible;
  margin: 0.3em;
  padding-right: 4px;
}
.comments .thread-expanded .thread-arrow {
  background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC&quot;) no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
  background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==&quot;) no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {
  float: left;
  overflow: hidden;
}
.comments .avatar-image-container img {
  width: 36px;
}
.comments .comment-block {
  margin-left: 48px;
  position: relative;
padding: 15px 20px 15px 20px;
background: #F7F7F7;
border: 1px solid #E4E4E4;
overflow: hidden;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-image: initial;
}

Save và hưởng thành quả!

[Sticky Widget] Cố định tiện ích khi cuộn trang blogspot

Sticky Widget cố định cho Blog là widget sẽ chạy theo màn hình khi cuộn trang xuống hoặc cuộn trang lên.

Với cách cố định Widget này sẽ giúp người truy cập nhanh vào các menu, hoặc bạn cần làm nổi bật một nội dung widget nào đó. Đặc biệt nó rất hay được dùng cho các trang cần cố định banner quảng cáo.

Để thực hiện Code cố định Widget (Sticky widget) khi cuộn trang cho Blogspot các bạn chỉ việc copy toàn bộ đoạn code phía dưới đây và chèn vào trước thẻ </body> trong template blogspot của các bạn.

<style>
.GICO_sticking {background:#f2f2f2 !important; position:fixed !important; top:0; z-index:9999; box-shadow:0px 10px 4px -5px rgba(0,0,0,0.3); margin-top: 0; position:relative9 !important;}
</style>
<script>
//<![CDATA[
StickyWidget("ID Widget"); // enter your widget ID here
function StickyWidget(elem) {
    var GCVN_sticky = document.getElementById(elem);
    var scrollee = document.createElement("div");
    GCVN_sticky.parentNode.insertBefore(scrollee, GCVN_sticky);
    var width = GCVN_sticky.offsetWidth;
    var iniClass = GCVN_sticky.className + ' GCVN_sticky';
    window.addEventListener('scroll', GICO_sticking, false);
    function GICO_sticking() {
        var rect = scrollee.getBoundingClientRect();
        if (rect.top < 0) {
            GCVN_sticky.className = iniClass + ' GICO_sticking';
            GCVN_sticky.style.width = width + "px";
        } else {
            GCVN_sticky.className = iniClass;
        }
    }
}
//]]>
</script>

 Chú ý: Bạn thay ID Widget thành ID Widget mà bạn muốn cố định.

Tạo Nút Lên Đầu Trang (Back To Top) Cho Blogspot

Hướng dẫn tạo nút Lên đầu trang (Back to top) với hiệu ứng animation cực đẹp cho Blogspot


Bước 1: Đăng nhập vào trang quản lý Blogger.com chọn Chủ đề rồi chọn tiếp Chỉnh sửa HTML . Sau đó các bạn copy mã bên dưới đây vào sau thẻ <head>

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

Bước 2: Bạn thêm tiếp code dưới đây vào trước thẻ </body>

<style type='text/css'>
/* Sonar Effect */
@-webkit-keyframes sonar-effect{0%{opacity:0.1}40%{opacity:0.3;box-shadow:0 0 0 5px #fff,0 0 10px 10px #fff,0 0 0 10px #fff}100%{box-shadow:0 0 0 5px #fff,0 0 10px 10px #fff,0 0 0 10px #fff;-webkit-transform:scale(1.5);transform:scale(1.5);opacity:0}}
@keyframes sonar-effect{0%{opacity:0.1}40%{opacity:0.3;box-shadow:0 0 0 5px #fff,0 0 10px 10px #fff,0 0 0 10px #fff}100%{box-shadow:0 0 0 5px #fff,0 0 10px 10px #fff,0 0 0 10px #fff;-webkit-transform:scale(1.5);transform:scale(1.5);opacity:0}}
/* To top */
.vikkatotop{visibility:hidden;z-index:2;background:rgba(52, 152, 219, 0.75);color:#fff;font-size:1.6rem;width:55px;height:55px;line-height:52px;text-align:center;position:fixed;bottom:40px;right:40px;cursor:pointer;-webkit-transform:translateZ(0) scale(0.0) rotate(360deg);transform:translateZ(0) scale(0.0) rotate(360deg);border-radius:100%;opacity:.9;transition:all .4s}
.vikkatotop:hover{background:#3498db;color:#fff;opacity:1}
.vikkatotop.arlniainf{visibility:visible;cursor:pointer;opacity:1;-webkit-transform:translateZ(0) scale(1.0) rotate(0deg);transform:translateZ(0) scale(1.0) rotate(0deg);transition:all .4s;}
.vikkatotop::before{content:'';display:inline-block;position:absolute;width:100%;height:100%;border-radius:100%;top:0;left:0}
.vikkatotop:hover::before{-webkit-animation:sonar-effect 1s ease-in-out .1s infinite;animation:sonar-effect 1s ease-in-out .1s infinite}
.vikkatotop{bottom:20px;right:20px;}
</style>
<div class='vikkatotop hider'>
<i class='fa fa-angle-up'></i>
</div>
<script type='text/javascript'>
//<![CDATA[
// Back to top button
$(function(){$(window).scroll(function(){$(this).scrollTop()>600?$(".vikkatotop").addClass('arlniainf'):$(".vikkatotop").removeClass('arlniainf')}),$(".vikkatotop").click(function(){return $("html,body").animate({scrollTop:0},600),!1})});
//]]>
</script>

Bước 3: Cuối cùng các bạn chọn Lưu chủ đề và load lại trang của mình để xem thành quả. Chúc các bạn thành công

Hướng dẫn tạo Menu cho Blogspot bằng Widget tùy chỉnh

Bài viết này sẽ hướng dẫn các bạn tạo cho mình Menu blogspot chuyên nghiệp. Như các bạn đã biết việc tạo Menu cho blogspot có rất nhiều cách thường là sử dụng chỉnh sửa trong code là chính. Đối với những bạn lập trình viên hoặc những bạn có kinh nghiệm về Blogger thì không có gì là khó nhưng đối với các bạn mới bước tìm hiểu về blogger cũng như thiết kế web thì không hề dễ dàng tý nào. Bây giờ chúng ta bắt đầu việc tạo Menu này nhé, thực hiện theo các bước bên dưới đây.

Bước 1: Vào chủ đề - Chỉnh sửa HTML . Copy đoạn code bên dưới vào trước thẻ </body>

<script>
//<![CDATA[
$(document).ready(function(){
//this widget was built by Raintemplates.com
var searchtxt = "Search";
var _0xc283=['$.1y($.1m[":"],{o:k(a,c,b){U 0===$(a).n().1j().1o(b[3])}});k V(){$(".t j:H(:o(l))").B(k(){$(e).1x("j:o(l)").18&&$(e).i("a").2q("1h").1a(\'<h K="L://M.N.O/P/h" S="0 0 C.4 C.4" 1z="W" 1O="W"><1Q 29="2k.3 X.6 11.7 1p.5 21.2 X.6 0 F.8 11.7 1H.9 C.4 F.8 " G="#1M"/></h>\');$("<D/>",{I:$(e).1T(".t j:H(:o(l))"),1W:e})})}$(".t").B(k(){1X a=$(e).i("1Y");26(a.J(\':2a("2c")\'))V(),$(e).m("2m","2p"),$(e).m("f","2s"),$(e).m("1f-1g","u-1i"),$(e).i(".v-1k-1l").Z(),$(e).i(".v-1n").m("f","r-w"),$(e).i(".1q").Z(),a.I(\'\\1r!--1s v J 1t u.Q--\\1u<a R="//u.Q">1v 1w</a>\'),$(".x").18?$(e).T(\'<g f="x"></g>\'):$(1A).T(\'<g f="1B-1C x"></g>\'),$(".r-w D j D j a").B(k(){$(e).n($(e).n().1D(/[l]/,""))}),$(".r-w").1a(\'<g f="1E"><a R="1F:1G(0)" f="y-1I"><h G="#1J" S="0 0 z.A 1K.1L" K="L://M.N.O/P/h"><Y f="1N-1" d="1P,z.10.4,3.4,0,0,1,0-4.1R.1S,p.1U-.3-.1V.p,24.p,0,1,1,12.14,1Z.20.2,24.2,0,0,1-13.22-4.23-.p-.25.16,z.10.4,3.4,0,0,1-4.16,27.A,24.28.6,17.6,0,1,0,12.14,6.8,17.19,17.19,0,0,0,15.A,24.2b"></Y></h></a><E 2d-2e="2f-8" 2g="/y" f="2h-E" 2i="2j"><s f="2l-y-s 1b" 2n="q" 1b="\'+2o+\'" 1c="n" 1d=""><s 1d="2r" f="1e" 1c="1e"/></E></g>\');2t U!1;$(e).2u({2v:"1"})});',
"|","split","||||||||||||||this|class|div|svg|find|li|function|_|attr|text|startsWith|39|||input|LinkList|raintemplates|widget|nav|container|search|57|93|each|407|ul|form|112|fill|not|html|is|xmlns|http|www|w3|org|2000|com|href|viewBox|wrapInner|return|raintemplatesmenu|512|91|path|remove|68a3|203|33||53||81||length|62|append|placeholder|type|value|submit|data|version|hasdrop|linklist|trim|item|control|expr|content|indexOf|273|clear|x3c|This|by|x3e|Blogger|Templates|next|extend|width|idlist|rain|contain|replace|searchbox|javascript|void|315|box|dddddd|58|68|888|cls|height|M1|polygon|81L14|37|nextUntil|5l|39A24|appendTo|var|h2|48|8a24||86|33l||27L5|if|0ZM15|4A17|points|contains|4Z|Raintemplates|accept|charset|utf|action|navbar|method|get|386|sb|id|name|searchtxt|listmenu1|addClass|Search|menulist|else|css|opacity",
"","fromCharCode","replace","\\w+","\\b","g"];eval(function(d,e,a,c,b,f){b=function(a){return(a<e?_0xc283[4]:b(parseInt(a/e)))+(35<(a%=e)?String[_0xc283[5]](a+29):a.toString(36))};if(!_0xc283[4][_0xc283[6]](/^/,String)){for(;a--;)f[b(a)]=c[a]||b(a);c=[function(a){return f[a]}];b=function(){return _0xc283[7]};a=1}for(;a--;)c[a]&&(d=d[_0xc283[6]](new RegExp(_0xc283[8]+b(a)+_0xc283[8],_0xc283[9]),c[a]));return d}(_0xc283[0],62,156,_0xc283[3][_0xc283[2]](_0xc283[1]),0,{}));
});
//]]>
</script>

Bước 2:  Thêm CSS cho nó đẹp hơn ( Mặc định màu nên Menu là màu đen )

<style>
.rain-contain.container{
max-width:1040px;
margin:0 auto;
}
.LinkList{opacity:0;}
.menulist {
width:100%;
height:48px;
background:#333;
color:#fff;
position:relative;
}
.menulist h2 {display:none}
.menulist .r-nav ul li a:link, .menulist .r-nav ul li a:visited {
color:#fff;
text-decoration:none;
font-size:15px;
}
.menulist .r-nav ul li {
display:inline-block;
position:relative;
margin:0px 20px;
height:48px;
line-height:48px;
}
.menulist .r-nav ul li ul {
position:absolute;
left:-10px;
min-width: 250px;
background:#222;
opacity:0;
z-index:-1;
}
.menulist .r-nav ul li ul li {
display:block;
border-bottom: 1px solid #555;
}
.menulist .r-nav a:hover {
opacity:0.8;
-webkit-transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.2s ease-in-out 0s;
-o-transition: all 0.2s ease-in-out 0s;
-ms-transition: all 0.2s ease-in-out 0s;
transition: all 0.2s ease-in-out 0s;
}
.menulist .r-nav ul li ul li:last-child {
border:none;
}
.menulist .r-nav ul li:hover ul {
opacity:1;
z-index:10;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-animation-name: raintemplates-hang;
animation-name: raintemplates-hang;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
.hasdrop svg {
width:13px;
height:13px;
position:relative;
top:3px;
left:8px;
}
.menulist .r-nav ul li:hover svg{
-webkit-transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.2s ease-in-out 0s;
-o-transition: all 0.2s ease-in-out 0s;
-ms-transition: all 0.2s ease-in-out 0s;
transition: all 0.2s ease-in-out 0s;
}
.search-box svg {
display:none;
}
.r-nav {
position: relative;
width: 100%;
height: 100%;
}
.searchbox form, .searchbox input{
position: absolute;
right: 0;
top: 0;
bottom: 0;
margin-top: auto;
margin-bottom: auto;
}
.searchbox input.sb-search-input.placeholder {
height: 29px;
border: none;
padding-left: 12px;
font-size: 13px;
}
.searchbox .submit {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbtwUAyx3MVQUAzHk85JzaWrDQHkl5VVjUxs3Ku0BhiNZmksyG2r0FLbF6oWhnDBgiBETxs7c2IiaQIcCBCmuEtlVQxG59iSmvsL8KIZNhHClCWZ9WeH54ttGEh_ua9FGHWjbhO_0H2yWh/s50/search.png) no-repeat;
border: none;
height: 16px;
width: 16px;
background-size: 100%;
margin-right: 10px;
font-size: 0px;
}
@-webkit-keyframes raintemplates-hang {
0% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
50% {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
100% {
-webkit-transform: translateY(-2px);
transform: translateY(-2px);
}
}
@keyframes raintemplates-hang {
0% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
50% {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
100% {
-webkit-transform: translateY(-2px);
transform: translateY(-2px);
}
}</style>

Tiếp theo vào trong Bố cục thêm tiện ích - Link List ( Danh sách liên kết)

Phần tiêu đề bạn ghi đầy đủ tên như trong hình nhé.

Cách thêm Menu bạn làm như sau:

New Site Name : Tên menu chính ví dụ tôi đặt là " Trang chủ" sau đó add link

Tương tự bạn tạo thêm các nội dung khác: Ví dụ là là " Giới thiệu". 2 tên này sẽ nằm ngang theo thứ tự khi bạn tạo xong.

Tạo menu con (Sub menu) : ví dụ tôi muốn tạo 1 menu con có tên "Thư ngõ " nằm trong menu "Giới thiệu" . Cách tạo vẫn như cách 1 nhưng ta thêm dấu _ đằng trước nó ví dụ (_Giới thiệu ). Tương tự cho các menu con bên trong.

Bước 3: Thêm thư viện cho Menu 

Copy đoạn code bên dưới vào sau thẻ <head>

 <script src=”//code.jquery.com/jquery-1.8.3.min.js”></script>

Lưu ý: Nếu trong template của bạn đã có thư viện này thì vui lòng bỏ qua bước này.

Chúc các bạn thành công. Bạn có thể comments bên dưới để được hỗ trợ 

Xem demo tại đây: http://navigationdropdown.blogspot.com

Thanks ! https://raintemplates.com

Cách thêm Widget (thêm tiện ích) vào Blogspot

1. Cách thêm một tiện ích widget thông thường

Ở cách thêm tiện ích widget thông thường này thì khi thêm tiện ích sẽ xuất hiện toàn bộ web, từ trang chủ, bài viết, label ...

<b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='HTML99' locked='false' title='Xem nhiều trên PC8X' type='HTML'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<div class='title-left'><data:title/></div>
</b:if>
<div class='box-left'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>

 Xem nhiều trên PC8X là tiêu đề bạn đặt cho tiện ích

sidebar1, HTML99 là thứ tự của các layer widget. nếu save nó báo đỏ thì đổi số cho khác vì nó rùng lặp. khi tạo cái khác cũng thế

VD: tiện ích 1 là sidebar1, HTML99 thì tiện ích 2 là sidebar2, HTML100
HTML là tên của tiện ích

VD HTML là HTML/Javascript, nếu bạn muốn thêm nhãn thì thay Bằng Label. phần này hơi phức tạp nếu bạn mà làm không được thì cứ commen vào bên giới mình sẽ chỉ rỏ cho

Ở những cách sau đây là những cách chỉ thêm tiện ích vào một vị trí bất kỳ ví dụ như trang chủ hoặc là label, bài viết, trang...

1. Chỉ cho phép widget hiển thị ở trang chủ

<b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='HTML3' locked='false' title='Thêm tiện ích ở trang chủ' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
</b:section>

Để thêm bạn đầu tiên là phải xác định vị trí muốn thêm, như head, footer....(nếu không xác địch được thì sau khi thêm vào một vị trí cùng với các tiện ích có sẵn trên web (thêm vào đầu hoặc cuối các tiện ích có sẵn sau này cho dể chĩnh sữa) rồi bạn vào bố cụng để di chuyển đến nơi thích hợp)
sau khi xác định vị trí muốn thêm thì bạn hãy copy cã đoạn mã trên rồi dán vào

2. Chỉ cho phép widget hiển thị ở từng bài viết

<b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='HTML3' locked='false' title='Thêm tiện ích ở từng bài viết' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
</b:section>

 Đây là thủ thuật nhằm thêm tiện ích trên toàn bộ các bài viết:

3. Chỉ cho phép widget hiển thị ở những trang nhất định

<b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='HTML3' locked='false' title='Thêm tiện ích ở trang nhất định' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == "Link của bạn"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
</b:section>

4. Widget chỉ hiển thị trên các trang Label

<b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='HTML3' locked='false' title='Thêm tiện ích ở trên các label' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.searchLabel'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
</b:section>

 5. Widget chỉ hiển thị trên các trang Static pages

<b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='HTML3' locked='false' title='Thêm tiện ích ở static pages' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "static_page"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
</b:section>

 6. Widget hiển thị trên trang tìm kiếm

<b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='HTML3' locked='false' title='Thêm tiện ích ở trang tìm kiếm' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.searchQuery>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
</b:section>

 7. Widget chỉ hiển thị tại trang lưu trữ

<b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='HTML3' locked='false' title='Thêm tiện ích ở trang lưu trữ' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "archive"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
</b:section>

Tạo phân trang (Page Navigation) cho Blogspot

Nếu như blog của bạn có nhiều bài viết thì sẽ rất mất công cho người dùng khi muốn xem các bài viết cũ hơn trên blog của bạn. Tính năng bài đăng cũ hơn hay mới mơi không thể giải quyết hết vấn đề mà người đọc cần. Bài viết này mình sẽ hướng dẫn các bạn cách tạo phân trang cho blog của bạn rất đơn giản chỉ vài bước sau đây.

 Bước 1: Thêm Script

Copy đoạn code sau đây và dán vào trước thẻ </body> trong Template

<b:if cond='data:blog.pageType != &quot;item&quot;'>
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
 <script type='text/javascript'>
 //<![CDATA[
 var perPage=10;
 var numPages=2;
 var firstText ='First';
 var lastText ='Last';
 var prevText ='« Previous';
 var nextText ='Next »';
 var urlactivepage=location.href;
 var home_page="/";
if(typeof firstText=="undefined")firstText="First";if(typeof lastText=="undefined")lastText="Last";var noPage;var currentPage;var currentPageNo;var postLabel;pagecurrentg();function looppagecurrentg(pageInfo){var html='';pageNumber=parseInt(numPages/2);if(pageNumber==numPages-pageNumber){numPages=pageNumber*2+1}pageStart=currentPageNo-pageNumber;if(pageStart<1)pageStart=1;lastPageNo=parseInt(pageInfo/perPage)+1;if(lastPageNo-1==pageInfo/perPage)lastPageNo=lastPageNo-1;pageEnd=pageStart+numPages-1;if(pageEnd>lastPageNo)pageEnd=lastPageNo;html+="<span class='showpageOf'>Page "+currentPageNo+'/'+lastPageNo+"</span>";var prevNumber=parseInt(currentPageNo)-1;if(currentPageNo>1){if(currentPage=="page"){html+='<span class="showpage firstpage"><a href="'+home_page+'">'+firstText+'</a></span>'}else{html+='<span class="displaypageNum firstpage"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">'+firstText+'</a></span>'}}if(currentPageNo>2){if(currentPageNo==3){if(currentPage=="page"){html+='<span class="showpage"><a href="'+home_page+'">'+prevText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">'+prevText+'</a></span>'}}else{if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+prevNumber+');return false">'+prevText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+prevNumber+');return false">'+prevText+'</a></span>'}}}if(pageStart>1){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">1</a></span>'}}if(pageStart>2){html+=' ... '}for(var jj=pageStart;jj<=pageEnd;jj++){if(currentPageNo==jj){html+='<span class="pagecurrent">'+jj+'</span>'}else if(jj==1){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="displaypageNum"><a href="/search/label/'+postLabel+'?&max-results='+perPage+'">1</a></span>'}}else{if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+jj+');return false">'+jj+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+jj+');return false">'+jj+'</a></span>'}}}if(pageEnd<lastPageNo-1){html+='...'}if(pageEnd<lastPageNo){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+lastPageNo+');return false">'+lastPageNo+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+lastPageNo+');return false">'+lastPageNo+'</a></span>'}}var nextnumber=parseInt(currentPageNo)+1;if(currentPageNo<(lastPageNo-1)){if(currentPage=="page"){html+='<span class="displaypageNum"><a href="#" onclick="redirectpage('+nextnumber+');return false">'+nextText+'</a></span>'}else{html+='<span class="displaypageNum"><a href="#" onclick="redirectlabel('+nextnumber+');return false">'+nextText+'</a></span>'}}if(currentPageNo<lastPageNo){if(currentPage=="page"){html+='<span class="displaypageNum lastpage"><a href="#" onclick="redirectpage('+lastPageNo+');return false">'+lastText+'</a></span>'}else{html+='<span class="displaypageNum lastpage"><a href="#" onclick="redirectlabel('+lastPageNo+');return false">'+lastText+'</a></span>'}}var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}function totalcountdata(root){var feed=root.feed;var totaldata=parseInt(feed.openSearch$totalResults.$t,10);looppagecurrentg(totaldata)}function pagecurrentg(){var thisUrl=urlactivepage;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){postLabel=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{postLabel=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}if(thisUrl.indexOf("?q=")==-1&&thisUrl.indexOf(".html")==-1){if(thisUrl.indexOf("/search/label/")==-1){currentPage="page";if(urlactivepage.indexOf("#PageNo=")!=-1){currentPageNo=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{currentPageNo=1}document.write("<script src=\""+home_page+"feeds/posts/summary?max-results=1&alt=json-in-script&callback=totalcountdata\"><\/script>")}else{currentPage="label";if(thisUrl.indexOf("&max-results=")==-1){perPage=20}if(urlactivepage.indexOf("#PageNo=")!=-1){currentPageNo=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{currentPageNo=1}document.write('<script src="'+home_page+'feeds/posts/summary/-/'+postLabel+'?alt=json-in-script&callback=totalcountdata&max-results=1" ><\/script>')}}}function redirectpage(numberpage){jsonstart=(numberpage-1)*perPage;noPage=numberpage;var nameBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nameBody.appendChild(newInclude)}function redirectlabel(numberpage){jsonstart=(numberpage-1)*perPage;noPage=numberpage;var nameBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary/-/"+postLabel+"?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nameBody.appendChild(newInclude)}function finddatepost(root){post=root.feed.entry[0];var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);var timestamp=encodeURIComponent(timestamp1);if(currentPage=="page"){var pAddress="/search?updated-max="+timestamp+"&max-results="+perPage+"#PageNo="+noPage}else{var pAddress="/search/label/"+postLabel+"?updated-max="+timestamp+"&max-results="+perPage+"#PageNo="+noPage}location.href=pAddress}
 //]]>
 </script>
 </b:if>
 </b:if>

 Bước 2: Chỉnh sửa lại URl Label

Ở bước này chúng ta sẽ sửa lỗi không hiển thị phân trang khi xem các bài viết trong 1 Label. Các bạn hãy tìm và sửa tất cả

expr:href='data:label.url'

và bạn sửa nó thành

expr:href='data:label.url + "?&amp;max-results=10"'

 Bước 3: Viết CSS

Chúng ta đều cần phải ngồi viết lại CSS cho nó để nó được đẹp hơn và hòa hợp với Template hiện tại. Vì vậy, mỗi người sẽ có một cách viết CSS riêng. Tuy nhiên, mình cũng xin được chia sẻ đoạn CSS mà mình đã viết sẵn cho những bạn không biết viết CSS hay là không có thời gian,…

Các bạn chỉ việc copy đoạn CSS dưới đây và dán vào trước thẻ ]]></b:skin> của mình là được.

#blog-pager {clear:both;margin:30px auto;text-align:center; padding: 7px;}
 .blog-pager {background: none;}
 .displaypageNum a, .showpage a, .pagecurrent {font-size: 14px;padding: 5px 12px;margin-right:5px; color: #666; background-color:#eee;}
 .displaypageNum a:hover, .showpage a:hover, .pagecurrent {background:#359BED;text-decoration:none;color: #fff;}
 #blog-pager .pagecurrent {font-weight:bold;color: #fff;background:#359BED;}
 .showpageOf {display:none!important}
 #blog-pager .pages {border:none;}

 Đây là một thủ thuật bạn nên thực hiện nếu như blog của mình có nhiều bài viết nhé! Chúc các bạn thành công!

Bài viết tham khảo nguồn tại : https://mocgin.com

Hướng dẫn tạo Recent Post hiển thị theo Label

Bước 1: Vào blogger.com > Template > Edit HTML
Bước 2: Dán code bên dưới vào trên thẻ </head>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
.newarlinalabel1 ul,.newarlinalabel2 ul{list-style:none;margin:0;padding:0} .newarlinalabel1 li,.newarlinalabel2 li{margin:0;padding:0;} .newarlinalabel1 .widget,.newarlinalabel2 .widget{margin:0;padding:0} .newarlinalabel1 .widget-content,.newarlinalabel2 .widget-content{border:1px solid #e9e9e9;padding:20px;margin:0;word-wrap:break-word;overflow:hidden} .newarlinalabel1 h2,.newarlinalabel2 h2,.newarlinalabel3 h2{position:relative;margin:0;padding:15px 20px;font-size:16px;font-weight:700;text-transform:uppercase;color:#333;border:1px solid #e9e9e9;border-bottom:0} .newarlinalabel2 h2,.newarlinalabel3 h2{margin:20px 0 0 0;} .newarlinalabel1 h2:before,.newarlinalabel2 h2:before,.newarlinalabel3 h2:before{content:&#39;\f108&#39;;right:10px;bottom:0;font-family:FontAwesome;font-style:normal;font-weight:normal;margin:0 10px 0 0;color:#ff675c;} .newarlinalabel2 h2:before{content:&#39;\f0c3&#39;;}.newarlinalabel3 h2:before{content:&#39;\f143&#39;;} .newarlinalabel1 .index,.newarlinalabel2 .index{font-size:10px;float:right;font-weight:400;} .newarlinalabel1 .index a,.newarlinalabel2 .index a{display:flex;color:#039be5;padding:3px 8px;border-radius:2px;font-weight:400;border:1px solid #29b6f6} .newarlinalabel2 .index a{color:#ef6c00;border-color:#ffa726} .newarlinalabel1 .index a:hover{background:#039be5;color:#fff;border-color:transparent} .newarlinalabel2 .index a:hover{background:#ef6c00;color:#fff;border-color:transparent} .newarlinalabel1 .index a:after{content:&quot;\f105&quot;;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:5px} .newarlinalabel2 .index a:after{content:&quot;\f105&quot;;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:6px} .newarlinalabel2 span.newarlina_meta_comment a:hover{color:#38761d!important} .newarlinalabel2 ul.newarlina_thumbs li a:hover,.newarlinalabel2 ul.newarlina_thumbs2 li a:hover{color:#ff675c;text-decoration:none} .newarlina_left{width:280px;width:45.7%;float:left;margin:0;padding:0 20px 0 0;border-right:1px solid #e9e9e9} .newarlina_right{width:250px;width:47.5%;float:right;margin:0;padding:0} ul.newarlina_thumbs{margin:0;padding:0} ul.newarlina_thumbs li,ul.newarlina_thumbs2{margin:0;padding:0} ul.newarlina_thumbs .cat_thumb{position:relative;margin:0 0 15px;padding:0;width:280px;height:200px} ul.newarlina_thumbs .cat_thumb img{height:auto;width:100%;transition:all 0.2s} ul.newarlina_thumbs .cat_thumb img:hover{opacity:.9;} ul.newarlina_thumbs2 li{margin:0 0 10px;padding:0 0 10px;border-bottom:1px solid #e9e9e9} ul.newarlina_thumbs2 li:last-child{border-bottom:none;margin:0;padding:0} ul.newarlina_thumbs2 .cat_thumb2{float:left;margin:0 10px 0 0;width:62px;height:72px;overflow:hidden} ul.newarlina_thumbs2 .cat_thumb2 img{height:auto;transition:all .2s} ul.newarlina_thumbs2 .cat_thumb2 img:hover{opacity:.9;} span.newarlina_title{font-family:&#39;Roboto Condensed&#39;,sans-serif;font-size:20px;font-weight:700;display:block;margin:0 0 10px;line-height:normal;text-transform:none} span.newarlina_title2{font-size:16px;line-height:1.4em;margin:0 0 3px} span.newarlina_title a{color:#333} span.newarlina_title a:hover{color:#ff675c;text-decoration:none} span.newarlina_summary{display:block;line-height:1.6em;font-size:13px;text-overflow:ellipsis;margin:10px 0 0 0} span.newarlina_meta{display:block;font-family:&#39;Roboto Condensed&#39;,sans-serif;font-size:11px;font-weight:400;color:#aaa;text-transform:uppercase} span.newarlina_meta a{color:#aaa;display:inline-block} span.newarlina_meta_date,span.newarlina_meta_comment,span.newarlina_meta_more{display:inline-block;margin-right:10px} span.newarlina_meta_comment a:before{content:&quot;\f0e6&quot;;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:5px} span.newarlina_meta_comment a:hover{color:#ff675c!important} span.newarlina_meta_date:before{content:&quot;\f133&quot;;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:5px} ul.newarlina_thumbs2 li a:hover,ul.newarlina_thumbs li a:hover{color:#ff675c;text-decoration:none} @media screen and (max-width:1024px) { .newarlinalabel1 .widget-content, .newarlinalabel2 .widget-content {padding:20px 25px;} .newarlina_left {width:50%;float:left;margin:0;padding:0;border-right:none} .newarlina_right {width:46%;float:right;margin:0;padding:0;} ul.newarlina_thumbs .cat_thumb {width:100%;height:auto;} ul.newarlina_thumbs .cat_thumb img {width:100%;height:auto;} ul.newarlina_thumbs li {margin:0;padding:0;} span.newarlina_title2 {font-size:20px;line-height:1.2em;} span.newarlina_summary {font-size:14px;}} @media only screen and (max-width:768px){ .newarlinalabel1 .widget-content,.newarlinalabel2 .widget-content{padding:10px 20px} .newarlina_right{width:100%;float:left;margin:0;padding:0} ul.newarlina_thumbs2 li{border-bottom:0} span.newarlina_summary,.newarlina_left{display:none} span.newarlina_title{margin:0 0 5px} ul.newarlina_thumbs li{margin:0 0 10px;padding:0 0 10px;border-bottom:0} span.newarlina_title2{font-size:18px;line-height:1.2em}} @media only screen and (max-width:480px){ #newarlinalabel1-wrapper,#newarlinalabel2-wrapper{display:none}} @media only screen and (max-width:320px){ .newarlinalabel1 .widget-content,.newarlinalabel2 .widget-content{padding:10px 20px} .newarlinalabel1 h2,.newarlinalabel2 h2{padding:10px 20px 1px 20px} .newarlina_right{width:100%;float:left;margin:0;padding:0} ul.newarlina_thumbs li{margin:0 0 10px;padding:0 0 10px;} span.newarlina_title2{font-size:18px;line-height:1.2em}} @media screen and (max-width:260px) { .newarlinalabel1 .widget-content,.newarlinalabel2 .widget-content{padding:10px} .newarlinalabel1 h2,.newarlinalabel2 h2{padding:10px 10px 1px 10px} .newarlina_right{width:100%;float:left;margin:0;padding:0} ul.newarlina_thumbs li{margin:0 0 10px;padding:0 0 10px;} span.newarlina_title2{font-size:18px;line-height:1.2em}}
</style>
</b:if>
</b:if>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
//<![CDATA[ function labelthumbs(t){for(var e=0;e<numposts;e++){var n,r=t.feed.entry[e],m=r.title.$t;if(e==t.feed.entry.length)break;for(var i=0;i<r.link.length;i++){if("replies"==r.link[i].rel&&"text/html"==r.link[i].type)var l=r.link[i].title,o=r.link[i].href;if("alternate"==r.link[i].rel){n=r.link[i].href;break}}var u;try{u=r.media$thumbnail.url,u=u.replace("/s72-c/","/w"+thumb_width+"-h"+thumb_height+"-c/")}catch(h){s=r.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:no_thumb}var p=r.published.$t,w=p.substring(0,4),_=p.substring(5,7),f=p.substring(8,10),g=new Array;g[1]="January",g[2]="February",g[3]="March",g[4]="April",g[5]="May",g[6]="June",g[7]="July",g[8]="August",g[9]="September",g[10]="October",g[11]="November",g[12]="December",document.write('<span class="newarlina_left">'),document.write('<ul class="newarlina_thumbs">'),document.write("<li>"),1==showpostthumbnails&&document.write('<a href="'+n+'"><div class="cat_thumb"><span class="rollover"></span><img width="'+thumb_width+'" height="'+thumb_height+'" alt="'+m+'" src="'+u+'"/></div></a>'),document.write('<span class="newarlina_title"><a href="'+n+'" target ="_top">'+m+"</a></span>");var v="";if(document.write('<span class="newarlina_meta">'),1==showpostdate&&(v=v+'<span class="newarlina_meta_date">'+g[parseInt(_)]+" "+f+", "+w+"</span>"),1==showcommentnum&&("1 Comments"==l&&(l="1 Comments"),"0 Comments"==l&&(l="0 Comments"),showcomment='<span class="newarlina_meta_comment"><a href="'+o+'">'+l+"</a></span>",v+=showcomment),1==displaymore&&(v=v+'<span class="newarlina_meta_more"><a href="'+n+'" class="url" target ="_top">Read More...</a></span>'),document.write(v),document.write("</span>"),document.write('<span class="newarlina_summary">'),"content"in r)var y=r.content.$t;else if("summary"in r)var y=r.summary.$t;else var y="";var k=/<\S[^>]*>/g;if(y=y.replace(k,""),1==showpostsummary)if(y.length<numchars)document.write(""),document.write(y),document.write("");else{document.write(""),y=y.substring(0,numchars);var $=y.lastIndexOf(" ");y=y.substring(0,$),document.write(y+"..."),document.write("")}document.write("</span>"),document.write("</li>"),document.write("</ul>"),document.write("</span>")}document.write('<span class="newarlina_right">'),document.write('<ul class="newarlina_thumbs2">');for(var e=1;e<numposts2;e++){var n,r=t.feed.entry[e],m=r.title.$t;if(e==t.feed.entry.length)break;for(var i=1;i<r.link.length;i++){if("replies"==r.link[i].rel&&"text/html"==r.link[i].type)var l=r.link[i].title,o=r.link[i].href;if("alternate"==r.link[i].rel){n=r.link[i].href;break}}var x;try{x=r.media$thumbnail.url.replace("/s72-c/","/w"+thumb_width2+"-h"+thumb_height2+"-c/")}catch(h){s=r.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),x=-1!=a&&-1!=b&&-1!=c&&""!=d?d:no_thumb2}var p=r.published.$t,w=p.substring(0,4),_=p.substring(5,7),f=p.substring(8,10);1==showpostthumbnails2&&document.write('<a href="'+n+'"><div class="cat_thumb2"><img width="'+thumb_width2+'" height="'+thumb_height2+'" alt="'+m+'" src="'+x+'"/></div></a>'),document.write("<li>"),document.write('<span class="newarlina_title newarlina_title2"><a href="'+n+'" target ="_top">'+m+"</a></span>");var v="";document.write('<span class="newarlina_meta newarlina_meta2">'),1==showpostdate2&&(v=v+'<span class="newarlina_meta_date">'+g[parseInt(_)]+" "+f+", "+w+"</span>"),1==showcommentnum2&&("1 Comment"==l&&(l="1 Comments"),"0 Comment"==l&&(l="0 Comments"),showcomment='<span class="newarlina_meta_comment newarlina_meta_comment2"><a href="'+o+'">'+l+"</a></span>",v+=showcomment),1==displaymore2&&(v=v+'<span class="newarlina_meta_more newarlina_meta_more2"><a href="'+n+'" class="url" target ="_top">Read More...</a></span>'),document.write(v),document.write("</span>"),document.write("</li>")}document.write("</ul>"),document.write("</span>")} //]]>
</script>
<script type='text/javascript'> var numposts=1,numposts2=6,showpostthumbnails=!0,showpostthumbnails2=!1,displaymore=!1,displaymore2=!1,showcommentnum=!0,showcommentnum2=!1,showpostdate=!0,showpostdate2=!0,showpostsummary=!0,numchars=150,thumb_width=280,thumb_height=200,thumb_width2=62,thumb_height2=62,no_thumb=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUjNI4QPq4HlogebY-I7FhqN1d5-Is96Jm4Wak86uVhNZ_TfRnlceesjqEGqfcxF7EHvWrKIS2ZZU4og7kfPa2nV4DttjWN-3B9ss0Ss256cvk9eoX2LHqrsU-_S2cyx22GpiNENQkOLLa/s1600/newarlina_thumb.png&quot;,no_thumb2=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPW7FdOFXkf3ov5zQpnoGMZuxITGObV8huJzPR7BHmKrHWRFQZPo-p82Z2LROj7am7Qg55fhZSQCbJSi69-cRGF6uCcFn_G4Ew4aaN8vClAPY8hwdrxFowOWCqUi3riJsu1SYws0mmgE_n/s1600/newarlinathumb_small.png&quot;; </script>
</b:if>
</b:if>

Bước 3: Sao chép mã dưới đây vào trước 

<b:section class='main' id='main' maxwidgets='3' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='newarlinalabel1-wrapper'>
<b:section class='newarlinalabel1' id='newarlinalabel1' maxwidgets='1' showaddelement='yes'>
<b:widget id='HTML80' locked='false' title='Template' type='HTML'>
<b:includable id='main'>
<h2><span class='index'>&lt;a href=&#39;/search/label/<data:content/>?&amp;max-results=8&#39;&gt;View All&lt;/a&gt;</span><data:content/></h2>
<div class='widget-content'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/<data:content/>?orderby=published&amp;alt=json-in-script&amp;callback=labelthumbs\&quot;&gt;&lt;\/script&gt;&quot;); </script>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
<div id='newarlinalabel2-wrapper'>
<b:section class='newarlinalabel2' id='newarlinalabel2' maxwidgets='1' showaddelement='yes'>
<b:widget id='HTML81' locked='false' title='Tips Blogger' type='HTML'>
<b:includable id='main'>
<h2><span class='index'>&lt;a href=&#39;/search/label/<data:content/>?&amp;max-results=8&#39;&gt;View All&lt;/a&gt;</span><data:content/></h2>
<div class='widget-content'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/<data:content/>?orderby=published&amp;alt=json-in-script&amp;callback=labelthumbs\&quot;&gt;&lt;\/script&gt;&quot;); </script>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
</b:if>

Tiếp theo, trở ra phần Bố cục và thêm tiện ích vào, bạn gọi label ra, bằng cách điền tên label bạn muốn hiển thị theo nhãn.

Share code pháo hoa trang trí tết năm cho website

Mình sưu tầm được một code pháo hoa khá đẹp chèn vào website cho ngày tết thêm lung linh. Nay mình chia sẻ lại cho những bạn làm Webiste muốn trang trí cho ngôi nhà thứ 2 của mình thêm lộng lẫy lung linh huyền ảo. Sau đây mình sẽ hướng dẫn cho các bạn cách tạo pháo hoa để tạo không khí tết cho Webiste nhé.

B1: Trước tiên bạn cần tạo 1 file tên phaohoa.js (tên gì cũng được miễn là file có đuôi .js là được), nội dung code copy ở dưới nhé. Rồi up lên Hosting. Nếu xài wordpress thì up vào trong thư mục theme cho dễ quản lý nhé.

<script>
// <![CDATA[
var bits=80; // how many bits
var speed=33; // how fast - smaller is faster
var bangs=5; // how many can be launched simultaneously (note that using too many can slow the script down)
var colours=new Array("#03f", "#f03", "#0e0", "#93f", "#0cf", "#f93", "#f0c");
//                     blue    red     green   purple  cyan    orange  pink

/****************************
*      Fireworks Effect     *
*(c)2004-14 mf2fm web-design*
*  http://www.mf2fm.com/rv  *
* DON'T EDIT BELOW THIS BOX *
****************************/
var bangheight=new Array();
var intensity=new Array();
var colour=new Array();
var Xpos=new Array();
var Ypos=new Array();
var dX=new Array();
var dY=new Array();
var stars=new Array();
var decay=new Array();
var swide=1000;
var shigh=600;
var boddie;

if (typeof('addRVLoadEvent')!='function') function addRVLoadEvent(funky) {
  var oldonload=window.onload;
  if (typeof(oldonload)!='function') window.onload=funky;
  else window.onload=function() {
    if (oldonload) oldonload();
    funky();
  }
}

addRVLoadEvent(light_blue_touchpaper);

function light_blue_touchpaper() { if (document.getElementById) {
  var i;
  boddie=document.createElement("div");
  boddie.style.position="fixed";
  boddie.style.top="0px";
  boddie.style.left="0px";
  boddie.style.overflow="visible";
  boddie.style.zIndex = '9999';
  boddie.style.width="1px";
  boddie.style.height="1px";
  boddie.style.backgroundColor="transparent";
  document.body.appendChild(boddie);
  set_width();
  for (i=0; i<bangs; i++) {
    write_fire(i);
    launch(i);
    setInterval('stepthrough('+i+')', speed);
  }
}}

function write_fire(N) {
  var i, rlef, rdow;
  stars[N+'r']=createDiv('|', 12);
  boddie.appendChild(stars[N+'r']);
  for (i=bits*N; i<bits+bits*N; i++) {
    stars[i]=createDiv('*', 13);
    boddie.appendChild(stars[i]);
  }
}

function createDiv(char, size) {
  var div=document.createElement("div");
  div.style.font=size+"px monospace";
  div.style.position="absolute";
  div.style.zIndex = '9999';
  div.style.backgroundColor="transparent";
  div.appendChild(document.createTextNode(char));
  return (div);
}

function launch(N) {
  colour[N]=Math.floor(Math.random()*colours.length);
  Xpos[N+"r"]=swide*0.5;
  Ypos[N+"r"]=shigh-5;
  bangheight[N]=Math.round((0.5+Math.random())*shigh*0.4);
  dX[N+"r"]=(Math.random()-0.5)*swide/bangheight[N];
  if (dX[N+"r"]>1.25) stars[N+"r"].firstChild.nodeValue="/";
  else if (dX[N+"r"]<-1.25) stars[N+"r"].firstChild.nodeValue="\\";
  else stars[N+"r"].firstChild.nodeValue="|";
  stars[N+"r"].style.color=colours[colour[N]];
}

function bang(N) {
  var i, Z, A=0;
  for (i=bits*N; i<bits+bits*N; i++) {
    Z=stars[i].style;
    Z.left=Xpos[i]+"px";
    Z.top=Ypos[i]+"px";
    if (decay[i]) decay[i]--;
    else A++;
    if (decay[i]==15) Z.fontSize="7px";
    else if (decay[i]==7) Z.fontSize="2px";
    else if (decay[i]==1) Z.visibility="hidden";
    if (decay[i]>1 && Math.random()<.1) {
       Z.visibility="hidden";
       setTimeout('stars['+i+'].style.visibility="visible"', speed-1);
    }
    Xpos[i]+=dX[i];
    Ypos[i]+=(dY[i]+=1.25/intensity[N]);

  }
  if (A!=bits) setTimeout("bang("+N+")", speed);
}

function stepthrough(N) {
  var i, M, Z;
  var oldx=Xpos[N+"r"];
  var oldy=Ypos[N+"r"];
  Xpos[N+"r"]+=dX[N+"r"];
  Ypos[N+"r"]-=4;
  if (Ypos[N+"r"]<bangheight[N]) {
    M=Math.floor(Math.random()*3*colours.length);
    intensity[N]=5+Math.random()*4;
    for (i=N*bits; i<bits+bits*N; i++) {
      Xpos[i]=Xpos[N+"r"];
      Ypos[i]=Ypos[N+"r"];
      dY[i]=(Math.random()-0.5)*intensity[N];
      dX[i]=(Math.random()-0.5)*(intensity[N]-Math.abs(dY[i]))*1.25;
      decay[i]=16+Math.floor(Math.random()*16);
      Z=stars[i];
      if (M<colours.length) Z.style.color=colours[i%2?colour[N]:M];
      else if (M<2*colours.length) Z.style.color=colours[colour[N]];
      else Z.style.color=colours[i%colours.length];
      Z.style.fontSize="13px";
      Z.style.visibility="visible";
    }
    bang(N);
    launch(N);
  }
  stars[N+"r"].style.left=oldx+"px";
  stars[N+"r"].style.top=oldy+"px";
}

window.onresize=set_width;
function set_width() {
  var sw_min=999999;
  var sh_min=999999;
  if (document.documentElement && document.documentElement.clientWidth) {
    if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth;
    if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight;
  }
  if (typeof(self.innerWidth)!="undefined" && self.innerWidth) {
    if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth;
    if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight;
  }
  if (document.body.clientWidth) {
    if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth;
    if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight;
  }
  if (sw_min==999999 || sh_min==999999) {
    sw_min=800;
    sh_min=600;
  }
  swide=sw_min;
  shigh=sh_min;
}
// ]]>
</script>

 B2: Chèn đoạn code dưới đây vào dưới thẻ body của trang Web
Lưu ý: src=”link den file .js” đây là đường dẫn của file phaohoa.js mà bạn up lên Website, nhớ thay đường dẫn cho đúng nhé.

<script src="link den file .js"></script>
<script type="text/javascript">
var bgBegin = 22;
var bgEnd = 31;
var bgTetId = 31;
var bgTetUrl = '/banner/';
document.body.style.backgroundImage = 'url(' + bgTetUrl + bgTetId + '.jpg)';
document.body.style.backgroundAttachment = 'fixed';
document.body.style.backgroundSize = 'cover';
setInterval(function(){
    if (bgTetId == bgEnd) bgTetId = bgBegin;
    document.body.style.backgroundImage = 'url(' + bgTetUrl + bgTetId + '.jpg)';
    document.body.style.backgroundAttachment = 'fixed';
    document.body.style.backgroundSize = 'cover';
    bgTetId++;
}, 15000);
</script>

Bây giờ bạn có thể mở lại Website và nhấn F5 để refresh và xem sự thay đổi nhé. Chúc bạn thành công!