Hướng dẫn tạo trang liên hệ cho Blogger

Hướng dẫn tạo trang liên hệ cho Blogger
Một blog hoặc một website bình thường lúc nào cũng sẽ có ba trang đó là About (Giới thiệu), Privacy Policy (Chính sách bảo mật), và Contact (Liên hệ). Một website mà có 3 trang này thì thông thường sẽ được tin tưởng và sử dụng bởi nhiều người dùng hơn. Đối với Blogger thì hai loại trang About, và Privacy Policy thì hoàn toàn có thể tạo ra đơn giản chỉ như việc viết bài mới và căn chỉnh bố trí bài đó. Thế làm sao chúng ta tạo ra được trang liên hệ cho Blogger? Để giải đáp thắc mắc này, mình viết ra bài viết này để hướng dẫn mọi người về cách tạo ra một trang liên hệ riêng cho mình.

Hướng dẫn tạo trang liên hệ cho Blogger

Hướng dẫn tạo trang liên hệ cho Blogger

Thủ thuật mà mình hướng dẫn ở đây là chính lợi dụng widget có sẵn của Blogger cướp về trang tĩnh để xài. Nói thế bạn cũng hiểu, đầu tiên để lợi dụng thì chúng ta phải tạo ra nó.

Video hướng dẫn: http://youtu.be/oi10qyoLncE

Đăng nhập vào Blogger » Bố cục » Thêm tiện ích

Hướng dẫn tạo trang liên hệ cho Blogger

Tại của số của thêm tiện ích, các bạn ngó qua khu vực menu phía bên trái, chọn vào tab Tiện ích Khác. Sau khi chọn vào tab đó bạn sẽ thấy tiện ích Biểu mẫu liên hệ, chọn và thêm nó vào blog của bạn.

Hướng dẫn tạo trang liên hệ cho Blogger

Bước tiếp theo, chúng ta sẽ làm ẩn đi tiên ích Biểu mẫu liên hệ đó, và lợi dụng những chức năng có sẵn của nó để viết ra một khung liên hệ khác tại trang mới mà chúng ta tạo tại Blogger.

Các bạn vào lại trang tổng quan của blog của bạn » Mẫu » Chỉnh sửa HTML

Tìm đến thẻ ]]></b:skin> và thêm đoạn css sau lên trên
.ContactForm {
  display: none;
}
Bước kế tiếp, chúng ta sẽ tạo một trang liên hệ bằng trang tĩnh tại blog của chúng ta. Tại trang tổng quan bạn chọn vào Trang » Trang mới. Tại phần nội dung của trang mới, bạn chuyển sang soạn thảo bằng HTML và thêm đoạn mã này vào
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
Họ Tên của bạn
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
E-mail *
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
Lời nhắn *
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Submit" />
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</form>
</div>
</div>
qua bước này bạn đã có cho mình trang liên hệ riêng của mình, nhưng tương đối là không đẹp, vì chưa có trang trí gì cho nó cả. Bạn hoàn toàn có thể trang trí lại nó bằng CSS cho nó. v.d. bạn có thể sử dụng đoạn css giống như của mình ở đây.

Các bạn vào lại Mẫu » Chỉnh sửa HTML tìm đến thẻ ]]></b:skin> và thêm đoạn css sau lên trên
/* Contact Form Container */
.contact-form-widget {
width: 600px;
max-width: 90%;
margin: 0 auto;
padding: 10px;
background: #F8F8F8;
color: #000;
border: 1px solid #C1C1C1;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

/* Fields and submit button */
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}

/* Submit button style */
.contact-form-button-submit {
border-color: #C1C1C1;
background: #E3E3E3;
color: #585858;
width: 20%;
max-width: 20%;
margin-bottom: 10px;
}

/* Submit button on mouseover */
.contact-form-button-submit:hover{
background: #4C8EF9;
color: #ffffff;
border: 1px solid #FAFAFA;
}
Cuối cùng lưu lại template của bạn và xem thử kết quả.

Lời kết

Tất cả mọi website bao gồm cả blog đều nên có một trang Liên hệ, việc thêm trang liên hệ vào blog của chúng ta giúp chúng ta giao tiếp được đến người dùng nhiều hơn, và tăng thêm được độ uy tín tại blog của chúng ta.

P/S: Các bạn có thể tham khảo qua giao diện khác cho trang liên hệ tại đây "Giao diện trang liên hệ mới đẹp cho Blogger / Blogspot" hoặc muốn tạo form liên hệ chuyên nghiệp hơn thì hãy xài dịch vụ của bên như ba như "2 dịch vụ form liên hệ miễn phí nhiều tính năng".

40 bình luận

  1. avatar says

    lúc 23:30 17 tháng 5, 2014

    cho mình hỏi, mình muốn thêm 1 hàng nữa là số điện thoại liên hệ có được ko ban?

  2. avatar says

    lúc 09:45 18 tháng 5, 2014

    Cách này là sử dụng widget mặc định của Blogger để sử dụng nên không thể thêm thông tin nào mới vào được.

    Nếu muốn nhiều thông tin hơn thì có thể sử dụng Google Form tự tạo ra rồi nhúng vào blog của bạn.

    P/S: Nếu bạn không biết thì blog này mình sẽ hướng dẫn sau :)

  3. avatar says

    lúc 01:52 19 tháng 6, 2014

    cảm ơn bạn nha hướng dẫn dễ hiểu còn mấy site kia làm đã không được

  4. avatar says

    lúc 08:36 19 tháng 6, 2014

    Rất nhiều site chỉ copy của nhau không có biết thực tế là gì đâu :D

  5. avatar says

    lúc 11:03 23 tháng 6, 2014

    bạn ơi nút send không hoạt đọng bạn ạ. giúp mình với. thankyou!!

  6. avatar says

    lúc 11:28 23 tháng 6, 2014

    Nếu nút send không hoạt động thì chỉ có thể 90% bạn chưa thêm widget liên hệ vào blog. Bạn xem thử lại nhé.

  7. avatar says

    lúc 10:58 3 tháng 7, 2014

    nut send không hoat động ban ơi dù đã thên widget liên hệ rui

  8. avatar says

    lúc 11:13 3 tháng 7, 2014

    Em có test qua blog anh đúng là không được thật, em cũng vừa thử test qua nhiều template khác nhau, cái được cái không, chắc phải đợi một thời gian em xem nó bị xung đột ở đâu rồi em trả lời lại anh nhé.

  9. avatar says

    lúc 17:10 12 tháng 7, 2014

    bạn ơi cho mình hỏi nếu mình muốn làm một trang liên hệ có kèm mục đính kèm tập tin thì sao vậy vì đây là widget mặc định của google nên cũng không thể thêm vào được.

  10. avatar says

    lúc 17:47 12 tháng 7, 2014

    Hiện tại thì cái vụ đính kèm thư thì chỉ có thể gửi trực tiếp qua các dịch vụ Email như Gmail, Yahoo Mail, Outlook,... thôi chứ ngay cả wordpress bạn muốn đính kèm tập tin cũng không khả thi rồi.

    Cái này thì có thể bạn yêu cầu người ra up lên một host nào đó rồi để lại link, hoặc bạn cung cấp trực tiếp cho người ta địa chỉ email của bạn. Như trang liên hệ mình vậy, mình cũng để thêm địa chỉ email vào để có ai cần thì gửi, mình đàng hoàng thì cứ công khai thoải mái không sợ gì cả.

  11. avatar says

    lúc 23:44 12 tháng 7, 2014

    không phải là mình sợ không để email mà vì mình muốn làm một trang cộng tác viên để khi họ có viết bài bằng word hay có tập tin gì muốn đăng lên bài thì họ dễ dàng đính kèm tập tin vào một cách nhanh chóng mà không cần phải đăng nhập gmail hay yahoo...nếu được hy vọng bài viết sắp tới bạn viết một bài giống vậy nhé.cám ơn bạn :)

  12. avatar says

    lúc 10:15 16 tháng 7, 2014

    Không biết bạn tìm ra chưa mình vừa đăng bài mới giới thiệu 2 dịch vụ giúp bạn tạo form liên hệ đính kèm tập tin.

    2 dịch vụ form liên hệ miễn phí nhiều tính năng

  13. avatar says

    lúc 00:42 20 tháng 7, 2014

    Lâm Kiều giúp anh cái này với . anh mới tập làm blogger,nhưng anh bị lỗi này nè :
    http://nhiepanhwedding.blogspot.com/
    Website a vừa tạo ra đó em, nhưng khi vào xem bài cụ thể thì ok,nhưng xem bài trên trang chu,thì hình ảnh ở đầu bài (hình như gọi là thumbnail) , hình bị méo hết,anh ko biết cách khắc phục, em giúp a voi

  14. avatar says

    lúc 09:55 20 tháng 7, 2014

    Anh chèn đoạn này lên trên thẻ </head> nhé.
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <script type='text/javascript'>//<![CDATA[
    $(document).ready(function() {
      var rong = 300;
      var cao = 160;
      $('#Blog1').find('img').each(function(n, image){
        var image = $(image);
        image.attr({src : image.attr('src').replace(/s\B\d{2,4}/,'s' + rong + '-h' + cao +'-c')});
        image.attr('width',rong);
        image.attr('height',cao);
      });
    });
    //]]></script>
    </b:if></b:if>
    Em có hướng dẫn tại bài này rồi mà :D
    Resize và cắt ảnh nhiều thành phần của Blogger

  15. avatar says

    lúc 15:06 23 tháng 7, 2014

    Form này có tự động gửi message đến địa chỉ mail của admin không bạn ?

  16. avatar says

    lúc 15:23 23 tháng 7, 2014

    Đúng rồi bạn.

  17. avatar says

    lúc 20:27 31 tháng 7, 2014

    '' Tuổi trẻ tài cao '' cảm ơn bạn nhiều lém !
    Mình là Nhân đang sống và làm việc tại TP.HCM
    Bạn hiện tại bạn đang sống đâu.
    Có cơ hội gặp... cafe

  18. avatar says

    lúc 20:33 31 tháng 7, 2014

    Mình ở dưới quận 9. Tài thì chắc không cao mấy đâu thất nghiệp ngồi nhà đây này :D

  19. avatar says

    lúc 14:36 21 tháng 8, 2014

    Cái này đặt vào template tốt nhất để dưới footer rồi ẩn đi chắc sẽ có tỉ lệ thành công cao Hơn

  20. avatar says

    lúc 19:58 21 tháng 8, 2014

    Mình thấy đặt đâu cũng có tỉ lệ thành công như nhau cả :)

  21. avatar says

    lúc 13:25 4 tháng 12, 2014

    anh Lâm Kiều ơi, trang em cũng bị lỗi form liên hệ, em đã thêm widget rồi, anh giúp em với!
    trang em nè: nhiepanhhoangdieu.com

  22. avatar says

    lúc 18:08 4 tháng 12, 2014

    Blog tớ có cái hướng dẫn làm trang liên hệ cũng đẹp lắm. Ghé qua coi :->

  23. avatar says

    lúc 20:00 4 tháng 12, 2014

    Anh có test thấy nó có vẻ ổn mà :D

  24. avatar says

    lúc 23:00 4 tháng 12, 2014

    nhưng em không nhận được anh ơi :(

  25. avatar says

    lúc 16:37 6 tháng 12, 2014

    em thử nhiều lần nhưng nó không gửi đến mail anh ơi :(

  26. avatar says

    lúc 16:40 6 tháng 12, 2014

    Quên mất vụ của em :D em thử add lại widget nhé, anh thấy cái widget của em trong code nó trống lốc không phát sinh code.

  27. avatar says

    lúc 16:56 6 tháng 12, 2014

    Em vẫn không nhận được mặc dù đã xóa và thêm lại widget anh ơi :(

  28. avatar says

    lúc 18:06 6 tháng 12, 2014

    Anh cũng không chắc vấn đề nằm đâu nữa, hay thôi em làm bằng cái này thì 100% được http://www.kslzone.net/2014/09/tao-form-lien-he-voi-google-drive.html

  29. avatar says

    lúc 10:09 14 tháng 1, 2015

    Thư nó gửi về đâu anh, em nghĩ nó sẽ về mail mình đăng ký blog nhưng em đã thử test gửi thì ok nhưng không biết làm sao để nhận thư,em xem trên mạng không tìm được thông tin liên quan anh giúp em với nhé blog http://www.hacbao.com/p/blog-page.html

  30. avatar says

    lúc 11:55 15 tháng 1, 2015

    Đúng là thư bình thường nó gửi về tài khoản quản trị mà đã tạo blog ấy, cái này mặc định của Blogger nên mình không tác động chỉnh sửa được.

  31. avatar says

    lúc 11:37 20 tháng 5, 2015

    a kiều làm giúp e phần thu gọn bài viết trên trang chủ giống như blog của a hoặc tương tự như z dc k ạ,e lm mãi nhưng k dc, nếu dc thì ibox e trên face nha, cảm ơn anh nhiều, link face của e https://mbasic.facebook.com/profile.php?_e_pi_=7%2CPAGE_ID10%2C4322909179

  32. avatar says

    lúc 06:22 4 tháng 8, 2015

    Xin chào mình đã áp dụng thử cho blog nhưng không hiểu sao không thành công vẫn giao điện cũ
    http://www.datlun.com/p/contact.html nhờ bạn xem giúp!

  33. avatar says

    lúc 06:37 4 tháng 8, 2015

    đã ok, mình phải cho .css vào trực tiếp trang html

  34. avatar says

    lúc 15:44 4 tháng 10, 2015

    Form liên hệ của Blogger không hoạt động được trên trình duyệt IE (nút send không hoạt động). Bạn có cách nào khắc phục không?

  35. avatar says

    lúc 18:54 4 tháng 10, 2015

    Cái này cũng lạ thật tại thật tại cú pháp HTML thì form cũng chỉ có vậy, nếu sửa thì cũng không biết phải sửa cái gì nữa. Mình nghĩ chắc cho IE bản cũ hoặc máy bạn trục trặc gì đó nên nó vậy thôi.

  36. avatar says

    lúc 13:39 6 tháng 12, 2015

    Đúng là nó không send mail về. Chắc cũng nhiều người gặp vấn đề này.

  37. avatar says

    lúc 15:23 6 tháng 12, 2015

    Vấn đề này tại hiện tại template bị chỉnh sửa một số thứ, khiến cho script mặc định bị vô hiệu hóa hoặc là bị sung đột.

    Bạn có thể làm theo cách này thì 100% hoạt động được ở mọi blog http://www.kslzone.net/2014/09/tao-form-lien-he-voi-google-drive.html

  38. avatar says

    lúc 18:52 27 tháng 12, 2015

    Bạn ơi cái của mình làm được nhưng gửi không được, nó thông báo lỗi, thử lại, bạn xem thử giúp mình jvinhblog.blogspot.com

  39. avatar says

    lúc 09:02 29 tháng 12, 2015

    Mình thấy nó hoạt động bình thường mà bạn.

  40. avatar says

    lúc 16:44 29 tháng 12, 2015

    Ồ hoạt động bình thường lại rùi, nhưng trước đó gửi không được chắc bị chặn do sau khi thêm cái widget mình thử đi thử lại rất nhiều lần nên tưởng spam

Mọi nhận xét trên blog KslZone.NET sẽ được kiểm duyệt trước khi được xuất bản trên blog. Lưu ý: Nếu bạn để lại backlink về website của bạn, miễn là kèm theo nhận xét hợp lý thì nhận xét đó vẫn sẽ được chấp nhận. Nếu bạn muốn hiện mã HTML thì bạn cần chuyển đổi trước bằng công cụ phía dưới.