Widget Liên Hệ Và MXH Đẹp By NQT

DEMO 

Sau đây là cách làm: 

Bây giờ, các bạn hãy vào phần quản lý bố cục, tạo một widget HTML/Javascript mới. Và copy đoạn code dưới đây chèn vào phần nội dung của widget vừa tạo nhé!
Code: 

<style>

.subscribebtrix {

padding: 4px;

width: 295px;

.tbimailbox {

border: 1px solid #D3D3D3;

-webkit-border-radius: 4px;

border-radius: 4px;

-moz-box-shadow: 1px 1px 1px 1px rgba(255, 172, 84, 0.4) inset;

-webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;

box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;

color: #666;

font: 14px "trebuchet ms", sans-serif;

padding: 7px 15px;

width: 140px;

-webkit-transition: all 0.5s ease-in-out;

-moz-transition: all 0.5s ease-in-out;

-ms-transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-in-out;

}

.tbimailbox:hover {

-webkit-box-shadow: none;

box-shadow: none;

-webkit-transition: all 0.5s ease-in-out;

-moz-transition: all 0.5s ease-in-out;

-ms-transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-in-out;

}

.btrixsubmit {

font: bold 12px Tahoma, Geneva, sans-serif;

font-style: normal;

color: #ffffff;

background: #ffffff;

border: 0px solid #ffffff;

text-shadow: 0px -1px 1px #222222;

box-shadow: 2px 2px 5px #000000;

-moz-box-shadow: 2px 2px 5px #000000;

-webkit-box-shadow: 2px 2px 5px #000000;

border-radius: 10px 10px 10px 10px;

-moz-border-radius: 10px 10px 10px 10px;

-webkit-border-radius: 10px 10px 10px 10px;

padding: 8px 15px;

cursor: pointer;

margin: 0 auto;

}

.btrixsubmit:active {

cursor: pointer;

position: relative;

top: 0px;

}

.btrixsubmit::-moz-focus-inner {

border: 0;

padding: 0;

margin: 0;

}

#fbox-link,#fbox-link a.visited,#fbox-link a,#fbox-link a:hover {

    color: #0000EE;

    font-size: 5px;

    text-decoration: Tahoma;

    text-align: center;

    padding: 5px;

}

</style>

<br />

<div class="subscribebtrix">

<div style="color: #666666; font-weight: bold; font: 18px Oswald, cursive; margin: 0px 0px 10px 15px;">

~ Theo Dõi Qua Email ~  </div>

<div style="margin: 10px 0 0 6px;">

<form action="http://feedburner.google.com/fb/a/mailverify" class="emailform" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=bloggertrix', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" style="margin: 0pt;" target="popupwindow">

<input name="uri" type="hidden" value="startruong" />

<input name="loc" type="hidden" value="en_US" />

<input class="tbimailbox" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" type="text" value="Enter your email..." />

<input alt="" class="btrixsubmit" title="" type="submit" value="Subscribe" />

</form>

</div>

<div style="border: none; color: #666666; font: 18px Oswald, cursive; margin: 25px 0 0 6px;">

MXH >>> </div>

<div style="margin: -30px 0 0 100px;">

<a href="https://www.facebook.com/DarkNight152" target="_blank" title="Follow Facebook"><img alt="facebook" src="http://www.upsieutoc.com/images/2016/03/14/googleplus_btrix864ee.png" /></a>

<a href="http://www.twitter.com/Truong1502" rel="nofollow" target="_blank" title="Follow Twitter"><img alt="twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ_U6wxmhxTsH6mKb4ETDb5bk5oy8KbR-vPR_oo423Qcs0EJdIE-pc-rZ5kV0kAPGzMNgBRP9NaHka2X6svz98Ke4Jgf47ZnTHM9a2xBQCBmK5hdFsVPT0FA6_kgyfK_lSL-Q699OIPhA/s1600/twitter_btrix.png" /></a>

<a href="https://plus.google.com/u/0/+Tr%C6%B0%E1%BB%9DngQuangStarTruong/posts" rel="nofollow" target="_blank" title="Follow Google+"><img alt="gplus" src="http://www.upsieutoc.com/images/2016/03/14/googleplus_btrix53df2.png" /></a>

<a href="https://www.youtube.com/channel/UClC7Nyylt2vM6bFlCujZTaA" rel="nofollow" target="_blank" title="Subscribe YouTube"><img alt="youtube" src="http://www.upsieutoc.com/images/2016/03/14/googleplus_btrix90cfe.png" /></a>

<div id="fbox-link">Powered By <a style="padding-left: 0px;" href="http://www.startruongit.tk" rel="nofollow">Star Trường</a></div>

</div>

</div>

Những chỗ chữ màu đỏ Các bạn thay thông tin của mình vào nhé !!!

Cảm ơn các bạn đã xem bài viết !!!