Một trong những cách để bài viết của bạn được nhiều người biết đến chính là việc sử dụng các dịch vụ bookmark và chia sẻ nội dung. Ở Việt Nam, LinkHay và TagVN có lẽ là hai địa chỉ được nhiều người dùng nhất.
Bạn có thể tự chia sẻ bài viết của mình lên các dịch vụ này để tìm kiếm đọc giả.
Đây là code sử dụng cho Blogger. Hãy chọn một trong hai file này để tải về:
Cách chèn vào blog:
Đăng nhập Blogger, vào thẻ Bố cục (Layout) -> Chỉnh sửa HTML (Edit HTML), đánh dấu chọn Mở rộng tiện ích mẫu (Expand widget templates), tìm:<div class='post-footer'>
<!-- Dán code ở đây -->
<div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>
Thay <!-- Dán code ở đây --> bằng nội dung của 1 trong 2 tệp tin .txt đã tải về bên trên.
Hình dưới là hiển thị File 2 trên blog:
* AddThis là nút nhúng số 1 trên internet giúp người đọc đánh dấu và chia sẻ nội dung đến tất cả các mạng xã hội thông dụng. Chỉ cần sử dụng 1 nút nhúng này thay vì dùng nút nhúng của từng dịch vụ riêng lẻ.
Khi đăng bài viết có sử dụng bảng (table) bạn sẽ gặp lỗi hiện khoảng trắng giữa tiêu đề bài viết và nội dung bảng. Bảng càng có kích thước lớn, khoảng trắng này càng rộng. Để đăng bảng một cách dễ dàng, Thủ Thuật Blog xin hướng dẫn bạn cách khắc phục bên dưới:
Bước 1. Hãy tạo một lớp (class) mới như dưới đây và dán vào bất cứ chỗ nào trong CSS của template (Đăng nhập Blogger, chọn Edit HTML, dán đoạn mã dưới ngay bên cạnh các khai báo # hoặc .).bang br {
display: none
}
Bước 2. Khi post bảng, bạn bổ sung thêm phần in đậm như thế này:<div class="bang">
<table border="1">
<tr><th>Heading</th><th>Another Heading</th></tr>
<tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr>
<tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr>
</table>
</div>
Lưu ý phần chữ màu nổi bật, bạn có thể đổi thành chữ khác, nhưng đã khai báo như thế nào thì phải sử dụng tương ứng trong div.
Bạn sẽ thấy không còn khoảng trống nữa!
Khi tìm kiếm bài viết của blog bằng công cụ tìm kiếm có trên thanh công cụ Blogger, hoặc khi chọn một nhãn (label) nào đó để xem các bài đăng cùng nhãn, nếu quan sát kỹ bạn sẽ thấy một thông báo nhỏ hiển thị ngay phía trên kết quả (Xem hình).
Nếu không thích có thông báo này, mẹo nhỏ sau đây sẽ giúp bạn loại bỏ:
Cách 1: Vô hiệu hóa đoạn mã hiển thị trạng thái. Đăng nhập blog, vào thẻ Layout (Bố cục) | Edit HTML (Chỉnh sửa HTML) và đánh dấu chọn Expand Widget Templates (Mở rộng tiện ích mẫu), tìm và thêm hai thẻ <!-- và --> như sau:<b:includable id='status-message'>
<!--
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
-->
</b:includable>
Cách 2: Thêm đoạn CSS sau đây vào bất kỳ vị trí nào giữa <b:skin><![CDATA[/* và ]]></b:skin> trong template của blog:.status-msg-wrap {
display: none;
}
Hãy thử hai gợi ý trên biết đâu có hiệu quả đấy!
Theo yêu cầu của anh Thắng, tôi viết hướng dẫn này chia sẻ một trong những cách đơn giản nhưng không kém chuyên nghiệp để đặt code nằm trên khung trong bài đăng của Blogger. Với cách làm này đoạn mã hiển thị sẽ trông dễ nhìn hơn và người đọc dễ sao chép khi muốn sử dụng.
CSS điều khiển thuộc tính khung hiện code:
Để hiển thị code bạn cần đặt chúng giữa hai thẻ mở <pre> và đóng </pre> trong bài viết của mình. Muốn đẹp hơn bạn có thể thêm khung bằng cách sử dụng các thuộc tính về màu chữ, màu nền, font chữ, đường viền, kích thước rộng và cao, thanh trượt, cách viền ... bằng cách thêm code CSS vào thẻ mở, ví dụ: <pre style="color: #333333; background: #999999; width: 100%; height: 50px; overflow: auto; padding: 10px;">.
Một cách chuyên nghiệp hơn chúng ta sẽ tạo ra một class mới và đặt chúng vào CSS của template (đặt vào bất kỳ vị trí nào giữa hai thẻ <b:skin><![CDATA[/* và ]]></b:skin> ). Việc làm này sẽ giúp bạn sử dụng khung hiển thị code thống nhất ở tất cả các bài viết có dùng khung và dễ chỉnh sửa thuộc tính khi muốn thay đổi. Ví dụ ở đây tôi tạo ra lớp pre-formatting có CSS như sau:.pre-formatting{
color: #333333;
background: #999999;
border: 2px solid #999999;
overflow: auto;
font-family: "Tahoma", Tahoma;
padding: 10px;
}
Đương nhiên trong template nên bạn có thể sử dụng các biến lấy giá trị cho từng thuộc tính đã được định nghĩa trước đó. Ví dụ:.pre-formatting{
color: $textcolor;
background: $bgcolor;
border: 2px solid $bordercolor;
overflow: auto;
font: $headerfont;
padding: 10px;
}
Cách sử dụng:
Để code xuất hiện mang thuộc tính của CSS đã lưu trước đó chúng ta sẽ sử dụng chế độ HTML để soạn bài và đặt code như sau:<pre style="height: 100px;" class="pre-formatting">Code</pre>
Câu hỏi đặt ra ở đây là chúng ta đã dùng class pre-formatting, vậy tại sao phải thêm CSS điều khiển height (chiều cao của khung), có dư thừa chăng? Câu trả lời phụ thuộc vào đoạn code mà bạn dùng. Nếu đoạn code đó ngắn bạn chọn giá trị chiều cao khung nhỏ và ngược lại, không nhất thiết phải thêm vào CSS của template vì chúng ta không biết trước đoạn code mỗi lần dùng. Không dư thừa chút nào!
Cũng xin lưu ý bạn phải chuyển đổi các ký tự đặc biệt thành mã HTML (ví dụ: < thành < và > thành >) trước khi đặt giữa hai thẻ trên. Và mách nhỏ hãy lưu đoạn code đó vào Post Template (Mẫu đăng bài) trong Settings (Cài đặt) | Formatting (Đang định dạng) để không cần phải gõ mỗi lần dùng.
CẬP NHẬT:
Tôi vừa biết thêm một cách chuyên nghiệp hơn và đơn giản hơn vì không phải ước lượng height cho đoạn code bạn dùng.
Bạn cũng thêm một đoạn CSS điều khiển hiển thị code như trên nhưng để chúng đi kèm thẻ pre hoặc code:pre, code{
color: $textcolor;
background: $bgcolor;
border: 2px solid $bordercolor;
overflow: auto;
font: $headerfont;
padding: 10px;
}
Khi sử dụng trong post chúng ta sẽ đặt code theo một trong hai cách:<pre>
... code ...
</pre>
Hoặc:<code>
... code ...
</code>
Với cách này người ta có thể dùng hình ảnh đánh số thứ tự làm nền để đoạn code hiển thị trông đẹp hơn. Bạn có thể chép đoạn code sau mà tôi đang dùng cho template của mình.pre, code {
display:block;
font: 1em 'Courier New', Fixed, monospace;
font-size : 100%;
color: #666666;
background : #fff url(http://img178.imageshack.us/img178/1307/prepb3.jpg) no-repeat left top;
overflow : auto;
text-align:left;
border : 1px solid #99cc66;
padding : 0px 20px 0 30px;
margin:1em 0 1em 0;
line-height:17px;
}
Gần đây Blogger cập nhật nhiều tính năng mới hấp dẫn. Một trong số đó là hệ thống comment mới với khung nhập nội dung nằm ngay sau bài viết. Đây chính là tính năng được chờ đợi nhất vì ưu thế quen thuộc mà người dùng thường thấy trên các nền blog Yahoo! 360, WordPress,...
Để sự dụng tính năng này bạn phải đăng nhập blog của mình theo địa chỉ http://draft.blogger.com và chọn Embedded below post (Bài đăng dưới đây đã được nhúng) tương ứng với Comment Form Placement (Vị trí mẫu nhận xét) ở mục Comments (Nhận xét) của thẻ Settings (Cài đặt). Và nhấn xem blog để kiểm tra khung có xuất hiện hay không.
Với một blog mới vừa được tạo, tùy mẫu có thể đoạn mã quản lý xuất hiện của khung nhận xét đã được thêm trước đó. Trong trường hợp không có hay muốn sử dụng cho mẫu hiện tại bạn cần nhấn phần Expand Widget Templates (Mở rộng mẫu tiện ích) tìm đoạn code sau: <p class='comment-footer'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</p>
Và thay thế bằng:<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p>
Lưu lại, xem blog bạn sẽ thấy xuất hiện như sau:
Để chỉnh sửa định dạng đoạn văn bản ghi dưới Post a comment(Đăng một nhận xét) trong trường hợp có sử dụng Comment Form Message (Thư thông báo Mẫu Nhận xét) bạn chỉ cần tìm đoạn mã: <p><data:blogCommentMessage/></p>
Và thêm một đoạn CSS điều khiển định dạng (Ví dụ tôi thêm vào canh đều văn bản và kiểu chữ nghiêng như hình trên):<p style='text-align: justify; font-style: italic;'><data:blogCommentMessage/></p>
Nếu gặp vấn đề bạn có thể đăng một nhận xét ngay dưới bài viết này để chúng ta cùng nhau tháo gỡ. Chúc thành công!
BỔ SUNG:
Nếu khung nhận xét vẫn không xuất hiện trên trang của của bài viết cụ thể (trong trường hợp bạn đã chọn chế độ cho phép comment) hãy bổ sung thêm đoạn code màu đỏ theo vị trí của dưới đây:<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
<b:include data='post' name='comment-form'/>
</b:if>
<b:if cond='data:post.includeAd'>
<data:adEnd/>
<data:adCode/>
<data:adStart/>
</b:if>
Gần đây Blogger đã thử nghiệm tính năng cho phép tự động đăng bài theo lịch định sẵn. Đây là tính năng rất hay cho phép người quản lý blog có thể viết bài ở thời điểm hiện tại và chọn ngày giờ trong tương lai để bài viết tự động xuất hiện.
Thao tác rất đơn giản, khi soạn thảo xong bài viết chỉ cần nhấn Post Options (Tùy chọn bài đăng) chọn ngày tháng dự định đăng bài và nhấn Publish (Xuất bản bài đăng). Bài viết sẽ được chú thích bằng chữ scheduled (đã sắp xếp) và tự động xuất bản theo thời gian đã chọn trước đó.
Hình minh họa sau đây cho thấy bài viết này được sẽ tự động xuất hiện vào lúc 7h00 ngày 15/04/2008.
Lưu ý nhỏ một khi bài viết đã sắp xếp được xuất bản trên blog sẽ không thể được sắp xếp một lần nữa, tuy nhiên bạn vẫn có thể chỉnh sửa nội dung, thay đổi ngày giờ và đăng lại. Tương tự như một bài đăng đã được xuất bản, khi chỉnh sửa bài đăng đã sắp xếp thì trình soạn thảo sẽ không tự động lưu nháp như lúc bạn soạn thảo mới.
Để sử dụng tính năng này, hãy đăng nhập blog theo địa chỉ http://draft.blogger.com.
Ngoài ra từ đây bạn cũng có thể dùng thử hộp tìm kiếm, đọc feed blog, các tiện ích của Google,...
Tiện ích này được phát triển tại trang FEEDJIT. Chỉ việc vào trang theo địa chỉ http://feedjit.com/ và nhấn Add it để lấy đoạn JavaScript ở phần LIVE PAGE POPULARITY đưa vào HTML/JavaScipt (Đăng nhập Blogger, Layout -> Add a Page Element -> HTML/JavaScipt ). Bạn cũng có thể đưa vào blog bằng cách nhấn biểu tượng Blogger .
Nếu cần tùy chỉnh màu sắc, kích thước hiển thị tiện ích bạn nhấn Customize it. Lựa chọn màu cho sẵn (Colors) hay thay đổi màu nền (Background), chữ (Text), tiêu đề (Heading), đường viền (Border), liên kết (Links) và kéo chọn kích thước ngang (Width).
Hiển thị trên blog:
Chúc các blogger một tuần mới vui vẻ và gặt hái nhiều thành công!
Ghé qua một số blog tôi thấy cuối bài đăng chèn thêm một đoạn văn bản mang nội dung cám ơn bạn đọc (di4vn.com, vietnam-blogger.com) hay cảnh báo về bản quyền (gocbep.com). Đoạn văn này có thể thêm dễ dàng vào mã nguồn theo hướng dẫn sau.
Đăng nhập Blogger, click trên Layout (Mẫu) -> Edit HTML (Chỉnh sửa HTML), đánh dấu Expand Widget Templates (Mở rộng tiện ích mẫu) và tìm vị trí <p><data:post.body/></p> (có thể dùng Ctrl + F).
Hướng dẫn 1. Blog không sử dụng "Đọc thêm":
Chỉ cần tạo một đoạn văn bản dán kế phía dưới code tìm thấy trên và lưu lại. Bạn có thể đặt đoạn văn này có định dạng, màu sắc và nằm giữa hai thẻ <p> và </p>.
Hướng dẫn 2. Blog sử dụng "Đọc thêm":
Code trong hướng dẫn sử dụng "Đọc thêm" như sau:<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>Đọc thêm!</a>
</b:if>
Bây giờ bạn sửa lại và bổ sung thêm phần màu đỏ:<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>Đọc thêm!</a>
<b:else/>
<p>Nội dung đoạn văn bản cuối bài đăng</p>
</b:if>
Ví dụ tôi đã đưa vào blog này (Bao gồm "Đọc tiếp ..." và đoạn văn bản): <p><data:post.body/>
<b:if cond='data:blog.pageType != "item"'>
<p><a expr:href='data:post.url'><span style='font-weight:bold;'>Đọc tiếp ... </span></a></p>
<b:else/>
<p><div style='font-style: italic; text-align: justify;'>Cám ơn bạn đã ghé <a href='http://www.thuthuatblog.com' target='_blank'><span style='font-weight: bold;'>ThuThuatBlog.com</span></a>. Bạn có ý kiến thắc mắc hay bình luận gì về bài viết này vui lòng nhấn <span style='font-weight: bold;'>Post a Comment</span> phía cuối. Nếu muốn nhận bài viết mới qua email hãy đăng ký địa chỉ ở khung bên trái. Để ghé thăm lại, bạn có thể nhấn vào thực đơn <span style='font-weight: bold;'>Favorites</span> (Internet Explorer) hoặc <span style='font-weight: bold;'>Bookmark</span> (Mozilla Firefox) lưu lên trình duyệt hay <span style='font-weight: bold;'>Bookmark</span> kế dưới đây lưu lên các trang chia sẻ trực tuyến. Ngoài ra bạn có thể đọc bài viết bằng các công cụ đọc tin <a href='http://www.thuthuatblog.com/feeds/posts/default' target='_blank'><span style='font-weight: bold;'>Feed</span></a>. Tôi hy vọng bạn tìm thấy những thủ thuật thú vị từ trang này.</div></p>
</b:if>
</p>
Bạn có thể thấy hiển thị cuối mỗi bài viết trên blog này.
Chúng ta đang dùng "Đọc thêm" nhưng lại sử dụng theo Hướng dẫn 1 đoạn văn bản sẽ xuất hiện trên blog dù bài đăng chỉ là nội dung tóm tắt (phần đầu bài). Trong khi sử dụng Hướng dẫn 2 đoạn văn chỉ xuất hiện khi xem post đầy đủ.
Tiện lợi của hướng dẫn này giúp bạn chỉ cần thêm một lần, không phải mất công copy dán mỗi khi bài viết hoặc lưu sẵn vào Post Template (tìm thấy trên Settings -> Formatting). Ngoài ra sau này bạn cũng không cần phải vào từng post để sửa lại khi cần thay đổi nội dung đoạn văn bản cuối.
Dưới đây là một số mẫu bạn có thể sử dụng:
Mẫu 1:
Cám ơn bạn đã đọc, nếu bạn thấy hay hãy nhấn Favorites (Internet Explorer) hay Bookmarks (Firefox) để lưu trữ đường dẫn đến bài viết. Ngoài ra bạn cũng có thể đăng ký nhận bài viết mới bằng cách thêm địa chỉ email vào khung. Chúc bạn tìm được những bài viết hữu ích.
Mẫu 2:
Bạn vừa đọc xong bài viết, hãy lưu đường dẫn đến bài viết này bằng cách nhấn Favorites (Internet Explorer) hay Bookmarks (Firefox). Ngoài ra bạn cũng có thể đăng ký nhận bài viết mới bằng cách thêm địa chỉ email vào khung bên trái. Chúc bạn vui vẻ!
Mẫu 3:
Cám ơn bạn đã đọc bài viết, hãy lưu đường dẫn đến bài viết này bằng cách nhấn Favorites (Internet Explorer) hay Bookmarks (Firefox) và thường xuyên ghé thăm để đọc các bài cập nhật kế tiếp. Chúc bạn vui vẻ!
Mẫu 4:
Bạn vừa đọc xong bài viết, hãy nhấn Favorites (Internet Explorer) hay Bookmarks (Firefox) để lưu trữ và quay lại để đọc các bài cập nhật kế tiếp. Chúc bạn vui vẻ!
Phân quyền người đọc
Blogger phân quyền người đọc theo ba mức: Tất cả mọi người, chỉ những người được mời hay chỉ tác giả mới được phép xem blog.
Theo mặc định Blogger cho phép tất cả mọi người xem nội dung trên blog của bạn. Chế độ này giống như hiển thị public mà chúng hay ta dùng ở Yahoo! 360.
Ngoài ra bạn có thể chỉ cho những người cùng tham gia viết blog mới được xem blog.
Phân quyền tác giả
Để gửi thư mời đóng góp bạn nhấn Add authors và gõ địa chỉ email người này. Họ sẽ nhận được một email thông báo đề nghị của bạn và nếu đồng ý họ phải tạo tài khoản Google trước khi đăng nhập vào Blogger. Ở trên hình tôi sử dụng địa chỉ email dv2n@yahoo.com làm quyền quản trị và gửi thư mời tới người đóng góp có địa chỉ email admin@thuthuatblog.com.
(Hộp thư admin@thuthuatblog.com của tôi như Gmail nhưng không phải Gmail!)
Chúc bạn một tuần vui!
(*) Tài khoản Google:
Có rất nhiều nhà cung cấp dịch vụ blog khác nhau trên internet. Mỗi dịch vụ có điểm mạnh yếu riêng. Tùy theo mục đích, túi tiền, khả năng và số đông người dùng bạn có thể lựa chọn cho mình một dịch vụ blog tương ứng. Bài viết này chủ yếu phân tích điểm mạnh và yếu của Google Blogger, giúp bạn có thêm cái nhìn tổng thể so sánh với dịch vụ mà mình đang dùng.Điểm mạnh:
- Hoàn toàn miễn phí, lưu trữ trên máy chủ rất mạnh của Google bảo đảm blog của bạn dễ dàng truy xuất bất kỳ lúc nào. Khi có vấn đề bạn sẽ được thông báo cụ thể tại http://status.blogger.com.
- Nhanh chóng được đánh chỉ mục vào bộ máy tìm kiếm số một thế giới và bài viết dễ dàng được tìm thấy trên công cụ này, mới đây là trên công cụ tìm kiếm blog: Google BlogSearch.
- Giao diện cài đặt hỗ trợ tiếng Việt. Ngôn ngữ không còn là rào cản trong việc tiếp cận và sử dụng hết tính năng của Blogger đối với người dùng Việt Nam.
- Tiện ích phong phú, đáp ứng tối đa nhu cầu người dùng. Hiện tại Blogger có 16 tiện ích và 3 tiện ích mới sắp sửa trình làng.
- Cá nhân hóa tối đa và kiểm soát hoàn toàn giao diện, nội dung xuất hiện trên blog khi làm chủ mã nguồn.
- Không giới hạn băng thông (bandwidth) hàng tháng.
- Không giới hạn số blog cho một tài khoản.
- Không giới hạn số bài đăng cho một blog.
- Không giới hạn kích thước cho một bài đăng (post).
- Không giới hạn số nhận xét (comments).
- Không giới hạn số thành viên cùng làm một blog.
- Có thể nhúng các đoạn mã JavaScript quảng cáo, đặc biệt tích hợp với chương trình kiếm tiền trên mạng nổi tiếng Google AdSense thông qua tiện ích Adsense.
- Có thể dùng tên miền riêng bằng cách thay đổi CName trên máy chủ quản lý tên miền. Blog sẽ có địa chỉ như một website! (Blog của tôi chẳng hạn :-)) !). Ngoài ra bạn cũng có thể dùng subdomain (tên miền con) để tạo blog. Những nhà cung cấp tên miền như godaddy.com cho phép sử dụng 90 tên miền con với chỉ một tên miền chính và như vậy bạn có thể tạo ... 91 blog khác nhau (90 tên miền con: abc.yourdomain.com + 1 tên miền chính: www.yourdomain.com)!
- Chỉ cần có tài khoản Gmail, bạn có thể dùng Blogger chung với nhiều vụ nổi tiểng khác của Google: Talk (Trình tán gẫu trực tuyến, giống như Yahoo! Messenger,…), Reader (Công cụ đọc tin RSS trực tuyến), Picasa Web Albums (Kết hợp với phần mềm Picasa để lưu trữ, quản lý ảnh trực tuyến), Orkut (Mạng xã hội ảo), Docs (Dịch vụ xử lý văn bản, bảng tính và trình diễn trực tuyến, như Microsoft Offices trên Windows), Pages (Dịch vụ tạo web), ... Nếu dùng tài khoản Google (tài khoản này có thể đăng ký bằng bất kỳ địa chỉ email nào), bạn không sử dụng được với các dịch vụ riêng rẻ như Gmail, Talk,…
Điểm hạn chế (Các hạn chế này nêu ra cho vui thôi nhé, bởi vì bạn khó mà đạt đến ngưỡng của chúng!):
- Giới hạn 1 MB cho một trang (trang đầu tiên và trang lưu trữ).
- Giới hạn 50 post mỗi ngày, nếu đăng hơn số này bạn phải nhập mã kiểm tra.
- Giới hạn 300 MB lưu trữ hình ảnh khi đăng hình thông qua Blogger, Picasa, hay Hello (dịch vụ chia sẻ ảnh thông qua Google Picasa). (Tin vui: Blogger đã cho bạn lưu đến 1 GB hình ảnh.)
- Miêu tả blog (Blog Description) giới hạn dưới 500 ký tự.
- Thông tin giới thiệu (About Me) giới hạn dưới 1200 ký tự.
- Thông tin về những việc ưu thích và mối quan tâm trên hồ sơ (Profile Interests and Favorites) giới hạn dưới 2000 ký tự cho mỗi khung khai báo.
- Thiếu một công cụ kế nối với người dùng khác cùng mạng (như Yahoo! 360).(Công cụ đó đã có Google Connect)
- Số template không nhiều và được thiết đẹp (như WordPress) (Trên mạng thiếu gì template đẹp!)
- Người dùng muốn cá nhân hóa cần phải biết một ít kiến thức về CSS, XML và HTML.
- Không truy cập được blog do một số nhà cung cấp dịch vụ internet (ISP: Internet Service Provider) Việt Nam sử dụng bộ lọc hạn chế (Blog có tên miền riêng khắc phục được hạn chế này)(VNPT không còn chặn nữa).
Cám ơn bạn đã gắn bó với Thủ Thuật Blog thời gian qua. Năm 2007 sắp qua, năm mới lại đến, chúc bạn và gia đình dồi dào sức khỏe, hưởng một mùa xuân đầm ấm an khang thịnh vượng - vạn sự như ý.
Theo dõi nhận xét
Chỉ cần nhập địa chỉ email vào khung Địa chỉ thông báo nhận xét (Comments Notification Address), lập tức những nhận xét mới nhất sẽ được gửi ngay vào hòm thư của bạn. Để làm việc này bạn đăng nhập Blogger, trên Cài đặt (Settings) -> nhấp Nhận xét (Comments) và gõ địa chỉ email vào khung vừa kể.
Hình. Nhập địa chỉ email
Hình. Ví dụ một email thông báoThêm tiện ích hiển thị những nhận xét mới nhất
Cách 1
Nếu bạn có nhu cầu hiển thị những nhận xét mới nhất trên sidebar, hãy sử dụng http://yourblog.blogspot.com/feeds/comments/default như là một nguồn cung cấp feed thông thường! (Nhớ thay đổi yourblog bằng tên blog của bạn). Bạn chỉ việc tạo một tiện ích mới bằng cách đăng nhập Blogger, chọn Layout (Trình bày), nhấn Add a Page Element (Thêm một phần tử trang) -> Feed (Nguồn cấp feed) và sử dụng nguồn trên.
Hãy thử kiểm tra liên kết này bằng trình duyệt Mozilla Firefox hoặc một công cụ đọc Feed bạn sẽ thấy hàng loạt nhận xét được xếp theo thứ tự mới nhất nằm trên nhất. Mặc dù có những hạn chế nhất định song cách làm này đáp ứng được nhu cầu cơ bản của đa số blogger.
Hình. Hiển thị trên blogCách 2
Điểm bất lợi của cách làm này nếu trang web cung mã nguồn chẳng may không hoạt động thì tiện ích này không thể hiển thị, chưa kể nó còn kèm một link quảng cáo phía dưới. Xem ra vẫn có thể chấp nhận được với cách hiển thị khá rõ ràng của nó.
Hình. Giao diện cài đặt
Hình. Hiển thị trên blogCác thành phần trên layout
Chỉnh sửa layout
Thêm bớt các tiện ích
Hiện tại Blogger có đến 15 tiện ích khác nhau đáp ứng khá đủ nhu cầu của người dùng bình thường. Để thêm vào một tiện ích nào đó, bạn chỉ cần click vào Add a Page Element (Thêm một phần tử trang) trước khi chọn tiện ích muốn thêm vào.
Ngoại trừ header không cho phép xóa (nếu không thay đổi mã nguồn), để thực hiện thao tác này đối với một tiện ích đã thêm vào nào đó trên layout, bạn chỉ việc click Edit (Chỉnh sửa) và chọn Remove Page Element (Xóa phần tử trang).
Thay đổi vị trí tiện ích
Để thay đổi vị trí các tiện ích trên layout bạn chỉ cần kéo và thả tiện ích muốn thay đổi đến vị trí mới. Ví vụ: Lúc đầu tiện ích chứa banner 468 x 60 nằm phía dưới bài đăng, tôi kéo và thả lên phía trên.
Chỉnh sửa các yếu tố đi cùng bài đăng
Trên mỗi bài đăng có thể bao gồm nhiều yếu tố đi kèm như: ngày đăng, người đăng, giờ đăng, bình luận, nhãn (nếu ngôn ngữ bạn chọn ở Định dạng là tiếng Việt, thì ở đây sẽ hiển thị tiếng Việt), biểu tượng chỉnh sửa nhanh, link gửi qua email, hiển thị quảng cáo (dành cho người tham gia Google AdSense). Để hiện thị hay ẩn đi bạn chỉ cần chọn hay bỏ chọn các yếu tố này tương ứng sau khi click Edit (Chỉnh sửa) ở phần tử Blog Post (Bài đăng).
Chúc bạn ngày giữa tuần vui vẻ!
Blogger có một vài phím tắt quen thuộc được dùng trong khi soạn thảo. Các phím tắt này hoạt động trên Internet Explorer 5.5 và trên Mozilla Firefox 0.9 trở lên, có thể làm việc với một số trình duyệt khác. Dưới đây là một số phím tắt:
Ctrl + b = In đậm chữ (*)
Ctrl + i = In nghiên chữ (*)
Ctrl + l = Chọn khối (dùng trong chế độ soạn thảo HTML) (*)
Ctrl + z = Undo
Ctrl + y = Redo
Ctrl + Shift + a = Chèn liên kết (*)
Ctrl + Shift + p = Xem trước bài đăng
Ctrl + d = Lưu nháp (Lưu chưa xuất bản)
Ctrl + p = Xuất bản
Ctrl + s = Chọn lưu vào một thời điểm (Nội dung bạn gõ tự động được lưu nháp).
Để dùng các phím tắt có đánh dấu (*) phải chọn đối tượng trước rồi mới nhấn phím tắt.
Blogger cho phép bạn tự thay đổi mã nguồn và bất kỳ yếu tố nào mình muốn. Để chỉnh sửa thành công bạn phải am hiểu được những gì mình cần làm và ý đồ mình muốn thực hiện. Để làm chủ được Template (Mẫu) của Blogger, sau bài viết về margin và padding, bài viết này cung cấp cho bạn một số kỹ năng về CSS liên quan đến text có trong mã nguồn Template (Mẫu).
FONT CHỮ
Như đã biết, một vài Template của Blogger không hiển thị đúng tiếng Việt của chúng ta. Vậy thì làm thế nào để khắc phục? Bạn có thể đọc bài viết trước đây để khắc phục. Tuy nhiên hôm nay chúng ta sẽ làm theo một cách khác: Sửa trực tiếp từ Edit HTML (Chỉnh sửa HTML). Đăng nhập Blogger.com, vào Template (Mẫu), chọn Edit HTML (Chỉnh sửa HTML), kéo thanh trượt và bạn quan sát dòng (Ở đây là ví dụ):<variable name="bodyfont" description="Text Font" type="font" default="normal normal 100% Georgia, Serif" value="normal normal 100% Verdana, sans-serif">
<variable name="headerfont" description="Sidebar Title Font" type="font" default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal normal 78% Arial, sans-serif">
<variable name="pagetitlefont" description="Blog Title Font" type="font" default="normal normal 200% Georgia, Serif" value="normal normal 200% Verdana, sans-serif">
<variable name="descriptionfont" description="Blog Description Font" type="font" default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% Arial, sans-serif">
<variable name="postfooterfont" description="Post Footer Font" type="font" default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% Verdana, sans-serif">
Trong đó:
bodyfont: Font bài đăng
headerfont: Font tiêu đề
pagetitlefont: Font tên blog
descriptionfont: Font miêu tả blog
postfooterfont: Font footer
default là giá trị mặc định được người thiết kế Template chọn, value là giá trị hiện thời mà blog bạn sử dụng. Để hiển thị được tiếng Việt có dấu bạn phải dùng một trong các font này: Verdana, Times, Arial. Trong ví dụ trên, giá trị mặc định của headerfont: normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif lần lượt là font-style, font-weight, font-size, font-family. Đây là dạng viết tắt của các thuộc tính font trong CSS.
Tên của biến này được dùng ở nhiều vị trí nên người ta đã định nghĩa nó ở phía trên và sử dụng dùng cho một thành phần nào đó phía dưới, dấu $ được thêm vào trước tên biến phía trước chẳng hạn #header h1{ font: $pagetitlefont;}. Tương tự như vậy bạn thấy $descriptionfont, $postfooterfont,..
MÀU CHỮ
Giống như font chữ, thuộc tính màu chữ cũng được tạo bằng các biến. Bạn có thể dùng trang web hay link này hoặc chọn từ đây để lấy mã màu cho blog của mình.
bgcolor: Màu nền
textcolor: Màu chữ
linkcolor: Màu link
pagetitlecolor: Màu tên blog
descriptioncolor: Màu miêu tả blog
titlecolor: Màu tiêu đề bài đăng
bordercolor: Màu đường viềng
sidebarcolor: Màu tiêu đề trên sidebar
sidebartextcolor: Màu chữ trên sidebar
visitedlinkcolor: Màu link đã đọc
Cú phápcolor: #sáu_ký_tự;
Ví dụ: Màu trắng
color:#ffffff;
KÍCH THƯỚC CHỮfont-size: từ_khóa;
Các từ khóa xx-small, x-small, small, medium, large, x-large, và xx-large lần lượt cho kích thước từ nhỏ đến lớn. Ví dụ: font-size: medium;
Ở đây người tạo Template đã dùng %. Ví dụ: font-size: 200%;
NÉT CHỮ
font-weight: từ_khóa;
Các số từ 100 -> 900 thể hiện nét chữ nhạc nhất đến đậm nhất. Ngoài ra bạn có thể dùng các từ khóa: normal (400), bold (700), bolder (900) và lighter (100). Ví dụ: font-weight: bolder;
KIỂU CHỮfont-style: từ_khóa;
Các từ khóa normal, italic lần lượt cho các kiểu chữ bình thường (mặc định), nghiêng,
VỊ TRÍ CHỮtext-align: từ_khóa;
Các từ khóa left, right, center, justify lần lượt dùng để canh vị trí trái phải, giữa hoặc đều cả hai bên cho chữ hoặc văn bản.
TRANG TRÍ TEXTtext-decoration: từ_khóa;
Các từ khóa none, underline, overline, line-through lần lượt dùng để xóa thuộc tính gạch dưới cho liên kết, gạch dưới, gạch trên đầu, và gạch ngang qua text.
CHUYỂN DẠNG CHỮtext-transform: từ_khóa;
Các từ khóa capitalize, uppercase, lowercase, hoặc none lần lượt chuyển văn bản sang viết hoa ký tự đầu, viết hoa, viết thường hoặc bình thường. Ví dụ: Tại header (với các template có header) bạn sẽ thấy: text-transform: uppercase;
KHOẢNG CÁCH GIỮA CÁC DÒNG
(Trong MS Word là line spacing)line-height: giá_trị;
Giá trị là số, chiều dài hoặc %. Ví dụ: ….
KHOẢNG CÁCH GIỮA CÁC TỪ
(Ví dụ: Hello là một từ)word-spacing: giá_trị;
Chúc bạn chỉnh sửa thành công.
Ngoài cách đăng bài thông thường (đăng nhập vào Blogger và viết bài) bạn còn được biết đăng bài qua địa chỉ email. Tuy nhiên chúng ta còn một cách không kém phần thú vị khác: Đăng bài từ ...Word. Dưới đây là bài viết sưu tầm từ VnExpress giúp bạn có thêm một lựa chọn trong việc xuất bản cho đứa con tinh thần của mình.
Những lúc đang gõ văn bản, cảm xúc chợt hiện lên trong đầu khiến bạn muốn đưa ngay lên blog để chia sẻ với bạn bè. Nhưng thật bất tiện khi phải mở trình duyệt, truy cập vào trang blog, đăng nhập tài khoản, rồi mới bắt đầu viết. Giờ đây, bạn có thể làm điều đó ngay từ trình soạn thảo của Microsoft.
Google từ lâu đã cung cấp một dịch vụ blog rất mạnh cho các blogger dưới địa chỉ www.blogger.com. Không những thế, hãng còn hỗ trợ một công cụ rất hữu ích nhưng ít blogger để ý đến, đó là Blogger for Word (BFW). Chương trình này giúp bạn viết, lưu nháp, gửi, chỉnh sửa và đăng các bài viết lên blog ngay từ trong môi trường Word.
Bạn có thể tải xuống BFW tại http://dl.google.com/blogger/BloggerForWordSetup.exe hoặc vào địa chỉ này http://buzz.blogger.com/bloggerforword.html. Chương trình có dung lượng 1,9MB, tương thích với Windows 2000 và Word 2000 trở lên.
Sau khi cài đặt xong, mở Word lên bạn sẽ thấy xuất hiện thêm một thanh công cụ nữa trên giao diện của Word. Để sử dụng BFW, yêu cầu máy tính của bạn phải có nối mạng Internet.
Trước tiên bạn nhấn vào Blogger Settings, điền tên đăng nhập và mật khẩu vào khung Login Information. Nếu chưa có tài khoản trên www.blogger.com, bạn có thể nhấn vào dòng signup for a free account” để đăng ký cho. Nếu đánh dấu chọn vào Remember Username and Password thì chương trình sẽ lưu lại thông tin đăng nhập và lần sau bạn chỉ việc dùng mà không phải khai báo lần nữa.
Từ bây giờ người dùng có thể thoải mái viết blog ngay trên trang Word vừa mới mở. Viết xong, để đăng lên blog, bạn chỉ cần nhấn nút Publish, điền tiêu đề (Title) của bài viết và nhấn nút Send là lập tức bài viết sẽ được gửi lên blog. Nếu muốn lưu nháp để sau này còn thêm bớt chỉnh sửa, nhấn vào Save as Draft. Còn nếu muốn sửa một bài viết đã có trên blog, nhấn và Open Post... rồi chỉ việc tìm đến bài cần sửa.
Bạn đã làm hình nền cho blog của mình chưa? Nếu chưa, hãy đọc bài viết này. Hôm nay tôi hướng dẫn một cách làm hình nền khác: hình nền cho từng phần của blog (header, main, sidebar, footer).
Template theo mặc định bao gồm 4 thành phần chính: header (đầu: chứa tên, miêu tả blog, main (chính: hiển thị bài viết), sidebar (thành phần bên của trang, nằm bên trái hoặc phải hay cả hai), footer (thành phần dưới cùng).
Làm sao để làm hình nền từng thành phần này? Sau khi đăng nhập blogger.com, bạn vào Edit HTML, kéo thanh trượt sẽ tìm thấy các thành phần này.
A. Thành phần Header
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
B. Thành phần Main
#main-wrapper {
width: 410px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
C. Thành phần Sidebar
#sidebar-wrapper {
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
D. Thành phần Footer
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
Như bạn đã biết cách chèn hình nền cho blog, đoạn mã liên kết đến hình:
background-image:url(http://www.vidu.com/hinh.jpg);
Trong đó http://www.vidu.com/hinh.jpg là liên kết đến hình nền. Như vậy muốn chèn vào header, bạn sẽ chèn như sau:
#header-wrapper {
width:660px;
background-image:url(http://www.vidu.com/hinh.jpg);
margin:0 auto 10px;
border:1px solid $bordercolor;
}
Cách chèn tương tự cho các thành phần khác.
Kích thước hình nền cho từng thành phần
Tùy theo width của mỗi thành phần. Các tối ưu nhất hình nền cho từng thành phần có chiều ngang bằng với width của mỗi thành phần. Chiều dọc càng nhỏ càng tốt.
Ví dụ thành phần main và sidebar sẽ kéo dài hoặc thu hẹp chiều dọc theo nội dung bài viết hay số lượng widget được thêm vào, điều này chúng ta không thể kiểm soát được, vì vậy sử dụng ảnh có chiều ngang bằng width của mỗi thành phần, chiều dọc nhỏ để tự động lặp lại theo độ dài hiển thị. Theo các con số như ví dụ trên, chúng ta sẽ thiết kế hình nền với chiều ngang 410px cho main và 220px cho sidebar. Một tấm ảnh vừa phải có kích thước 410 x 10 là tương đối hợp lý. Cần thêm vào đoạn mã sau để hình nền lặp lại theo chiều dọc:
background-repeat: repeat-y;
Để hình nền này nằm vị trí cân đối, bạn có thể thêm vào:
background-position: center center;
Lưu ý thêm, bạn có thể định nghĩa màu nền cho toàn bộ blog của mình sao cho tương phản và làm nổi bậc các thành phần. Có hai cách để làm việc này.
Cách 1. Bạn chọn Font and Colors (Màu và chữ) trên Template, chọn màu cho background
Cách 2. Vào Edit HTML, bạn kéo thanh trược để tìm:
body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
Trong đó background:$bgcolor; định màu nền thay đổi theo lựa chọn của bạn ở cách trên. Hãy lấy mã màu thập lục và chèn thẳng. Ví dụ, màu trắng như sau:
background:#ffffff;
Chúc bạn thành công!
Kết quả thống kê từ công cụ tìm kiếm cho thấy nhiều bạn đọc quan tâm đến hình nền cho blog của mình. Vì vậy tôi quyết định viết thêm một số bài liên quan đến sử dụng hình nền. Ở bài viết này, chúng ta sẽ lưu ý một số điều về việc sử dụng hình nền.
Kích thước của hình nền thiết kế
Một blog đẹp hẳn phải có một hình nền đẹp, kết hợp màu sắc, kiểu chữ cộng với cách bố trí giao diện hợp lý. Muốn có một hình nền theo phong cách “không đụng hàng” bạn phải tự thiết kế cho mình. Các chương trình xử lý đồ họa như Adobe Photoshop, Google Picasa,… giúp bạn thực hiện việc này. Vậy kích thước cho hình nền bao nhiêu?
Kích thước ngang của blog
Đăng nhập vào blogger.com, chọn layout ->Edit HTML (Trên Template) và kéo thanh trượt để tìm outer-wrapper.
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 883px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
Đây là kích thước chiều ngang (width) của blog, đơn vị tính px (pixel). Chiều dọc không bị giới hạn. Tất cả theo mặc định. Tất nhiên không ai cấm bạn thay đổi. Phụ thuộc vào cách trình bày và giao diện theo template, bạn có thể thay đổi width cho template 2 cột bằng 800, hay 1024 cho 3 cột trở lên.
Để hình nền hiển thị, bạn phải chèn đoạn mã hướng dẫn bên dưới vào vị trí bên dưới.
background-image:url(http://www.vidu.com/hinh.jpg);
Vị trí chèn:
/* Use this with templates/template-twocol.html */
body {
background:$bgcolor;
margin:0;
background:#ffffff;
background-image:url(http://www.vidu.com/hinh.jpg);
color:$textcolor;
font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
Hãy thay http://www.vidu.com/hinh.jpg (liên kết đến hình nền của bạn), như: http://i198.photobucket.com/albums/aa172/giangdaytructuyen/thuthuatchoblogger/ttcbloggerbg1.jpg
Theo tôi, một trong ba cách dùng hình nền như sau có thể được sử dụng.
Cách 1. Dùng các ảnh có kích thước màn hình chuẩn (ngang x dọc) như: 800 x 600, 1024 x 768, …Hình nền sẽ bao phủ toàn bộ blog. Và đoạn mã sau dành cho cách này:
background-image: url(http://www.vidu.com/hinh.jpg);
background-repeat: no-repeat;
background-attachment:fixed;
background-position:center center;
Giải thích:
background-repeat: no-repeat; (hình nền bao phủ hết trang nên chúng ta không cần để nó lặp lại) background-attachment:fixed; (cố định hình nền ở một vị trí nhất định)
background-position:center center;(canh giữa ngang và dọc cho trang)
Cách 2. Hình nền có kích thước không theo màn hình chuẩn.
Trường hợp 1: Bạn sử dụng ảnh có width bằng kích thước ngang của màn hình chuẩn, ví dụ: 1024, 800,…
Và đoạn mã này phù hợp cho bạn:
background-image: url(http://www.vidu.com/hinh.jpg);
background-repeat: repeat-y;
background-position:center center;
Giải thích:
background-repeat: repeat-y; (hình nền lặp lại theo chiều dọc phủ đầy trang)
background-position:center center;(canh giữa ngang và dọc cho trang)
Trường hợp 2: Bạn sử dụng ảnh có width không bằng kích thước ngang của màn hình chuẩn. Và đoạn mã này phù hợp cho bạn:
background-image: url(http://www.vidu.com/hinh.jpg);
background-position:center center;
Giải thích:
background-position:center center;(canh giữa ngang và dọc cho trang)
Hình ảnh sẽ lặp phủ đầy trang, theo mặc định.
Trường hợp 3. Tối ưu trường hợp 2, ảnh nền của bạn dùng có kích thước dài rộng bằng nhau. Hãy tưởng tượng những viên gạch lót nền có hoa văn giống nhau và gắn kết với nhau hoàn chỉnh bộ nền nhà. Bạn chỉ cần là một viên gạch để làm hình nền, viên gạch này sẽ lặp lại và bao phủ hết màn hình. Ví dụ: 20x20, 50 x 50, …Đoạn mã tương tự như trên.
Bài viết sau tôi sẽ hướng dẫn dùng hình nền cho từng thành phần riêng rẻ, và bài viết tiếp đó hướng dẫn hình nền cong góc của mỗi thành phần. Mời bạn đón đọc.
Chúc một tuần học tập và làm việc hiệu quả!
Đây là bảng mã màu (lấy từ http://tips-for-new-bloggers.blogspot.com) mà bạn có thể dùng cho việc chỉnh sửa màu sắc.Tên màu Mã Màu Black #000000 Grey0 #150517 Grey18 #250517 Grey21 #2B1B17 Grey23 #302217 Grey24 #302226 Grey25 #342826 Grey26 #34282C Grey27 #382D2C Grey28 #3b3131 Grey29 #3E3535 Grey30 #413839 Grey31 #41383C Grey32 #463E3F Grey34 #4A4344 Grey35 #4C4646 Grey36 #4E4848 Grey37 #504A4B Grey38 #544E4F Grey39 #565051 Grey40 #595454 Grey41 #5C5858 Grey42 #5F5A59 Grey43 #625D5D Grey44 #646060 Grey45 #666362 Grey46 #696565 Grey47 #6D6968 Grey48 #6E6A6B Grey49 #726E6D Grey50 #747170 Grey #736F6E Slate Grey4 #616D7E Slate Grey #657383 Light Steel Blue4 #646D7E Light Slate Grey #6D7B8D Cadet Blue4 #4C787E Dark Slate Grey4 #4C7D7E Thistle4 #806D7E Medium Slate Blue #5E5A80 Medium Purple4 #4E387E Midnight Blue #151B54 Dark Slate Blue #2B3856 Dark Slate Grey #25383C Dim Grey #463E41 Cornflower Blue #151B8D Royal Blue4 #15317E Slate Blue4 #342D7E Royal Blue #2B60DE Royal Blue1 #306EFF Royal Blue2 #2B65EC Royal Blue3 #2554C7 Deep Sky Blue #3BB9FF Deep Sky Blue2 #38ACEC Slate Blue #357EC7 Deep Sky Blue3 #3090C7 Deep Sky Blue4 #25587E Dodger Blue #1589FF Dodger Blue2 #157DEC Dodger Blue3 #1569C7 Dodger Blue4 #153E7E Steel Blue4 #2B547E Steel Blue #4863A0 Slate Blue2 #6960EC Violet #8D38C9 Medium Purple3 #7A5DC7 Medium Purple #8467D7 Medium Purple2 #9172EC Medium Purple1 #9E7BFF Light Steel Blue #728FCE Steel Blue3 #488AC7 Steel Blue2 #56A5EC Steel Blue1 #5CB3FF Sky Blue3 #659EC7 Sky Blue4 #41627E Slate Blue #737CA1 Slate Grey3 #98AFC7 Violet Red #F6358A Violet Red2 #E4317F Deep Pink #F52887 Deep Pink2 #E4287C Deep Pink3 #C12267 Deep Pink4 #7D053F Medium Violet Red #CA226B Violet Red3 #C12869 Firebrick #800517 Violet Red4 #7D0541 Maroon4 #7D0552 Maroon #810541 Maroon3 #C12283 Maroon2 #E3319D Maroon1 #F535AA Magenta #FF00FF Magenta1 #F433FF Magenta2 #E238EC Magenta3 #C031C7 Medium Orchid #B048B5 Medium Orchid1 #D462FF Medium Orchid2 #C45AEC Medium Orchid3 #A74AC7 Medium Orchid4 #6A287E Purple #8E35EF Purple1 #893BFF Purple2 #7F38EC Purple3 #6C2DC7 Purple4 #461B7E Dark Orchid4 #571B7E Dark Orchid #7D1B7E Dark Violet #842DCE Dark Orchid3 #8B31C7 Dark Orchid2 #A23BEC Dark Orchid1 #B041FF Plum4 #7E587E Pale Violet Red #D16587 Pale Violet Red1 #F778A1 Pale Violet Red2 #E56E94 Pale Violet Red3 #C25A7C Pale Violet Red4 #7E354D Plum #B93B8F Plum1 #F9B7FF Plum2 #E6A9EC Plum3 #C38EC7 Thistle #D2B9D3 Thistle3 #C6AEC7 Lavendar Blush2 #EBDDE2 Lavendar Blush3 #C8BBBE Thistle2 #E9CFEC Thistle1 #FCDFFF Lavendar #E3E4FA Lavendar Blush #FDEEF4 Light Steel Blue1 #C6DEFF Light Blue #ADDFFF Light Blue1 #BDEDFF Light Cyan #E0FFFF Slate Grey1 #C2DFFF Slate Grey2 #B4CFEC Light Steel Blue2 #B7CEEC Turquoise1 #52F3FF Cyan #00FFFF Cyan1 #57FEFF Cyan2 #50EBEC Turquoise2 #4EE2EC Medium Turquoise #48CCCD Turquoise #43C6DB Dark Slate Grey1 #9AFEFF Dark Slate Grey2 #8EEBEC Dark Slate Grey3 #78C7C7 Cyan3 #46C7C7 Turquoise3 #43BFC7 Cadet Blue3 #77BFC7 Pale Turquoise3 #92C7C7 Light Blue2 #AFDCEC Dark Turquoise #3B9C9C Cyan4 #307D7E Light Sea Green #3EA99F Light Sky Blue #82CAFA Light Sky Blue2 #A0CFEC Light Sky Blue3 #87AFC7 Sky Blue #82CAFF Sky Blue2 #B0E2FF Light Sky Blue4 #566D7E Sky Blue #6698FF Light Slate Blue #736AFF Light Cyan2 #CFECEC Light Cyan3 #AFC7C7 Light Cyan4 #717D7D Light Blue3 #95B9C7 Light Blue4 #5E767E Pale Turquoise4 #5E7D7E Dark Sea Green4 #617C58 Medium Aquamarine #348781 Medium Sea Green #306754 Sea Green #4E8975 Dark Green #254117 Sea Green4 #387C44 Forest Green #4E9258 Medium Forest Green #347235 Spring Green4 #347C2C Dark Olive Green4 #667C26 Chartreuse4 #437C17 Green4 #347C17 Medium Spring Green #348017 Spring Green #4AA02C Lime Green #41A317 Spring Green #4AA02C Dark Sea Green #8BB381 Dark Sea Green3 #99C68E Green3 #4CC417 Chartreuse3 #6CC417 Yellow Green #52D017 Spring Green3 #4CC552 Sea Green3 #54C571 Spring Green2 #57E964 Spring Green1 #5EFB6E Sea Green2 #64E986 Sea Green1 #6AFB92 Dark Sea Green2 #B5EAAA Dark Sea Green1 #C3FDB8 Green #00FF00 Lawn Green #87F717 Green1 #5FFB17 Green2 #59E817 Chartreuse2 #7FE817 Chartreuse #8AFB17 Green Yellow #B1FB17 Dark Olive Green1 #CCFB5D Dark Olive Green2 #BCE954 Dark Olive Green3 #A0C544 Yellow #FFFF00 Yellow1 #FFFC17 Khaki1 #FFF380 Khaki2 #EDE275 Goldenrod #EDDA74 Gold2 #EAC117 Gold1 #FDD017 Goldenrod1 #FBB917 Goldenrod2 #E9AB17 Gold #D4A017 Gold3 #C7A317 Goldenrod3 #C68E17 Dark Goldenrod #AF7817 Khaki #ADA96E Khaki3 #C9BE62 Khaki4 #827839 Dark Goldenrod1 #FBB117 Dark Goldenrod2 #E8A317 Dark Goldenrod3 #C58917 Sienna1 #F87431 Sienna2 #E66C2C Dark Orange #F88017 Dark Orange1 #F87217 Dark Orange2 #E56717 Dark Orange3 #C35617 Sienna3 #C35817 Sienna #8A4117 Sienna4 #7E3517 Indian Red4 #7E2217 Dark Orange3 #7E3117 Salmon4 #7E3817 Dark Goldenrod4 #7F5217 Gold4 #806517 Goldenrod4 #805817 Light Salmon4 #7F462C Chocolate #C85A17 Coral3 #C34A2C Coral2 #E55B3C Coral #F76541 Dark Salmon #E18B6B Salmon1 #F88158 Salmon2 #E67451 Salmon3 #C36241 Light Salmon3 #C47451 Light Salmon2 #E78A61 Light Salmon #F9966B Sandy Brown #EE9A4D Hot Pink #F660AB Hot Pink1 #F665AB Hot Pink2 #E45E9D Hot Pink3 #C25283 Hot Pink4 #7D2252 Light Coral #E77471 Indian Red1 #F75D59 Indian Red2 #E55451 Indian Red3 #C24641 Red #FF0000 Red1 #F62217 Red2 #E41B17 Firebrick1 #F62817 Firebrick2 #E42217 Firebrick3 #C11B17 Pink #FAAFBE Rosy Brown1 #FBBBB9 Rosy Brown2 #E8ADAA Pink2 #E7A1B0 Light Pink #FAAFBA Light Pink1 #F9A7B0 Light Pink2 #E799A3 Pink3 #C48793 Rosy Brown3 #C5908E Rosy Brown #B38481 Light Pink3 #C48189 Rosy Brown4 #7F5A58 Light Pink4 #7F4E52 Pink4 #7F525D Lavendar Blush4 #817679 Light Goldenrod4 #817339 Lemon Chiffon4 #827B60 Lemon Chiffon3 #C9C299 Light Goldenrod3 #C8B560 Light Golden2 #ECD672 Light Goldenrod #ECD872 Light Goldenrod1 #FFE87C Lemon Chiffon2 #ECE5B6 Lemon Chiffon #FFF8C6 Light Goldenrod Yellow #FAF8CC