Black subscribe box với hiệu ứng đẹp cho blog

Hôm nay mình sẽ tiếp tục chia sẻ một style nữa của khung subscribe cho Blogger. Style này có kèm social button với hiệu ứng xoay tròn trông khá đẹp mắt. 

Xem demo

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

Bước 1: Tại trang quản trị blog, các bạn vào Bố cục, tạo một tiện ích HTML/JavaScripts.

Bước 2: Dán đoạn code sau vào phần nội dung:

<!--Black Subscribe Box by kjmagic.blogspot.com-->
<style>
#kjsubbox{
width:280px;
padding:70px 10px 25px 10px;
background:#000;
box-shadow:5px 7px 5px #ddd;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
p#kj_socialicons img {
    -moz-transition: all 0.8s ease-in-out;   
-webkit-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    -ms-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
padding-right:10px;
}
p#kj_socialicons img:hover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}
kjform.emailout{
margin:20px;
display:block;
clear:both;
padding:20px;
float:right;
}
.kjtextbox{
background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrwyr9zytq2X2rEsIf3WJwQP6BNeS3exY6obeF5X0tZ37hiXYQrgyxg8f-wCGNByuCK60Nq0QtukXxzkgKa60D2wjGBPH8KWmK6VuWX9BH-ToCe6C78OzFA3uD5MP4aeCq9YbkvHYLkic/h120/kjmagic-mail.png) no-repeat scroll 4px center;
padding:7px 15px 7px 40px;
color:#666;
font-weight:bold;
font-family:Georgia,Times New Roman,Trebuchet MS;
text-decoration:none;
border:1px solid #D3D3D3;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
width:130px;
height:20px;
}
.kjbutton{
color:#666;
font-weight:bold;
text-decoration:none;
padding:6px 15px;
border:1px solid #D3D3D3;
cursor: pointer;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-goog-ms-border-radius: 4px;
border-radius: 4px;
background: #fbfbfb;
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}
</style>
<div id="kjsubbox">
<center><p id="kj_socialicons">
    <a href="http://www.facebook.com/kj.magician">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhonDsERXfE4SZkptrRxLMnvA6y4t8VD2ufdHElZQRTsrZsgYXFObdN5CZM2b4UbKE1KaEdK9VusGaWfWPIZEs-Lrpu7fXwFDr4EMU_QsuSiwMBrrj1YjjUm1vvysnOGHv5UGeDBgaYXLA/h120/kjmagic-fb.png" /></a>
<a href="https://plus.google.com/your-gplus-id">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghyecaIm9lmhPeqPJo91UL-jODOePabvQuJn6z_E56tX3UhedBJ7JglFnBg9pvoP2HPBKmzt9vJ-oyszdYvTiCqCNcGmwLMW3yeDr6q0wxDB4AOT2Ky85f0-UqHAdfpyBJGAgGIHFwEro/h120/kjmagic-gplus.png" /></a>
<a href="http://www.twitter.com/quocdoantrinh">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFhExXzyMGvg3Rf3HodxQ8-za8Y2fxSSlp4-QEIE5dvHlTJpH459xqyoIDgBcZAq8nPO1aue9D3iQ3D_TNqS9PyQnmQxqfGlZiodBC2WHvDFGBjeIRRldo82kaWrM5DJzvyrNqIlWiy1A/h120/kjmagic-twitter.png" /></a>
<a href="http://pinterest.com/your-id">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdPEm-bb1zfK-XfUyFAJp8DRNUoPsWqPYDxqmQWTj2khRo2PjfF2T9yesLZwZBLmrTBp86_Py5lsZHxzzWDRTJycNUFX_mYdBuc5ruibKCvFC6ndBWyeRA3AjLtRq8T603kdJGVftu9yE/h120/kjmagic-pinterest.png" /></a></p></center>
<p style='color:#666;
font-weight:bold;
font-family:Georgia,Times New Roman,Trebuchet MS;'>Đăng ký ngay để nhận bài mới miễn phí qua Email của bạn !</p>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailout' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=KjMagic', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='KjMagic'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='kjtextbox' 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 alt='' class='kjbutton' title='' type='submit' value='Submit'/>
</form>
<p style='float:right; color:#000; font-size:10px;'><a href="http://kjmagic.blogspot.com/2014/05/black-subscribe-box-voi-hieu-ung-dep-cho-blog.html" target="_blank">Get this widget</a></p>
</div>
<!--/Black Subscribe Box by kjmagic.blogspot.com-->

Trong đó:
- Phần màu xanh là ID Feedburner của bạn.
- Phần màu cam là Social ID tương ứng của bạn.

Bước 3: Lưu lại và xem kết quả.

Chúc thành công !