Hướng dẫn tạo mới, xây dựng trang liên hệ trên blogspot

Thảo luận trong 'Blogspot' bắt đầu bởi hoangtrieumanhn, 20/1/15.

Lượt xem: 1,173


Bạn đang xem:

Hướng dẫn tạo mới, xây dựng trang liên hệ trên blogspot

Coppy cùng chia sẻ nhé bạn!
  1. hoangtrieumanhn

    hoangtrieumanhn NO SPAM - SPAM LÀ ĐI LIỀN

    Tham gia ngày:
    28/12/14
    Bài viết:
    533

    Những Cảnh Đẹp Của Việt Nam Qua Góc Nhìn Từ FlyCam PhanTom 3 Professional (Video 4K)

    Bấm Youtube để đăng ký xem video nhé!


    Trong blogspot, việc xây dựng trang liên hệ là điều rất cần thiết để blogger tạo thêm uy tín cho chính mình cũng như duy trì mối liên hệ chặt chẽ với người đọc.

    [​IMG]

    Trên thực tế, trang liên hệ không nhất thiết phải có trong blogspot, nhất là blog cá nhân. Tuy nhiên, theo quan điểm của mình thì trang liên hệ đóng vai trò khá quan trọng trong việc duy trì mối liên hệ góp ý giữa người đọc với tác giả và quản trị viên theo đúng nghĩa đen "cùng hợp tác, cùng phát triển". Hơn nữa, việc xây dưng trang liên hệ trên blogspot cũng tương đối đơn giản , ngoáy vài thao tác, đi vài đường cơ bản là xong, vậy tội gì không làm nhỉ ? ^.^

    So với mã nguồn wordpress, nền tảng blogspot phải chịu thiệt thòi hơn hẳn khi không được hỗ trợ sẵn trang liên hệ. Hầu hết blogger khi tiến hành tạo mới trang liên hệ đều phải tự tay thực hiện từ A đến Z.

    Để các bạn có thể nắm được trọn vẹn nội dung của bài viết, mình sẽ hướng dẫn cực kỳ cụ thể kèm theo giải thích luôn trong từng bước. Có thể bài viết hơi loằng ngoằng nhưng đảm bảo là việ tạo trang liên hệ 100% thành công nhé, không đúng không viết blog nữa :))

    Giai đoạn 1 : Tạo mới biểu mẫu lên hệ cho blogspot (blogspot contact form)

    Với giai đoạn này, chúng ta sẽ phải sử dụng đến widget - các tiện ích có sẵn được cung cấp bởi blogger. Lưu ý thêm : biểu mẫu liên hệ khác hẳn với trang liên hệ đấy nhé ! Biểu mẫu liên hệ thường được sắp xếp trong bố cục của trang liên hệ và chúng ta cũng có thể tách riêng chúng ra nếu muốn.

    Bước 1 : Ở trang tổng quan của blogspot, tại thanh menu trái,chọn Bố cụcThêm tiện ích để truy cập kho tiện ích.

    [​IMG]
    Chọn Bố cục bên menu trái

    [​IMG]
    Chọn tiếp Thêm Tiện ích để truy cập kho tiện ích có sẵn

    Bước 2 : Theo mặc định, hệ thống blogger sẽ đưa chúng ta truy cập vào tab đầu tiên - Tiện ích Cơ bản. Tuy nhiên, với yêu cầu tạo mới biểu mẫu liện hệ cho blogspot thì chúng ta phải sử dụng đến tab thứ 2 - Tiện ích khác.

    Khá dễ dàng đế thấy ngay tiện ích "Biểu mẫu liên hệ" ở phần đầu tiên , nhấn vào biểu tượng "+" màu xanhđể lựa chọn nhé.

    [​IMG]
    Kho tiện ích mở rộng của Blogger

    Bước 3 : Đặt tiêu đề rồi nhấn Lưu để hoàn tất quá trình tạo mới biểu mẫu liên hệ trên blogspot

    [​IMG]

    Bước 4 : F5 và kiểm tra lại giao diện của blogspot. Nhìn chung, thiết kế mặc định của biểu mẫu liên hệ tương đối đơn giản, thân thiện.

    [​IMG]
    Giao diện mặc định của biểu mẫu liên hệ

    Nếu muốn thay đổi một chút để giao diện nhìn đẹp hơn, hãy thực hiện như sau :
    1. Quay trở lại trang tổng quan blogspot, bên menu trái chọn MẫuChỉnh sửa HTML.
    2. Nhấn tổ hợp phím Ctrl + F để bật tính năng tìm kiếm trực tiếp ngay trên blogspot.
    - Tìm đến thẻ <b:skin><![CDATA[ rồi bổ sung vào ngay sau đó đoạn mã CSS :

    /* Giao diện widget */
    .contact-form-widget { max-width: 96%; padding:5px; background: #fff; }
    /* Giao diện 3 thành phần con bên trong */
    .contact-form-name, .contact-form-email, .contact-form-email-message { max-width: 100%; margin-bottom: 5px; }

    3. Lưu lại template rồi kiểm tra giao diện mới.

    Chú ý : Việc tạo mới biểu mẫu liên hệ là điều kiện bắt buộc để tiếp tục cho giai đoạn 2. Nếu bỏ qua giai đoạn này, chúng ta sẽ không thể thực hiện được những công việc tiếp theo đâu nhé.

    Giai đoạn 2 : Xây dựng trang liên hệ trên blogspot

    Bước 1 : Ở trang tổng quan blogspot, chọn TrangTrang mới để bắt đầu xây dựng trang liên hệ.

    [​IMG]

    Bước 2 : Chuyển chế độ soạn thảo từ định dạng văn bản thông thường sang định dạng HTML (góc trên bên trái màn hình). Sau đó dán vào nội dung soạn thảo đoạn mã sau :

    <div class="contact-form-widget">
    <div class="form" style="width: 400px;">
    <form name="contact-form">
    Họ tên
    <input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
    E-mail người gửi *
    <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
    Nội dung câu hỏi *
    <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="Gửi thư" />
    <br />
    Chú ý : trường có dấu * là bắt buộc.
    <br />
    <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>

    [​IMG]
    Định dạng soạn thảo HTML

    Bước 3 : Nhấn Xuất bản để đăng mới trang liên hệ trên blogspot.

    Bước 4 : Theo quy định thì mỗi nền tảng blogger chỉ được hỗ trợ tối đa 1 biểu mẫu liên hệ. Nếu bạn tạo thêm và sử dụng cùng lúc 2 biểu mẫu khác nhau thì chỉ có duy nhất 1 cái hoạt động được.

    Do đó, khi chúng ta tạo mới 1 biểu mẫu liên hệ và đặt nó nằm trong trang liên hệ ở giai đoạn 2 thì biểu mẫu đã tạo ở giai đoạn 1 sẽ không hoạt động được nữa và phải bị ẩn đi ở bước 5 + bước 6.

    Bước 5 : Quay trở lại trang tổng quan blogspot, trên menu trái chọn Mẫuchỉnh sửa HTML

    Trên thanh menu ngang, chọn tiếp Chuyển đến tiện íchContactForm1rồi thay thế toàn bộ nội dung của cặp thẻ <b:widget ...></b:widget> hiện tại bằng đoạn mã sau :

    <b:widget id='ContactForm1' locked='false' title='Liên hệ' type='ContactForm'>
    <b:includable id='main'>
    <b:include name='quickedit'/>
    </b:includable>
    </b:widget>

    Bước 6 : Sau bước 5, nội dung cũ trên biểu mẫu liên hệ 1 đã bị xóa bỏ hoàn toàn, tuy nhiên tiện ích vẫn còn tồn tại trong giao diện blogspot. Để ẩn tiện ích này, nhấn ổ hợp phím Ctrl + F , tìm đến thẻ <b:skin><![CDATA[rồi dán vào trongđó đoạn mã sau :

    .ContactForm { display: none; }

    Bước 7 : Lưu lại template, hoàn tất quá trình xây dựng trang liên hệ trên blogspot.
     
    Diễn đàn Ntphong index siêu nhanh!

    Diễn đàn Seo

    Tiêu đề: Hướng dẫn tạo mới, xây dựng trang liên hệ trên blogspot

    Ghi nguồn bài viết www.ntphong.com khi đăng tải lại bài viết này.

  2. Quảng cáo Thành viên VIP


    Những Cảnh Đẹp Của Việt Nam Qua Góc Nhìn Từ FlyCam PhanTom 3 Professional (Video 4K)

    Bấm Youtube để đăng ký xem video nhé!


Link hữu ích: @@ giàn phơi thông minh, giàn phơi quần áo, sim tra sau, fpt ho chi minh, Quay phim Flycam, lap dat cap quang viettel, @@
=