Như tiêu đề thì hôm nay mình xin hướng dẫn các bạn thêm thanh subscribe và social cực đẹp và chuyên nghiệp cho blogger
HƯỚNG DẪN CÁCH LÀM:
Bước 1: Login vào blogger rồi vào Chủ đề -> Chỉnh sửa HTML
Bước 2: Nhấn tìm đoạn footer nếu blogger không có footer thì thêm tìm đoạn </body> và dán đoạn code dưới lên trên nó
*Phần được bôi đỏ các bạn chỉnh lại cho phù hợp với blog mình nhé.
<style>
.container {
padding-right: 8%;
padding-left: 8%;
margin-right: auto;
margin-left: auto;
}
#subscribe-css{position:relative;padding:5px 0;background:#09b300;margin:0}
.subscribe-wrapper{color:#fff;font-size:16px;line-height:10px;margin:0;text-transform:none;font-weight:400;width:100%;display:inline}
.subscribe-form{clear:both;display:inline-block;margin-top:8.5px}
form.subscribe-form{background:#fff;clear:both;margin:0;width:333px;height:36px;border-radius:3px;}
.subscribe-css-email-field{background:#fff;color:#333;margin:6px 0;margin-left:5px;width:61%;border:0;border-radius:3px;font-family: 'Segoe UI';font-size:16px}
.subscribe-css-email-button{width:auto;border-radius:3px;background:#09b300;color:#fff;cursor:pointer;font-weight:500;padding:5px 10px;margin-left:41.5px;text-transform:none;font-size:15px;border:0;transition:all .6s;font-family: 'Segoe UI';}
.subscribe-css-email-button:hover{background:#09b300}
#subscribe-css p.subscribe-note{margin:5px;margin-right:60px;float:left;color:#fff;font-size:16px;font-weight:600;margin-top:13.5px;display:inline-block}
#subscribe-css p.subscribe-note span{position:relative;overflow:hidden;font-weight:700;transition:all .5s}
.text-note{color: #fff;line-height: normal; font-size: 16px;text-align: center;max-width: 700px; margin: 0 auto;padding:15px 0}
/**/
.social-footer {
float: right;
display: inline-block;
}
.social-footer a:hover{color:#fff;opacity:1;transform:rotate(360deg);}
.si-facebook:hover, .si-colored.si-facebook {
background-color: #3B5998 !important;
}
.si-gplus:hover, .si-colored.si-gplus {
background-color: #DD4B39 !important;
}
.si-colored.social-icon {
border-color: transparent;
}
.si-colored {
border-color: transparent !important;
}
.si-dark {
background-color: #444;
color: #FFF !important;
border-color: transparent;
}
.social-icon {
margin: 0 5px 5px 0;
width: 40px;
height: 40px;
font-size: 20px;
line-height: 38px !important;
color: #555;
text-shadow: none;
border: 1px solid #AAA;
border-radius: 3px;
overflow: hidden;
}
.i-rounded, .i-plain, .i-circled, .i-bordered, .social-icon {
display: block;
float: left;
margin: 4px 11px 7px 0;
text-align: center !important;
font-size: 28px;
color: #FFF;
text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
cursor: pointer;
font-style: normal;
}
</style>
<div id='subscribe-css'>
<div class='container'>
<p class='subscribe-note'><i class='fa fa-envelope-o' style='font-size: 25px;margin-right: 10px'/><span>ĐĂNG KÝ</span>
<span class='itatu'>EMAIL</span> ĐỂ NHẬN TIN, BÀI MỚI NHẤT</p>
<div class='subscribe-wrapper'>
<div class='subscribe-form'>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=StarBnhBlog' class='subscribe-form' method='post' onsubmit='window.open ('http://feedburner.google.com/fb/a/mailverify?uri=StarBnhBlog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input name='uri' type='hidden' value='StarBnhBlog'/>
<input name='loc' type='hidden' value='vi_VN'/>
<input autocomplete='off' class='subscribe-css-email-field' name='email' placeholder='Nhập địa chỉ email của bạn'/>
<input class='subscribe-css-email-button' title='' type='submit' value='Đăng ký'/>
</form>
</div>
</div>
<div class='social-footer'>
<a class='si-facebook social-icon si-dark si-colored' href='https://www.facebook.com/100004040517937/'>
<i class='fa fa-facebook'/>
</a>
<!--<a href='https://www.facebook.com/EGAnyCom'><small style='display: block; margin-top: 3px;'><strong>EGANY Tech.</strong></small></a>-->
<a class='si-gplus social-icon si-dark si-colored' href='https://plus.google.com/'>
<i class='fa fa-google-plus'/>
</a>
</div>
</div>
</div>
Chúc bạn thành công!