Thêm thanh Subscribe & Social cực đẹp cho Blogger



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ó
<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: &#39;Segoe UI&#39;;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: &#39;Segoe UI&#39;;}
.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 (&apos;http://feedburner.google.com/fb/a/mailverify?uri=StarBnhBlog&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);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>
*Phần được bôi đỏ các bạn chỉnh lại cho phù hợp với blog mình nhé.
Chúc bạn thành công!

5
4
3
2
1

2 nhận xét:

» Hướng dẫn nhúng hình ảnh: [img]http://domain.com/image.png[/img]
» Tham trang khảo ảnh động cực cute: Qoobee
» Hướng dẫn nhúng link trang web: <a href="url" rel="nofollow" target="_blank">Link</a>
» Không chửi tục, nói bậy, quảng cáo thông qua khung Comment.
» Không spam link, chia sẻ các link không liên quan đến bài viết.
» Không xuyên tạc, bôi nhọ tổ chức hay cá nhân nào.
» Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước.

Group giao lưu, giải đáp và chia sẻ kinh nghiệm blogspot - blogger :

  • Kích hoạt giao diện tối
  • Giao diện tối giúp bạn nhìn vào ban đêm, làm dịu mắt và tránh căng thẳng khi phải nhìn vào màn hình sáng quá nhiều.

    Đếm ngược thời gian đến tết Kỷ Hợi 2019