Chẳng biết bắt đầu từ đâu đây, bởi vì quả thực rất đơn giản để tạo date stamp cho Wordpress, mà tôi lại rất thích nó mỗi lần mang CSS ra nghịch ngợm và trang trí. Tạo date stamp cũng là bài học đầu tiên của tôi về CSS, đến bây giờ lại được dùng lần nữa cho Wordpress và viết bài này trên blog của mình chia sẻ cách tạo nó.

Vị trí của date stamp thường được đặt bên trái tiêu đề trong single.php, hoặc bên phải tùy vào sở thích của người làm.

Bạn có thể hình dung calendar icon & date stamp qua một số mẫu sau:

Bắt tay vào việc nhé!

Chỉ cần 3 bước để tạo:

Bước 1: Tạo background (hay calendar icon)

Dùng photoshop tạo 1 hình nền cho date stamp, bước này chú ý đến kích cỡ của image, thường có độ lớn 46×50, độ lớn phụ thuộc vào kích thước và độ cao tiêu đề bài của single.php, tìm thấy bằng cách xem font-size <hx></hx> là bao nhiêu (x=có thể là 1,2,3..tùy vào từng theme mà tác giả đặt cho nó) . Bước làm này thực sự khó khăn với ai chưa làm quen với Photoshop, nhưng đừng lo bởi trên kho tàng Internet vô vàn những thứ ta cần đến đều miễn phí và hướng dẫn cách làm qua các bài tutorial, tôi xin giới thiệu một số địa chỉ để các bạn tham khảo cách làm bằng photoshop hoặc tải chúng về.

Xem tutorial tạo calendar icon

Calendar Icon – Photoshop tutorial

Bài khác về Calendar icon

Và một bài nữa 

Hoặc download miễn phí.

Download mẫu 1

Download mẫu 2

Bước 2: Điền code

Điền code sau vào single.php, vị trí điền tùy chọn, tôi thì đặt trước tiêu đề bài viết trong single.php

<div class="date-stamp">
<div class="month"><?php the_time('M') ?></div>
<div class="day"><?php the_time('d') ?></div>
</div>

Bây giờ tìm hiểu ý nghĩa của đoãn mã trên

<div class=”date-stamp”> – bắt đầu một box – hay <div> – với tên là date-stamp

<div class=”month”> – box có tên month, nằm trong box date-stamp

<div class=”day”> – box có tên day, nằm trong box date-stamp

<?php the_time(’M') ?> – Sử dụng php hàm the-time(’M') truy xuất giá trị của tháng, ở đây là M (ký hiệu cho Month), hiển thị sẽ là ví dụ FEB.

<?php the_time(’d') ?> – Sử dụng php hàm the-time(’d') truy xuất giá trị của ngày, ở đây là d (ký hiệu cho Day), hiển thị sẽ là 2 chữ số ví dụ 28.

Bạn có thể lựa chọn cách hiển thị ngày và tháng bằng cách xem thêm ở www.php.net

</div> – thẻ đóng box.

Bước 3: Now! Trang hoàng date-stamp bằng CSS

Bước này yêu cầu bạn biết chút xíu (rất chút xíu) về CSS. Mã CSS có thể khác nhau, bởi vì nó phụ thuộc vào độ lớn của calendar icon (background), theme của bạn và của tôi, vì vậy không thể nói trước nếu bạn làm giống như bài này mà sao không thành công, nhưng về cơ bản đoạn mã CSS của tôi như sau:

/*CSS DATE STAMP BOX*/
.date-stamp{
float: left;
display: inline;
margin: 0 10px 0 0;
padding: 0 0;
background: url(images/calendar-icon.png)  no-repeat;
}

.month{
color: red;
font-family: Verdana, Tahoma, Arial;
font-size: 15px;
margin: 0 0;
padding: 0 0;
}

.date{
color: blue;
font-family: Veranda, Tahoma, Arial;
font-size: 11px;
margin: 0 0;
padding: 0 0;
}

Dĩ nhiên đoạn mã này được add thêm vào style.css và nhớ bỏ calendar-icon.png trong thư mục images theme của bạn.

đây là kết quả

Chúc bạn có theme ưng ý!

Feedburner như là một giấc mơ trở thành hiện thực đối với các bloggers. Cuộc cách mạng RSS, một cánh cửa mới được mở ra đối với tất cả Publicers và Maketers.

Chúng ta, bloggers, rất cần vị trí site của mình được đặt lên đỉnh cao của đường cong và điều đó hoàn toàn làm được với feedburner . Nó cho biết số lượng feed subscribers, cho phép cập nhật feed thông qua email và kể cả thống kê một cách chuyên nghiệp trang của bạn. Dĩ nhiên là free!

Nếu chưa có tài khoản Feedburner, hãy đăng ký cho mình 1 account tại đây.

Bây giờ đã có account thì signin, bạn nên tìm hiểu một vài điều để biết cách sử dụng feedburner.

ĐỊA CHỈ FEEDBURNER

Quả thực là đơn giản để nhận biết địa chỉ của bạn ở feedburner, nhưng có thể xa lạ đối với những người hoàn toàn mới bắt đầu. Địa chỉ url để burn to feed thường có như sau:

http://feeds.feedburner.com/YourFeedBurnerFeed (với “YourFeedBurnerFeed” là do bạn đặt).

ví dụ của Nanowings: http://feeds.feedburner.com/nanowingsblog (với “nanowingsblog” là do nanowings đặt)

Hãy add URL này vào theme của bạn để sử dụng feed thông qua feedburner

FEEDBURNER ID

Với trick nhỏ có thể thấy feedburner ID sau khi đã signin vào account.

Trong account click vào feed title để tìm ID (feed title của nanowings là nanowingsBLOG)

ID của bạn sẽ hiện trên address bar với URL có dạng sau (ID của nanowings: id=1582528):

Hãy ghi lại số trong khung đỏ và lưu lại sử dụng sau này (save trong handy chẳng hạn ), ID này dùng trong trường hợp đặc biệt, như feed by email chẳng hạn.

KÍCH HOẠT

Để feedburner hoạt động trước tiên cần phải activate nó. Làm được điều này chỉ cần:

click vào Publicize và chọn những features cần burn to feed, như feed by email thông qua Email Subscriptions…trong đó hãy click active sau đó save, Copy/Paste links add tùy ý vào theme của bạn. Tương tự đối với các features khác.

Bây giờ blog của bạn hoàn toàn có thể burn to feed với feedburn. chúc thành công!

Thử demo theo links này: FEED BY EMAIL | BY FEEDBURNER | BY ENTRIES

[wp_youtube]P2jXnL0yprw[/wp_youtube]

[wp_youtube]YivfprHajZQ[/wp_youtube]

[wp_youtube]8IqcjmBRr7E[/wp_youtube]

[wp_youtube]KxSJ-ez-EOk[/wp_youtube]

[wp_youtube]9cIZKG1chLY[/wp_youtube]

[wp_youtube]LAePEdePP0Y[/wp_youtube]

1. BEFORE & AFTER

2. OVERLAY LAYER (LỚP PHỦ)
Hãy open bất kỳ tấm ảnh gốc (làm nguồn) nào bạn thích và muốn làm effect. Sau đó vào thẻ Layer > Duplicate Layer (hoặc Ctrl+J) trên menu bar để tạo 1 layer đúp. Ở Duplicate Layer bạn chọn Blending mode sang chế độ overlay, tiếp tục điều chỉnh Opacity khoảng 70%. (Chú ý: Điều chỉnh Opacity phụ thuộc vào độ sáng tối, mầu của ảnh gốc, ở đây mình chọn 70%)

3. HIGHTLIGHT POST (VÙNG SÁNG)
Trở lại layer gốc . Chọn Brush tool, với Size = 200px, Mode = Color Dodge and Opacity = 10%. Sử dụng Eyedropper tool (hoặc ALT+Click) để chọn skin color giống như mầu của ảnh, rồi dùng brush nhẹ nhàng tô vào vùng muốn làm sáng.

4. EYESHADOW (ĐÁNH BÓNG MẮT)
4.1. Đánh dấu vùng chọn bằng Selection > Feather (TRL+ALT+D) với feather chọn khoảng 5px. Tạo một layer mới rồi Fill mầu hồng vào vùng chọn đó (nếu muốn mắt xanh thì thì fill mầu xanh). Sau đó lấy blending mode với Hue

4.2. Tiếp tục, giống như bước trên, nhưng lần này vùng chọn nhỏ hơn vùng chọn mầu hồng, vẫn với feather khoảng 5px, nhưng fill với mầu xanh (tiếng anh chọn mầu blue purple color (tiếng việt gọi là mầu gì nhỉ? xanh nhạt à?)) và lấy blending mode với Darken

4. EYELINE (MI MẮT)
Đánh dấu chọn vùng mi mắt với feather 3px. Tạo một layer mới, sử dụng Gradient tool, chọn mầu xanh lá cây và chọn Foreground với Transparent. Sau đó kéo con trỏ Gradient từ góc mi mắt phía trong gần mũi ra phía đuôi mắt. Sử dụng Adjust the blending mode là Multiply.

5. KẾT QUẢ
Sử dụng bước trên để làm tiếp mắt còn lại và làm đôi môi…
Và kết quả được như hình sau, không kém gì trên tạp chí đúng không.

Thành công nhé!