Blog iTeam OS
Trang chủ
Android Tips

Thiết lập Trang liên hệ cho Template Median UI

median ui, contact page
Xem trước

Làm theo hướng dẫn bên dưới để dễ dàng thêm trang liên hệ vào mẫu Giao diện Median UI.

Chuẩn bị

Điều đầu tiên bạn phải làm là lấy mã ID blog của bạn, nhìn vào thanh địa chỉ, sau đó bạn sẽ tìm thấy một liên kết ví dụ như dưới đây:

https://www.blogger.com/blog/posts/000000000000000000

Phần được đánh dấu là mã id blog của bạn, vui lòng sao chép nó vì mã này sẽ cần thiết trong bước thiết lập.

Hướng dẫn

  1. Hãy tạo một trang mới, đừng quên điền vào mô tả tìm kiếm trên trang mới của bạn.
  2. Chuyển sang chế độ HTML, sau đó sao chép và dán mã bên dưới vào nội dung trang của bạn:
    3. 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

  <strong>Liên hệ cho tôi khi:</strong>
  <p>- Yêu cầu xoá bài viết vì vi phạm bản quyền.</p><p>- Liên kết trang (backlink).</p><p>- Nội dung/hình ảnh trên blog bị lỗi.</p><p>- Và những vấn đề có liên quan đến blog khác.<p class="note">Lưu ý: Ngoài các vấn đề trên, email của các bạn có thể sẽ trả lời chậm. Xin thông cảm và cám ơn!</p>

<style type="text/css">

 .BsdCntct{float:none;position:relative;margin:25px 0;margin-right:9px}
.BsdCntct input,.BsdCntct textarea{font-size:16px;padding:15px 0;display:block;width:100%;border:none;border-bottom:1px solid #ddd}
.BsdCntct input:focus,.BsdCntct textarea:focus{outline:0}
.BsdCntct label{color:#111;font-size:16px;font-weight:400;position:absolute;pointer-events:none;left:0;top:9px;transition:.2s ease all}
.barbsd{position:relative;display:block;width:100%}
.barbsd:after,.barbsd:before{content:'';height:1px;width:0;bottom:1px;position:absolute;background:#00a16b;transition:.2s ease all}
.barbsd:before{left:50%}
.barbsd:after{right:50%}
.BsdCntct input:focus~.barbsd:after,.BsdCntct input:focus~.barbsd:before,.BsdCntct textarea:focus~.barbsd:after,.BsdCntct textarea:focus~.barbsd:before{width:50%}
.lightbsd{position:absolute;height:50%;width:100px;top:25%;left:0;pointer-events:none;opacity:.5}
.BsdCntct input:focus~label,.BsdCntct input:valid~label,.BsdCntct textarea:focus~label,.BsdCntct textarea:valid~label{top:-19px;font-size:14px;color:#00a16b}
input#ContactForm1_contact-form-email-message{height:150px}
input#ContactForm1_contact-form-reset,input#ContactForm1_contact-form-submit{background:#357A37;color:#fff!important;background:#00a16b;padding:14px 25px;border-radius:4px;border:none;outline:0;cursor:pointer;transition:all .4s ease-in-out;text-transform:uppercase;float:left;font-weight:700;font-size:16px;margin:10px 5px 0 0}
input#ContactForm1_contact-form-reset:hover,input#ContactForm1_contact-form-submit:hover{box-shadow:0 8px 17px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19)}
#ContactForm1_contact-form-error-message{float:right;background:#357A37;color:#fff;font-size:16px;font-weight:700;border-radius:3px;padding:0 5px}
.post-body img{margin:0!important;display:inline;padding-left:10px;border-radius:0}
#ContactForm1_contact-form-success-message{float:right;background:#357A37;color:#fff;font-size:16px;font-weight:700;border-radius:3px;padding:0 5px}

</style>

<strong>Liên hệ Form sau đây:</strong>

<form name="contact-form"> <div class="BsdCntct"> <input class="validate" id="ContactForm1_contact-form-name" name="name" required="" type="text" value="" /> <span class="lightbsd"></span> <span class="barbsd"></span> <label><i class="fa fa-user"></i> Tên của bạn</label> </div> <div class="BsdCntct"> <input class="validate" id="ContactForm1_contact-form-email" name="email" required="" type="email" value="" /> <span class="lightbsd"></span> <span class="barbsd"></span> <label><i class="fa fa-envelope"></i> Email của bạn</label> </div> <div class="BsdCntct"> <textarea class="validate" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" required="" rows="5"></textarea> <span class="lightbsd"></span> <span class="barbsd"></span> <label><i class="fa fa-comment"></i> Tin nhắn</label> </div> <input id="ContactForm1_contact-form-submit" type="button" value="Gửi" /> <input id="ContactForm1_contact-form-reset" type="reset" value="Xóa" /> <br /> <div id="ContactForm1_contact-form-error-message"> </div> <div id="ContactForm1_contact-form-success-message"> </div>

</form>

<script src="https://www.blogger.com/static/v1/widgets/199156504-widgets.js" type="text/javascript"></script>

<script type="text/javascript">
//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1"; window['blogger_blog_id'] = '000000000000000000'; BLOG_attachCsiOnload(''); } _WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d000000000000000000', document.location.origin , '000000000000000000'); _WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), { 'contactFormMessageSendingMsg': 'Đang gửi...', 'contactFormMessageSentMsg': 'Tin nhắn của bạn đã được gửi.', 'contactFormMessageNotSentMsg': 'Không thể gửi tin nhắn. Vui lòng thử lại sau.', 'contactFormInvalidEmailMsg': 'Nhập địa chỉ email hợp lệ.', 'contactFormEmptyMessageMsg': 'Trường tin nhắn không được để trống.', 'title': 'Contact Form', 'blogId': '000000000000000000', 'contactFormNameMsg': 'Tên của bạn', 'contactFormEmailMsg': 'Email của bạn', 'contactFormMessageMsg': 'Tin nhắn', 'contactFormSendMsg': 'Gửi', 'submitUrl': 'https://www.blogger.com/contact-form.do' }, 'displayModeFull'));
//]]>
</script>

    Thay đổi phần được đánh dấu trong mã ở trên bằng id blog của bạn, có ít nhất ba mã giống nhau mà bạn phải thay đổi thành id blog của mình.

    Thông tin:

    • [000000000000000000]: Id blog của bạn, có 4 lần viết mã trên.

  3. Xuất bản trang của bạn và vui lòng kiểm tra xem tiện ích liên hệ có thành công hay không.

Nếu được thiết lập chính xác, chẳng hạn như thêm id blog của bạn vào tất cả các phần được đánh dấu, sẽ không có lỗi.

Hầu như đến bước xuất bản trang khi kiểm tra và gửi thử thì về mail hòm thư ngay tức thì, còn không nếu bị lỗi, bạn tham khảo cách sửa lỗi bên dưới nhé!

Lời kết

Vừa rồi, iTeamOS< đã Hướng dẫn Thiết lập Trang liên hệ cho Median UI. Nếu như có bất kì thắc mắc nào vui lòng comment bên dưới để được giải đáp nhé. Hy vọng bài viết này có ích với bạn, chúc bạn luôn thành công!

Copyright © iTeamOS