[T]Ế [Đ]IÊN
Các thể loại của blog
Thư mục riêng của [T]Ế [Đ]IÊN
BlogRoll
Blog
Thứ tư, 27/02/2008 - 12:10:pm
Thỉnh thoảng các bạn thấy Tế Điên làm mấy cái Tab cho những bài thơ (xem ví dụ) , hay thay đổi ảnh nền của blog (xem ví dụ), hay thay đổi hình dạng con trỏ chuột (xem ví dụ)... ... Sau khi thử nghiệm thêm vài cái mã hay hay, hôm nay Tế Điên cố gắng chia sẻ những gì mình biết để mọi người cùng làm. Hi vọng Blog Tìm Nhanh sẽ ngày càng nhiều màu sắc hơn.
Dĩ nhiên, sẽ còn nhiều sai sót, (TĐ chỉ là nghiệp dư mà 
), có ai biết thêm gì thì góp ý nha!!!
Một vài thứ cần nói trước khi nói về Code:
*Copy và Past đoạn mã :
Để tiện cho các bạn, Tế Điên sẽ cố gắng làm cho đoạn mã đơn giản nhất.
Sau khi copy đoạn mã, bạn vào khung soạn thảo click vào ô “View source” và paste vào (nên paste mã vào phần dưới cùng) , rồi chỉnh lại một vài thông số theo ý mình, sau đó lại click vào ô "View source" một lần nữa để xem thành quả…
* Cách đơn giản để lấy mã màu :
Mã màu thường có 7 ký tự, bắt đầu bằng dấu #.
Ví dụ: #fafdff, #D570EE …
Để biết được mã của màu mình mong muốn, check vào ô “Màu chữ”-à “Màu khác”
* Nguồn ảnh-cách xem thông số:
Những hình ảnh mà các bạn dùng phải tồn tại trên Web, muốn vậy các bạn phải upload hình của mình lên. Muốn upload hình của chính mình lên bạn cần tạo một host trên web. Một số trang thông dụng như flickr.com/ photobucket.com / fileden.com ... cho phép bạn làm điều đó. Chỉ việc đăng ký một tài khoảng và upload. Hoặc nếu không thì sử dụng nguồn ảnh trên net luôn.
Cách đơn giản để biết kích thước ảnh, link ảnh…: click chuột phải vào hình, chọn “Properties”
Tạm thời có vài điều vậy thôi. Sau này sẽ có nhiều khi nhắc tới những điều trên.
Giờ ta bắt đầu với vài cái đơn giản trước, sau sẽ từ từ "nhức óc" dần...
**************************************************************
*Thay đổi hình dáng con trỏ chuột
Các bạn vào trang http://www.moocursors.com , chọn một mục ở cột bên trái, sẽ thấy như sau:
Chỉ cần click vào ô mình thích, tự động nó sẽ đánh dấu cả đoạn mã. Right click---> Copy.
Trước khi dán vào khung soạn thảo, phải chắc chắn rằng bạn đã mở "View source".
Ví dụ:
TĐ chọn đoạn mã sau
--------------------------------------------------------------------------------------
<style type="text/css">body {cursor: url(http://www.moocursors.com/cat/2.ani); }</style><br />
<a href="http://www.moocursors.com"> Cursors </a><a href="http://www.myspacecursor.net">Free Cursors</a><br />
--------------------------------------------------------------------------------------
Thật ra, đoạn mã chính chỉ có:
---------------------------------------------------------------------------------------
<style type="text/css">body {cursor: url(http://www.moocursors.com/cat/2.ani); }</style>
---------------------------------------------------------------------------------------
do đó, cái phần từ <br/> ....đến <br/> là không cần thiết, có thể xóa đi.
TĐ đã dán câu mã chính trên vào khung soạn thảo mã của entry này, kết quả như các bạn đã thấy .Các bạn có thể kết hợp cả hai loại , sẽ cho hiệu ứng cũng rất đẹp. Có điều, hiệu ứng đó chỉ xuất hiện trong trang entry mà bạn dán đoạn mã, các entry khác vẫn bình thường.
*Làm khung cho blog:
Đoạn mã đơn giản nhất như sau:
----------------------------------------------------------------------------------------
<table border="a" cellspacing="b" cellpadding="c" background="url" bgcolor="mã màu" bordercolor="mã màu"> <td>nội dung blog </td></table>
***border: độ dày của khung, có thể chọn 1,2,3,4,5… (nếu chọn 0 thì chỉ có hình nền mà không có khung viền)
***cellpadding: khoảng cách giữa chữ và khung viền.
***cellspacing: độ lớn của khung viền
***background: hình nền cho khung. (nếu link hình sai hoặc để trống phần này, mặc nhiên nó sẽ cho ra cái khung trong suốt)
***bgcolor: màu nền. (cách để biết mã màu thì như đã nói ở trên)
***bordercolor: màu viền (cách để biết mã màu thì như đã nói ở trên).
Các bạn cứ tuỳ biến các thông số a, b, c, link hình, màu theo ý mình.
Ví dụ:
Tế Điên chọn a=2, b=30, c=15 ,
Link hình là: http://media.bigoo.ws/content/background/love/love_15.gif
Màu nền là #E5E5E5 , màu viền là #7477F3
Khi đó chúng ta sẽ có đoạn mã sau:
<table border=2 cellspacing=30 cellpadding=15 background="http://media.bigoo.ws/content/background/love/love_15.gif" bgcolor=E5E5E5 bordercolor=7477F3><td> nội dung blog nội dung blog nội dung blog nội dung blog </td></table>
Khi dán vào khung soạn thảo, nó sẽ hiển thị như sau:
nội dung blog nội dung blog nội dung blog nội dung blog
Cũng với các thông số như đã chọn trên nhưng không chọn màu viền, có một đoạn mã biến thể sau:
<table cellspacing="30" cellpadding="15" align="center" background="http://media.bigoo.ws/content/background/love/love_15.gif" border="2">
<tbody>
<tr>
<td>
<div class="image-wrapper">Nội dung blog nội dung blog nội dung blog</div>
</td>
</tr>
</tbody>
</table>
Cái khung sẽ trông như thế này:
Nội dung blog nội dung blog nội dung blog
Một biến thể khác:(chọn cellSpacing=15, cellPadding=15, border=2)
--------------------------------------------------------------------------------------------
<table cellSpacing=15 cellPadding=15
background=http://media.bigoo.ws/content/background/love/love_15.gif border=2> <tr> <td>Nội dung blog Nội dung blog Nội dung blog </td> <td>Nội dung blog Nội dung blog Nội dung blog </td> </tr> </table>
---------------------------------------------------------------------------------------------
Nội dung blog Nội dung blog Nội dung blog Nội dung blog Nội dung blog Nội dung blogsẽ hiển thị cái khung như vầy:
Thêm cái này nữa đi:
<table border=2 cellSpacing=15 cellPadding=15
background=”tạm thời không để link cho nó trong suốt”>
<tr>
<th colSpan=2>Tiêu đề tiêu tiêu đời </th></tr>
<tr>
<td>Nội dung blog Nội dung blog Nội dung blog </td>
<td>Nội dung blog Nội dung blog Nội dung blog </td></tr>
</table>
--------------------------------------------------------------------------------------
với cái mã này thì cái khung sẽ trong như vầy:
Tiêu đề tiêu tiêu đời
Nội dung blog
Nội dung blog
Nội dung blogNội dung blog
Nội dung blog
Nội dung blog
cái này thì để tham khảo:
<table background="link" border="1" cellpadding="15" cellspacing="2"> <tbody> <tr> <td> <table style="height: 180px;" align="left"
background="http://media.bigoo.ws/content/background/love/love_11.gif" border="2"
cellpadding="5" cellspacing="5"> <tbody> <tr>
<td align="left"> Nội dung blog khung bên trong</td> </tr> </tbody>
</table> <br /> Nội dung blog khung bên ngoài <br /> </td> </tr> </tbody>
</table>
----------------------------------------------------------------------------------------
Nội dung blog khung bên ngoài |
**************************************************************
* Thay đổi hình nền cho blog:
Tế điên đã thử nhiều mã nhưng không thể thay đổi được hình nền phía trên, chỉ có thể thay đổi hình nền dưới thôi.
Đoạn mã 1:
<style type="text/css">
body {
background-color:#030303;
background-image:url(link hinh);
background-repeat:no-repeat;
background-position:0 100%;
}
</style>
--------------------------------------------------------------------------
Hình chọn làm nền dưới tốt nhất là nên có kích thước 1024 x 400 , hoặc 1024 x 500 cũng được. Tế Điên đã upload cái hình mình muốn và có được cái link .
Bây giờ đoạn mã hoàn chỉnh sẽ có là:
---------------------------------------------------------------------------
<style type="text/css">
body {
background-color:#030303;
background-image:url(http://www.fileden.com/files/2007/2/13/769339/Final_fantasy.jpg);
background-repeat:no-repeat;
background-position:0 100%;
}
</style>
Kết quả là có một hình nền cá nhân thay vì cái hình nền của theme.
xem ví dụ cụ thể trên entry này.
Còn nếu dùng đoạn mã 2 dưới đây, hình nền phía dưới sẽ “nấp” sau hình nền trên. Khi chúng ta kéo thanh cuộn xuống, tất cả (hình nền trên, chữ ) sẽ cuộn lên, để lộ ra hình nền dưới. Ai thích loại này thì làm thử, Tế Điên thấy bên blog enny_188 dùng hiệu ứng này, nhìn rất đẹp ...
Đoạn mã 2:
--------------------------------------------------------------------------
<style type="text/css">
body
{
background-image:url(link hình);
background-attachment: fixed;
background-position: center;
background-repeat:no-repeat;
background-color:ffffff;
}
</style>
nếu vẫn dùng link hình trên, với mã cuộn,
ta sẽ thấy nó như thế này, xem Ví dụ tại đây
******************************************************************************************
* Chèn ảnh vào Blog:
Cách dễ nhất là chỉ việc copy và paste ảnh vào thôi, nhưng việc này đòi hỏi hình ảnh đó phải tồn tại ổn định trên mạng. Việc này đôi khi gặp chút rắc rối, nếu ảnh có kích thước lớn sẽ làm khung blog bị kéo dãn ra trong khi phần hiển thị thì chỉ khoảng 500 pixels bề ngang, nên sẽ có một số chữ bị che khuất.
Vậy nên, đôi khi, sau khi post vào blog bạn nên chỉnh lại kích thước hình, bằng cách click chuột lên hình, nó sẽ xuất hiện 8cái nút vuông nhỏ, bạn ấn giữ chuột lên 1 trong 8 cái nút đó , kéo rê chuột để có kích thước như ý.
Hoặc bạn có thể dùng đoạn mã sau:
---------------------------------------------------------------------------------------
<img height=X src="link hinh" width=Y alt="Image" />
---------------------------------------------------------------------------------------
với X là chiều cao hình, Y là chiều rộng hình.
Việc upload hình và xem kích thước, link hình thì như đã nói ở phần đầu tiên
Chữ "Image" sẽ xuất hiện khi bạn để chuột trên khu vực hình, lợi dụng điều này, ta có thể viết những câu chú thích, hay một câu nói bất kì cũng được...chú ý là câu chú thích phải đặt trong dấu " ..."
Xem ví dụ tại đây
**************************************************************************
.
.
.
.
.
.
(dự định viết luôn trên entry này nhưng vì số lượng ký tự trên mỗi entry có hạn, nên viết tiếp sang entry mới)
>>>>>>>>>>>>>>LÀM ĐẸP CHO BLOG (P2)
Các Bài Blog Khác Của [T]Ế [Đ]IÊN
Blog cùng loại "Thủ thuật" trên Yume
