Tạo trang liên hệ có biểu mẫu từ blogger với jQuery cho trang tĩnh blogspot

Như bạn đã biết một Form liên hệ chính thức của Blogger mới được google phát hành cho blogspot. Trước đây việc tạo biểu mẫu Form liên hệ cho Blogger là một điểm yếu của nền tảng blog này.

Như bạn đã biết một Form liên hệ chính thức của Blogger mới được google phát hành cho blogspot. Trước đây việc tạo biểu mẫu Form liên hệ cho Blogger là một điểm yếu của nền tảng blog này.

Trước khi có Form liên hệ chính thức cho Blogger, chúng ta phải tạo ra một hình thức liên lạc từ bên thứ ba cho Blogger (phổ biến là dùng doc google tài liệu) mà khó để chúng ta tiên hệ tốt hơn. Nhưng bây giờ, tất cả đã hoàn toàn thay đổi.

Chúng ta có thể tạo ra cho mình một hình thức liên lạc thân thiện hơn và đẹp thật sự với biểu mẫu mới do Blogger cung cấp với mã HTML tùy chỉnh.

Bước 1: Để tạo trang liên hệ trước tiên bạn cần thêm biểu mẫu liên hệ này từ trang bố cục bạn vào thêm tiện ích và chọn tiện ích khác rồi chọn biểu mẫu liên hệ
Click vào ảnh để xem rõ hơn
Bước 2: Thêm CSS và Javascript. Bạn vào trang mẫu chọn chỉnh sửa HTML sao chép và thêm đoạn mã dưới đây trước ]]></b:skin>

.ContactForm {
 display: none;
}
.hanhhuong-dot-info-contact .ContactForm {
 display: block;
}
.widget.ContactForm .title {
 display: none;
}
.widget.ContactForm * {
 max-width: 100%;
}

Tiếp theo hãy chép và dán mã dưới đây trước </body>

<script type='text/javascript'>
//<![CDATA[
$('.ContactForm').appendTo('.hanhhuong-dot-info-contact');
//]]>
</script>

Sau đó bạn chọn lưu lại!

Bước 3: Bây giờ bạn có thể thêm form liên hệ của blogger vào bất cứ đâu mà bạn muốn hiển thị biểu mẫu liên lạc này.

Ví dụ ở đây ta thêm vào một trang tĩnh, trang mà tôi gọi là trang liên hệ. Bạn vào menu chọn Trang từ trang mới chọn trang trống.
Click vào ảnh để xem rõ hơn
Trong trình soạn thảo bài, chuyển sang chế độ HTML và dán đoạn mã dưới vào lĩnh vực nội dung. Sau đó nhấp vào Xuất bản hoặc cập nhật nếu là trang tĩnh bạn đã có sẵn.
Click vào ảnh để xem rõ hơn
Và đây là đoạn mã quan trọng của bạn:

<div class="hanhhuong-dot-info-contact"></div>

P/s: Chú ý nếu trong mẫu blog của bạn chưa có jQuery thì hãy thêm mã jQuery vào trước </head> xem hướng dẫn và lấy đoạn mã tại cuối bài viết Form liên hệ nổi ẩn hiện cho Blogger/Blogspot

Chúc bạn thành công!
Theo bloggeritems

COMMENTS

Booking.com
Name

Ảnh - Video,12,Ảnh tôi chụp,2,Blog,7,Blogger,11,Blogger tips,9,Cảm nhận,1,Cộng đồng,8,Công nghệ,2,Du lịch,21,Facebook,3,Hot,4,ICT,17,Phần mềm,12,Photo,4,Quốc tế,4,Tài liệu,5,Template,1,Video,8,Việt Nam,10,
ltr
item
Vịnh Travel: Tạo trang liên hệ có biểu mẫu từ blogger với jQuery cho trang tĩnh blogspot
Tạo trang liên hệ có biểu mẫu từ blogger với jQuery cho trang tĩnh blogspot
Như bạn đã biết một Form liên hệ chính thức của Blogger mới được google phát hành cho blogspot. Trước đây việc tạo biểu mẫu Form liên hệ cho Blogger là một điểm yếu của nền tảng blog này.
http://2.bp.blogspot.com/-NleGTbkGcQc/UhiRg3wrAZI/AAAAAAAAGJA/DblQj4OmHFk/s400/lienhe.jpg
http://2.bp.blogspot.com/-NleGTbkGcQc/UhiRg3wrAZI/AAAAAAAAGJA/DblQj4OmHFk/s72-c/lienhe.jpg
Vịnh Travel
http://www.vinhtravel.com/2014/09/tao-trang-lien-he-co-bieu-mau-tu-blogger.html
http://www.vinhtravel.com/
http://www.vinhtravel.com/
http://www.vinhtravel.com/2014/09/tao-trang-lien-he-co-bieu-mau-tu-blogger.html
true
7800426333090035644
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Xin hãy like hoặc chia sẻ lên twitter để xem nội dung bài viết Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy