Thực Hiện Bài Viết Blogger Thể Hiện Lịch Ngày

Nó khá phổ biến để xem lịch phong cách ngày bên cạnh một số bài viết WordPress, tuy nhiên cho nền tảng Blogger nó sẽ không là một nhiệm vụ dễ dàng để thêm nó. Nhưng ai nói rằng nó không thể? Bạn không cần phải nhìn xa hơn blog này. Trong hướng dẫn này, tôi sẽ cho bạn thấy làm thế nào để tạo ra một ngày phong cách lịch cho bài viết của Blogger.

Demo:
Để thêm phong cách lịch tiêu đề ngày blog của chúng tôi, trước hết chúng ta nên thiết lập hiển thị ngày. Đăng nhập vào Bảng điều khiển Blogger của bạn, đi đến định dạng> Settings - nhìn cho các tùy chọn định dạng tiêu đề Ngày và thay đổi ngày để nó là ngày đầu tiên, sau đó tháng và cuối cùng năm, ví dụ: 28 Tháng Bảy 2012 - xem ảnh chụp màn hình dưới đây

Nếu bạn đang sử dụng giao diện mới hơn: Cài đặt> Ngôn ngữ và định dạng - Định dạng ngày tháng đăng bài và thay đổi định dạng ngày như bạn có thể thấy trong ví dụ của tôi dưới đây:

Bây giờ hãy vào Thiết kế> Edit HTML> dày "Expand Widget Templates" hộp kiểm và tìm kiếm (CTRL + F) dòng sau đây:

<h2 class='date-header'><span><data:post.dateHeader/></span></h2>

Nếu bạn tìm thấy nó hai lần, thay thế hai lần với đoạn code dưới đây:

<div id='Date'>
<script>changeDate(&#39;<data:post.dateHeader/>&#39;);</script>
</div>
<b:else/>
<div id='Date'>
<script>changeDate(&#39;&#39;);</script>
</div>

Bây giờ thêm đoạn mã sau ngay phía trên </ head> (CTRL + F để tìm thấy nó)

<script type='text/javascript'>
//<![CDATA[
var DateCalendar;
function changeDate(d){
if (d == "") {
d = DateCalendar;
}
var da = d.split(' ');
day = "<strong class='date_day'>"+da[0]+"</strong>";
month = "<strong class='date_month'>"+da[1].slice(0,3)+"</strong>";
year = "<strong class='date_year'>"+da[2]+"</strong>";
document.write(month+day+year);
DateCalendar = d;
}
//]]>
</script>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>
/* Calendar style date
----------------------------------------------- */
#Date {
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYG-Ti10yYLMgsxf6lZyCjW0-P8PR2nhlPKn1SogG7_CrySJ2SpBuz1sBbl8ONxRIarnc0MMaiv4YGzPQe57Vl8SKyRQ6wv5H2cFF-r3W4B1GkDXGA8XZdOOd76MO2U3nN3wqghnSwpRqo/s1600/calendar07.png) no-repeat;
display: block;
width:60px;
height:60px;
float: left;
margin: 15px 2px 0 -108px;
padding: 0 0 8px 0px;
border: 0;
text-transform: uppercase;
}
.date_month {
display: block;
font-size: 15px;
font-weight:bold;
margin-top:-1px;
text-align:center;
color:#ffffff; /* Month's color */
}
.date_day {
display: block;
font-size: 28px;
font-weight:bold;
margin-top:-8px;
text-align:center;
color:#282828; /* Day's color */
}
.date_year {
display: block;
font-size: 10px;
margin-top:-8px;
text-align:center;
color:#282828; /* Year's color */
}
</style>
</b:if>

Trước khi lưu mẫu của bạn:

Để thay đổi phong cách lịch, thay thế địa chỉ màu xanh lam với bạn;

Nếu lịch không xuất hiện một cách chính xác, thay đổi -108 với 0;

Với màu xanh lá cây được đánh dấu các khu vực nơi bạn có thể thay đổi màu sắc trong những ngày tháng

Xem trước Mẫu và nếu tất cả mọi thứ là ok, nhấp chuột vào nút Save.