Sơn Trịnh

Giới thiệu
Chỉnh sửa hồ sơ

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



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!

Không có nhận xét nào