Thứ Bảy, 15 tháng 11, 2014
Trước đây, chúng tôi đã cho thấy bạn đi trên làm thế nào để thêm một số liên lạc với chúng tôi widget trong blogger . Tuy nhiên, bạn có thể thấy rằng đôi khi người dùng thấy khó khăn để xác định vị trí tiếp xúc của bạn cho chúng tôi liên kết trang vì nó nằm đâu đó sâu thẳm vào chân của bạn. Điều gì nếu bạn đang chạy một trang web thương mại điện tử trên blogger và khách hàng của bạn cần gửi một email truy vấn nhanh chóng với sự hỗ trợ để tìm thấy một số thông tin mong muốn. Kể từ khi, chúng tôi liên lạc của bạn trang nằm sâu xuống chân anh ta có thể không gửi bất kỳ email và sẽ di chuyển đến một trang web tốt hơn lấy đi tất cả các khả năng của việc bán hàng mới. Một giải pháp đơn giản cho vấn đề này là phải có một thả nổi liên hệ với chúng tôi widget. Hôm nay trong bài viết này, chúng tôi sẽ cho bạn thấy làm thế nào để thêm một số liên lạc nổi chúng ta widget trong blogger. |
| cách tạo khung liên hệ cho blogspot |
Xem trước sống của tiện ích này có thể được nhìn thấy trên trang này .Điều đầu tiên bạn cần làm là để có một bản sao lưu của mẫu của bạn , vì vậy trong trường hợp bạn không theo các hướng dẫn dưới đây đúng, bạn có thể sử dụng sao lưu để khôi phục lại mẫu.
Tới Blogger >> Template >> Edit HTML >> Bấm vào bất cứ nơi nào trong trình soạn thảo HTML template và nhấn ( Ctrl + F ), điều này sẽ cho phép một hộp tìm kiếm. Bây giờ tìm kiếm cho từ khóa da và chỉ ở trên nó dán CSS mã hóa sau đây.#mbl-contact .ContactForm {
margin: 0px!important;
}
#mbl-contact .contact-form-button-submit {
max-width: none;
width: 100%;
height: 35px;
border: 0;
background-image: none;
background-color: #FA411E;
cursor: pointer;
font: normal normal 13px Open Sans;
font-style: normal;
font-weight: 400;
}
.#mbl-contact .contact-form-button-submit:hover {
background-color: #222;
background-image: none;
border: 0;
}
#mbl-contact #contact {
position: fixed;
bottom: 0;
right: 1%;
background-color: #EEE;
color: #555;
width: 300px;
z-index: 1.0E+15;
}
#mbl-contact #contact .contact-form-widget {
padding: 30px;
display: none;
}
#mbl-contact #contact {
position: fixed;
bottom: 0;
right: 1%;
background-color: #EEE;
color: #555;
width: 300px;
z-index: 1.0E+15;
}
#mbl-contact #contact h2.title {
margin: 0px;
font-weight: 400;
background-color: #FA411E;
color: #FFF;
padding: 8px 15px;
font-size: 16px;
cursor: pointer;
letter-spacing: 3px;
text-align: center;
}
#mbl-contact #contact h2.title .fa {
position: absolute;
left: 10px;
top: 12px;
}
#mbl-contact #contact .contact-form-widget {
width: 240px;
padding: 30px;
display: none;
}
#mbl-contact #contact * {
transition: all 0 ease;
-webkit-transition: all 0 ease;
-moz-transition: all 0 ease;
-o-transition: all 0 ease;
}
#mbl-contact #contact .contact-form-name,#contact .contact-form-email,#contact .contact-form-email-message {
background-color: #DDD;
color: #111;
border: 0;
padding: 10px 5px;
font: normal normal 13px Open Sans;
}
#mbl-contact .contact-form-name,.contact-form-email,.contact-form-email-message,.contact-form-widget {
max-width: none;
margin-bottom: 15px;
}
Bây giờ với sự trợ giúp của hộp tìm kiếm, tìm kiếm bắt đầu <body> tag và ngay dưới nó dán mã sau đó bao gồm một số liên lạc chúng tôi phụ tùng và JavaScript mà sẽ làm cho liên hệ chúng tôi phụ tùng trôi nổi trên trang web của bạn.<div id="mbl-contact">
<b:section class='contact' id='contact' maxwidgets='1' showaddelement='yes'>
<b:widget id='ContactForm2' locked='true' title='Contact us' type='ContactForm'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2 class='title'><i class='fa fa-paper-plane'/> <data:title/></h2>
</b:if>
<div class='contact-form-widget'>
<div class='form'>
<form name='contact-form'>
<input class='contact-form-name' expr:id='data:widget.instanceId + "_contact-form-name"' expr:placeholder='data:contactFormNameMsg' name='name' size='30' type='text' value=''/>
<input class='contact-form-email' expr:id='data:widget.instanceId + "_contact-form-email"' expr:placeholder='data:contactFormEmailMsg' name='email' size='30' type='text' value=''/>
<textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + "_contact-form-email-message"' expr:placeholder='data:contactFormMessageMsg' name='email-message' rows='5'/>
<input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' expr:value='data:contactFormSendMsg' type='button'/>
<div style='text-align: center; max-width: 222px; width: 100%'>
<p class='contact-form-error-message' expr:id='data:widget.instanceId + "_contact-form-error-message"'/>
<p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/>
</div>
</form>
</div>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
<script type='text/javascript'>
//<![CDATA[
$( "#contact h2.title" ).click(function() {$( "#contact .contact-form-widget" ).toggle("fast");});
//]]>
</script>
Một khi tất cả mọi thứ được thực hiện, nhấn nút "Save Template" nằm ở đầu rất của trình biên tập HTML mẫu. Xin chúc mừng, bạn đã thêm thành công một thả nổi liên hệ với chúng tôi widget trong blogger. Bây giờ hãy vào trang web của bạn và bạn sẽ thấy một thả nổi liên hệ với chúng tôi widget trên góc dưới bên phải màn hình của bạn. Chúng tôi hy vọng hướng dẫn này chúng tôi đã giúp bạn để tìm hiểu làm thế nào để thêm nổi liên hệ với chúng tôi widget trong blogger. Nếu bạn thích tiện ích này sau đó, làm chia sẻ nó với bạn bè blogger của bạn trên Facebook, Google+ hoặc tweet về chúng tôi trên Twitter.
Tags:
thủ-thuật,
thủ-thuật-blogspot
| =>Mời bạn chia sẽ đóng góp ý kiến cho bài viết
|
Đăng ký nhận bài miễn phí
|
|
|
Các bài viết liên quan--------------Bài viết Chủ đề khác
|
0 Nhận xét