Phan Nhật Chánh - Official website: Blogger
Phan Nhật Chánh - Official website

Sử dụng b:includable và b:include trong Blogspot

   Feb 6, 2016   
Trong hướng dẫn này, tôi chỉ cho bạn cách sử dụng b:includableb:include để tùy chỉnh mẫu Blogspot một cách hiệu quả. Với cách sử dụng này, bạn dể dàng quản lý cũng như chỉnh sửa mẫu của bạn nếu bạn muốn thay đổi nó.
Khi bạn muốn sử dụng một đoạn mã nào đó nhiều lần trong mẫu của bạn, thì việc lặp đi lặp lại một đoạn mã là điều không tránh khỏi. Trong Blogger XML có 2 thẻ b:includableb:include, nó sẽ giúp bạn dể dàng hơn trong việc chỉnh sửa cũng như tối ưu hơn cho template của bạn.

Tạo Breaking News cho Blogspot

   May 12, 2015   
Tiện ích Breaking news thường được sử dụng trên các trang tin tức, nó thường được đặt trên cùng template với tiêu đề như: Tin hót, Tiêu điểm, Breaking news,...dùng để hiển thị các bài viết mới nhất, các bài viết trọng tâm hoặc các bài viết của một chuyên mục nào đó,... kèm theo là một hiệu ứng jquery đẹp mắt, điều này góp phần làm tăng tính tương tác cũng như tính chuyên nghiệp. Nếu bạn muốn có một tiện ích Breaking news cho blog của bạn, chỉ cần làm theo các bước đơn giản dưới đây
tien ich breaking news cho blogspot, huong dan cach tao breaking news cho blogspot, widget breaking news for blogspot

Pinterest - Chèn nút "Pin it" cho hình ảnh trên blog của bạn

   Apr 25, 2015   
Pinterest là một trang mạng xã hội chia sẻ hình ảnh, thông qua Pinterest người dùng có thể chia sẻ những bức ảnh và sắp xếp chúng thành những bản tin khác nhau. Với mỗi hình ảnh đưa lên đều cho phép gắn liên kết trỏ về website và liên kết này có giá trị rất cao về cả traffic và backlink. Vì vậy chèn nút Pin it vào ảnh cho blog sẽ rất có lợi cho SEO. Hôm nay, pnc sẽ hướng dẫn cách chèn nút “Pin it” tự động cho từng bức ảnh trong blog của bạn.

Pinterest huong dan chen nut Pin it cho hinh anh cua blogger, Pinterest pin it blogspot, cach chen pin it cho blogspot

Cách 1: Sử dụng công cụ Shareaholic

Nếu bạn đã sử dụng các công cụ Shareaholic, hãy làm theo các bước đơn giản dưới đây để thêm nút Pin it vào hình ảnh (Nếu bạn chưa có tài khoản Shareaholic thì có thể đăng ký tại đây)
1. Đăng nhập vào tài khoản Shareaholic của bạn.
2. Nhấp vào Setting biểu tượng ở góc trên bên phải (hoặc click vào đây).
3. Bấm vào nút Site Tools
4. Tiếp theo, nhấn vào nút +Add Website để thêm blog của bạn và nhấn Continue
  • DOMAIN: Địa chỉ blog của bạn
  • NAME: tên blog của bạn
  • FLATFORM: chọn nền tảng Blogger
  • CONTENT CATEGORY: nội dung blog bạn chia sẻ
  • CONTENT LANGUAGE: Ngôn ngữ
huong dan chen nut pin it cho hinh anh blogspot, Pinterest pin it blogspot, cach chen pin it cho blogspot
- Xác minh trang web của bạn bằng cách chèn đoạn mã dưới đây vào trước thẻ </head> trong mẫu của bạn (thay đổi đoạn màu đỏ bằng Site ID của bạn) và nhấn Verify Site để xác minh
<meta name='shareaholic:site_id' content='ca08ce11cc98198581a18ece230ab4e2' />
huong dan chen nut pin it cho hinh anh blogspot, Pinterest pin it blogspot, cach chen pin it cho blogspot
- Tiếp theo, chọn Setting
huong dan chen nut pin it cho hinh anh blogspot, Pinterest pin it blogspot, cach chen pin it cho blogspot
- Chuyển sang tag Sharing và đánh dấu chọn Shareable Images
huong dan chen nut pin it cho hinh anh blogspot, Pinterest pin it blogspot, cach chen pin it cho blogspot
- Bấm Save Settings để các cài đặt có hiệu lực
- Cuối cùng, bấm vào nút Get Setup Code và copy đoạn code nó cung cấp

huong dan chen nut pin it cho hinh anh blogspot, Pinterest pin it blogspot, cach chen pin it cho blogspot

- Vào Blogspot >> Bố cục >> Thêm tiện ích >> HTML/Javascript và Paste(dán) đoạn mã vừa copy ở bước trên vào Lưu lại (hoặc vào Mẫu >> Chỉnh sửa HTML và dán đoạn mã vào trước </body>)
huong dan chen nut pin it cho hinh anh blogspot, Pinterest pin it blogspot, cach chen pin it cho blogspot
- Xem kết quả, nếu hình ảnh trên blog của bạn xuất hiện nút "Pin it" như hình dưới đây là bạn đả thành công
huong dan chen nut pin it cho hinh anh blogspot, Pinterest pin it blogspot, cach chen pin it cho blogspot
Chú ý:
- Để nút "Pin it" xuất hiện, hình ảnh trên blog của bạn phải có kích thước tối thiểu 120x80 pixel
- Nút "Pin it" sẻ không xuất hiện khi bạn duyệt blog bằng thiết bị thông minh như điện thoại di động hoặc máy tính bảng
Mẹo:
- Bạn có thể vô hiệu nút "Pin it" cho bất kỳ hình ảnh nào bằng cách thêm
<img src="foo.jpg" nopin="nopin" />
- Và để vô hiệu nút "Pin it" cho tất cả hình ảnh trên trang bằng cách thêm meta tag dưới đây vào trước thẻ </head>
<meta name="pinterest" content="nopin" />

Cách 2: Thêm nút "Pin it" cho hình ảnh với javascript

- Để thêm nút "Pin it" cho hình ảnh chỉ cần: Đăng nhập vào Blogger >> Mẫu >> Chỉnh sửa HTML thêm đoạn mã dưới đây vào trước thẻ </body> và Lưu lại
<script>
//<![CDATA[
var custom_pinit_button = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhauiR7y3NrCbyVwaUHJNNCqmhHUTrv34zJN-4C6WYlLCBuJ0JuVWwYZoaOgwM6uC-uTH_HiVMRQsfvRy6owZuRckfSpuo6mQviOinSmULi8j009QNkD2lR1Kl1lL-2xdbivL7ucXI1d7S/s1600/pinit-button.png"; // Nút Pin it
var pinit_button_position = "center"; // Vị trí nút Pin it (topleft,topright,center,bottomleft,bottomright)
var pinit_button_before = "";
var pinit_button_after = "";
//]]>
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
<script id='pinit-img-button' src='https://nhatchanh.googlecode.com/svn/blog/pinterest-button.js' type='text/javascript'>
</script>
Bạn có thể vô hiệu nút "Pin it" cho bất kỳ hình ảnh nào bằng cách thêm class="nopin" cho thẻ <img>
<img src="foo.jpg" class="nopin" />

Cách 3: Sử dụng Widget builder của Pinterest

- Trước tiên, truy cập vào địa chỉ: https://business.pinterest.com/en/widget-builder#do_pin_it_button
- Tại phần Button Type chọn tag Image Hover Chỉnh sửa kiểu dáng nút Pin it ở phần Appearance và rê chuột qua ảnh ở phần Preview để xem kết quả hình ảnh nút Pin it!
huong dan chen nut pin it cho hinh anh blogspot, Pinterest pin it blogspot, cach chen pin it cho blogspot
- Sau khi ưng ý với kết quả vừa chỉnh sửa, copy đoạn mã Pinterest cung cấp
- Đăng nhập Blogger >> Mẫu >> Chỉnh sửa HTML và Paste(dán) nó vào trước </body> >> Lưu mẫu
<!-- Please call pinit.js only once per page -->
<script type="text/javascript" async="async" defer="defer" data-pin-color="red" data-pin-height="28" data-pin-hover="true" src="//assets.pinterest.com/js/pinit.js"></script>
- Thêm async="async" defer="defer" như đoạn code trên để Lưu mẫu không bị báo lỗi
- Thêm thuộc tính nopin="nopin" cho thẻ hình ảnh <img> nếu không muốn hiển thị nút Pin it
<img src="foo.jpg" nopin="nopin" />

Hướng dẫn tạo Breadcrumbs cho Blogspot

   Mar 8, 2015   
Breadcrumb là gì và cách tạo Breadcrumb cho Blogspot như thế nào?
Breadcrumb là một đường dẫn đa cấp, nhằm giúp khách truy cập có thể biết được mình đang ở đâu, ở vị trí nào trên trang web, giúp khách truy cập dể dàng hơn trong việc tìm kiếm thông tin mà họ cần và có thể điều hướng khách truy cập di chuyển từ trang này trang khác một cách tiện lợi trên website của bạn.
Breadcrumb còn giúp google đánh giá cao hơn mức độ thân thiện đối với các công cụ tìm kiếm và breadcrumb còn có tác dụng giúp bạn seo bài viết tốt hơn.

Làm thế nào để tạo Breadcrumbs cho Blogspot, tạo Breadcrumbs cho Blogspot đơn giản nhanh chóng

Làm thế nào để tạo Breadcrumb cho blogspot?

Để tạo Breadcrumb cho blogspot bạn làm theo các bước sau:
- Đăng nhập vào Blogger >> Mẫu >> Chỉnh sửa HTML
- Tìm <b:includable id='backlinks' var='post'>...</b:includable> và thêm đoạn code dưới đây vào sau nó:
<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Trang chủ</a></span> » <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Trang chủ</a></span>
<b:loop values='data:post.labels' var='label'>
» <span typeof='v:Breadcrumb'><a expr:href='data:label.url + "?max-results=10"' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:loop>
» <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Trang chủ</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Trang chủ</a></span> » <span>Lưu trữ cho <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<span><a expr:href='data:blog.homepageUrl'>Trang chủ</a></span> » <span>Tất cả bài viết</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Trang chủ</a></span> » <span><data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
<div class='clear'/>
</b:if>
</b:includable>
Cách đơn giản để tạo Breadcrumb cho blogspot?
- Với đoạn mã trên Breadcrumb sẽ hiển thị ở trang: chi tiết bài viết, trang tĩnh (Static Pages), trang lưu trữ (Archive), trang Nhãn (Label) trong blog của bạn. - Như vậy là bạn đả hoàn thành việc thêm Breadcrumb cho blogpost, công việc tiếp theo là hiển thị breadcrumb cho blogspot ở vị trí mà bạn mong muốn.

Hiển thị Breadcrumb cho Blogspot

- Breadcrumb thường đặt ở phía trên, trước tiêu đề bài viết. - Tiếp theo, tìm <b:includable id='main' var='top'> và thêm đoạn <b:include data="posts" name="breadcrumb"/> vào phía sau nó tương tự như hình dưới đây
Hướng dẫn hiển thị Breadcrumb cho Blogspot
- Lưu template và xem kết quả. Ngoài ra, có thể sử dụng công cụ Google Rich Snippet Testing Tools để kiểm tra.
- Chúc thành công!

Chèn icon vào blog sử dụng Font Awesome

   Feb 28, 2015   
Font Awesome là một kiểu font giúp bạn chèn các icon vào trong trang web của bạn một cách dể dàng, nhanh, gọn lẹ mà không cần phải mất thời gian để thiết kế icon, nó là một thành phần mở rộng trong Bootstrap Framework.
su dung font awesome cho blogspot, font awesome blogger, bootstrap font awesome
- Để sử dụng Font Awesome cho blogspot, chỉ cần chèn đoạn mã phía dưới trước thẻ </head>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
- Chọn icon cần thiển thị (danh sách icon có rất nhiều icon cho bạn lựa chọn)
- Ví dụ để hiển thị icon: Icon camera-retro chỉ cần thêm <i class="fa fa-camera-retro"></i>
- Thay đổi kích thước icon thêm fa-lg, fa-2x, fa-3x, fa-4x, fa-5x Ví dụ:
<i class="fa fa-camera-retro fa-lg"></i>
<i class="fa fa-camera-retro fa-2x"></i>
<i class="fa fa-camera-retro fa-3x"></i>
<i class="fa fa-camera-retro fa-4x"></i>
<i class="fa fa-camera-retro fa-5x"></i>

Ví dụ tạo box thông báo với CSS3 và Font Awesome

CSS 3 Info Box với biểu tượng icon Font Awesome


- Vào Blogger >> Mẫu >> Chỉnh sửa HTML
- Tìm ]]></b:skin> hoặc </style> và đặt đoạn css dưới đây vào trước nó
.ghi-chu, .thong-tin, .canh-bao, .huong-dan, .cap-nhat {
display: block;
font-style: normal;
color: #333;
padding: 15px 18px 15px 48px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
position: relative;
border-radius:3px;
margin:0 0 10px;
color:#FFF
}
.ghi-chu:before, .thong-tin:before, .canh-bao:before, .huong-dan:before, .cap-nhat:before {
font-family:"FontAwesome";
display: block;
position: absolute;
top: 15px;
left: 16px;
color: rgba(0, 0, 0, 0.15);
font-size: 22px;
line-height: 1;
}
.ghi-chu:before {
content:'\f11d'
}
.thong-tin:before {
content:'\f05a'
}
.canh-bao:before {
content:'\f071'
}
.huong-dan:before {
content:'\f028'
}
.cap-nhat:before {
content:'\f085'
}
.ghi-chu {
background-color:#49A5D7
}
.thong-tin {
background-color:#FF9531
}
.canh-bao {
background-color:#B25A5A
}
.huong-dan {
background-color:#FAD163;
color: #000;
}
.cap-nhat {
background-color:#69A24A
}
- Sử dụng bằng cách:
<div class='ghi-chu'>. . Nội dung . .</div>

Chèn biểu mẫu liên hệ vào một trang cố định của Blogspot

   Jan 30, 2015   
Biểu mẫu liên hệ đã trở thành một tiện ích không thể thiếu đối với một trang web hay blog cá nhân. Đối với blogger, từ giữa năm 2013 thì Google đã chính thức tích hợp tiện ích Contact Form vào Blogspot, vì vậy việc thêm tiện ích này vào blog của bạn không có gì là khó khăn nữa.
Tuy vậy, tùy vào nhu cầu cá nhân mà bạn không muốn Biểu mẫu liên hệ xuất hiện trên sidebar hay footer mà chỉ muốn nó xuất hiện tại một trang cố định riêng lẽ độc lập. Vì thế, trong bài viết này mình sẽ hướng dẫn các bạn chèn Biễu mẫu liên hệ vào một trang riêng biệt cho blogspot (ở đây ta sẻ chèn nó vào trang tĩnh)

Chèn Biễu mẫu liên hệ vào trang tĩnh (Static Pages) của Blogspot

Để thêm Biểu mẫu liên hệ (Contact Form) vào blogspot của bạn, trước tiên đăng nhập vào blogger >> đến Bố cục và chọn Thêm Tiện ích trong cửa sổ mới hiện lên, bạn chọn tab Tiện ích khác >> Biểu mẫu liên hệ và Lưu lại.
Huong dan chen bieu mau lien he contact form vao trang bat ky cua Blogspot
- Trở lại trang chủ bạn sẽ thấy Biểu mẫu liên hệ xuất hiện tại vị trí bạn thêm tiện ích
- Tiếp theo, vào Mẫu >> Chỉnh sửa HTML tìm ContactForm1 (Nhấn tổ hợp phím Ctrl + F để tìm)
và xóa đi các mã trong <b:includable id='main'> ..xóa mã ở đây.. </b:includable> tương tự như hình dưới
Huong dan chen bieu mau lien he contact form vao trang bat ky cua Blogspot
- Bước kế tiếp, tạo một Trang mới. Tại trang tổng quan blogspot vào Trang >> Trang mới. Tại phần nội dung của trang mới, bạn chuyển sang tab soạn thảo HTML và thêm đoạn mã phía dưới vào
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
Họ Tên của bạn
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
E-mail *
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
Lời nhắn *
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Submit" />
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</form>
</div>
</div>
Huong dan chen bieu mau lien he contact form vao trang bat ky cua Blogspot
- Xuất bản trang và xem kết quả.
- Về mặt thẩm mỹ thì biểu mẫu liên hệ vẩn chưa đẹp mắt, bạn có thể sử dụng đoạn CSS dưới đây để trang trí cho nó thêm đẹp hơn bằng cách thêm nó vào trước ]]></b:skin> hoặc </style> trong mẫu của bạn
/* Contact Form Container */
.contact-form-widget {
width: 500px;
max-width: 100%;
margin: 0 auto;
padding: 10px;
background: #F8F8F8;
color: #000;
border: 1px solid #C1C1C1;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
border-radius: 10px;
}

/* Fields and submit button */
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}

/* Submit button style */
.contact-form-button-submit {
border-color: #C1C1C1;
background: #E3E3E3;
color: #585858;
width: 20%;
max-width: 20%;
margin-bottom: 10px;
}

/* Submit button on mouseover */
.contact-form-button-submit:hover{
background: #4C8EF9;
color: #ffffff;
border: 1px solid #FAFAFA;
}
Hy vọng với hướng dẫn này sẻ giúp bạn có được một trang liên hệ cá nhân mang phong cách riêng. Chúc thành công!

Google cung cấp dịch vụ Domain và liên kết với Blogger

   Jan 15, 2015   
Sau một thời gian ra mắt dịch vụ cung cấp tên miền riêng- Google Domain, gã khổng lồ công nghệ Google đã bắt đầu liên kết các dịch vụ của hãng lại với nhau, điển hình là dịch vụ Blogger - một trong những dịch vụ yêu thích nhất của mình không chỉ vì nó hiện tại được miễn phí mà còn vì tính năng phong phú và tùy biến đa dạng.
Theo trang buzz.blgoger.com - trang chủ thông tin về sản phẩm và dịch vụ của Google Blogger, vào ngày 13/01/2015 Google chính thức mở rộng thử nghiệm dịch vụ Google Domain từ chỉ một nhóm người được mời thành tự đăng ký sử dụng nếu ở quốc gia chỉ định (hiện nay là US) và cũng đặt liên kết mua tên miền của họ ngay trong dịch vụ Blogger - một trong hai dịch vụ tạo blog cá nhân miễn phí lớn nhất trên mạng Internet hiện giờ.
Google mở rộng cung cấp dịch vụ Domain và liên kết với Blogger
Last year, we shared news that we were beginning to test a new service called Google Domains to help people get online starting with a domain and website. We partnered with some of the most reliable and easy-to-use website building providers on the web: Shopify, Squarespace, Weebly and Wix. Together, we’ve helped businesses like Scott Pincus Design and Hidden Springs Soap get a domain, build a website and find new customers online. It’s really that easy.Today, we’re excited to make Google Domains more widely available by lifting the invitation restriction for those in the U.S. For those in other countries, you can sign up here to be notified when it is available in your country.
Hiện tại, theo thông tin một số blogger ở Mỹ đã có thể mua tên miền thông qua liên kết trong blogger.
Google mở rộng cung cấp dịch vụ Domain và liên kết với Blogger
Cũng theo Buzz Blogger, với người dùng Blogger mua tên miền từ Google thì các blog tạo sau này có thể đặt tên blog dễ dàng hơn, theo dự đoán là tự đặt tên sub-domain trực tiếp trên khung tạo mới blog thay vì tên miền url.blogspot.com như hiện nay.

Google mở rộng cung cấp dịch vụ Domain và liên kết với Blogger

Theo trang tin googleandyourbusiness.blogspot.com, Google Domain hiện cung cấp một số tính năng cơ bản như Dynamic DNS, CP đơn giản và dễ dàng điều kiển, cải thiện gợi ý tên miền và liên kết Blogger vào tùy chọn tạo website....
  • Improved search and suggestion experience to help you find the perfect domain name
  • Over 60 new domain endings like .company, .florist and .coffee (view the full list here)
  • A simple dashboard to manage your domain, website and email settings
  • The integration of Blogger so you can create a blog and easily connect it to your domain
  • The ability to quickly browse website template themes and compare the plans and features of our website building providers
  • Dynamic DNS so you can setup your domain and keep it pointing to the same computer even when the IP address changes. Read more about it here.
Một số dịch vụ sau có thể tính phí thêm như:
  • Whois privacy
  • Domain forwarding and subdomain forwarding
  • Email forwarding (forwarding of email aliases @)
  • Google nameservers with 10 million DNS resolutions per year
  • Support via help center, email, chat, or phone.
Hiện nay, Google Domain hỗ trợ cung cấp hơn 80 đuôi tên miền các loại với mức giá từ 12 - 50 USD, và Việt Nam hiện vẫn chưa được hỗ trợ dịch vụ này, bạn vẫn có thể truy cập vào trang chính thức của Google Domain tại www.google.com/domains tuy nhiên sau khi chọn tên miền, trang web sẽ hiện một thông báo về việc chỉ hỗ trợ địa chỉ thanh toán tại US và khuyến khích bạn đăng ký nhận thông tin thời gian hỗ trợ.

Google mở rộng cung cấp dịch vụ Domain và liên kết với Blogger

Với sự chăm sóc lớn từ Google, hiện tại các blogger có thể an tâm về vấn đề dịch vụ Blogger sẽ không bị khai tử như các dịch vụ trước sau một thời gian khá dài chưa nhận được nhiều cải tiến từ Google, tuy nhiên, vẫn chưa thể nói trước được liệu sau khi mở đường cho các hoạt động thu phí mà bắt đầu là với Google Domain thì liệu trong tương lai Blogger (hay Blogspot) sẽ vẫn còn miễn phí 100% như hiện nay không.
~~ST~~

Tạo trang báo lỗi Error 404 đẹp cho Blogger/Blogspot

   Dec 24, 2014   
Khi bạn truy cập vào một địa chỉ, một đường dẫn của một website hay một blog nào đó mà đường dẫn đó không còn tồn tại hoặc đả bị xóa thì bạn sẽ được đưa đến trang thông báo lỗi 404 Page Not Found, nó nhằm thông tin cho bạn rằng địa chỉ mà bạn đang truy cập hiện không còn tồn tại hoặc đả bị tác giả xóa. Nay xin chia sẽ cho bạn một giao diện thông báo lỗi 404 đơn giản và đẹp mắt cho blog khi bạn sử dụng blogspot
Huong dan tao trong bao loi 404 Page Not Found cho Blogger/Blogspot
Xem thêm: Blogger 404 Redirection - Chuyển hướng trang báo lỗi 404 cho Blogger
Nếu bạn thích giao diện thông báo lỗi 404 như trên, bạn có thể cài đặt nó cho blogspot của bạn bằng cách dưới đây.

- Có nhiều cách để tạo trang thông báo lỗi cho Blogspot, ở đây ta sử dụng biểu thức điều kiện trong blogspot để tạo, nó có cấu trúc đơn giản như sau:
<body>
<b:if cond='data:blog.pageType != "error_page"'>
//Thành phần chính Blog của bạn
</b:if>
<b:if cond='data:blog.pageType == "error_page"'>
//Nội dung thông báo lỗi 404 của bạn
</b:if>
</body>
Xem thêm: Hướng dẫn cách sử dụng Biểu thức điều kiện if- else trong Blogspot
- Bước 1: Chèn đoạn css dưới đây vào template của bạn bằng cách vào Mẫu >> Chỉnh sửa HTML và chèn nó sau </b:skin>
<b:if cond='data:blog.pageType == "error_page"'>
#error-page{background-color:#142D3A;position:fixed!important;position:absolute;text-align:center;top:0;right:0;bottom:0;left:0;z-index:99999}
#error-inner{margin:11% auto}
.box-404{position:relative;font-weight:bold;width:700px;height:210px;color:#fff;margin:0 auto;}
#error-inner h2{text-transform:uppercase;color:#fff;font-size:50px;margin:0 auto 20px;font-family:monospace;background-color:#34647E;margin:5px}
#error-inner h1{text-transform:uppercase;color:#FFB616;padding-top:10px}
#error-inner p{line-height:0.7em;font-size:15px;color:#999}
#social-icons li{float:left;width:147px;height:147px;margin:10px 6px 6px 0;padding:0 0 0 0;border-bottom:none;list-style:none}
#social-icons li a{line-height:1px;display:block}
#social-icons li a:hover img{-webkit-opacity:0.8;-moz-opacity:0.8;opacity:0.8}
#social-icons li a span{display:none!important}
</b:if>
- Bước 2: Sao chép mã dưới đây và đặt nó ngay dưới <body>
<b:if cond='data:blog.pageType != "error_page"'>
- Bước 3: Cuối cùng, copy đoạn HTML dưới đây và đặt nó trước thẻ đóng </body>
</b:if>
<b:if cond='data:blog.pageType == "error_page"'>
<div id='error-page'>
<div id='error-inner'>
<h2>404: KHÔNG TÌM THẤY TRANG</h2>
<h1>RẤT TIẾT, TRANG KHÔNG TÌM THẤY</h1>
<p>Trang bạn đang tìm không tồn tại, hoặc có thể đả bị xóa<br/><br/> Quay lại trang chủ <a expr:href='data:blog.homepageUrl' expr:title='data:blog.title'><data:blog.title/></a> hoặc liên hệ với tôi <a href="http://nhatchanh.info/p/contact-me.html" title="Liên hệ với tôi"><span style="color: blue;">tại đây</span></a></p>
<div class='box-404'>
<ul id='social-icons'>
<li class='rss-icon'><a href='http://feeds.feedburner.com/nhatchanh' target='_blank'><img height='147' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCKcydxlYKhswfHdaTtHrWyeiAdNa-_JtrFCRtrpbD7rTvKQOl-y3rIRmABzCh2PJE2PPf-tvJrq4C9v22XNk5jyre-qkEdrIHq_fMvwuF7nQ057afgeyMqn5Y59EMR91UKDNrFAI7_aXY/s1600/rss.png' width='147'/></a></li>
<li class='twitter-icon'><a href='http://www.twitter.com/tv0656m006' target='_blank'><img height='147' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8hFy9kbq-sOAGnDuUV3xRYbvYIgRR52bWqg3fTBjUYoYGq0mKV40MHiL7Jv9n7tkmt2qnHqO_6Y_oUHw5whYikTct7aO_6IpMeUStX__udKezYPgr-Y01tXaUj8sOTYfsb7ygKg7LipOa/s1600/twitter.png' width='147'/></a></li>
<li class='facebook-icon'><a href='http://www.facebook.com/pnchanh' target='_blank'><img height='147' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzHLWAQxZRH-XnBkiVZGkuo-PG65aiVnbJfqqs4acX9mTvDKtTXhRda_fD681MKdtZ56Un2jLfY5Zi6H6nIc7VhQpnbOQzgZj-AtXjN-vf9Qp3q50a8zVSsSjc59hl-UCkMwUfzRUnvjMd/s1600/facebook.png' width='147'/></a></li>
<li class='google-icon'><a href='https://plus.google.com/113291429631989826321' target='_blank'><img height='147' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNQ9RnrqORuZCO693Q6cFhD2vzYIc4cbgqoBXYW6eB-CBkTX7bb-6IELF3HHhShNaZdJY4DnYii5uD9CgXlWnEN7a5x00db2pJTqqEp5jZrTIMnje6VzNM1wUAboih7tQ0xWh9rRdO4BSy/s1600/google.png' width='147'/></a></li>
</ul>
</div>
</div></div>
</b:if>
Bước 4: Là bước khó khăn và quan trọng nhất là Lưu lại và kiểm tra kết quả :D Chúc thành công!

Kiểm tra kết quả bằng cách gõ vào thanh địa chỉ một đường dẫn không đúng
VD: http://địa-chỉ-blog-của-bạn/abcdefghizklmn và nếu xuất hiện trang báo lỗi 404 là bạn thành công

Định dạng hiển thị label cloud nhiều màu sắc

   Nov 15, 2014   
Chia sẽ một đoạn css giúp hiển thị nhãn (label cloud) với nhiều màu sắc
- Đăng nhập vào Blogger
- Đi đến Mẫu (template) >> Chỉnh sửa HTML
- Và thêm đoạn mã CSS phía dưới vào trước ]]</b:skin> hoặc </style> và lưu lại là bạn có được kiểu dáng label cloud được hiển thị như hình dưới đây:
Xem thêm: Hiển thị tiện ích Label Cloud dưới dạng Flash
css hien thi label cloud nhan nhieu mau sac trong blogspot blogger
Lưu ý: Trong Định cấu hình nhãn, phần Hiển thị: "Danh sách" bạn chọn "Cloud"
.cloud-label-widget-content {
text-align: left;
}
.label-size {
background: #5498C9;
display: block;
float: left;
margin: 0 3px 3px 0;
color: #fff;
font-family: 'Open Sans',"Segoe UI",Arial,Tahoma,sans-serif;
font-size: 11px;
text-transform: uppercase;
}
.label-size:nth-child(1) { background: #F53477; }
.label-size:nth-child(2) { background: #89C237; }
.label-size:nth-child(3) { background: #44CCF2; }
.label-size:nth-child(4) { background: #01ACE2; }
.label-size:nth-child(5) { background: #94368E; }
.label-size:nth-child(6) { background: #A51A5D; }
.label-size:nth-child(7) { background: #555; }
.label-size:nth-child(8) { background: #f2a261; }
.label-size:nth-child(9) { background: #00ff80; }
.label-size:nth-child(10) { background: #b8870b; }
.label-size:nth-child(11) { background: #99cc33; }
.label-size:nth-child(12) { background: #ffff00; }
.label-size:nth-child(13) { background: #40dece; }
.label-size:nth-child(14) { background: #ff6347; }
.label-size:nth-child(15) { background: #f0e68d; }
.label-size:nth-child(16) { background: #7fffd2; }
.label-size:nth-child(17) { background: #7a68ed; }
.label-size:nth-child(18) { background: #ff1491; }
.label-size:nth-child(19) { background: #698c23; }
.label-size:nth-child(20) { background: #00ff00; }
.label-size a, .label-size span {
display: inline-block;
color: #fff !important;
padding: 4px 10px;
font-weight: bold;
}
.label-size:hover {background: #222;}
.label-count {
white-space: nowrap;
padding-right: 3px;
margin-left: -3px;
background: #333;
color: #fff ;
}
.label-size:hover .label-count, .label-size:focus+.label-count {
background-color: #ff6bb5;
}
- Lưu template lại và xem kết quả

Hiển thị tiện ích Lưu trữ của blogspot dưới dạng Calendar

   Nov 10, 2014   
Thủ thuật này sẽ giúp bạn dễ dàng hiển thị tiện ích lưu trữ mặt định của blogspot/blogger dưới dạng một bộ lịch cho blog của bạn. Tiện ích này đả được chia sẽ khá lâu, hôm nay xin chia sẽ lại cho bạn nào chưa biết. Và với nhiều theme được thiết kế sẳn giúp cho bạn dể dàng lựa chọn một theme phù hợp với blog của bạn

tao lich luu tru cho blogspot blogger, hien thi tien ich luu tru blogspot blogger duoi dang lich calendar, Blog Archive calandar, huong dan tao lich cho blogspot blogger

Như thường lệ, trước khi thực hiện thay đổi mã trong template, bạn nên sao lưu Mẫu (template) lại bằng cách nhấp vào nút Sao lưu / Khôi phục >> Tải xuống mẫu hoàn chỉnh để có gặp trục trặc đặng còn đường mà khôi phục

- Bước 1: Đăng nhập vào Blogger, đến Bố cục >> Thêm Tiện ích >> Lưu trữ Blog
- Bước 2: Thiết lập giống như hình dưới đây, sau đó Lưu lại
- Bước 3: Đến Mẫu (template) >> Chỉnh sửa HTML và tìm BlogArchive tương tự như hình dưới đây:

- Bước 4: Thay đoạn code được khoanh vùng vừa tìm được như hình phía trên bằng đoạn code dưới đây:
<b:widget id='BlogArchive1' locked='false' title='Lưu trữ Blog' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
<b:includable id='toggle' var='interval'>
<!-- Toggle not needed for Calendar -->
</b:includable>
<b:includable id='flat' var='data'>
<div id='bloggerCalendarList'>
<ul>
<b:loop values='data:data' var='i'>
<li class='archivedate'>
<a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
</li>
</b:loop>
</ul>
</div>
<div id='blogger_calendar' style='display:none'>
<table id='bcalendar'><caption id='bcaption'>
</caption>
<!-- Table Header -->
<thead id='bcHead'></thead>
<!-- Table Footer -->
<!-- Table Body -->
<tbody><tr><td id='cell1'> </td><td id='cell2'> </td><td id='cell3'> </td><td id='cell4'> </td><td id='cell5'> </td><td id='cell6'> </td><td id='cell7'> </td></tr>
<tr><td id='cell8'> </td><td id='cell9'> </td><td id='cell10'> </td><td id='cell11'> </td><td id='cell12'> </td><td id='cell13'> </td><td id='cell14'> </td></tr>
<tr><td id='cell15'> </td><td id='cell16'> </td><td id='cell17'> </td><td id='cell18'> </td><td id='cell19'> </td><td id='cell20'> </td><td id='cell21'> </td></tr>
<tr><td id='cell22'> </td><td id='cell23'> </td><td id='cell24'> </td><td id='cell25'> </td><td id='cell26'> </td><td id='cell27'> </td><td id='cell28'> </td></tr>
<tr><td id='cell29'> </td><td id='cell30'> </td><td id='cell31'> </td><td id='cell32'> </td><td id='cell33'> </td><td id='cell34'> </td><td id='cell35'> </td></tr>
<tr id='lastRow'><td id='cell36'> </td><td id='cell37'> </td></tr>
</tbody>
</table>
<table id='bcNavigation'><tr>
<td id='bcFootPrev'></td>
<td id='bcFootAll'></td>
<td id='bcFootNext'></td>
</tr></table>
<div id='calLoadingStatus' style='display:none; text-align:center;'>
<script type='text/javascript'>bcLoadStatus();</script>
</div>
<div id='calendarDisplay'/>
</div>
<script type='text/javascript'> initCal();</script>
</b:includable>
<b:includable id='posts' var='posts'>
<!-- posts not needed for Calendar -->
</b:includable>
<b:includable id='menu' var='data'>
Configure your calendar archive widget - Edit archive widget - Flat List - Newest first - Choose any Month/Year Format
</b:includable>
<b:includable id='interval' var='intervalData'>
Configure your calendar archive widget - Edit archive widget - Flat List - Newest first - Choose any Month/Year Format
</b:includable>
</b:widget>
- Bước 5:Tiếp theo, thêm đoạn javascript dưới đây vào trước thẻ </head> trong Mẫu (template) của bạn:
<script type='text/javascript'>
//<![CDATA[
var bcLoadingImage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLapZKC2oV5Zz2wzm0EfKyGd3wS0eu1eHQ2KFKFVkxELb_U8cQKXpKgvayNSyN_Y_oUkO5hoGkfdtoGG4OdmTcAn54u62t5ETW3U8NJKnyOyl7aR8YCfnyvCdhLleUR_eAS7stR0zcKJg/s1600/horizontal-loading.gif";
var bcLoadingMessage = " Đang tải....";
var bcArchiveNavText = "Xem lưu trữ";
var bcArchiveNavPrev = '←';
var bcArchiveNavNext = '→';
var headDays = ["Chủ nhật","Thứ 2","Thứ 3","Thứ 4","Thứ 5","Thứ 6","Thứ 7"];
var headInitial = ["CN","T2","T3","T4","T5","T6","T7"];

var timeOffset;
var bcBlogID;
var calMonth;
var calDay = 1;
var calYear;
var startIndex;
var callmth;
var bcNav = new Array ();
var bcList = new Array ();

var fill = ["","31","28","31","30","31","30","31","31","30","31","30","31"];
function openStatus(){
document.getElementById('calLoadingStatus').style.display = 'block';
document.getElementById('calendarDisplay').innerHTML = '';
}
function closeStatus(){
document.getElementById('calLoadingStatus').style.display = 'none';
}
function bcLoadStatus(){
cls = document.getElementById('calLoadingStatus');
img = document.createElement('img');
img.src = bcLoadingImage;
img.style.verticalAlign = 'middle';
cls.appendChild(img);
txt = document.createTextNode(bcLoadingMessage);
cls.appendChild(txt);
}
function callArchive(mth,yr,nav){
if (((yr % 4 == 0) && (yr % 100 != 0)) || (yr % 400 == 0)) {
fill[2] = '29';
}
else {
fill[2] = '28';
}
calMonth = mth;
calYear = yr;
if(mth.charAt(0) == 0){
calMonth = mth.substring(1);
}
callmth = mth;
bcNavAll = document.getElementById('bcFootAll');
bcNavPrev = document.getElementById('bcFootPrev');
bcNavNext = document.getElementById('bcFootNext');
bcSelect = document.getElementById('bcSelection');
a = document.createElement('a');
at = document.createTextNode(bcArchiveNavText);
a.href = bcNav[nav];
a.appendChild(at);
bcNavAll.innerHTML = '';
bcNavAll.appendChild(a);
bcNavPrev.innerHTML = '';
bcNavNext.innerHTML = '';
if(nav < bcNav.length -1){
a = document.createElement('a');
a.innerHTML = bcArchiveNavPrev;
bcp = parseInt(nav,10) + 1;
a.href = bcNav[bcp];
a.title = 'Tháng trước';
prevSplit = bcList[bcp].split(',');
a.onclick = function(){bcSelect.options[bcp].selected = true;openStatus();callArchive(prevSplit[0],prevSplit[1],prevSplit[2]);return false;};
bcNavPrev.appendChild(a);
}
if(nav > 0){
a = document.createElement('a');
a.innerHTML = bcArchiveNavNext;
bcn = parseInt(nav,10) - 1;
a.href = bcNav[bcn];
a.title = 'Tháng sau';
nextSplit = bcList[bcn].split(',');
a.onclick = function(){bcSelect.options[bcn].selected = true;openStatus();callArchive(nextSplit[0],nextSplit[1],nextSplit[2]);return false;};
bcNavNext.appendChild(a);
}
script = document.createElement('script');
script.src = 'http://www.blogger.com/feeds/'+bcBlogId+'/posts/summary?published-max='+calYear+'-'+callmth+'-'+fill[calMonth]+'T23%3A59%3A59'+timeOffset+'&published-min='+calYear+'-'+callmth+'-01T00%3A00%3A00'+timeOffset+'&max-results=100&orderby=published&alt=json-in-script&callback=cReadArchive';
document.getElementsByTagName('head')[0].appendChild(script);
}
function cReadArchive(root){
if (((calYear % 4 == 0) && (calYear % 100 != 0)) || (calYear % 400 == 0)) {
fill[2] = '29';
}
else {
fill[2] = '28';
}
closeStatus();
document.getElementById('lastRow').style.display = 'none';
calDis = document.getElementById('calendarDisplay');
var feed = root.feed;
var total = feed.openSearch$totalResults.$t;
var entries = feed.entry || [];
var fillDate = new Array();
var fillTitles = new Array();
fillTitles.length = 32;
var ul = document.createElement('ul');
ul.id = 'calendarUl';
for (var i = 0; i < feed.entry.length; ++i) {
var entry = feed.entry[i];
for (var j = 0; j < entry.link.length; ++j) {
if (entry.link[j].rel == "alternate") {
var link = entry.link[j].href;
}
}
var title = entry.title.$t;
var author = entry.author[0].name.$t;
var date = entry.published.$t;
var summary = entry.summary.$t;
isPublished = date.split('T')[0].split('-')[2];
if(isPublished.charAt(0) == '0'){
isPublished = isPublished.substring(1);
}
fillDate.push(isPublished);
if (fillTitles[isPublished]){
fillTitles[isPublished] = fillTitles[isPublished] + ' | ' + title;
}
else {
fillTitles[isPublished] = title;
}
li = document.createElement('li');
li.style.listType = 'none';
li.innerHTML = '<a href="'+link+'">'+title+'</a>';
ul.appendChild(li);
}
calDis.appendChild(ul);
var val1 = parseInt(calDay, 10)
var valxx = parseInt(calMonth, 10);
var val2 = valxx - 1;
var val3 = parseInt(calYear, 10);
var firstCalDay = new Date(val3,val2,1);
var val0 = firstCalDay.getDay();
startIndex = val0 + 1;
var dayCount = 1;
for (x =1; x < 38; x++){
var cell = document.getElementById('cell'+x);
if( x < startIndex){
cell.innerHTML = ' ';
cell.className = 'firstCell';
}
if( x >= startIndex){
cell.innerHTML = dayCount;
cell.className = 'filledCell';
for(p = 0; p < fillDate.length; p++){
if(dayCount == fillDate[p]){
if(fillDate[p].length == 1){
fillURL = '0'+fillDate[p];
}
else {
fillURL = fillDate[p];
}
cell.className = 'highlightCell';
cell.innerHTML = '<a href="/search?updated-max='+calYear+'-'+callmth+'-'+fillURL+'T23%3A59%3A59'+timeOffset+'&updated-min='+calYear+'-'+callmth+'-'+fillURL+'T00%3A00%3A00'+timeOffset+'" title="'+fillTitles[fillDate[p]].replace(/"/g,'\'')+'">'+dayCount+'</a>';
}
}
if( dayCount > fill[valxx]){
cell.innerHTML = ' ';
cell.className = 'emptyCell';
}
dayCount++;
}
}
visTotal = parseInt(startIndex) + parseInt(fill[valxx]) -1;
if(visTotal >35){
document.getElementById('lastRow').style.display = '';
}
}
function initCal(){
document.getElementById('blogger_calendar').style.display = 'block';
var bcInit = document.getElementById('bloggerCalendarList').getElementsByTagName('a');
var bcCount = document.getElementById('bloggerCalendarList').getElementsByTagName('li');
document.getElementById('bloggerCalendarList').style.display = 'none';
calHead = document.getElementById('bcHead');
tr = document.createElement('tr');
for(t = 0; t < 7; t++){
th = document.createElement('th');
th.abbr = headDays[t];
scope = 'col';
th.title = headDays[t];
th.innerHTML = headInitial[t];
tr.appendChild(th);
}
calHead.appendChild(tr);
for (x = 0; x <bcInit.length;x++){
var stripYear= bcInit[x].href.split('_')[0].split('/')[3];
var stripMonth = bcInit[x].href.split('_')[1];
bcList.push(stripMonth + ','+ stripYear + ',' + x);
bcNav.push(bcInit[x].href);
}
var sel = document.createElement('select');
sel.id = 'bcSelection';
sel.onchange = function(){var cSend = this.options[this.selectedIndex].value.split(',');openStatus();callArchive(cSend[0],cSend[1],cSend[2]);};
q = 0;
for (r = 0; r <bcList.length; r++){
var selText = bcInit[r].innerHTML;
var selCount = bcCount[r].innerHTML.split('> (')[1];
var selValue = bcList[r];
sel.options[q] = new Option(selText + ' ('+selCount,selValue);
q++
}
document.getElementById('bcaption').appendChild(sel);
var m = bcList[0].split(',')[0];
var y = bcList[0].split(',')[1];
callArchive(m,y,'0');
}
function timezoneSet(root){
var feed = root.feed;
var updated = feed.updated.$t;
var id = feed.id.$t;
bcBlogId = id.split('blog-')[1];
upLength = updated.length;
if(updated.charAt(upLength-1) == "Z"){timeOffset = "+00:00";}
else {timeOffset = updated.substring(upLength-6,upLength);}
timeOffset = encodeURIComponent(timeOffset);
}
//]]>
</script>
<script src='/feeds/posts/summary?max-results=0&alt=json-in-script&callback=timezoneSet'></script>
- Bước 6: Lưu Mẫu (template) lại, tới đây việc cài đặt tiện ích gần như hoàn tất
- Bước 7: Việc tiếp theo là định dạng kiểu dáng hiển thị bộ lịch bằng CSS, bạn có thể lựa chọn một trong các kiểu dáng dưới đây và thêm mã CSS vào trước thẻ ]]></b:skin> trong Mẫu (template) của bạn và Lưu lại

Kiểu hiển thị 1

#calendarDisplay {display:none;}
#blogger_calendar { margin:0px auto 0px 0px;width:100%;}
#bcaption {border:1px solid #C7C7C7;padding:2px;margin:10px 0 0;background:#fff;font:bold 100% Tahoma, Arial, Sans-serif}
#bcaption select {background:#ffff;border:0 solid #C7C7C7;color:#0080ff;font-weight:bold;text-align:center;}
table#bcalendar thead {}
table#bcalendar thead tr th {width:20px;text-align:center;padding:3px; border:1px solid #C7C7C7; font:bold 100% Tahoma, Arial, Sans-serif;background:#fff;color:#0080ff;}
table#bcalendar {border:1px solid #C7C7C7;border-top:0; margin:0px 0 0px;width:100%;background:#fff}
table#bcalendar tbody tr td {cursor:pointer; text-align:center; border-radius:4px; padding:3px;border:1px solid #C7C7C7; color:#666;font:bold 100% Tahoma, Arial, Sans-serif;}
table#bcalendar tbody tr td a:link, table#bcalendar tbody tr td a:visited, table#bcalendar tbody tr td a:active {font-weight:bold;color:#ffffff; text-decoration:none;}
table#bcalendar tbody tr td a:hover {color:#ffffff; text-decoration:none;}
td.firstCell {visibility:visible;}
td.filledCell { background:#fff;}
td.filledCell:hover { background:#dddddd;}
td.emptyCell {visibility:hidden;}
td.highlightCell {background:#53A9FF;border:1px solid #C7C7C7}
td.highlightCell:hover {background:#72B9FF;border:1px solid #C7C7C7}
table#bcNavigation {width:100%;background:#fff;border:1px solid #C7C7C7;border-top:0;color:#0080ff;font:bold 100% Tahoma, Arial, Sans-serif;}
table#bcNavigation a:link {text-decoration:none;color:#0080ff}
table#bcNavigation a:hover{text-decoration:underline;}
td#bcFootPrev {width:10px;}
td#bcFootAll{text-align:center;}
td#bcFootNext {width:10px;}
ul#calendarUl {margin:5px auto 0!important;}
ul#calendarUl li a:link {}
#calLoadingStatus img {display: block;width: 80px;margin: 10px auto;}

Kiểu hiển thị 2

#calendarDisplay {display:none;}
#blogger_calendar { margin:5px 0 5px 10px;width:98%;}
#bcaption {border:1px solid #666666;padding:2px;margin:10px 0 0;background:#333333;font:bold 100% Tahoma, Arial, Sans-serif}
#bcaption select {background:#333333;border:0 solid #333333;color:#dddddd;font-weight:bold;text-align:center;}
table#bcalendar thead {}
table#bcalendar thead tr th {width:20px;text-align:center;padding:2px; border:1px outset #666666; font:bold 100% Tahoma, Arial, Sans-serif;background:#333333;color:#dddddd}
table#bcalendar {border:1px solid #666666;border-top:0; margin:0px 0 0px;width:95%;background:#333333}
table#bcalendar tbody tr td {text-align:center;padding:2px;border:1px outset #666666; color:#F5F202;font:bold 100% Tahoma, Arial, Sans-serif;}
table#bcalendar tbody tr td a:link, table#bcalendar tbody tr td a:visited, table#bcalendar tbody tr td a:active {font-weight:bold;color:#ffffff; text-decoration:underline;}
table#bcalendar tbody tr td a:hover {color:#ffffff; text-decoration:none;}
td.firstCell {visibility:visible;}
td.filledCell {}
td.emptyCell {visibility:hidden;}
td.highlightCell {background:#000000;border:1px solid #666666}
table#bcNavigation {width:95%;background:#333333;border:1px solid #666666;border-top:0;color:#F5F202;font:bold 100% Tahoma, Arial, Sans-serif;}
table#bcNavigation a:link {text-decoration:none;color:#F5F202}
table#bcNavigation a:hover{text-decoration:underline;}
td#bcFootPrev {width:10px;}
td#bcFootAll{text-align:center;}
td#bcFootNext {width:10px;}
ul#calendarUl {margin:5px auto 0!important;}
ul#calendarUl li a:link {}
#calLoadingStatus img {display: block;width: 80px;margin: 10px auto;}

Kiểu hiển thị 3

#calendarDisplay{display:none}
#blogger_calendar *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#blogger_calendar{margin:0 auto;width:100%;padding:150px 8px 8px;background:white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFLFUXmx9vEnMDhdLSd8o_YW6LoO8QmXvKjiFrJWud_Meep7tpcu1SaVWSRsTiz_1sDroLOD9DfFifo9Jb5-aegcx1bimfgChnBNZnr5YFi5_V39qXdiKzBV-Qgpi7PUju1bvrAfitpps/w250/YUIb.png) no-repeat 100% 0}
#bcaption{padding:4px 10px;margin:0;font:bold 100% Tahoma,Arial,Sans-serif;background:#232F3F;border:1px solid #2B2B2B;border-radius:2px}
#bcaption select{background:white;border:1px solid #2B2B2B;padding:1px;width:90%;color:#0D2B47;font-weight:bold;}
table#bcalendar thead{}
table#bcalendar thead tr th{width:20px;text-align:center;padding:3px;border:1px solid #1A1A1A;font:bold 100% Tahoma,Arial,Sans-serif;background:#232F3F;border-radius:3px;color:#DFDFDF}
table#bcalendar{margin:0 0;width:100%}
table#bcalendar tbody tr td{cursor:pointer;text-align:center;border-radius:3px;padding:3px;border:1px solid #D6D6D6;color:#0D2B47;font:bold 100% Tahoma,Arial,Sans-serif}
table#bcalendar tbody tr td a:link,table#bcalendar tbody tr td a:visited,table#bcalendar tbody tr td a:active{font-weight:bold;color:#ffffff;text-decoration:none}
table#bcalendar tbody tr td a:hover{color:#ffffff;text-decoration:none}
table#bcalendar tbody tr td.firstCell{visibility:visible;background:#303030;background:rgba(0,0,0,0.41);border:1px solid #2C2C2C}
td.filledCell{background:white;background:rgba(255,255,255,0.53)}
td.filledCell:hover{background:#EBEBEB;background:rgba(235,235,235,0.75)}
td.emptyCell{visibility:hidden}
table#bcalendar tbody tr td.highlightCell{background:#232F3F;border:1px solid #2B2B2B}
table#bcalendar tbody tr td.highlightCell:hover{background:#1B4174;border:1px solid #2B2B2B}
table#bcNavigation{width:100%;padding:3px 5px;color:#DADADA;font:bold 100% Tahoma,Arial,Sans-serif;background:#232F3F;border:1px solid #2B2B2B;border-radius:2px}
table#bcNavigation a:link{text-decoration:none;color:#DADADA}
table#bcNavigation a:hover{color:white}
td#bcFootPrev{width:10px}
td#bcFootAll{text-align:center}
td#bcFootNext{width:10px}
ul#calendarUl{margin:5px auto 0!important}
ul#calendarUl li a:link{}
#calLoadingStatus img{display:block;width:80px;margin:10px auto}

Kiểu hiển thị 4

#calendarDisplay{display:none}
#blogger_calendar *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#blogger_calendar{margin:0 auto;width:100%;padding:180px 8px 8px;background:white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhlY_gMNzucFM6aIrldk25HbctCEL7zrucfXpStO3LRinic9oIpSjQ3l45bNBjQDDGZHRVGIzvZJ9LAGHh7ilhi96jmLVXlaQb97ufOK7NcyPX0PH2iT9sKE1v2-breQBzH6TOcRx5-P8/w250/AtsukoMaeda.png) no-repeat 50% -3px}
#bcaption{padding:3px 10px;margin:0;font:bold 100% Tahoma,Arial,Sans-serif;background:#1BA3CE;border-radius:2px}
#bcaption select{background:white;border:1px solid #0081BE;padding:1px;width:90%;color:#0591C7;font-weight:bold}
table#bcalendar thead{}
table#bcalendar thead tr th{width:20px;text-align:center;padding:3px;font:bold 100% Tahoma,Arial,Sans-serif;background:#1BA3CE;border-radius:3px;color:white}
table#bcalendar{margin:0 0;width:100%}
table#bcalendar tbody tr td{cursor:pointer;text-align:center;border-radius:3px;padding:3px;color:#01A5CE;border:1px solid #DCEFF5;font:bold 100% Tahoma,Arial,Sans-serif}
table#bcalendar tbody tr td a:link,table#bcalendar tbody tr td a:visited,table#bcalendar tbody tr td a:active{font-weight:bold;color:#ffffff;text-decoration:none}
table#bcalendar tbody tr td a:hover{color:#ffffff;text-decoration:none}
table#bcalendar tbody tr td.firstCell{visibility:visible;background:white;background:rgba(255,255,255,0.45)}
td.filledCell{background:white}
td.filledCell:hover{background:#D8F4FF}
td.emptyCell{visibility:hidden}
table#bcalendar tbody tr td.highlightCell{background:#1BA3CE}
table#bcalendar tbody tr td.highlightCell:hover{background:#00BAF5}
table#bcNavigation{width:100%;padding:3px 5px;color:white;font:bold 100% Tahoma,Arial,Sans-serif;background:#1BA3CE;border-radius:2px}
table#bcNavigation a:link{text-decoration:none;color:#DBF5FF}
table#bcNavigation a:hover{color:white}
td#bcFootPrev{width:10px}
td#bcFootAll{text-align:center}
td#bcFootNext{width:10px}
ul#calendarUl{margin:5px auto 0!important}
ul#calendarUl li a:link{}
#calLoadingStatus{background:white;padding:10px 0}
#calLoadingStatus img{display:block;width:80px;margin:0 auto 10px}

Kiểu hiển thị 5

#calendarDisplay{display:none}
#blogger_calendar *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#blogger_calendar{margin:0 auto;width:100%;padding:180px 8px 8px;background:white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9hFzsw7OfHO9wY7jTf2fgD8-_QV5zp5cVxcNCufV_Q2s7KXubKCyRZMo8EYMpxWtL0CFCOJa-_tDaQ6SOctMM9zyNJBNgfBxOL-vxF9RPdMjEZ36UfWMMYagFfX1uO7BXT5FoksrmY40/w250/2011215_ohshimayuko.png) no-repeat 50% -10px}
#bcaption{padding:4px 10px;margin:0;font:bold 100% Tahoma,Arial,Sans-serif;background:#790000;border:1px solid #400;border-radius:2px}
#bcaption select{background:white;border:0 solid #420000;width:90%;color:#8B0101;font-weight:bold;}
table#bcalendar thead{}
table#bcalendar thead tr th{width:20px;text-align:center;padding:3px;border:1px solid #400;font:bold 100% Tahoma,Arial,Sans-serif;background:#790000;border-radius:3px;color:white}
table#bcalendar{margin:0;width:100%}
table#bcalendar tbody tr td{cursor:pointer;text-align:center;border-radius:3px;padding:3px;border:1px solid #CCC;color:#500;font:bold 100% Tahoma,Arial,Sans-serif}
table#bcalendar tbody tr td a:link,table#bcalendar tbody tr td a:visited,table#bcalendar tbody tr td a:active{font-weight:bold;color:#ffffff;text-decoration:none}
table#bcalendar tbody tr td a:hover{color:#ffffff;text-decoration:none}
td.firstCell{visibility:visible}
td.filledCell{background:white;background:rgba(255,255,255,0.54)}
td.filledCell:hover{background:#EBEBEB;background:rgba(255,255,255,0.79)}
td.emptyCell{visibility:hidden}
table#bcalendar tbody tr td.highlightCell{background:#790000;border:1px solid #9E0000}
table#bcalendar tbody tr td.highlightCell:hover{background:#B60000;border:1px solid #9E0000}
table#bcNavigation{width:100%;padding:3px 5px;color:#F1F1F1;font:bold 100% Tahoma,Arial,Sans-serif;background:#790000;border:1px solid #400;border-radius:2px}
table#bcNavigation a:link{text-decoration:none;color:#DADADA}
table#bcNavigation a:hover{color:white}
td#bcFootPrev{width:10px}
td#bcFootAll{text-align:center}
td#bcFootNext{width:10px}
ul#calendarUl{margin:5px auto 0!important}
ul#calendarUl li a:link{}
#calLoadingStatus img{display:block;width:80px;margin:10px auto}

Kiểu hiển thị 6

#calendarDisplay{display:none}
#blogger_calendar *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#blogger_calendar{margin:0 auto;width:100%;padding:180px 8px 8px;background:white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizbq_S-Ubh3ZQELMPwxCRTMgS0ATMoXJovdH3GD1wXZdRuGoyYjCBZPFuVPNqsr1jajOGID3MNuYOH_dgsWptSHYsiqOBQPy1K2r7IlNfPloqv1b79-wj2fTLQ8yCLvmTTUEQLcFLCsX0/w320/Minami.png) no-repeat 50% 0}
#bcaption{padding:3px 10px;margin:0;font:bold 100% Tahoma,Arial,Sans-serif;background:#BE3206;background:rgba(190,50,6,0.55);border:1px solid #BE3E00;border-radius:2px}
#bcaption select{background:white;border:1px solid #BE3E00;padding:1px;width:90%;color:#B13100;font-weight:bold}
table#bcalendar thead{}
table#bcalendar thead tr th{width:20px;text-align:center;padding:3px;font:bold 100% Tahoma,Arial,Sans-serif;background:#BE3206;background:rgba(190,50,6,0.55);border:1px solid #BE3E00;border-radius:3px;color:white}
table#bcalendar{margin:0 0;width:100%}
table#bcalendar tbody tr td{cursor:pointer;text-align:center;border-radius:3px;padding:3px;border:1px solid #FFC2AE;color:#CE3A01;font:bold 100% Tahoma,Arial,Sans-serif}
table#bcalendar tbody tr td a:link,table#bcalendar tbody tr td a:visited,table#bcalendar tbody tr td a:active{font-weight:bold;color:#ffffff;text-decoration:none}
table#bcalendar tbody tr td a:hover{color:#ffffff;text-decoration:none}
table#bcalendar tbody tr td.firstCell{visibility:visible;background:#C54204;background:rgba(197,66,4,0.41);border:1px solid #C74E0A}
td.filledCell{background:white;background:rgba(255,255,255,0.53)}
td.filledCell:hover{background:#FFE5D8;background:rgba(255,229,216,0.75)}
td.emptyCell{visibility:hidden}
table#bcalendar tbody tr td.highlightCell{background:#BE3206;background:rgba(190,50,6,0.8);border:1px solid #BE3E00}
table#bcalendar tbody tr td.highlightCell:hover{background:#D63300;background:rgba(240,57,0,0.8)}
table#bcNavigation{width:100%;padding:3px 5px;color:white;font:bold 100% Tahoma,Arial,Sans-serif;background:#BE3206;background:rgba(190,50,6,0.55);border:1px solid #BE3E00;border-radius:2px}
table#bcNavigation a:link{text-decoration:none;color:#FFE4DB}
table#bcNavigation a:hover{color:white}
td#bcFootPrev{width:10px}
td#bcFootAll{text-align:center}
td#bcFootNext{width:10px}
ul#calendarUl{margin:5px auto 0!important}
ul#calendarUl li a:link{}
#calLoadingStatus{background:white;padding:10px 0}
#calLoadingStatus img{display:block;width:80px;margin:0 auto 10px}

Kiểu hiển thị 7

#calendarDisplay{display:none}
#blogger_calendar *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#blogger_calendar{margin:0 auto;width:100%;padding:170px 8px 8px;background:white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMrqkw0z-Aa4gAtzxzbrhpUvTMDjNyPjqSFPh-mW9cVL1osiKy3KdWxrN4wKQtBCeSwaClx3L3a6ASRDmSs3p0zNXD8RSYcO1VrXLdORFDoa_JVwprolM-db-wow1SI2hBQn0Y7kk40uI/w250/Melody.png) no-repeat 50% -3px}
#bcaption{padding:3px 10px;margin:0;font:bold 100% Tahoma,Arial,Sans-serif;background:#CC0039;background:rgba(204,0,57,0.59);border:1px solid #BE002E;border-radius:2px}
#bcaption select{background:white;border:1px solid #BE002E;padding:1px;width:90%;color:#C70543;font-weight:bold}
table#bcalendar thead{}
table#bcalendar thead tr th{width:20px;text-align:center;padding:3px;font:bold 100% Tahoma,Arial,Sans-serif;background:#CC0039;background:rgba(204,0,57,0.59);border:1px solid #BE002E;border-radius:3px;color:white}
table#bcalendar{margin:0 0;width:100%}
table#bcalendar tbody tr td{cursor:pointer;text-align:center;border-radius:3px;padding:3px;color:#CE013A;font:bold 100% Tahoma,Arial,Sans-serif}
table#bcalendar tbody tr td a:link,table#bcalendar tbody tr td a:visited,table#bcalendar tbody tr td a:active{font-weight:bold;color:#ffffff;text-decoration:none}
table#bcalendar tbody tr td a:hover{color:#ffffff;text-decoration:none}
table#bcalendar tbody tr td.firstCell{visibility:visible;background:#C50442;background:rgba(197,4,66,0.32)}
td.filledCell{background:white;background:rgba(255,255,255,0.53)}
td.filledCell:hover{background:#FFD8E0;background:rgba(255,216,224,0.67)}
td.emptyCell{visibility:hidden}
table#bcalendar tbody tr td.highlightCell{background:#CC0039;background:rgba(204,0,57,0.59)}
table#bcalendar tbody tr td.highlightCell:hover{background:#EB0042;background:rgba(243,0,49,0.59)}
table#bcNavigation{width:100%;padding:3px 5px;color:white;font:bold 100% Tahoma,Arial,Sans-serif;background:#CC0039;background:rgba(204,0,57,0.59);border:1px solid #BE002E;border-radius:2px}
table#bcNavigation a:link{text-decoration:none;color:#FFDBE5}
table#bcNavigation a:hover{color:white}
td#bcFootPrev{width:10px}
td#bcFootAll{text-align:center}
td#bcFootNext{width:10px}
ul#calendarUl{margin:5px auto 0!important}
ul#calendarUl li a:link{}
#calLoadingStatus{background:white;padding:10px 0}
#calLoadingStatus img{display:block;width:80px;margin:0 auto 10px}
- Lưu lại và Xem kết quả
- Chúc bạn thành công!
Nguồn: Internet