Cách tạo khung Subcribe nhận tin bài viết

Đối với blog, các bạn sẽ không thể thiếu đi khung Subscribe. Đây là khung giúp cho người đọc có thể dễ dàng tiếp cận bài viết qua email qua hình thức đăng kí và nhận bài viết qua Email. Mình sẽ giới thiệu đến các bạn một số mẫu đẹp nhất.

Bước 1: Đăng nhập vào Blogger -> Bố cục

Bước 2: Thêm tiện ích-> HTML/ Javarscip

Bước 3: Dán code mẫu mà bạn thích. Code mình sẽ đề cập bên dưới

Mẫu 1

Code

<div class="sub-email">

Đăng ký nhận bài qua Email

<form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=dongvietblog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">

<input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Nhập Email vào đây...&quot;;}" onfocus="if (this.value == &quot;Nhập Email vào đây...&quot;) {this.value = &quot;&quot;;}" value="Nhập Email vào đây..." type="text" />

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

<input class="sub-emailsubmit" value="Đăng kí" type="submit" />

</form>

</div>

<style>

.sub-email{

background:url(http://2.bp.blogspot.com/-PqCp6EIldac/U_kToEULErI/AAAAAAAAAG4/GQDuEqei7zs/s1600/email-vanvietblog.png) no-repeat 0px 12px ;

width:300px;

padding:10px 0 0 55px;

float:left;

font-size:1.4em;

font-weight:bold;

margin:0 0 10px 0;

color:#686B6C;

}

.sub-emailsubmit{

background:#9B9895;

cursor:pointer;

color:#fff;

border:none;

padding:3px;

text-shadow:0 -1px 1px rgba(0,0,0,0.25);

-moz-border-radius:6px;

-webkit-border-radius:6px;

border-radius:6px;

font:12px sans-serif;

}

.sub-emailsubmit:hover{

background:#E98313;

}

.textarea{

padding:2px;

margin:6px 2px 6px 2px;

background:#f9f9f9;

border:1px solid #ccc;

resize:none;

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

width:170px;

color:#666;}

</style>