12345<a href="link_liên_kết" target="blank"> <img onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.6;this.filters.alpha.opacity=60" style="opacity:0.6;filter:alpha(opacity=60)" src="LINK_HÌNH"/> </a>
2. Ảnh không chứa link
123<img onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.6;this.filters.alpha.opacity=60" style="opacity:0.6;filter:alpha(opacity=60)" src="LINK_HÌNH"/>opacity=0.6 và opacity=60 // Ảnh mờ trước khi rê chuột vào.
Lưu ý: Nếu thay đổi độ mờ thì phải thay đổi cả 4 giá trị.
VD :
16. Tạo hiệu ứng hiện ảnh khác khi rê chuột vào ảnh
1<a href="link_liên_kết" target="blank"><img onmouseover="this.src='LINK_HÌNH_THAY_THẾ'" onmouseout="this.src='LINK_HÌNH'" src="LINK_HÌNH" ></a>2. Ảnh không chứa link
<img onmouseover="this.src='LINK_HÌNH_THAY_THẾ'" onmouseout="this.src='LINK_HÌNH'" src="LINK_HÌNH" >
Ví dụ:
17. Tạo hiệu ứng khi rê chuột vào link liên kết
1<a href="LINK" target="blank" onmouseover="oldColor=this.style.backgroundColor;this.style.backgroundColor='#eee';" onmouseout="this.style.backgroundColor=oldColor;">TEN_LINK</a>LINK // Link liên kết
#eee // Mã màu khi rê chuột lên
TEN_LINK // Tên gán cho link liên kết
18. Chèn trang HTML vào bài viết (Chèn trang web vào bài viết)
1<iframe src="LINK_HTML" height="550" width="600" scrolling=yes frameborder="0"></iframe>scrolling=yes // Cho hiện thanh trượt, ngược lại không dùng thì sữa thành no
frameborder="0" // Đường viền, 0 là không viền
Ta có thể dùng lệnh này để chèn bất cứ trang nào dạng HTML (Ví dụ: http://abc.html) vào bài viết đều được hết :)
Ví dụ: Xem tại đây
19. Các loại đường viền | border: 1px #ccc solid;
Dashed - - - - - - - - - - - - - - - - -
Solid _____________________
Dotted ..................................
20. Các kiểu định dạng chữ | text-decoration:none;
none (Không định dạng)
underline (Gạch đích)
overline (Gạch trên đầu)
line-through (Gạch ngang chữ)
blink (Chớp chớp)
inherit
21. Thêm các định dạng link vào class
1234567891011121314151617/*Link cố định*/ a:link { color:#3366ff; text-decoration:none; } /*Link đã xem qua*/ a:visited { color:#ccc; text-decoration:none; } /*Link khi rê chuột vào*/ a:hover { color:#339966; text-decoration:underline; }
22. Tạo bóng đổ và bo tròn 4 góc viền
123456789101112131415/*Tạo bóng đổ*/ box-shadow: 8px 8px 8px #616D7E; -webkit-box-shadow: 8px 8px 8px #616D7E; -moz-box-shadow: 8px 8px 8px #616D7E; /*Tạo bóng đổ 4 cạnh*/ box-shadow: 0px 0px 8px #616D7E; -webkit-box-shadow: 0px 0px 8px #616D7E; -moz-box-shadow: 0px 0px 8px #616D7E; /*Bo tròn 4 góc viền*/ border-radius:4px; /*Bo tròn tùy chọn: top, right, bottom, left*/ border-radius:4px 4px 4px 4px;Thay box thành text cho chữ
23. Các loại định dạng list | ... ul {list-style-type:none;}
none: Không hiển thị đánh dấu/*Link hình thay cho list*/
disc: Chấm vuông
circle: Chấm tròn trắng
square: Chấm tròn đen
decimal: Kiểu số (1,2,3,4,…)
lower-alpha: Kiểu Alphabet ở dạng in thường (a, b, c, d, e, …)
upper-alpha: Kiểu Alphabet ở dạng in hoa (A, B, C, D, E, …)
lower-roman: Kiểu La Mã ở dạng thường (i, ii, iii, iv, v, …)
upper-roman: Kiểu La Mã ở dạng in hoa (I, II, III, IV, V, …)
1list-style-image:url('Link_hình');
24. Các vị trí đặt ảnh nền background | background: url(image) repeat ;
repeat: lặp ảnh
repeat-y: lặp ảnh theo chiều dọc (từ trên xuống)
repeat-x: lặp ảnh theo bề ngang (từ trái qua)
no-repeat: không lặp
top: đặt ảnh trên mép cùng
top right: đặt ảnh mép trên cùng góc phải
top left: đặt ảnh mép trên cùng góc trái
bottom: đặt ảnh mép dưới cùng
bottom left: đặt ảnh mép dưới cùng góc trái
bottom right: đặt ảnh mép dưới cùng góc phải
right: đặt ảnh bên mép phải
left: đặt ảnh bên mép trái
center: đặt ảnh ở vị trí giữa
25. Code xem địa chỉ IP, thông tin của máy truy cập blog
1<img src="http://www.wieistmeineip.de/ip-address">
26. Cách mã hóa code
Với ký tự < phải đổi thành <Để post các chú thích kí tự trên lên blog được thì:
Với ký tự > phải đổi thành >
Với ký tự & phải đổi thành &
Với khoảng trắng phải đổi thành
< phải đổi thành &lt;
> phải đổi thành &gt;
& phải đổi thành &amp;
27. Các lệnh điều kiện <b:if cond= ... </b:if>
1. Điều kiện ở trang chủ
<b:if cond='data:blog.url == data:blog.homepageUrl'>2. Điều kiện ở trang bài viết
...
</b:if>
<b:if cond='data:blog.pageType == "item"'>3. Điều kiện ở trang chủ, trang nhãn
...
</b:if>
<b:if cond='data:blog.pageType == "index"'>4. Điều kiện ở các trang lưu trữ
...
</b:if>
<b:if cond='data:blog.pageType == "archive"'>5. Điều kiện ở các trang tĩnh
...
</b:if>
<b:if cond='data:blog.pageType == "static_page"'>6. Điều kiện ở một trang riêng biệt nào đó
...
</b:if>
<b:if cond='data:blog.url == "URL_của_trang_riêng_biệt"'>Nếu thay == thành != thì kết quả sẽ ngược lại - Nghĩa là sẽ loại trừ trang đặt điều kiện ra và lấy phần ngược lại (các trang còn lại)
...
</b:if>
Ví dụ: Điều kiện loại trừ trang bài viết
<b:if cond='data:blog.pageType != "item"'>
...
</b:if>
28. Thêm chữ ký hay ghi chú dưới mỗi bài viết (Đặt dưới dòng <data:post.body/>)
<!-- Lời ghi dưới mỗi bài viết -->Nội_dung // Ghi chú nội dung của bạn, có thể dùng hình ảnh, màu chữ, canh lề,v.v..
<b:if cond='data:blog.pageType == "item"'>
Nội_dung
</b:if>
29. Script chèn file .js vào blog
<script src='Link_File_JS' type='text/javascript'/>
30. Script chèn trực tiếp nội dung file .js vào blog
1234567<script type='text/javascript'> //<![CDATA[Nội_dung_file_js//]]> </script>
31. Thêm nhanh khung hướng dẫn hay nội quy comment
123456789<!--Nội dung hướng dẫn comment--> <div style='border:#ccc 1px solid; padding:4px;border-radius:4px; background:#eee;'> Bạn có thể sử dụng một số thẻ HTML như: <br/> <textarea cols='48' rows='4'> » Chữ in đậm: <b>Nội_dung_chữ_in_đậm</b> » Chữ in nghiêng: <i>Nội_dung_chữ_in_nghiêng</i> » Chèn link liên kết: <a href='Link'>Tên_link</a> » Chèn hình ảnh: [img]Link_hình[/img] </textarea> </div>
Sau khi thêm song công việc tiếp theo là cài đặt để khung nội quy đó luôn hiển thị trên box nhận xét, để làm được điều đó bạn xem bài viết sau: Di chuyển ghi chú nhận xét của thread comment theo khung nhận xét khi reply trong blogspot
Post a Comment
Blogger Facebook