[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.

Read more…

Rounded corners with Image

[FD's BlOg] - Bài viết trước mình có giới thiệu về cách bo góc với CSS dùng lệnh margin, và thủ thuật đó hơi phức tạp. Hôm nay mình sẽ giới thiệu 1 các khác đó là dùng ảnh để bo góc, thủ thuật này đơn giản hơn nhiều. Rất dễ để các bạn trang trí cho các widget cho blog của mình.

Với thủ thuật này bạn có thể bo tùy ý các góc, ví dụ bo cả 4 góc, bo 2 góc trên, bo 2 góc dưới.
Ở đây mình sẽ giới thiệu cho các bạn đủ 3 thủ thuật bo góc trên. Còn các thủ thủ thuật bo từng góc (ví dụ bo 1 trong 4 góc - thủ thuật này sẽ có 1 chút khác biệt) thì mình ko giới thiệu ở đây (do ít được dùng), các bạn có thể tìm hiểu thêm. Nếu ko rõ có thể hỏi mình.

Trước tiên thực hiện thủ thuật, bạn phải có 1 tấm ảnh có màu tương tự như hình nền ta muốn hiển thị, và tấm ảnh này đã được bo sẵn 4 góc (có thể dùng các soft đồ họa để thực hiện việc này). Sau đó ta cắt lấy 4 góc này ra, và ta sẽ được 4 tấm hình nhỏ, có thể xem hình mẫu bên dưới như bên dưới:



Và khi cắt ra ta sẽ được 4 ảnh:
Top-Left:

Top-Right:

Bottom-Left:

Bottom-Right:


Sau khi đã có ảnh, ta bắt đầu tiến hành thủ thuật:
1. Đăng nhập blog.
2. Vào Bố cục - chỉnh sửa code HTML
3. Chèn đọan code CSS sau vào ngay trên dòng ]]></b:skin>

.roundcont {
width: 250px;
background-color: #f90;
color: #fff;
}

.roundcont p {
margin: 0 10px;
}

.roundtop {
background: url(link Top-Right.gif) no-repeat top right;
}

.roundbottom {
background: url(link Bottom-Right.gif) no-repeat top right;
}

img.corner {
width: 15px; height: 15px;
border: none;
display: block !important;
}

Với vài lưu ý nhỏ:
- width: 250px; : là độ rộng của không gian cần bo góc.
- width: 15px;
height: 15px; là kích thước của các ảnh của 4 góc cắt ra (các ảnh này phải có kích thước hòan tòan giống nhau).
- background-color: #f90; : màu nền
- link Top-Right.gif : link của ảnh Top-Right.gif

4. Save template lại.
5. Tiếp theo là chèn đọan code HTML bên dưới vào widget(văn bản) cần bo góc.

<div class="roundcont">
<div class="roundtop">
<img src="link ảnh Top-Left.gif" alt=""
width="15" height="15" class="corner"
style="display: none" />
</div>

CODE WIDGET - VĂN BẢN MUỐN HIỂN THỊ

<div class="roundbottom">
<img src="link ảnh Bottom-Left.gif" alt=""
width="15" height="15" class="corner"
style="display: none" />
</div>
</div>

Với đọan HTML trên, thì widget sẽ được bo với 4 góc, (hình minh họa bên dưới):
Khi muốn bo 2 góc trên thì ta bỏ đọc code màu xanh trong đọan code HTML trên là xong (xem ảnh minh họa bên dưới)


Khi muốn bo 2 góc dưới thì ta bỏ đọc code màu cam trong đọan code HTML trên là xong (xem ảnh minh họa bên dưới)


Như vậy đã hòan thành, ta thấy là việc bo góc bằng hình ảnh thì đơn giản và linh họat hơn nhiều so với bo góc dùng lệnh margin.

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

Tham khảo từ Blog kalsey

Read more…

[FD's BlOg] - Tôi đắng cay lắm, đau khổ lắm và phải dùng hết can đảm mới có thể gửi những dòng tâm sự này . Tôi cần một người bạn để trút những điều nhục nhã này và hơn hết là tôi cần một lời khuyên




Hình minh họa
Tốt nghiệp ĐH, tôi xin vào làm việc cho công ty Kiến trúc. Mới vào làm việc tôi đã được sếp để ý cân nhắc giao cho nhiều hợp đồng quan trọng, bởi tôi làm việc chăm chỉ, khả năng sáng tạo cũng như chăm sóc khách hàng tốt. Chỉ trong vòng một năm tôi được đề bạt lên chức trưởng phòng. Nhân viên của tôi có khoảng gần chục người, tất cả đều là đàn ông con trai. Vì yêu cầu công việc, tôi phải tuyển thêm một nhân viên văn phòng và tất nhiên đối tượng phải là nữ.

Ngay người đến nộp hồ sơ đầu tiên, tôi đã thực sự ưng ý (đó cũng chính là vợ tôi bây giờ). Cô ấy tên là Trà My, người cô ấy cũng đẹp như chính cái tên đó vậy. Trong đời tôi chưa từng gặp một ai có khuôn mặt đáng yêu như My, một khuôn mặt dường như thơ ngây và thánh thiện. Tôi lập tức bị tiếng sét ái tình đánh gục và chẳng cần đọc kỹ hồ sơ xin việc, tôi đã nhận cô ấy vào làm việc ngay lập tức.

Từ ngày có Trà My vào công ty, phòng làm việc của chúng tôi vui hẳn lên. Tôi đã thực sự lo lắng, Trà My xinh đẹp như vậy cô ấy lại là người thành phố, ăn mặc nói năng sành điệu, còn tôi thì chỉ là một anh chàng quê mùa không hiểu tình cảm của tôi có được cô ấy chấp nhận không. Trong khi đó những cậu nhân viên quanh tôi thì đẹp trai, ga lăng hơn… Vậy mà không hiểu vì sao mà khi tôi bày tỏ tình cảm của mình thì Trà My đã nhận lời.

Chẳng điều gì có thể diễn tả hết được sự sung sướng hạnh phúc của tôi khi cô ấy gật đầu đồng ý làm bạn gái. Tôi còn nhớ khi đó tôi đã hỏi Trà My một câu khá ngớ ngẩn là: “Tại sao em lại đồng ý làm bạn gái của anh?”, và tôi cũng không nhớ nổi cô ấy trả lời như thế nào, chỉ đại khái là cô ấy bảo vì tính tôi hiền lành, thật thà.

Chuyện tình cảm của chúng tôi nhanh chóng được cả công ty biết chuyện, những tưởng ai cũng mừng cho chúng tôi. Nhưng mọi người lại có vẻ như không tán thành chuyện tình cảm đó, nhiều khi mấy cậu nhân viên trẻ đang túm năm tụm ba nói chuyện, thấy tôi xuất hiện thì họ lại giải tán luôn, còn các chị em khác phòng thì hay nhìn tôi bằng con mắt ái ngại.

Hồi đó tôi đã nghĩ mọi người ghen tỵ với hạnh phúc của tôi, nên tôi chẳng để ý đến mà còn lao vào cuộc tình đó như điên dại hơn.

Trong một cuộc vui tôi và cô ấy uống hơi nhiều, không kiềm chế được nên chúng tôi đã làm “chuyện ấy”. Khi tỉnh rượu tôi đã rất ân hận và xin lỗi cô ấy, tôi hứa là sẽ không có lần thứ hai trước khi làm đám cưới và tôi đã giữ được lời hứa của mình.

Bất ngờ cho tôi, khoảng hơn 1 tháng sau Trà My báo tin cho tôi là đã có thai. Cô ấy đề nghị chúng tôi làm đám cưới ngay. Tôi rất yêu My và thực sự muốn lấy cô ấy làm vợ, nhưng khi đó mẹ tôi đang phải nhập viện vì tai biến mạch máu não, tuy đã qua cơn nguy hiểm nhưng tôi muốn bà bình phục hẳn. Vừa nghe thấy tôi nói là hoãn làm đám cưới lại một tháng là Trà My trách móc nói tôi là kẻ không ra gì, kẻ bạc bẽo và định rũ bỏ trách nhiệm. Khi đó tôi đã rất bất ngờ với phản ứng dữ dội của cô ấy, nhưng lại nghĩ rằng có lẽ cô ấy quá lo lắng nên mới như vậy. Không muốn Trà My làm to chuyện, tôi đã đưa cô ấy về ra mắt gia đình đồng thời xin tổ chức đám cưới.

Bố mẹ tôi không tán thành chúng tôi tổ chức đám cưới khi mẹ tôi còn chưa bình phục hẳn, nhưng thấy tôi cương quyết nên các cụ cũng đồng ý. Nhà tôi cách Hà Nội hơn 300 cây số, nên đám cưới phải tổ chức ở hai nơi. Theo lệ ở quê tôi đám cưới diễn ra ở nhà trai trước, rồi sau đó về nhà gái tổ chức sau. Không may cho tôi, đúng hôm đang tổ chức lễ cưới ở nhà gái, thì tôi nhận được tin mẹ tôi lại phải nhập viện và đang rất nguy kịch.

Biết chuyện bố mẹ vợ giục tôi về quê ngay, ông giám đốc cũng bảo tôi cứ yên tâm về mọi việc đã có gia đình nhà gái và cơ quan lo giúp. Chiều hôm đó sau khi rời buổi tiệc tại nhà hàng, tôi liền phi ngay ra bến xe để về quê. Xúi quẩy làm sao chờ đến hơn 9 giờ đêm mà cũng không còn một chuyến xe nào để về nhà.

Tôi đành quay lại căn phòng trọ (tôi vẫn thuê ngoài chứ không ở cùng bố mẹ vợ) nhưng không thấy vợ đâu. Gọi điện thoại thì cô ấy tắt máy, tôi đến nhà vợ tìm nhưng được biết là Trà My đã về từ rất sớm, không hiểu cô ấy đi đâu mà cả đêm không về. Đến sáng hôm sau, tôi dậy sớm để về quê. Vừa ra khỏi ngõ thì tôi chứng kiến cảnh vợ mình bước xuống từ chiếc xe hơi của ông giám đốc. Tôi như chết đứng khi thấy họ ôm hôn tạm biệt nhau trong xe. Như phát điên lên tôi chạy lại và gào lên: “Cả đêm qua cô đi đâu? Thật là khốn nạn, cô đã phản bội tôi phải không?”

Tôi không còn nhớ tiếp theo mọi chuyện như thế nào nữa, đầu tôi căng ra và thấy trong lòng vô cùng đau đớn. Tôi bỏ mặc vợ ở nhà một mình để về quê. Đúng chiều hôm tôi đó mẹ tôi đã qua đời. Trước khi nhắm mắt bà trăn trối lại rằng tôi phải giữ gìn hạnh phúc của mình, phải yêu thương vợ con, bà nói người có khuôn mặt phúc hậu như vợ tôi thì cả đời sẽ không bao giờ làm một điều gì thất đức cả…

Những lời của mẹ càng như xé nát cõi lòng tôi. Sau khi lo việc chôn cất xong xuôi, tôi trở lại Hà Nội. Mấy hôm không gặp vợ tôi có vẻ gầy đi nhiều, cô ấy xanh xao hốc hác. Nhớ lại những lời mẹ nói đã giúp tôi phần nào bình tĩnh hơn. Tôi cho vợ mình cơ hội để giải thích, Trà My nói rằng cô ấy và ông sếp vì lỡ quá chén nên đã không kìm chế nổi cám dỗ chứ thực sự hai người không hề có ý định phản bội tôi, cô ấy còn nói: “Chẳng phải chính em và anh cũng không kiềm chế được trong lần say rượu trước khi cưới đó sao?”. Cô ấy đã khóc lóc thề thốt rất nhiều và tôi đã tin tưởng bỏ qua cho vợ mình lần đó.

Sau sự cố trên, hai vợ chồng tôi đã không làm cho công ty đó nữa. Vợ tôi đang mang bầu, nên cô ấy nghỉ luôn ở nhà, còn tôi thì xin vào làm cho một công ty khác. Ở công ty mới lương của tôi được trả khá hậu hĩnh chỉ phải có điều là quá xa nhà. Chính vì xa nhà nên tôi không mấy khi về ăn cơm trưa. Đến khi vợ tôi mang bầu tháng cuối, một hôm trước khi đi làm tôi thấy cô ấy kêu là hơi đau bụng. Tôi định xin nghỉ để đưa vợ đi khám, nhưng cô ấy bảo không sao vì còn hơn hai tuần nữa mới đến ngày sinh nở.

Hôm đó đi làm, lòng tôi như có lửa đốt. Đến gần giờ nghỉ trưa, tôi xin về sớm để về nhà với vợ. Khi về đến nhà, tôi lại một lần nữa chết điếng người khi thấy tay giám đốc cũ đang ngồi trong nhà nói chuyện với vợ mình. Tôi đứng lặng khi nghe thấy ông ta nói: “Đây là số tiền nhỏ để sau này em còn nuôi con”. Nuôi con ư? Ông ta cho vợ tôi tiền để nuôi con của tôi hay nuôi con của ông ta? Lúc đó tôi chỉ muốn cầm dao giết chết cả hai, nhưng không hiểu sao lúc đó tôi đã không làm như vậy mà lặng lẽ bỏ đi.

Chuyện này mới xảy ra cách đây hơn 1 tuần, tôi đã nói dối cô ấy đi công tác để tránh mặt. Giờ đây tôi đang đau khổ vô cùng tôi thấy dường như tôi chưa bao giờ hiểu được con người thật của cô ấy. Tôi phải làm sao với vợ mình bây giờ? Phải làm sao để biết được mối quan hệ giữa vợ tôi và ông giám đốc công ty cũ? Làm sao để biết xem đứa con kia có phải là của tôi hay không? Xin các anh chị đọc giả hãy cho tôi một lời khuyên !

Sưu Tầm

Read more…