Cách đặt code quảng cáo của Chợ Điện Tử vào template Blogger

Saturday, July 12, 2008 | 8 comments Bookmark and Share

Trước đây chương trình quảng cáo của Chợ Điện Tử cung cấp hai loại code JavaScript và flash cho các webmaster và blogger tùy ý sử dụng cho trang của họ. Tuy nhiên loại code JavaScript không thể hiển thị đúng trên Blogger mặt dù nền blog này hỗ trợ khá đầy đủ JavaScript.

Kể từ phiên bản cập nhật gần đây, Chợ Điện Tử đã giới hạn chỉ cho các website có tên miền riêng, thứ hạng dưới 1 triệu trên Alexa tham gia hệ thống này. Các Blogger (BlogSpot) có tên miền riêng dù có đáp ứng đủ điều kiện trên cũng đành ngậm ngùi.

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. Một số vị trí khác:


Vui lòng gửi yêu cầu dưới post này.

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é!

Đọc phần còn lại ...

Đặt code trong khung trên bài viết của Blogger

Tuesday, July 8, 2008 | 6 comments Bookmark and Share

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[/*]]></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 &lt;> thành &gt;) 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 phần còn lại ...

Một số biểu tượng đặc biệt hiện trạng thái online của Yahoo! Messenger

Sunday, July 6, 2008 | 24 comments Bookmark and Share

Không cần làm VIP trên Yahoo! bạn vẫn có thể sử dụng một số biểu tượng đặc biệt của Yahoo! Messenger để hiện trạng thái online của mình trên blog hoặc website.

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:
ImageNo: 6
ImageNo: 7
ImageNo: 8
ImageNo: 9
ImageNo:10
ImageNo: 11
ImageNo: 12
ImageNo: 13
ImageNo: 14
ImageNo: 15
ImageNo: 16
Đâ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! MessengerSkype lên blog hoặc website của mình.

Đọc phần còn lại ...

Làm thế nào để sử dụng khung nhận xét của Blogger?

Thursday, July 3, 2008 | 15 comments Bookmark and Share

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>
    </b:if>

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>
    </b:if>

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!

Đọc phần còn lại ...

Tên miền cho Blogger miễn phí: BlogSpotvn.com

Thursday, May 29, 2008 | 120 comments Bookmark and Share

Tin vui cho các bạn Blogger (BlogSpot.com) là tôi vừa đăng ký tên miền BLOGSPOTVN.COM và cung cấp tên miền con (subdomain) của tên miền này miễn phí cho các bạn làm blog ở Blogger. Dùng tên miền riêng sẽ giúp blog không bị ngăn khi người dùng internet của VNPT xem blog.
Tên miền con của tên miền moohay.com vẫn dùng bình thường và nếu bạn có ý định đổi sang địa chỉ này vui lòng thông báo để tôi tạo trang chuyển đổi đến địa chỉ mới của bạn.
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é!)

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 dưới nên nếu các 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.
Lưu ý
: Địa chỉ đã đăng ký không sử dụng trong vòng 1 tuần sẽ bị xóa. Vui lòng xem các địa chỉ đã kích hoạt thành công và đang sử dụng tên miền tại WWW.BLOGSPOTVN.COM.
DANH SÁCH TÊN MIỀN CON ĐÃ ĐĂNG KÝ:(Cập nhật lúc 18h30 ngày 14/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


CẬP NHẬT:

Tôi đang cung cấp miễn phí hòm thư dạng abc@blogspotvn.com nếu bạn có ý định sử dụng vui lòng gửi yêu cầu đến địa chỉ n@blogspotvn.com kèm theo Tên + Họ + username@blogspotvn.com. Ví dụ: Anh + Nguyễn + n@blogspotvn.com.

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

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

Đọc phần còn lại ...