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!
- 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 !
- Mọi chi tiết xin liên hệ:
• Email: starbinhblog.com@gmail.com
• Facebook: Fb.com/tomitsystem
Xin chân thành cảm ơn những đóng góp của bạn để chúng tôi ngày càng phát triển hơn nữa...

● Hãy là con người văn minh từ những câu nói

Loading...

2 nhận xét:

● Hãy là con người văn minh từ những câu nói