Sau thời gian tìm hiểu, tôi đã phát hiện ra một cách hợp lý đặt code Chợ Điện Tử vào template của Blogger. Đây là cách mà nhiều người sử dụng để đặt Google AdSense code vào blog. Đó là chuyển các ký tự đặc biệt thành mã HTML. Cách này không dùng được trong trường hợp bạn đặt trực tiếp trên layout thông qua tiện ích HTML/JavaScript.

Sau đây là các bước:

Bước 1. Đăng nhập trang quản lý tài khoản của bạn trên Chợ Điện Tử (http://ads.chodientu.vn) và tạo widget quảng cáo mới sau đó lấy code.

Bước 2. Chép tất cả đoạn code lấy được trên vào khung ở trang này, nhấn CONVERT AD CODE, và bấm HIGHTLIGHT ALL để chép hết đoạn mã chuyển đổi được.

Bước 3. Đăng nhập Blogger, chọn thẻ Layout (Trình bày) | Edit HTML (Chỉnh sửa HTML), đánh dấu chọn Expand Widget Templates (Mở rộng tiện ích mẫu). Trước khi tiếp tục chúng ta tải mẫu hiện tại về máy tính thông qua link Download Full Template (Tải mẫu đầy đủ) đề phòng thao tác sai có thể phục hồi mẫu sau này.

Dán đoạn mã chuyển đổi trên vào các vị trí mình muốn và lưu lại:

a. Phía dưới tiêu đề bài đăng:

Xin tham khảo hướng dẫn tương tự cách chèn đánh giá bài viết ngay sau tiêu đề.

b. Phía cuối bài đăng:

Xin tham khảo hướng dẫn tương tự cách chèn một đoạn văn bản cuối bài đăng.

c. Cách đặt vào HTML/JavaScript (dùng trên sidebar và vị trí khác):

Đăng nhập vào Blogger, chọn Layout (Trình bày) -> Edit HTML (Chỉnh sửa HTML), bây giờ hãy lưu ý các thành phần trang tương ứng trên sidebar (hoặc vị trí khác) sẽ được điều khiển bởi các đoạn code tương ứng. Để dễ hiểu tôi lấy ví dụ sidebar bên trái của template có hai thành phần trang (Label và HTML/JavaScript, tương ứng với id=’Label1′ và id=’HTML1′):

      <div id='left-col'>        <b:section class='sidebar' id='left-sidebar' preferred='yes'><b:widget id='Label1' locked='false' title='Labels' type='Label'/><b:widget id='HTML1' locked='false' title='Quà tặng từ TTO' type='HTML'/></b:section>      </div>

Chúng ta sẽ đặt code quảng cáo trên thành phần HTML/JavaScript nên copy toàn bộ id=’HTML1′ dán ngay vị trí muốn hiển thị:

      <div id='left-col'>        <b:section class='sidebar' id='left-sidebar' preferred='yes'><b:widget id='Label1' locked='false' title='Labels' type='Label'/><b:widget id='HTML1' locked='false' title='Quà tặng từ TTO' type='HTML'/><b:widget id='HTML1' locked='false' title='Quà tặng từ TTO' type='HTML'/></b:section>      </div>

Và thay đổi id=’HTML1′ -> id=’HTML2′ (mỗi id là duy nhất, nên thay đổi sao cho không trùng với id khác), title=’Quà tặng từ TTO’ -> title=’Quảng cáo’ (Bạn phải đặt title, nếu HTML/JavaScript này không có tên sẽ không thể hiển thị) như sau và lưu lại như sau:

      <div id='left-col'>        <b:section class='sidebar' id='left-sidebar' preferred='yes'><b:widget id='Label1' locked='false' title='Labels' type='Label'/><b:widget id='HTML1' locked='false' title='Quà tặng từ TTO' type='HTML'/><b:widget id='HTML2' locked='false' title='Quảng cáo' type='HTML'/></b:section>      </div>

Lưu xong chúng ta check Expand Widget Templates (Mở rộng tiện ích mẫu) và tìm id=’HTML2′ (Dùng Ctrl + F) và dán code như dưới đây:

<b:widget id='HTML2' locked='false' title='Quảng cáo' type='HTML'><b:includable id='main'>  <!-- only display title if it's non-empty -->  <b:if cond='data:title != &quot;&quot;'>    <h2 class='title'><data:title/></h2>  </b:if>  <div class='widget-content'>    Dán code Chợ Điện Tử đã convert theo hướng dẫn trên vào đây!    <data:content/>  </div>

  <b:include name='quickedit'/></b:includable></b:widget>

Chúng ta có thể sử dụng bất kỳ id=’HTMLNo’ nào trong HTML của template để làm chèn code như trên và kéo thả thay đổi vị trí trên layout.

Nếu bạn có blog hoặc website đáp ứng yêu cầu như đã nói ở phần đầu có thể xem hướng dẫn tham gia và kiếm tiền.

Chúc bạn kiếm được nhiều tiền khao mình một chầu cà phê nhé!

Để 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 &#38lt; và > thành &#38gt;) 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;}

Hãy chép lại đoạn mã sau và sửa đổi theo hướng dẫn dưới.

<a href="ymsgr:sendIM?Yahoo!ID"><img border="0" src="http://presence.msg.yahoo.com/online?u=Yahoo!ID&m=g&t=ImageNo&l=us">

Trong đó thay thế các chữ màu đỏ:

• Yahoo!ID: Nickname của bạn (Hoặc địa chỉ email nếu bạn sử dụng dạng nickname@ymail.com, nickname@rocketmail.com). Ví dụ: dv2n hoặc dv2n@ymail.com

• ImageNo: Số thứ tự biểu tượng mà bạn định dùng tương ứng với các hình sau:

Đây đoạn mã hiển thị trạng thái online của tôi và sử dụng hình 16:

<a href="ymsgr:sendIM?dv2n"><img border="0" src="http://presence.msg.yahoo.com/online?u=dv2n&m=g&t=16&l=us">

Tôi đã kiểm tra thử một Yahoo! ID bình thường vẫn sử dụng được các biểu tượng trên, không nhất thiết phải là Power User (dv2n là nick Power User). Bạn có thể xem thêm hướng dẫn cách đưa biểu tượng hiển thị trạng thái online qua Yahoo! Messenger và Skype lên blog hoặc website của mình.

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>

Bước 1. ĐĂNG KÝ:

Nhấn vào đây và để lại thông tin theo mẫu (Chép và sửa lại cho phù hợp với các thông tin của bạn):

• Tên blog: Tên blog của bạn
• URL: Địa chỉ blog
• URL dự định: http://têncủabạn.blogspotvn.com
• Yahoo! Messenger ID: Nickname của Yahoo! Messenger (Dùng để nhắn cho bạn khi đã cài xong, nhớ cho nhé!). Bạn cũng có thể xem thông báo đia chỉ đã kích hoạt trong chat box tại trang www.blogspotvn.com

Ví dụ:

• Tên blog: Thủ Thuật Blog
• URL: http://thuthuatchoblogger.blogspot.com
• URL dự định: http://ttb.blogspotvn.com
• Yahoo! Messenger ID: dv2n

Bước 2. CÀI ĐẶT ĐỊA CHỈ ĐĂNG KÝ TRÊN CHO BLOG:

Tên miền đã đăng ký và kích hoạt xong vẫn chưa thể sử dụng được nếu bạn không thay đổi địa chỉ blog của mình thành địa chỉ mới này.Tóm tắt các thay đổi: Đăng nhập Blogger.com, chọn Settings (Cài đặt) | Publishing (Đang công bố), nhấn Custom Domain (Tên miền tùy chỉnh) -> nhấn Switch to advanced settings (Chuyển sang cài đặt nâng cao) và gõ tên miền đã đăng ký và lưu lại.

Có hai cách gõ:

(1) Nếu bạn dự định sẽ dùng tên miền của mình dạng không có www hãy gõ địa chỉ không có www. Ví dụ: abc.blogspotvn.com. Nhập xong lưu lại và làm giống như hình dưới. Địa chỉ blog của bạn sẽ là http://abc.blogspotvn.com.

(2) Nếu bạn dự định sẽ dùng tên miền của mình dạng có www hãy gõ địa chỉ có www. Ví dụ: www.abc.blogspotvn.com. Nhập xong lưu lại và làm giống như hình dưới. Địa chỉ blog của bạn sẽ là http://www.abc.blogspotvn.com.

Nhớ cài theo đúng hướng dẫn của hình cả hai địa chỉ có hoặc không có www đều truy cập được vào blog của bạn. Các địa chỉ đã cài không giống như hướng dẫn có thể bổ sung để hợp lý hơn.

Tôi xin lỗi lúc trước bỏ qua phần này. Hãy xem thêm một hướng dẫn khác.

Nhiều khi tôi không có thời gian update địa chỉ đã đăng ký vào danh sách bên dưới nên bạn đã đăng ký rồi cứ kiểm tra địa chỉ của mình trên trình duyệt web. Nếu mở địa chỉ hiện nội dung: Server Not Found, Error 404 chứng tỏ link đã sử dụng được, tới đây chỉ cần khai báo như trên. Hoặc bạn cũng có thể xem thông báo trong shoutbox tại trang www.blogspotvn.com hoặc bên dưới:

Lưu ý:

Địa chỉ đã đăng ký và được kích hoạt nên sớm đưa vào sử dụng.

DANH SÁCH TÊN MIỀN CON ĐÃ ĐĂNG KÝ:(Cập nhật lúc 18h30 ngày 24/07/2008)

1. http://chungtalaa1.blogspotvn.com/
2. http://hoanganhphi.blogspotvn.com
3. http://haotuyet.blogspotvn.com
4. http://nmtitsoft.blogspotvn.com
5. http://thattinhbuon.blogspotvn.com
6. http://duyk2.blogspotvn.com
7. http://thegioiinternet.blogspotvn.com
8. http://dailyslab.blogspotvn.com
9. http://juujigun.blogspotvn.com
10. http://unitapviet.blogspotvn.com
11. http://viettan.blogspotvn.com
12. http://ttb.blogspotvn.com
13. http://thanhthieuthicangiuoc.blogspotvn.com
14. http://vnchip.blogspotvn.com/
15. http://htdl.blogspotvn.com
16. http://pjnny_bkjem.blogspotvn.com
17. http://vnsearch.blogspotvn.com
18. http://vnngoogle.blogspotvn.com
19. http://sukidayo.blogspotvn.com
20. http://cbcy.blogspotvn.com
21. http://lanlimitless.blogspotvn.com
22. http://nhatrangtourist.blogspotvn.com
23. http://2a13.blogspotvn.com
24. http://anhchangkungfu.blogspotvn.com
25. http://bloghoatau.blogspotvn.com
26. http://pro126.blogspotvn.com
27. http://thulinhminhchi.blogspotvn.com
28. http://xahoi.blogspotvn.com
29. http://languagesstudy.blogspotvn.com
30. http://lehalong.blogspotvn.com
31. http://chungmatdo.blogspotvn.com
32. http://nmh.misinglovingyou.blogspotvn.com
33. http://hvhoai.blogspotvn.com
34. http://j0hnbl4ck.blogspotvn.com
35. http://sorryembaby.blogspotvn.com
36. http://voc.blogspotvn.com
37. http://vinhtran.blogspotvn.com
38. http://matden.blogspotvn.com
39. http://tommynt.blogspotvn.com
40. http://umbala.blogspotvn.com
41. http://ytetantap.blogspotvn.com
42. http://bancuahoai.blogspotvn.com
43. http://dutoan.blogspotvn.com
44. http://shjn8x.blogspotvn.com
45. http://adam.blogspotvn.com
46. http://eva.blogspotvn.com
47. http://sanofi-ebooksmedicine.bllogspotvn.com
48. http://thuthuat.blogspotvn.com
49. http://saobacdaunhoem.blogspotvn.com
50. http://tungtoan.blogspotvn.com
51. http://doandinhbinh.blogspotvn.com
52. http://conquydo07.blogspotvn.com
53. http://btku.blogspotvn.com
54. http://cuocdoivandep.blogspotvn.com
55. http://subinlongan.blogspotvn.com
56. http://bboyky.blogspotvn.com
57. http://soft.blogspotvn.com
58. http://lethang_archi.blogspotvn.com
59. http://bill.blogspotvn.com
60. http://tatthiet.blogspotvn.com
61. http://amokachi.blogspotvn.com
62. http://momo.blogspotvn.com
63. http://phunghia.blogspotvn.com/
64. http://timetorevenge2008.blogspotvn.com
65. http://khungtroingayxua.blogspotvn.com/
66. http://chuongduong.blogspotvn.com
67. http://center-entertainments.blogspotvn.com
68. http://luongvietdung.blogspotvn.com
69. http://soft911.blogspotvn.com
70. http://MinhQuang.blogspotvn.com
71. http://juliecole.blogspotvn.com

<!–

–>

CẬP NHẬT:

Bạn có thể tự đăng ký một hòm thư có phần mở rộng @blogspotvn.com đi kèm với tên miền của mình thông qua dịch vụ Windows Live. Hãy nhấn Sign up để đăng ký.

Truy xuất hòm thư theo một trong ba địa chỉ sau:

http://mail.live.com
http://mail.blogspotvn.com
http://email.blogspotvn.com

ĐƯA TRANG WEB LÊN LIVE SEARCH

Bước 1: Truy cập địa chỉ http://webmaster.live.com và nhấn vào nút Sign in to use the tools để đăng nhập hoặc tạo Windows Live ID nếu bạn không có tài khoản dùng cho MSN Hotmail, MSN Messenger, Passport.net (một địa chỉ email bất kỳ) hay Windows Live.

Bước 2: Đăng nhập xong chúng ta sẽ đến trang khai báo địa chỉ, chọn phương pháp xác minh website và điền địa chỉ email liên hệ.

Bước 3: Xác minh địa chỉ website. Chèn một đoạn mã chứa thẻ META ngay phía dưới thẻ <head> trong mã nguồn của trang web hay đưa lên host một tệp tin LiveSearchSiteAuth.xml mang nội dung được tạo ở bước này. Nếu sử dụng Blogger bạn chỉ có thể chọn cách chèn thẻ META.

Bước 4: Sau khi xác minh thành công, bạn có thể khám phá các thống kê mà công cụ này mang lại bao gồm số lượng trang được đánh chỉ mục, từ khóa, các trang hàng đầu mà bạn liên kết đến (top outbound links), các trang hàng đầu đem lại lượng truy cập cho bạn (top backlinks),…

ĐƯA HỘP TÌM KIẾM LIVE SEARCH LÊN TRANG

Đi cùng với công cụ hỗ trợ webmaster, bạn cũng có thể lấy hộp tìm kiếm Live Search chèn vào website của mình ở địa chỉ http://search.live.com/siteowner. Hộp tìm kiếm có dạng như thế này:

Tuy nhiên các từ khóa tiếng Việt khi truy xuất trên hộp tìm kiếm Live Search đặt trên website của bạn được xử lý khá kém nên không hiển thị đúng trên trang kết quả nếu không gõ lại một lần nữa.

Với việc Google cho phép các trang sử dụng công cụ tìm kiếm của họ để kiếm tiền thì công cụ của Microsoft ngày càng ít được dùng đến. Chẳng thế mà thị phần tìm kiếm tháng 4 vừa rồi của Microsoft giảm còn 9,1% (từ 9,6%). Nếu gã khổng lồ phần mềm không có những bước đi đột phá, họ sẽ ngày một mất chỗ đứng trên thị trường tìm kiếm.