Trang liên hệ cực đẹp cho Blogspot

Blogspot là nơi đăng tải những nội dung của bạn ngoài tính năng bình luận ngay trực tiếp tại bài viết thì Google còn cho phép độc gải của bạn gửi thông điệp riêng đến chủ nhận của trang...Để tạo được một trang liên hệ đẹp và tạo nên thiện cảm với người khác giống như cách mà Blog Khang Bin đang làm bạn hảy làm theo cách sau nhé

Bước 1

Vào phần quản trị > Trang > Tạo trang mới

Bước 2

Chuyển sang phần soạn thảo HTML sau đó copy tất cả code sau rồi nhấn xuất bản

<style type="text/css">.widget.ContactForm{z-index:1}.contact-form-widget{margin-left:auto;margin-right:auto;width:600px;max-width:100%;padding:25px 0;background:#EBEBE3;-webkit-border-radius:2%;-moz-border-radius:2%;border-radius:2%}.contact-form-widget .form{width:91%;margin:0 auto}.ribbon{font:16px Arial;text-transform:capitalize;text-shadow:0 1px 2px rgba(0,0,0,0.25);position:relative;background:#2c4584;color:#fff;text-align:center;padding:1em 2em;margin:0 -16px}.ribbon:before,.ribbon:after{content:"";position:absolute;display:block;bottom:-1em;border:1.5em solid #584C40;z-index:-1}.ribbon:before{left:-1.7em;border-right-width:1.2em;border-left-color:transparent}.ribbon:after{right:-1.7em;border-left-width:1.2em;border-right-color:transparent}.ribbon .ribbon-content:before,.ribbon .ribbon-content:after{content:"";position:absolute;display:block;border-style:solid;border-color:#42362A transparent transparent;bottom:-1em}.ribbon .ribbon-content:before{left:0;border-width:1em 0 0 1em}.ribbon .ribbon-content:after{right:0;border-width:1em 1em 0 0}.contactf-name,.contactf-email,.contactf-message{text-align:left;margin-top:25px;color:#a1937b;font-size:13px}.contactf-name,.contactf-email{float:left;width:100%}.contact-form-name,.contact-form-email,.contact-form-email-message,.contact-form-name:hover,.contact-form-name:focus,.contact-form-email:hover,.contact-form-email:focus,.contact-form-email-message:hover,.contact-form-email-message:focus{width:100%;max-width:100%;margin:10px 0 0;padding:10px;font-size:12px;color:#aaa;border-color:#DBD6D1;border-width:1px;box-shadow:none;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}.contact-form-name,.contact-form-email{height:35px}.contact-form-email-message{height:100px}.contact-form-button-submit,.contact-form-button-submit:hover{margin-top:25px;width:100%;height:37px;font:normal 12px Arial;outline:none;letter-spacing:1px;color:#fff;text-align:center;cursor:pointer;text-shadow:1px 1px 0 #ffe8b2;color:#7c5d1b;border:1px solid #d6a437;background:#febd4b;background:-webkit-gradient(linear,0 0,0 100%,from(#fed970) to(#febd4b));background:-webkit-linear-gradient(#fed970,#febd4b);background:-moz-linear-gradient(#fed970,#febd4b);background:-ms-linear-gradient(#fed970,#febd4b);background:-o-linear-gradient(#fed970,#febd4b);background:linear-gradient(#fed970,#febd4b);-pie-background:linear-gradient(#fed970,#febd4b)}.contact-form-button-submit:active{color:#7c5d1b;border:1px solid #d6a437;background:#febd4b;background:-webkit-gradient(linear,0 0,0 100%,from(#febd4b) to(#fed970));background:-webkit-linear-gradient(#febd4b,#fed970);background:-moz-linear-gradient(#febd4b,#fed970);background:-ms-linear-gradient(#febd4b,#fed970);background:-o-linear-gradient(#febd4b,#fed970);background:linear-gradient(#febd4b,#fed970);-pie-background:linear-gradient(#febd4b,#fed970)}.contact-form-cross{border:medium none!important;box-shadow:none!important;padding:0!important;height:11px !important;width:11px !important;}

</style><br />

<div class="widget ContactForm" id="ContactForm22">

<div class="contact-form-widget">

<b>Khang Bin Blog </b>là trang blog được tạo ra với mục đích chia sẻ thông tin, tin tức thủ thuật với tiêu chí <b>I save = I share</b>.&nbsp; Những gì tôi cho là hữu ích hy vọng sẽ hữu ích với bạn. Mọi thông tin liên hệ với tôi bạn có thể liên hệ theo form bên dưới hoặc địa chỉ <b>Email:</b> <a href="mailto:dnkhanh09@gmaill.com">dnkhanh09@gmaill.com</a><br />

<h2 class="ribbon">

<strong class="ribbon-content">Liên hệ với tôi</strong></h2>

<div class="form">

<form name="contact-form">

<div class="contactf-name">

Tên của bạn:<input class="contact-form-name" id="ContactForm1_contact-form-name" name="Name" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Name&quot;;}" onfocus="if (this.value == &quot;Name&quot;) {this.value = &quot;&quot;;}" size="30" type="text" value="Name" /></div>

<div class="contactf-email">

E-mail của bạn *:<input class="contact-form-email" id="ContactForm1_contact-form-email" name="E-mail address" onblur="if (this.value == &quot;&quot;) {this.value = &quot;E-mail address&quot;;}" onfocus="if (this.value == &quot;E-mail address&quot;) {this.value = &quot;&quot;;}" size="30" type="text" value="E-mail address" /></div>

<div style="clear: both;">

</div>

<div class="contactf-message">

Lời nhắn*:<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="Type your message here..." onblur="if (this.value == &quot;&quot;) {this.value = &quot;Type your message here...&quot;;}" onfocus="if (this.value == &quot;Type your message here...&quot;) {this.value = &quot;&quot;;}" placeholder="Type your message here..." rows="5" value="Type your message here..."></textarea><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="SEND MESSAGE" /><br />

<br />

<h2>

Tài khoản ngân hàng</h2>

<div>

<h3 style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border: 0px; box-sizing: border-box; color: #2c3e50; font-family: Roboto, sans-serif; margin: 0px 0px 15px; outline: 0px; padding: 0px; position: relative; text-align: center; vertical-align: baseline;">

<div style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border: 0px; box-sizing: border-box; color: #666666; font-weight: 400; outline: 0px; padding: 0px; vertical-align: baseline;">

<span style="font-size: large;"><span style="background-position: 0px 0px; border: 0px; box-sizing: border-box; color: red; font-family: &quot;helvetica neue&quot; , &quot;arial&quot; , &quot;helvetica&quot; , sans-serif; outline: 0px; padding: 0px; vertical-align: baseline;"><span style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border: 0px; box-sizing: border-box; font-weight: 700; outline: 0px; padding: 0px; vertical-align: baseline;"><span style="background-position: 0px 0px; border: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Ngân Hàng Vietcombank (VCB)</span></span></span></span><br />

<span style="font-size: large;"><span style="background-position: 0px 0px; border: 0px; box-sizing: border-box; color: red; font-family: &quot;helvetica neue&quot; , &quot;arial&quot; , &quot;helvetica&quot; , sans-serif; outline: 0px; padding: 0px; vertical-align: baseline;"><span style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: 0px 0px; background-repeat: initial; background-size: initial; border: 0px; box-sizing: border-box; font-weight: 700; outline: 0px; padding: 0px; vertical-align: baseline;"><span style="background-position: 0px 0px; border: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">&nbsp;</span></span></span></span><span style="font-size: large;"><span style="background-position: 0px 0px; border: 0px; box-sizing: border-box; font-family: &quot;helvetica neue&quot; , &quot;arial&quot; , &quot;helvetica&quot; , sans-serif; outline: 0px; padding: 0px; vertical-align: baseline;"><span style="background-position: 0px 0px; border: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Chi Nhánh Bình Dương</span></span></span><br />

<span style="font-size: large;"><span style="background-position: 0px 0px; border: 0px; box-sizing: border-box; font-family: &quot;helvetica neue&quot; , &quot;arial&quot; , &quot;helvetica&quot; , sans-serif; outline: 0px; padding: 0px; vertical-align: baseline;"><span style="background-position: 0px 0px; border: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Đoàn Ngọc Khánh</span></span></span><br />

<span style="font-size: large;"><span style="background-position: 0px 0px; border: 0px; box-sizing: border-box; font-family: &quot;helvetica neue&quot; , &quot;arial&quot; , &quot;helvetica&quot; , sans-serif; outline: 0px; padding: 0px; vertical-align: baseline;"><span style="background-position: 0px 0px; border: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">0281000465964</span></span></span><br />

<span style="font-size: large;"><span style="background-position: 0px 0px; border: 0px; box-sizing: border-box; font-family: &quot;helvetica neue&quot; , &quot;arial&quot; , &quot;helvetica&quot; , sans-serif; outline: 0px; padding: 0px; vertical-align: baseline;"><span style="background-position: 0px 0px; border: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">------------------</span></span></span></div>

</h3>

</div>

<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>
</div>
</form>
</div>
</div>
</div>

Demo