tiện ích/widget mạng xã hội màu xanh dương

Đây là phụ tùng thuê bao khác mà bạn chắc chắn sẽ thích. Bằng cách sử dụng CSS và HTML, nó dễ dàng hơn rất nhiều để bạn có thể kết hợp RSS feed hộp đăng ký này với các biểu tượng xã hội trên trang web của bạn. Những kẻ ở Bloggertrix chỉ cho bạn cách để thêm màu sắc phụ tùng thuê bao xã hội màu xanh này.

Thực hiện theo các bước đơn giản sau:

Đăng nhập vào Blogger> Blogger Bảng điều khiển

chọn Giao diện

Thêm Tiện ích> HTML / Javascript

Dán mã này dưới đây:

<style>

#sidebar-subscribe-box{width:300px;border:1px solid #aaa;border-radius:3px;padding:3px 0}

.sidebar-subscribe-box-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeVmHOYyyuScCPeHuUm-GAwKwQAxtuzz0cH9ll3_jCzCsPzAEh8D92nFSnQoxx-kV44zdW5PsCmTwJv2c9ci0MY_4aB6gcVtIOE1g-6OIijQIk-7Pyzf-b_nwN9RlJ5-9lykT5yLehND4/s1600/background.png) repeat scroll 0 0 #f7f7f7;color:#111;font-size:14px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:uppercase}

.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0}form.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0 0;width:auto}

.sidebar-subscribe-box-email-field{-moz-border-radius:4px;-webkit-border-radius:4px;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicBC-pb-NHkxbboRZjFQYe8XyX-U0iiwuQ1k2gLiTRLXrf-7ZD_yHept2HDEwgaudqi5zsl4orx7f0TL4snEdAdVv0kHZjlI5HdYGdUAnJtjoFJeVkyH_7M3NlhFTbkUmFtwY01ea55i4/s1600/icons.png) no-repeat 0 -27px;border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 40px;width:68%}

.sidebar-subscribe-box-email-button{background:#09f;border:1px solid #007fff;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;color:#fff;cursor:pointer;font-family:verdana;font-weight:700;padding:10px;text-shadow:1px 1px 0 rgba(0,0,0,.4);text-transform:uppercase;width:100%}

.sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus{background:#1ca4ff}

.sidebar-subscribe-box-email-button:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0}iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table{width:100%}embed{border-radius:3px;-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);background:#FFF;border:1px solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:0;padding:4px 4px 4px}

#footer-section{border-top:1px solid #aaa;box-shadow:inset 0 4px 6px -3px #aaa;font-family:cambria;font-size:14px;height:100px;margin:10px -30px 5px;padding:0 30px;text-align:center;width:100%}

a.social-icons{margin-right: 5px;height:45px;width:45px;}

a.social-icons:hover { opacity: .7; filter:alpha(opacity=70);}

</style>

<div id="sidebar-subscribe-box">

<div>

<br/>

<a href="https://facebook.com/bloggertrix"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2rAX8oLSj_Fy30Hu0qHUk_VvxIgxKjujdphbAcZAF-FmD2EmpIWYRfIKsHGnMbFBPw5j-YalWXPIRcrQA2otgKsUowL0h2EEg6MD_CqVcY64gcDHCRgbhiA57i6GRECCyxS8mf-V59eZ-/s1600/Bloggertrix-facebook.png" /></a>

<a href="https://twitter.com/bloggertrix"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjqdLS6y9BIzIbM6BvMYg4L0QnT9fpP0h6tpVPfjmFxJp_P9KUL3ZEUUhB4mqq6T9R5EtMCAm-JpL62-72_U0xYfHTMeG0PkjefMaNHakSD6j29BXbTXkagXvMfs6lev8YN0u7HHe8mb8o/s1600/bloggertrix-twitter.png" /></a>

<a href="https://plus.google.com/userId"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqhOB7qIlWCP4PF4tkF7gfJLvGjDUFaHy_EWn51vqu6P0KqnATGkT-5NBrSmX5IXP_pbqr8qQ6pCr8cDcbIQvr3RN-6Qq-5JdtssAbtpjM-_-BhMQnZ_K4fc5j8nm_ULLtzv00DuB98Vh5/s1600/Bloggertrix-Googleplus.png" /></a>

<a href="http://www.feedburner.com/bloggertrix"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj79MzKWrO0DNSOqxpKX8pYF13d8s3PaWRm9wAvEM7tcdMRMQpcoVH6pc5jswKktLLP8iD6QrqeCQKqzXvjH7NhtnH-agecw4QM1n13xxbTLNIM74cWenfUlgYc8o9gTO9wIj8ARghxRjrw/s1600/Bloggertrix-Rss.png" /></a>

<p>Subscribe To Our Email Newsletter & Receive Updates Free</p>

<div><form action="http://feedburner.google.com/fb/a/mailverify?uri=bloggertrix" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=bloggertrix', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="bloggertrix" />

<input name="loc" type="hidden" value="en_US" /><input name="email" autocomplete="off" placeholder="Enter your email address here"/>

<input title="" type="submit" value="Subscribe Now !" /></form>

</div></div></div>

Lưu ý: Đối với Facebook Tên truy nhập, Twitter Tên truy nhập, Google+, Feedburner Tên truy nhập, Feedburner ID, thay thế các tên mẫu được cung cấp đánh dấu màu đỏ của riêng bạn.

Luôn luôn sao lưu mẫu của bạn đầu tiên trước khi chỉnh sửa.

Tiết kiệm.

Đơn giản phải không? Hy vọng bạn thích hướng dẫn tính năng này.