Chèn khung subscribe kèm social button bên dưới bài đăng

Bài viết này mình sẽ chia sẻ một style nữa của khung subscribe chèn bên dưới bài đăng. Các bạn có thể xem hình minh họa bên trên.

Sau đây là các bước thực hiện:

Bước 1: Tại trang quản trị blog, các bạn vào Mẫu -> Chỉnh sửa HTML, tìm đoạn code sau:

<div class='post-footer-line post-footer-line-1'>

Bước 2: Chèn đoạn code sau vào bên dưới nó:

<!--Subscribe box with social button by kjmagic.blogspot.com-->
<style>
.dtsubbox{
float:left;
width:500px;
padding:10px;
border:1px solid #222;
color:#444444;
background-color:#eee; 
margin:25px auto;
font-family:Droid Sans;
-webkit-box-shadow:0 0 60px 10px rgba(0, 0, 0, .1) inset, 0 5px 0 -4px #fff, 0 5px 0 -3px #c2c0b8, 0 11px 0 -8px #fff, 0 11px 0 -7px #c2c0b8, 0 17px 0 -12px #fff, 0 17px 0 -11px #c2c0b8;
-moz-box-shadow:0 0 60px 10px rgba(0, 0, 0, .1) inset, 0 5px 0 -4px #fff, 0 5px 0 -3px #c2c0b8, 0 11px 0 -8px #fff, 0 11px 0 -7px #c2c0b8, 0 17px 0 -12px #fff, 0 17px 0 -11px #c2c0b8;
box-shadow:0 0 60px 10px rgba(0, 0, 0, .1) inset, 0 5px 0 -4px #fff, 0 5px 0 -3px #c2c0b8, 0 11px 0 -8px #fff, 0 11px 0 -7px #c2c0b8, 0 17px 0 -12px #fff, 0 17px 0 -11px #c2c0b8;
}
ul.dtsubboxsoc{
list-style:none;
margin-top:30px;
overflow:hidden;
}
.dtsubboxsoc img
{
margin-left:-20px;
height:50px;
margin-top:6px;
}
.dtsubboxsoc li{
float:right;
background:none !important;
padding:0 !important;
margin:0 8px;
}
.dtsubboxbutton{
background:#222;
border:1px solid #fff;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
padding:6px 12px;
margin:0;-webkit-box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);
-moz-box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);
color:#888;
text-shadow:0 1px 0 #eee;
line-height:1.2;
cursor:pointer;
font-size:13px;
}
.dtsubboxbutton:hover{
background:#f0f0f0;
text-decoration:none !important;
}
.dtsubboxemail{
clear:both;
width:250px;
margin:10px 0;
float:left;
}
.dtsubboxemail h4
{
font:16px georgia, arial, verdana;
}
.dtsubboxemailform{
position:relative;
width:250px;
margin:0 auto;
}
.dtsubboxinput{
width:200px;
height:18px;
margin:0 auto;
padding:8px 40px 8px 10px;border:1px solid #ddd;
-webkit-border-radius:4px;-moz-border-radius:4px;
border-radius:4px;font-family:georgia;
font-style:italic;
-webkit-box-shadow:1px 1px 2px #dfdfdf;
-moz-box-shadow:1px 1px 2px #dfdfdf;
box-shadow:1px 1px 2px #dfdfdf;
font-size:14px;color:#666;
}
.dtsubboxbutton{
-webkit-border-top-right-radius:4px;
-webkit-border-bottom-right-radius:4px;
-moz-border-radius-topright:4px;
-moz-border-radius-bottomright:4px;
border-top-right-radius:4px;
border-bottom-right-radius:4px;
-webkit-border-top-left-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-topleft:0px;
-moz-border-radius-bottomleft:0px;
border-top-left-radius:0px;border-bottom-left-radius:0px;
padding:9px;
position:absolute;
right:-2px;
top:0;
display:block;
line-height:16px;
}
.dtsubboxbutton{
padding:8px !important;
}
.dtsubboxemailform, .dtsubboxinput{
width:98% !important;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
height:auto;
}
</style>

<b:if cond='data:blog.pageType == "item"'>
<div class='dtsubbox'>
<div class='dtsubboxemail'>
<h4 style='text-align:center;'>Get Free Updates Daily <br/>to Your Email</h4>
<form action='http://feedburner.google.com/fb/a/mailverify' class='dtsubboxemailform' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=KjMagic', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input name='uri' type='hidden' value='KjMagic'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='dtsubboxinput' name='email' onblur='if (this.value == "") {this.value = "Enter your email...";}' onfocus='if (this.value == "Enter your email...") {this.value = ""}' type='text' value='Enter your email...'/>
 <input class='dtsubboxbutton' title='' type='submit' value='Subscribe'/>
</form>
</div>
<ul class='dtsubboxsoc'>
<li>
<a href='http://feeds.feedburner.com/feedIDcuaban'><img src='http://2.bp.blogspot.com/-IXJ5WpaZllc/UiIRkBdgE0I/AAAAAAAACUQ/H41RlpEwkSU/s1600/rss.png' title='Subscribe me'/></a>
</li><li>
<a href='http://twitter.com/quocdoantrinh'><img src='http://1.bp.blogspot.com/-TD3jCs_IZcg/UiIRjnuFRyI/AAAAAAAACUA/9ZYp0awI3Ss/s1600/twitter.png' title='Follow me'/></a>
</li><li>
<a href='http://facebook.com/kj.magician'><img src='http://1.bp.blogspot.com/-XtMSvGt9QbM/UiIRj_Z-xkI/AAAAAAAACUE/lxKPo9uepx4/s1600/facebook.png' title='Like us'/></a>
</li><li>
<a href='URL GPlus của bạn'><img src='https://lh4.googleusercontent.com/-l6tB4HfZcfY/UjdItwk9-7I/AAAAAAAACW4/iHklkLWO_Fs/h120/google.png' title='Circle me'/></a>
</li>
</ul>
</div>
</b:if>
<!--/Subscribe box with social button by kjmagic.blogspot.com-->

Chỉnh sửa những chỗ mình đánh dấu thành ID của bạn.

• Lưu ý: Nếu làm không ra kết quả, bạn có thể chèn đoạn code của subscribe box vào sau 1 trong những dòng sau:

<div class='post-footer-line'>

<div class='post-footer-line post-footer-line-2'>

<div class='post-footer-line post-footer-line-3'>

Chúc các bạn thành công !