Ứng dụng bo góc : Trang trí khung cho mỗi bài viết dùng ảnh. (một thủ thuật khá phức tạp)

[FD's BlOg] - Bài viết này không liên quan gì nhiều đến kĩ thuật bo góc, mà ứng dụng chủ yếu là dùng ảnh bo góc sẵn để trang trí cho mỗi bài viết.(Đây là một thủ thuật khó, đòi hỏi bạn phải rành về bố cục lẫn việc canh chỉnh, cũng như thiết kế các ảnh phông nền của bài viết - Các bạn mới mình khuyên nên test trước khi thử nghiệm ở blog của mình).

Thủ thuật cơ bản là dùng CSS để tạo hiệu ứng đổi ảnh khi rê chuột lên vùng bài viết. Và để thực hiện thủ thuật này bạn phải có 1 vài hình ảnh nhất định để trang trí cho bài viết.

Hình ảnh minh họa :

Trước tiên các bạn tham khảo các hình mẫu sau:
Hình a - box.gif:

Hình b - edge.gif:

Hình c - edge-h.gif:

Hình d - arrow.gif:


Để trang trí bài viết của bạn, các hình mẫu đó phải phù hợp với bài viết của bạn.

Ví dụ:
- ở hình a có độ rộng là 300px, khi đó nội dung sẽ được hiển thị trong khung có độ rộng 150px, nếu độ rộng của bài viết là 500px thì độ rộng của hình a sẽ là 1000px (500px+500px) như thế ta mới bo hết được không gian của bài viết.
- Còn cac hình b, c, d thì các bạn có thể giữ nguyên kích thước, và có thể thay đổi chút về màu sắc... cho phù hợp với mình.

► Sau đây ta bắt đầu thực hiện demo:
1. Đây là code CSS của bản demo

#news {
margin:1em auto;
padding:0;
width:150px;
font-size:0.94em;
list-style:none;
}
#news li {
background:url("http://sites.google.com/site/fdblogsite/Home/box.gif") 0 100% no-repeat;
padding:0 0 4px 0;
margin:8px 0 0 0;
display:block;
width:150px;
}
#news li p {
background:#eaeaea;
padding:1px 4px 0 7px;
margin:0;
border-left:14px solid #939393;
}
#news li.arr p {
background:#eaeaea url("http://sites.google.com/site/fdblogsite/Home/edge.gif") 0 50% repeat-y;
padding-left:21px;
border:0;
}
#news h4 {
font-size:1em;
line-height:1em;
font-weight:bold;
background:url("http://sites.google.com/site/fdblogsite/Home/box.gif") 0 0 no-repeat;
margin:0;
padding:6px 4px 3px 21px;
}
#news li:hover {
background-position:-150px 100%;
}
#news li:hover p {
border-color:#2793ff;
}
#news li.arr:hover p {
background-image:url("http://sites.google.com/site/fdblogsite/Home/edge-h.gif");
}
#news li:hover h4 {
background-position:-150px 0;
}
#news a:link {
text-decoration:none;
color:#000;
}
#news a:visited {
text-decoration:none;
color:#606;
}
#news a:hover {
text-decoration:underline;
}
#news .more {
line-height:1em;
display:block;
text-align:right;
padding:0 18px 2px 21px;
margin-top:4px;
background:url("http://sites.google.com/site/fdblogsite/Home/arrow.gif") 135px 50% no-repeat;
}

Chú ý :
- 2 dòng code màu đỏ : độ rộng của vùng hiển thị nội dung.
- ở 2 dòng code màu xanh: ta đều thấy có -150px: đây chính là 1/2 độ rộng của hình a. (dùng tạo hiệu ứng đổi ảnh khi rê chuột, tức là ảnh sẽ bị dịch trái 1 đọan là 150px)
- Ở dòng kể cuối trong đọan code CSS trên ta thấy có số 135px, đây chính là vị trí của hình d (arrow.gif) trong khung hiển thị. Và để cho đồng nhất ta nên lấy vị trí này bằng độ rộng của khung trừ đi 15px (150px - 15px = 135px).

2. Và đây là code HTML của bản demo:

<ul id="news">
<li>
<h4><a href="#">Bài viết 1</a></h4>
<p>Nội dung bài viết<br/>
.........<br/>
FD's BlOg - Test<br/>
.........</p>
<p>Nội dung bài viết<br/>
.........<br/>
FD's BlOg - Test<br/>
.........</p>

<a href="#" class="more">Read more</a>
</li>

<li class="arr">
<h4><a href="#">Bài viết 2</a></h4>
<p>Nội dung bài viết<br/>
.........<br/>
FD's BlOg - Test<br/>
.........</p>
<a href="#" class="more">Read more</a>
</li>

</ul>

► Bây giờ ta tiến hành hack cho bài viết:

- Đầu tiên bạn nên tìm hiểu một chút về code HTML của bài viết.
- Đăng nhập blog.
- Vào bố cục - chỉnh sửa HTML (chọn mở rộng mẫu tiện ích)
- Tìm đọan code HTML bên dưới (hoặc tương tự) (code bên dưới đã hack tiện ích Read More...)

<div class='post hentry'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'> <data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<div id='title_post'>
<a expr:href='data:post.url'> <data:post.title/> </a>
</div>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

<div class='post-header-line-1'/>
<div class='post-body entry-content'>

<data:post.body/>

<a expr:href='data:post.url'>Read More...</a>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

►Đọc code:
- Code màu xanh dương : là tựa đề bài viết
- Code màu đỏ : là nội dung bài viết
- Code màu xanh : là tiện ích đọc thêm (Read More...)

Bây giờ bạn hãy xem hình minh họa dưới ta sẽ thấy bố cục rõ ràng hơn.


- Như vậy ta đã thấy sự tương tự giữa bản demo và bài viết trong blog. Và ta chỉ cần thực hiện một vài thủ thuật nhỏ nữa là xong.
- Cơ bản đã xong. giờ bạn chỉ còn việc thiết kế lại hình a (box.gif) cho phù hợp với khung bài viết của bạn. Sau đó thay đổi lại 1 chút đọan CSS (như đã nói ở trên) cho phù hợp. Rồi dán đọan code CSS đó ngay trên dòng ]]></b:skin>

- Sau đó thay đổi 1 chút đọan code HTML của bài viết như hình bên dưới:

<div class='post hentry'>

<ul id='news'>
<li>
<h4>

<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<div id='title_post'> <a expr:href='data:post.url'><data:post.title/></a></div>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

<div class='post-header-line-1'/>

</h4>

<div class='post-body entry-content'>

<p><data:post.body/></p>

<a class='more' expr:href='data:post.url'>Read more...</a>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

</li>
</ul>

- Save template lại là xong.

► Chú ý : không nên sử dụng các thẻ <h4> {Nội dung} </h4> <p> {Nội dung} </p> trong bài viết. Nó sẽ làm ảnh hưởng đến khung của bài viết.

Các bạn có thể xem hình minh họa (mình đã thực hịên ở blog-test của mình)


Chúc các bạn thành công.