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

Click ngay


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!

Nếu bạn sao chép bài viết trên blog thì vui lòng để nguồn vào giúp mình. Tôn trọng người khác thì người khác sẽ tôn trọng lại bạn.

Nếu có thắc mắc gì về code, code lỗi,... thì liên hệ mình để được giúp đỡ nhé.

Thanh Bình Designer, Developer

Muốn giỏi phải học, muốn học thì phải hỏi. Chính vì thế, hãy cùng tham gia thảo luận với nhau để tìm ra câu trả lời nếu có thắc mắc nhé! Xem thêm nhiều bài viết hay tại đây nhé.
Trong quá trình viết bài chúng tôi sẽ có nhiều thiếu sót mong các bạn đóng góp để chúng tôi rút kinh nghiệm hơn !
Nên Xem
  • Ẩn sidebar
  • 2 nhận xét:

    » 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.