Tạo Form đăng ký nhận bài viết qua Email đẹp cho Blogspot

Tạo Form đăng ký nhận bài viết qua Email (Subscribe by email) chuyên nghiệp và bắt mắt sẽ giúp bạn tăng số lượng người dùng đăng ký. Trong bài viết này mình xin chia sẻ các bạn mẫu khung đăng ký nhận bài viết khá đẹp mà mình đang dùng hiện tại.

HƯỚNG DẪN TẠO FORM ĐĂNG KÝ NHẬN BÀI VIẾT QUA EMAIL

Bước 1: Chèn CSS dưới đây vào trước thẻ ]]></b:skin>
/* Subscribe Box by Dau Dung */ #DauDungSubscribe {width:100%; height:auto; background-color:#f3f3f3; border:1px solid #ddd; border-radius:7.5px; display:block; margin:auto; line-height:40px; padding:0px} #DauDungSubscribe .email__ {padding:15px 15px 5px;} #DauDungSubscribe .email {margin:auto; color:#da8910; text-align:center;} #DauDungSubscribe .email:before {content:''; width:50px; height:50px; display:block; text-align:center; margin:auto; border-radius:100px; transition:all .3s ease; -webkit-animation:DauDungRing 5s 0s ease-in-out infinite; -webkit-transform-origin:50% 4px; -moz-animation:DauDungRing 5s 0s ease-in-out infinite; -moz-transform-origin:50% 4px; animation:DauDungRing 5s 0s ease-in-out infinite; transform-origin:50% 4px; background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21,19V20H3V19L5,17V11C5,7.9 7.03,5.17 10,4.29C10,4.19 10,4.1 10,4A2,2 0 0,1 12,2A2,2 0 0,1 14,4C14,4.1 14,4.19 14,4.29C16.97,5.17 19,7.9 19,11V17L21,19M14,21A2,2 0 0,1 12,23A2,2 0 0,1 10,21M19.75,3.19L18.33,4.61C20.04,6.3 21,8.6 21,11H23C23,8.07 21.84,5.25 19.75,3.19M1,11H3C3,8.6 3.96,6.3 5.67,4.61L4.25,3.19C2.16,5.25 1,8.07 1,11Z' fill='%23008c5f'/%3E%3C/svg%3E") center center / 50px no-repeat;} #DauDungSubscribe .medsos__ {padding:15px 0px; line-height:0px; border-top:1px solid #ccc;} #DauDungSubscribe form {display:-webkit-box; display:-webkit-flex; display:-moz-box; display:-ms-flexbox; display:flex; flex-wrap:nowrap; align-items:center; margin:0px 0px 15px; padding:0px; position:relative;} #DauDungSubscribe form:before {left:15px; position:absolute; display:block; width:20px; height:20px; background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z' fill='%23717171'/%3E%3C/svg%3E") no-repeat; content:'';} #DauDungSubscribe input {width: calc(100% - 35px); background-color:#dad8d8; line-height:1.5em; border:1px solid #ccc; border-right:0px; padding:8px 10px 8px 40px; font-size:12px; text-align:left !important; border-radius:50px 0px 0px 50px; outline:none; outline-width:0px; box-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none;} #DauDungSubscribe button {background-color:#008c5f; width:40px; min-width:40px; height:36px; margin:0px; padding:0px; border:0px; box-shadow:none; vertical-align:top; cursor:pointer; transition:all .3s ease; background-image:unset; border-radius:0px 50px 50px 0px;} #DauDungSubscribe button:hover, #DauDungSubscribe button:focus {background-color:#37aff9;} #DauDungSubscribe button:before {display:inline-block; width:20px; height:20px; margin:0px; background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2,21L23,12L2,3V10L17,12L2,14V21Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat; content:''; vertical-align:-3px;} #DauDungSubscribe .medsos {width:100%; text-align:center;} #DauDungSubscribe .medsos svg {width:20px;height:20px;margin-top:7px} #DauDungSubscribe .medsos svg path {fill:#fff} #DauDungSubscribe .medsos a {display:inline-block; margin-right:7px; width:35px; height:35px; box-shadow: 0px 7px 15px 0px rgba(0,0,0,0.4); transition: all ease-in-out 300ms; border-radius:100px;} #DauDungSubscribe .medsos a:last-child {margin-right:0px;} #DauDungSubscribe .medsos a:hover {box-shadow: 0px 23px 15px -3px rgba(0,0,0,0.25); transform: translate(0px, -10px) scale(1.05);} #DauDungSubscribe .medsos .facebook{background:#3a579a} #DauDungSubscribe .medsos .twitter {background:#00abf0} #DauDungSubscribe .medsos .googleplus {background:#df4a32} #DauDungSubscribe .medsos .youtube {background:#cc181e} #DauDungSubscribe .medsos .instagram {background:#992ebc} #DauDungSubscribe .medsos .pinterest {background:#e60023} @-webkit-keyframes DauDungRing{ 0% { -webkit-transform: rotateZ(0); } 1% { -webkit-transform: rotateZ(30deg); } 3% { -webkit-transform: rotateZ(-28deg); } 5% { -webkit-transform: rotateZ(34deg); } 7% { -webkit-transform: rotateZ(-32deg); } 9% { -webkit-transform: rotateZ(30deg); } 11% { -webkit-transform: rotateZ(-28deg); } 13% { -webkit-transform: rotateZ(26deg); } 15% { -webkit-transform: rotateZ(-24deg); } 17% { -webkit-transform: rotateZ(22deg); } 19% { -webkit-transform: rotateZ(-20deg); } 21% { -webkit-transform: rotateZ(18deg); } 23% { -webkit-transform: rotateZ(-16deg); } 25% { -webkit-transform: rotateZ(14deg); } 27% { -webkit-transform: rotateZ(-12deg); } 29% { -webkit-transform: rotateZ(10deg); } 31% { -webkit-transform: rotateZ(-8deg); } 33% { -webkit-transform: rotateZ(6deg); } 35% { -webkit-transform: rotateZ(-4deg); } 37% { -webkit-transform: rotateZ(2deg); } 39% { -webkit-transform: rotateZ(-1deg); } 41% { -webkit-transform: rotateZ(1deg); } 43% { -webkit-transform: rotateZ(0); } 100% { -webkit-transform: rotateZ(0); } } @-moz-keyframes DauDungRing{ 0% { -moz-transform: rotate(0); } 1% { -moz-transform: rotate(30deg); } 3% { -moz-transform: rotate(-28deg); } 5% { -moz-transform: rotate(34deg); } 7% { -moz-transform: rotate(-32deg); } 9% { -moz-transform: rotate(30deg); } 11% { -moz-transform: rotate(-28deg); } 13% { -moz-transform: rotate(26deg); } 15% { -moz-transform: rotate(-24deg); } 17% { -moz-transform: rotate(22deg); } 19% { -moz-transform: rotate(-20deg); } 21% { -moz-transform: rotate(18deg); } 23% { -moz-transform: rotate(-16deg); } 25% { -moz-transform: rotate(14deg); } 27% { -moz-transform: rotate(-12deg); } 29% { -moz-transform: rotate(10deg); } 31% { -moz-transform: rotate(-8deg); } 33% { -moz-transform: rotate(6deg); } 35% { -moz-transform: rotate(-4deg); } 37% { -moz-transform: rotate(2deg); } 39% { -moz-transform: rotate(-1deg); } 41% { -moz-transform: rotate(1deg); } 43% { -moz-transform: rotate(0); } 100% { -moz-transform: rotate(0); } } @keyframes DauDungRing{ 0% { transform: rotate(0); } 1% { transform: rotate(30deg); } 3% { transform: rotate(-28deg); } 5% { transform: rotate(34deg); } 7% { transform: rotate(-32deg); } 9% { transform: rotate(30deg); } 11% { transform: rotate(-28deg); } 13% { transform: rotate(26deg); } 15% { transform: rotate(-24deg); } 17% { transform: rotate(22deg); } 19% { transform: rotate(-20deg); } 21% { transform: rotate(18deg); } 23% { transform: rotate(-16deg); } 25% { transform: rotate(14deg); } 27% { transform: rotate(-12deg); } 29% { transform: rotate(10deg); } 31% { transform: rotate(-8deg); } 33% { transform: rotate(6deg); } 35% { transform: rotate(-4deg); } 37% { transform: rotate(2deg); } 39% { transform: rotate(-1deg); } 41% { transform: rotate(1deg); } 43% { transform: rotate(0); } 100% { transform: rotate(0); } }

Bước 2: Vào Blog => Bố cục => Thêm tiện ích => HTML/JavaScript và dán đoạn mã code dưới đây vào và Lưu lại.
<!-- Subscribe Box by DauDung --> <div id="DauDungSubscribe"> <div class="email__"> <div class="email"> Đăng ký nhận bài viết mới nhất <form action="https://feedburner.google.com/fb/a/mailverify?uri=daudung" method="post" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=daudung', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"> <input name="email" class="email" placeholder="Nhập địa chỉ Email của bạn"/> <input name="uri" type="hidden" value="daudung" /> <input name="loc" type="hidden" value="en_US" /> <button type="submit"></button> </form> </div> </div> <div class="medsos__"> <div class="medsos"> <a class="facebook" title="Facebook" href="https://www.facebook.com/daudung43" rel="nofollow noopener" target="_blank"><svg viewbox="0 0 24 24"> <path d="M17,2V2H17V6H15C14.31,6 14,6.81 14,7.5V10H14L17,10V14H14V22H10V14H7V10H10V6A4,4 0 0,1 14,2H17Z"></path></svg></a> <a class="twitter" title="Twitter" href="https://twitter.com/daudungit" rel="nofollow noopener" target="_blank"><svg viewbox="0 0 24 24"><path d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z"></path></svg></a> <a class="youtube" title="Youtube" href="https://www.youtube.com/daudung" rel="nofollow noopener" target="_blank"><svg viewbox="0 0 24 24"><path d="M10,16.5V7.5L16,12M20,4.4C19.4,4.2 15.7,4 12,4C8.3,4 4.6,4.19 4,4.38C2.44,4.9 2,8.4 2,12C2,15.59 2.44,19.1 4,19.61C4.6,19.81 8.3,20 12,20C15.7,20 19.4,19.81 20,19.61C21.56,19.1 22,15.59 22,12C22,8.4 21.56,4.91 20,4.4Z"> </path></svg></a> <a class="instagram" title="Instagram" href="https://www.instagram.com/daudungqt" rel="nofollow noopener" target="_blank"><svg viewbox="0 0 24 24"><path d="M7.8,2H16.2C19.4,2 22,4.6 22,7.8V16.2A5.8,5.8 0 0,1 16.2,22H7.8C4.6,22 2,19.4 2,16.2V7.8A5.8,5.8 0 0,1 7.8,2M7.6,4A3.6,3.6 0 0,0 4,7.6V16.4C4,18.39 5.61,20 7.6,20H16.4A3.6,3.6 0 0,0 20,16.4V7.6C20,5.61 18.39,4 16.4,4H7.6M17.25,5.5A1.25,1.25 0 0,1 18.5,6.75A1.25,1.25 0 0,1 17.25,8A1.25,1.25 0 0,1 16,6.75A1.25,1.25 0 0,1 17.25,5.5M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9Z"></path></svg></a> <a class="pinterest" title="Pinterest" href="https://pinterest.com/daudungqt" rel="nofollow noopener" target="_blank"><svg viewbox="0 0 24 24"><path d="M9.04,21.54C10,21.83 10.97,22 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2A10,10 0 0,0 2,12C2,16.25 4.67,19.9 8.44,21.34C8.35,20.56 8.26,19.27 8.44,18.38L9.59,13.44C9.59,13.44 9.3,12.86 9.3,11.94C9.3,10.56 10.16,9.53 11.14,9.53C12,9.53 12.4,10.16 12.4,10.97C12.4,11.83 11.83,13.06 11.54,14.24C11.37,15.22 12.06,16.08 13.06,16.08C14.84,16.08 16.22,14.18 16.22,11.5C16.22,9.1 14.5,7.46 12.03,7.46C9.21,7.46 7.55,9.56 7.55,11.77C7.55,12.63 7.83,13.5 8.29,14.07C8.38,14.13 8.38,14.21 8.35,14.36L8.06,15.45C8.06,15.62 7.95,15.68 7.78,15.56C6.5,15 5.76,13.18 5.76,11.71C5.76,8.55 8,5.68 12.32,5.68C15.76,5.68 18.44,8.15 18.44,11.43C18.44,14.87 16.31,17.63 13.26,17.63C12.29,17.63 11.34,17.11 11,16.5L10.33,18.87C10.1,19.73 9.47,20.88 9.04,21.57V21.54Z"></path></svg></a> </div> </div> </div>

• Thay đổi địa chỉ daudung thành địa chỉ URL FeedBurner Blog của bạn.