Phan Nhật Chánh - Official website: Customize
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.

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 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!

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

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

Tăng tốc cho Blogger với LazyLoad Plugin

   Oct 10, 2014   
Lazyload là một Plugin Jquery sử dụng cho việc load hình ảnh trên trang web. Công dụng của nó là các hình ảnh chỉ hiển thị trong tầm mắt bạn nhìn thấy được trên trình duyệt và khi bạn di chuyển thanh cuộn của trình duyệt tới đâu thì hình ảnh khu vực đó mới được nạp và hiển thị, điều này sẽ giúp cải thiện tốc độ tải trang của bạn đi đáng kể khi blog của bạn sử dụng nhiều hình ảnh. Bạn có thể xem demo tại đây hoặc tại đây

huong dan cach tang toc do tai trang cho blogger su dung lazyload, Lazyload Jquery Plugin lam muot va load anh theo thu tu cho blogspot blogger, tang toc cho blogger blogspot voi lazyload, thu thuat tao lazyload cho hinh anh tren blogspot blogger, hieu ung load hinh anh tuan tu voi lazyload

Cài đặt Lazyload cho Blogger

- Để cài đặt, trước tiên vào Blogger >> Mẫu >> Chỉnh sửa HTML
- Copy đoạn code dưới đây dán nó vào trước thẻ </body>
<!--Lazy Loading-->
<script src='https://65a77fe780fd0d6fd0d7c825fbb01c35124d06df.googledrive.com/host/0BwL0KbT-xOaTZzd4ZldpckNDbUE'></script>
<script>//<![CDATA[
$(function () {
$("img.lazy").lazyload({
effect: "fadeIn"
});
});
//]]></script>
Với đoạn mã trên hình ảnh sẽ được nạp với hiệu ứng fadeIn của jQuery trong đẹp mắt và chuyên nghiệp.

Lưu ý: Template của bạn phải có thư viện jQuery:
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript' />
Nếu chưa có Copy và đặt nó trước thẻ </head>

Sử dụng Lazyload cho Blogger

Để sử dụng lazyload, bạn phải thay đổi thẻ hình ảnh của bạn. Địa chỉ hình ảnh của bạn phải được đưa vào thuộc tính data-original và thêm class="lazy" vào thẻ hình ảnh
Ví dụ hình ảnh ban đầu là:
<img src="http://hinh_anh_cua_toi.jpg" width="440" height="280" />
và để áp dụng lazyload bạn phải thay đổi nó lại thành:
<img data-original="http://hinh_anh_cua_toi.jpg" class="lazy" width="440" height="280" />
Như vậy, mỗi khi muốn sử dụng lazyload cho hình ảnh nào thì chỉ việc thay đổi src thành data-original và thêm lớp class="lazy" vào thẻ hình ảnh đó.

Bạn có thể xem thêm các cách tùy biến và sử dụng tại trang chủ của lazyload 

Giới hạn số lượng bài viết cần hiển thị khi xem theo Nhãn (Labels) trong Blogger

   Sep 26, 2014   
Mặt định thì khi đi đến liên kết của một nhãn nào đó trên blog của bạn thì url trên thanh địa chỉ sẽ có dạng (ví dụ: http://example.com/search/label/Blogger và nó sẽ hiển thị tất cả bài viết thuộc nhãn Blogger), nếu nhãn đó có 100 bài viết thì nó sẽ hiển thị ra 100 bài viết trên trang đó, điều này sẽ làm cho blog của bạn tải rất chậm và rất dày trong rất sấu. Như vậy, điều bạn cần làm là giới hạn lại số bài viết hiển thị trên một nhãn bằng cách thêm ?max-results=10 cho nó. Chia sẽ một thủ thuật nhỏ để bạn có thể dễ dàng giới hạn số lượng bài viết muốn hiển thị trên một trang (nhãn) khi xem bài viết theo Labels (Nhãn) trong Blogger.

Gioi han so luong bai viet can hien thi khi xem theo Nhan (Labels) trong Blogger, gioi ban bai viet cho nhan labels cua blogspot, gioi ha so bai viet cho Nhan labels cua blogger

Giới hạn số lượng bài viết cho Nhãn (Labels) trong Blogger

- Đăng nhập vào Blgoger Tới Mẫu >> Chỉnh sữa HTML
- Nhấn Ctrl + F Tìm expr:href='data:label.url' và thay đổi tất cả đoạn mã tìm được thành:
expr:href='data:label.url + "?max-results=10"'

Giới hạn số lượng bài viết cho Nhãn (Labels) trong Blogspot
Với 10 là bài ​​viết giới hạn tối đa được hiển thị. Bạn có thể thay đổi thành giá trị khác nếu muốn.

- Lưu mẫu để hoàn thành!