Mã Code tạo Social button cho Blogspot

Công dụng: Truy cập vào RSS - Facebook - Twiter và Mail. Có hình dáng như sau:

Live Demo
Cách làm:
Vào Trang tạo Blogger, mỡ Bố cục>>Widget tiện ích>>HTML/JavaScrip

Chép mã Code đưới đây vào phần soạn thảo mã lệnh.

Mã Code như sau:

<style>



    .mbtbar{width: 100%; float: left; padding:0; margin:0;}     .mbtbar .count{color:#333; font-size: 14px; font-weight: bold; font-family: Helvetica, Arial; background: none;  line-height: 35px; vertical-align: middle; width: 300px; padding: 0 10px 0 4px;}     .mbtbar .count span.bigcount{color:#BF0100; font-size: 24px; font-family: Helvetica, Arial; line-height: 35px; vertical-align: top; padding-right:3px;}     .mbtbar .subicons{border-bottom: 1px solid #e6e6e6; margin: 0px 0 0px 0; float: left; width: 300px; font-family: Helvetica, Arial; font-size: 14px;}      .mbtbar .subicons a{text-decoration: none; color:#333333;}      .mbtbar .subicons a:hover{text-decoration: underline; color:#333333;}     .mbtbar .subicons .rssicon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-2Hhibz6GHS5Raq-Ce6mR1E8drip8rB1CAYphkPm5btU9-dHSTrXg78ZpmpeLTgLsMLM64gyD1SFLk9Up9jHZLdACiXpJtVe9S9chdgrO36e-IHkrHn9CMAXRYaF40e6sV2IFJpv_mA4/s400/rss.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}     .mbtbar .subicons .fbicon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPCKpy2_hb0CD496wbFPI3QS3FkXWy15CwKkIA_FVJE_zaDDaMn1QqW4IZQN6bT54OSa_ex1nIzkVQtb-NZzMCX7sV4LCOTBU1HJuNA1eRdJ24ybJ2oI-Ys06WSfi5D9zFbrMvKBnkXpQ/s400/facebook.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}     .mbtbar .subicons .twittericon{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzoyqittqisKge4K5mHZoDHBLQ7m0hDKrhFY7fNq61_O1evFTQ3MA4v9NrucgqiFh2lKTsghCZyaJzOOlh3UAmkKAP4mUgHPnetv4OHtJBrYtRiyim-oYvSgKN2MIdvrnW-2gIZJp6yWs/s400/twitter.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; margin: 0 0 0 5px;}     .mbtbar .emailsub{border-bottom: 1px solid #e6e6e6; padding: 15px 0 20px 0; float: left; width: 100%; font-family: Helvetica, Arial;}     .mbtbar .emailsub .emailicon{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYT4UWfCa88aEE3wdMWd_jXkqISemeubgnDL4S_GPxTwTgRqlkpCk7eyvXUs6jbcdQRuLjH3CVN0ZmnBB1AKEY23MOYxGRQOuDFjE2q3JNvNBW82TIb6tNV474jdIg095tT9KNLYA1A1k/s400/email.png) no-repeat left center; float: left; padding: 5px 15px 0px 35px; margin: 0 0 0 5px; width: 300px; height: 28px; line-height: 28px; vertical-align: middle; font-size: 14px; color: #333; }     .mbtbar .emailsub .emailupdatesform{margin: 15px 0 5px 5px; width: 300px; float: left;}     .mbtbar .emailsub .emailupdatesform input.emailupdatesinput{background: #fff !important; float: left; border: 1px solid #d2d2d2; padding: 0px 8px 0px 8px; color: #a19999; font-size: 12px; height: 25px; width: 200px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}     .mbtbar .emailsub .emailupdatesform input.joinemailupdates{background:-moz-linear-gradient(top,#bf0100 0%,#ac0100 100%); background:-webkit-gradient(linear,left top,left bottom,from(#bf0100),to(#ac0100)); border: 1px solid #ac0100; text-transform: uppercase; color: #fff; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}     </style>     <!--[if IE 7]>      <style>      .mbtbar .count span.bigcount{color:#F17C18; font-size: 24px; font-family: Helvetica, Arial; line-height: 34px; vertical-align: middle; }     .mbtbar .emailsub .emailupdatesform input.joinemailupdates{background:#AC0100; border: 1px solid #AC0100; text-transform: uppercase; color: #ffffff; font-weight:bold; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; }      </style>      <![endif]-->     <div class="mbtbar"><div class="count">Join <span class="bigcount">1807+</span> People Following MBT</div><div class="subicons"><div class="rssicon"><a href="http://www.mybloggertricks.com/feeds/posts/default" target="_blank">RSS</a></div><div class="fbicon"><a href="http://www.facebook.com/pages/My-Blogger-Tricks/147104632016744" target="_blank" rel="nofollow">Facebook</a></div><div class="twittericon"><a href="http://twitter.com/mybloggertricks" target="_blank" rel="nofollow">Twitter</a></div></div>      <div class="emailsub">      <div class="emailicon">Stay Updated via Email Newsletter</div>      <div class="emailupdatesform">      <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=tntbystc', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="emailupdatesinput" name="email" value="Enter your email..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email...&#39;;}" onfocus="if (this.value == &#39;Enter your email...&#39;) {this.value = &#39;&#39;;}" type="text" /><input value="tntbystc" name="uri" type="hidden" /><input value="Join" class="joinemailupdates" type="submit" /></form></div></div></div>

Kết thúc:

Nhấn nút Save lưu lại hộp HTML/JavaScrip. và cho chạy thử ứng dụng chương trình.
Chúc các bạn vui vẽ với công cụ mình vừa tạo.

Tham khảo mã Code BloggerTrix.com

Socializer Widget by Nguyen D. Khanh

SOCIALIZE IT →

Tweet

FOLLOW US →

SHARE IT →

Các bạn có thể tham khảo thêm nhiều kiến thức từ các bài viết mà mình đã SEO bằng các Từ khóa bên dưới bài đăng nầy để tìm hiểu thêm về các khái niệm và ứng dụng có liên quan nhé..