Thứ Bảy, 25 tháng 8, 2012

Mã Blogspot - Đồ chơi treo gác bếp

Mã Blogspot - Đồ chơi treo gác bếp

Những Code Thông Dụng Cho Blogspot
Post By: Võ Quốc An Chom By: Lang băm
Nhằm phục vụ cho một loạt các bài viết sắp tới trên blog và cũng để blogger nhà ta hiểu thêm về code nên hôm nay mình chia sẻ lại một số code thông dụng thường gặp trong quá trình viết bài cũng như thiết kế blog. Hy vọng sẽ giúp ích được cho các bạn.
Bài viết này và bài viết css căn bản của mình có vài thành phần trùng nhau nhưng do mình sưu tầm trên blog khác nên mình xin giữ nguyên văn.
1. Font, màu chữ, thụt vào đầu dòng (Dùng dòng 1 hay 2 đều như nhau)
; font:12pt Tahoma; margin-left:12px;">Nội_dung #339966; font-family:Tahoma; font-size:12pt; margin-left:12px;">Nội_dung
#339966 // Mã màu cho chữ 12pt Tahoma // Cỡ chữ và font chữ margin-left:12px // Số pixel (khoảng cách) chữ thụt vào đầu dòng. Có thể thay left bằng right cho chiều ngược lại.
2. Canh giữa, canh phải
center;">Nội_dung
center // Thay center = right cho canh phải
3. Định dạng chữ: Đậm, Nghiêng, Gạch chân, Gạch ngang chữ
Nội_dung_in_đậm Nội_dung_in_nghiêng Nội_dung_gạch_chân Nội_dung_chữ_bị_gạch_ngang
4. Dấu chấm vô dòng con, đánh số đầu dòng
Dấu chấm vô dòng con
  • Nội_dung1
  • Nội_dung2
  • Nội_dung3
Đánh số đầu dòng
  1. Nội_dung1
  2. Nội_dung2
  3. Nội_dung3
5. Bookmark đến một vị trí nhanh trong bài viết
LINK_bài_viết#Tên_gán_cho_vị_trí ">Nội_dung Tên_gán_cho_vị_trí ">Nội_dung
Lưu ý: Tên cách nhau không được dùng khoảng trắng mà phải dùng shift gạch. (VD: nhà_xinh) Tốt nhất không nên dùng chữ có dấu cho tên gán. Ví dụ: - Đến điểm A (Đến điểm A) - ... - Điểm A (Điểm A) Code trong ngoặc là chú thích cho ví dụ. Như vậy khi ta click chuột vào "Đến điểm A" thì lập tức lệnh sẽ đưa ta nhảy đến vị trí "Điểm A".
6. Chèn Flash vào bài viết (Chọn loại 1 hay 2 đều được)
1.
center;">LINK_FLASH" width="900" height="300" type="application/x-shockwave-flash" scale="" play=" true" loop="true" menu="true">
2. LINK_FLASH" bgcolor="#000000" type="application/x-shockwave-flash" allowscriptaccess="none" width="400" height="400">
7. Chèn hình ảnh (image) vào bài viết
1. Code đơn giản LINK_ẢNH" title="Ghi_chú" alt="Mô_tả"/> 2. Code mở rộng LINK_ẢNH" title="Ghi_chú" alt="Mô_tả" align="bottom" width="400" height="400"/>
Ghi_chú // Khi rê chuột lên ảnh, sẽ hiện chú thích. Mô_tả // Khi rê chuột lên ảnh, sẽ hiện chú thích. Sử dụng hai lệnh này thì khi người dùng truy cập blog chọn không hiển thị ảnh thì sẽ hiện dòng chữ này thay cho ảnh đó. align="bottom" // Vị trí ảnh so với chữ. Có thể đổi thành middle(giữa) - top(trên) - bottom(dưới). Không dùng, để mặc định theo blog chọn sẵn thì xóa nó đi.
8. Chèn link liên kết vào bài viết
LINK" target="blank">Tên_Link
target="blank" // Mở link liên kết trong một trang mới. Bỏ lệnh này thì trang mới sẽ được mở ngay tại trang đang dùng (nghĩa là trang đang dùng sẽ bị load qua trang link ta vừa click vào). Nếu người dùng có thói quen "Open new tab" thì lệnh này có hay không cũng không khác biệt. Ví dụ: - Dùng target="blank" - XEM - Không dùng target="blank" - XEM
9. Chèn ảnh chứa link
LINK" target="blank">LINK_ẢNH"/>
10. Tạo button ẩn hiện nội dung
Xem" style="width:75px; font-size:11px; margin:0px; padding:4px; border="1"" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Ẩn'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Xem'; }">
NỘI_DUNG
Ví dụ:
11. Chèn nhạc vào bài viết
width=300 height=45> pluginspage='http://www.microsoft.com/Windows/Downloads/Contents/Products/MediaPlayer/' controls='controlpanel' width=300 height=45 src='LINK_NHẠC' autostart="0" showstatusbar="0" ShowControls='true' loop='0' name='hat'>
LINK_NHẠC // Phải là link trực tiếp (VD: http://...bài_hát.mp3) loop='0' // Không lặp lại loop='1' // Lặp lại một lần loop='-1' // Lặp lại mãi mãi autostart="0" // Không tự play autostart="1" // Play ngay khi web tải xong
12. Chia 2 cột, 3 cột, 4 cột
font:12px Tahoma; color:#000000; width:120px;padding:4px;" valign="top">
column_1">
Nội_dung_cột_1
 		font:12px Tahoma; color:#000000;width:120px;padding:4px;" valign="top">
column_2">
Nội_dung_cột_2
Thêm cột thì thêm trên dòng đoạn code: font:12px Tahoma; color:#000000;width:120px;padding:4px;" valign="top">
column_n">
Nội_dung_cột_n
13. Viền khung một nội dung trong bài viết
#4F4F4F 1px solid; padding: 4px; background:#eee; width:400px;"> NỘI_DUNG
#4F4F4F 1px solid // Lần lượt là: Mã màu - Độ dày đường viền - Loại đường viền. - solid ______________ - dashed ---------------- - dotted ...................... background:#eee // Nền khung width:400px // Bề rộng khung. Mặc định là sẽ rộng bằng khung bài viết (nếu bỏ lệnh này đi)
14. Chèn khung chứa code có thẻ "Select all" (Không cần mã hóa code)
cols="59" // Bề rộng khung chứa code rows="18" // Số dòng trong khung chứa code wrap="on" // Trong một dòng, chữ dài quá khung sẽ hiện thanh trượt kéo ngang qua wrap="off" // Nhiều dòng chữ quá số dòng khung quy định sẽ hiện thanh trượt kéo xuống Ví dụ:
15. Ảnh rõ hơn khi rê chuột vào
1. Ảnh có chứa link link_liên_kết" target="blank"> 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"/> 2. Ảnh không chứa link 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ị. Ví dụ:
16. Tạo hiệu ứng hiện ảnh khác khi rê chuột vào ảnh
1. Ảnh có chứa link link_liên_kết" target="blank">LINK_HÌNH_THAY_THẾ'" onmouseout="this.src='LINK_HÌNH'" src="LINK_HÌNH" > 2. Ảnh không chứa link 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
LINK" target="blank" onmouseover="oldColor=this.style.backgroundColor;this.style.backgroundColor='#eee';" onmouseout="this.style.backgroundColor=oldColor;">NAME_LINK
LINK // Link liên kết #eee // Mã màu khi rê chuột lên NAME_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)
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
/*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
/*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 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, …)
/*Link hình thay cho list*/ list-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
(Có thể post vào widget bất kỳ ở trên blog)
26. Cách mã hóa code
Với ký tự < phải đổi thành < 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
Để post các chú thích kí tự trên lên blog được thì:
< 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
1. Điều kiện ở trang chủ
...
2. Điều kiện ở trang bài viết
...
3. Điều kiện ở trang chủ, trang nhãn
...
4. Điều kiện ở các trang lưu trữ
...
5. Điều kiện ở các trang tĩnh
...
6. Điều kiện ở một trang riêng biệt nào đó
...
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) Ví dụ: Điều kiện loại trừ trang bài viết
...
28. Thêm chữ ký hay ghi chú dưới mỗi bài viết (Đặt dưới dòng )
Nội_dung
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..
29. Script chèn file .js vào blog
31. Thêm nhanh khung hướng dẫn hay nội quy comment
- Tìm đến thẻ - Đôi khi có tên là - Thêm vào sau nó đoạn code sau:
Nội dung nội quy comment của bạn

- Sau mỗi hàng phải thêm cặp thẻ hoặc nếu muốn xuống dòng. - Có thể dùng các code trang trí cho khung như: hình ảnh, màu chữ, v.v.. Ví dụ: Code chèn nội dung hướng dẫn comment giống ở blog mình.
Bạn có thể sử dụng một số thẻ HTML như:

Nguồn bài viết: Cây Tầm Gửi Blog
*****
Tranhung09
Người đăng: vào lúc
Nhãn:

Không có nhận xét nào:

Đăng nhận xét

Đăng ký: Đăng Nhận xét (Atom)