Tạo khung Subscribe (đăng kí nhận bài viết mới qua Email) và một số style đẹp cho Blogger

Đố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.

Tạo khung Subscribe (đăng kí nhận bài viết mới qua Email)

Các bước thực hiện

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 == "") {this.value = "Nhập Email vào đây...";}" onfocus="if (this.value == "Nhập Email vào đây...") {this.value = "";}" 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>

Việc đơn giản, các bạn hãy thay dongvietblog thành id Feed của bạn!

Mẫu 2

Code

<style>
.sub-email{width: 100%; float: left;}
.sub-email .subicons{border-bottom: 1px solid #e6e6e6; margin: 0px 0 0px 0; float: left; width: 300px; font-family: Helvetica, Arial; font-size: 14px;}
.sub-email .subicons a{text-decoration: none; color:#333333;}
.sub-email .subicons a:hover{text-decoration: underline; color:#333333;}
.sub-email .subicons .rssicon{border-right: 1px solid #e6e6e6; background: url(http://4.bp.blogspot.com/--RxiJOJy7dA/U_kmELxILzI/AAAAAAAAAHM/E9ryJh7YPcM/s1600/rss-vanvietblog-com.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}
.sub-email .subicons .fbicon{border-right: 1px solid #e6e6e6; background: url(http://2.bp.blogspot.com/-YcZFJQzsOOk/U_kmD8Jz9GI/AAAAAAAAAHQ/JcCJdV5dcvI/s1600/FaceBook-24x24.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}
.sub-email .subicons .twittericon{background: url(http://3.bp.blogspot.com/-BjEX-IM5SYA/U_kmD7rl2TI/AAAAAAAAAHI/tYcFQoac7ng/s1600/twiter%2Bvanvietblog.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}
.sub-email .emailsub{border-bottom: 1px solid #e6e6e6; padding: 15px 0 20px 0; float: left; width: 100%; font-family: Helvetica, Arial;}
.sub-email .emailsub .emailicon{background: url(http://2.bp.blogspot.com/-PqCp6EIldac/U_kToEULErI/AAAAAAAAAG4/GQDuEqei7zs/s1600/email-vanvietblog.png) no-repeat left center; float: left; padding: 5px 15px 0px 35px; margin: 0 0 0 5px; width: 300px; height: 28px; line-height: 28px; vertical-align: middle; font-size: 14px; color: #333; }
.sub-email .emailsub .emailupdatesform{margin: 15px 0 5px 5px; width: 300px; float: left;}
.sub-email .emailsub .emailupdatesform input.emailupdatesinput{background: #fff !important; float: left; border: 1px solid #d2d2d2; padding: 0px 8px 0px 8px; color: #a19999; font-size: 12px; height: 25px; width: 200px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
.sub-email .emailsub .emailupdatesform input.joinemailupdates{background:-moz-linear-gradient(top,#57ABFE 0%,#0080ff 100%); background:-webkit-gradient(linear,left top,left bottom,from(#57ABFE),to(#0080ff)); border: 1px solid #0080ff; text-transform: uppercase; color: #fff; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
</style>


<div class="sub-email">
<div class="subicons">
<div class="rssicon"><a href="/feeds/posts/default" target="_blank">RSS</a></div><div class="fbicon"><a href="http://www.facebook.com/usernam" target="_blank" rel="nofollow">Facebook</a></div><div class="twittericon"><a href="http://twitter.com/namkna" target="_blank" rel="nofollow">Twitter</a></div></div>
<div class="emailsub">
<div class="emailicon">Mọi cập nhật sẽ được gửi tới Email</div>
<div class="emailupdatesform">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=vanvietblog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="emailupdatesinput" name="email" value="Điền Email của bạn..." onblur="if (this.value == '') {this.value = 'Điền Email của bạn...';}" onfocus="if (this.value == 'Điền Email của bạn...') {this.value = '';}" type="text" /><input value="vanvietblog" name="uri" type="hidden" /><input value="OK" class="joinemailupdates" type="submit" /></form></div></div></div>

Mẫu 3

Code

<style>
.pam fbpdc,
._4xn4 {
overflow: inherit;
z-index: inherit;
}
.wdt_button {
float: left;
margin: 5px;
z-index;
9999
}
#newsletter .text,
#newsletter .submit {
float: left;
background: #5C5959;
font-size: 12px;
line-height: 16px
}
#newsletter .text {
border-top: 0;
border-right: 1px solid #3e3e3e;
border-bottom: 0;
border-left: 0;
border-radius: 7px 0 0 7px;
padding: 9px 10px;
width: 170px;
height: 16px;
color: #eee
}
#newsletter .text:hover,
#newsletter .text:focus,
#newsletter .submit:hover {
box-shadow: 0 1px rgba(255, 255, 255, .2) inset;
background: #066
}
#newsletter .text:focus {
outline: 0
}
#newsletter .submit {
margin: 0;
border: 0;
border-radius: 0 7px 7px 0;
padding: 9px 0;
width: 65px;
height: 34px;
color: #999;
cursor: pointer
}
#newsletter .submit:hover {
color: #eee
}
.sub-email {
margin: 0;
float: left;
background: #fff
}
.count {
color: #333;
font-size: 14px;
font-weight: bold;
height: 35px;
vertical-align: middle;
padding: 0;
border-bottom: 2px solid #e6e6e6;
margin: 10px
}
.subicons {
border-bottom: 2px solid #e6e6e6;
margin-top: -15px;
height: 80px;
float: center
}
.emailsub {
padding: 0;
float: left;
margin-left: 10px
}
.emailsub .emailicon {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFFH308nBuM-g999yXPdMgnOT8O2qFWVPZegZN1fMoYT0kJ9kHAwM8AzWQn_aUVpr9YWYOVEQlcdACBQmoWKRDk7DWYQRwngecvGmMcD0GE-XLmlurnIQXZX7KU3EB7PP4G1KE962Tm6o/s1600/email-icon.png) no-repeat left center;
float: left;
padding: 5px 15px 0px 35px;
margin-left: 0;
line-height: 20px;
vertical-align: middle;
font-size: 14px;
color: #333;
}
.emailupdatesform {
margin: 0;
float: left;
width: 100%;
margin: 10px 0 10px
}
</style>
<div class="emailsub">
<div class="emailicon">Đăng kí nhận bài viết mới qua email.</div>
<div class="emailupdatesform">
<form action='http://feedburner.google.com/fb/a/mailverify' class='right' id='newsletter' method='post' onsubmit='window.open("http://feedburner.google.com/fb/a/mailverify?uri=vanvietblog","popupwindow","scrollbars=yes,width=550,height=520");return true' target='popupwindow'>
<input class='text' name='email' onblur='if(this.value==""){this.value=this.defaultValue}' onfocus='if(this.value==this.defaultValue){this.value=""}' type='text' value='Enter your Email address...' />
<input class='submit' type='submit' value='Đăng ký' />
<input name='uri' type='hidden' value='ID của bạn />
<input name='loc' type='hidden' value='en_US' /> </form>
</div>
</div>
<div class='clear'></div>

Tìm kiếm Blog này

Blog Trung Hi