Thứ Năm, 27 tháng 2, 2014

Contact Form Css cho Blogger trong trang tĩnh

Google phát hành Contact Form cho Blogger. Và hôm nay tôi sẽ thực hiện một hình thức liên lạc cho Blogger trên trang tĩnh thay vì widget, vì widget là trên thanh bên và nó không lịch sự liên hệ hay không thân thiện với du khách thường liên hệ với chúng tôi từ một trang đứng một mình. 

http://lh6.ggpht.com/-NLV9cls4Hjc/Uw9YNhPosmI/AAAAAAAADEs/xlArCQbeJyA/s0/banner-contact-form.jpg

Bây giờ, tôi có một giải pháp khắc phục sẽ giúp bạn hiển thị hình thức liên lạc cho Blogger trên trang tĩnh chỉ với css.
Bước 1: Thêm Contact From dưới dạng tiện ích 
Giao diện truy cập blog của bạn. Nhấp vào bất kỳ liên kết Thêm một tiện ích. Thêm một cửa sổ tiện ích sẽ được hiển thị, hãy nhấp vào thêm tiện ích, và chọn thêm mẫu liên hệ.

http://lh5.ggpht.com/-d9D8abdE31E/Uw9YIhTjgQI/AAAAAAAADEM/4Ro18JB0npw/s0/add-contact-form.jpg

http://lh3.ggpht.com/-Ob9n59bqsaE/Uw9YLVmydaI/AAAAAAAADEc/KJmMMkrxDec/s0/add-contact-form-for-blogger-window.jpg

Bước 2 : Trên cửa sổ Cấu hình hệ Liên hệ Widget, bấm nút Save.

http://lh3.ggpht.com/-2RV2xql5UkE/Uw9YJy6wVAI/AAAAAAAADEU/Gth43uJsSiA/s0/add-contact-form-for-blogger-save.jpg

Bước 3 : Sau khi thêm Liên hệ với hình thức tiện ích, xin vui lòng kéo và thả nó bên dưới bài viết Blog tiện ích, sau đó nhấn nút Save sắp xếp.

http://lh3.ggpht.com/-A7izYLf0CwQ/Uw9YOMerH-I/AAAAAAAADE0/_CJdpHsOEzI/s0/drag-drop-contact-form-for-blogger.jpg

Bước 4 : Ẩn hình thức liên lạc phụ tùng 
Truy cập mẫu blog của bạn, và nhấp vào Chỉnh sửa HTML. Trong trình soạn thảo HTML, tìm
]]></b:skin>
Sau đó, chèn trước với mã
.widget.ContactForm {display: none;}

http://lh5.ggpht.com/-CtfNdiNBoRw/Uw9YQ6kiVFI/AAAAAAAADFM/iJ_9M-ytBMk/s0/template-contact-form-for-blogger.jpg


Bước 5 : Làm trang liên hệ 
Truy cập trang, sau đó tạo ra một trang trắng với một tên có nghĩa là "Liên hệ" hoặc bất kỳ văn bản mà bạn muốn.

http://lh5.ggpht.com/-Fslr-CLDmno/Uw9YMtvvdcI/AAAAAAAADEk/_7Nuq46gumg/s0/add-page-contact-form-for-blogger.jpg

Bước 6 : Trong trình soạn thảo trang, chuyển sang chế độ HTML và dán đoạn mã dưới đây vào lĩnh vực nội dung.
<style type="text/css">
.widget.ContactForm {
display: block;
}
.post-footer {
display: none;
}
#blog-pager {
display: none;
}
.blog-feeds {
display: none;
}
.widget.ContactForm .title {
display: none;
}
.widget.ContactForm * {
max-width: 100%;
}
</style>
- Sau đó xuất bản trang.

http://lh3.ggpht.com/-Upl8v7BLsNg/Uw9YPMdPZnI/AAAAAAAADE4/9YofYR71rMA/s0/publish-page-form-for-blogger-window.jpg

Bây giờ, bạn có thể truy cập trang mới của bạn và tận hưởng hình thức liên lạc của bạn.

http://lh5.ggpht.com/-paBnG6o2INc/Uw9YP7-C9BI/AAAAAAAADFE/rV3d4y478Ks/s0/result.jpg

Sưu tầm Blog Nguyễn Việt Tiến.

Không có nhận xét nào:

Đăng nhận xét