Giao diện sẽ như này nhé
Còn đây là code:
Sau khi copy code
Truy cập vào phần “Bố cục” – Nhấn “Thêm tiện ích” bên widget. Thêm Widget “HTML/Javascript”
Dán đoạn code vào rùi lưu lại
<style type="text/css">/*<!CDATA[*/#w2b-mashable{width:300px;margin:auto;padding:0;}.w2b-googleplus {height: 107px;}.w2b-facebook {background:#ffffff;border: 1px solid #DCDCDC;margin-top: -2px;padding: 5px 10px;}.w2b-gplusone {background-color: #f5fcfe;border: 1px solid #d8e6eb;border-top: 1px solid white;font-size: .87em;color: black;padding: 9px 0 0 11px;line-height: 24px;height:30px;}.w2b-gplusone span {display: inline-block;vertical-align: middle;height: 20px;margin-top: -17px;font-size: 11px;font-family: "Arial","Helvetica",sans-serif;}.w2b-twitter {background-color: #eef9fd;border: 1px solid #c7dbe2;border-top: 0;}.w2b-twitter a.twitter-follow-button {display: block;}.w2b-twitter iframe {margin: 9px 11px;}.w2b-sociallinks {background-color: #eef9fd;border: 1px solid #b6d0da;border-top: 1px solid #eff5f7;padding: 10px 11px;overflow: hidden;}.w2b-sociallinks a {text-shadow: 1px 1px white;}.w2b-sociallinks .w2b-social {list-style: none;overflow: hidden;margin: 0 !important;padding: 0 !important;}.w2b-sociallinks .w2b-social li {border:0 none !important;float: left;line-height: 1;padding: 2px 0 4px 20px !important;margin-bottom: 3px;width: 70px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZiP9FKYSztXXlBUgb9tKLH9rrHhzAd89f3NmpbedgPFei_j23C80DLlPKMogXJByor-Kit4-940MqXukd0oJlOV-tn52Ok2jBBgs5Tst3EQTF2U4wiLJvDso7ZLnMwXy5cBqlPGpfdFnA/s1600/w2b_socialsprite.png) no-repeat;font-size: 12px;}.w2b-sociallinks .w2b-social li a {display: block;font-weight: bold;color: #1E598E;text-decoration: none;text-shadow: 1px 1px 1px #fff;}.w2b-sociallinks .w2b-social li a:hover {text-decoration: underline;}.w2b-sociallinks .w2b-social li.facebook {background-position: 0 -450px !important;}.w2b-sociallinks .w2b-social li.twitter {background-position: 0 -150px !important;}.w2b-sociallinks .w2b-social li.youtube {background-position: 0 -90px !important;}.w2b-emailbox {background-color: #43A3E6;border: 0px solid #b6d0da;border-top: 1px solid #eff5f7;padding: 12px 16px;overflow: hidden;}.w2b-emailbox form{width:100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;}.w2b-emailbox input.emailu {float:left;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;color: #999;padding: 7px 10px 8px;width: 100%;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;font-size: 13px;}.w2b-emailbox input.emailu:focus {color: #333;}.w2b-emailbox input.submitu {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;color: white;padding: 7px 14px;font-weight: bold;font-size: 12px;float: right;cursor: pointer;}.w2b-emailbox input.submitu:hover {text-decoration: none;}.w2bDefault {border: 1px solid #cc7c00;text-shadow: #d08d00 1px 1px 0;background-color: #ff9b00;background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#ffca00),color-stop(1,#ff9b00));background: -webkit-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -moz-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -o-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -ms-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: linear-gradient(center top,#ffca00 0,#ff9b00 100%);}.w2bDefault:hover {background-color: #ff9b00;background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#ffe480),color-stop(1,#ff9b00));background: -webkit-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -moz-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -o-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -ms-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: linear-gradient(center top,#ffe480 0,#ff9b00 100%);}.w2b-moresubs {background: none repeat scroll 0 0 #EBEBEB;border-style: solid;border-width: 1px;border-color: #fff #ccc #ccc;padding: 3px 8px 3px 3px;text-align: right;font-size: 7px;letter-spacing: 1px;}.w2b-moresubs a {display: inline-block;font-weight: bold;color: #1E598E;text-decoration: none;text-shadow: 1px 1px 1px #fff;}/*]]>*/</style> <div id="w2b-mashable"> <div class="w2b-googleplus"> <script type="text/javascript"> /*<![CDATA[*/ window.___gcfg = {lang: 'en'}; (function(){ var po = document.createElement("script"); po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(po, s); })(); /*]]>*/ </script> <div class="g-plus" data-href="https://plus.google.com/+NguyenAris" data-width="300" data-height="69" data-theme="light"></div> </div> <div class="w2b-facebook"> <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Ffacebook.com%2Farisvnn&send=false&layout=standard&width=280&show_faces=true&action=like&colorscheme=light&font=arial&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:280px; height:66px;" allowtransparency="true"></iframe> </div> <div class="w2b-gplusone"> <script type="text/javascript">/*<![CDATA[*/ (function() { var po = document.createElement("script"); po.type = "text/javascript"; po.async = true; po.src = "https://apis.google.com/js/plusone.js"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(po, s); })();/*]]>*/ </script> <div class="g-plusone" data-size="medium" data-href="http://arisvn.blogspot.com/"></div> <span>Recommend on Google</span> </div> <div class="w2b-twitter"> <a href="https://twitter.com/arisvnn" class="twitter-follow-button" data-show-count="true">Follow @technogeekzone</a> <script type="text/javascript">/*<![CDATA[*/!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");/*]]>*/</script> </div> <div class="w2b-sociallinks"> <ul class="w2b-social"> <li class="facebook"><a href="https://www.facebook.com/arisvnn">Facebook</a></li> <li class="twitter"><a href="https://twitter.com/arisvnn">Twitter</a></li> <li class="youtube"><a href="https://www.youtube.com/user/NguyenAris">Youtube</a></li> </ul> </div> <div class="w2b-emailbox"> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=http://feeds.feedburner.com/arisvn', 'popupwindow', 'scrollbars=yes,width=550,height=520'); return true" target="popupwindow"> <table width="100%"> <tr> <td> <input class="emailu" name="email" placeholder="Enter your email" type="text"/> </td> <td width="64px"> <input class="submitu w2bDefault" type="submit" value="Subscribe"/> </td> </tr> </table> <input name="uri" type="hidden" value="technogeekzone"/> <input name="loc" type="hidden" value="en_US"/> </form> </div> </div>
Sửa các thông số cho phù hợp với blog của bạn
Width 300px : Chiều ngang khung
https://plus.google.com/+NguyenAris : thay địa chỉ googl+ của bạn tại đây
arisvnn : chỉ thay tên fanpge ngay đây thui
http://arisvn.blogspot.com : thay bằng địa chỉ blog của bạn
https://www.facebook.com/arisvnn : thay bằng địa chỉ facebook của bạn
https://twitter.com/arisvnn : thay bằng địa chỉ twitter của bạn
https://www.youtube.com/user/NguyenAris : thay bằng địa chỉ kênh youtube của bạn
http://feeds.feedburner.com/arisvn : thay bằng feed của bạn
Chỉnh sửa lại phần hướng dẫn cho rõ ràng chút vì tác giả ko bôi đen những chỗ cần thay trong 1 đoạn code dài loằng ngoằng nên rất khó nhìn
Nguồn : sưu tầm trên net
