Hướng dẫn thêm Widget mạng xã hội phong cách Metro cho blogger

Hiện nay các mạng xã hội đang phát triển mạnh mẽ, nhanh chóng như Facebook, Google +, Twitter ... Nếu bạn muốn quảng bá trang blog của mình đến với mọi người, thì yêu cầu xây dựng Profile mạng xã hội là vô cùng cần thiết. Do đó, hôm nay Thái Nguyễn sẽ chia sẻ cho các blogger một số kiểu Widget mạng xã hội phong cách Metro đang rất thịnh hành, khá đẹp và hấp dẫn hiện nay.

Hướng dẫn cài đặt :
1. Vào trang chủ Blooger -> chọn trang Blog của bạn -> vào Bố cục -> Thêm tiện ích -> HTML/Javascript 
2. Chọn một trong các kiểu Widget mạng xã hội phong cách Metro sau đây dán vào tiện ích HTML/Javascript -> Lưu lại

Metro UI v1.0

Metro UI v1.0

<a href='ORKUT' onclick='javascript:window.open(this.href, "hangoutBC", "toolbar=0, location=0, statusbar=1, menubar=0, scrollbars=no, width=1000, height=700"); return false;' style='text-decoration: none;' title='Orkut'><img alt='Orkut' src='http://icons.iconarchive.com/icons/danleech/simple/48/orkut-icon.png' style='border:0; width:45px; height:45px;'/></a> <a href='TWITTER' onclick='javascript:window.open(this.href, "hangoutBC", "toolbar=0, location=0, statusbar=1, menubar=0, scrollbars=no, width=1000, height=700"); return false;' style='text-decoration: none;' title='Twitter'><img alt='Twitter' src='http://icons.iconarchive.com/icons/danleech/simple/48/twitter-icon.png' style='border:0; width:45px; height:45px;'/></a> <a href='FACEBOOK' onclick='javascript:window.open(this.href, "hangoutBC", "toolbar=0, location=0, statusbar=1, menubar=0, scrollbars=no, width=1000, height=700"); return false;' style='text-decoration: none;' title='Facebook'><img alt='Facebook' src='http://icons.iconarchive.com/icons/danleech/simple/48/facebook-icon.png' style='border:0; width:45px; height:45px;'/></a> <a href='GOOGLE+' onclick='javascript:window.open(this.href, "hangoutBC", "toolbar=0, location=0, statusbar=1, menubar=0, scrollbars=no, width=1000, height=700"); return false;' style='text-decoration: none;' title='Google +'><img alt='Google +' src='http://icons.iconarchive.com/icons/danleech/simple/48/google-plus-icon.png' style='border:0; width:45px; height:45px;'/></a>

Chú ý: Thay các chữ ORKUT, TWITTER, FACEBOOK, GOOGLE+ lần lượt thành các địa chỉ mạng xã hội tương ứng trang blog của bạn. Tương tự cho phiên bản Metro UI v2.0 và Metro UI v3.0

Metro UI v2.0

Metro UI v2.0

<ul id='jocial'> <li><a class='icon facebook' href='http://www.facebook.com/digitalhubinc fan page facebook/'></a></li> <li><a class='icon twitter' href='http://twitter.com/username/'></a></li> <li><a class='icon googleplus' href='https://plus.google.com/u/0/digitalhubinc profil google+/'></a></li> <li><a class='icon rss' href='http://feeds.feedburner.com/digitalhubinc feed rss'></a></li> </ul> <style> #jocial{width: 310px;float: left;margin-top: 10px;} #jocial li{position:relative; cursor:pointer; padding: 0 !important;}#jocial .facebook, .googleplus, .rss, .twitter{position: relative;-moz-transition: all 0.4s ease-in-out;-webkit-transition: all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out;z-index: 5;display: block;float: left;margin: 1px;}#jocial .icon{overflow:hidden;}#jocial .facebook{width: 150px; height: 150px; background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinf0s8aoCZnASf7Z7Wg0ALoxWPijS8lYVpufKGIdMqNF2P4cbguJVoFSuJM0CGxGfnYX39QoQkxR5IEzYAupzLV9mMzsn8WDp9Io3kXwLh5qwQ-LCd3ik496dznzPQXZ5-4PRG9NJIJegE/s1600/facebook.png") no-repeat center center;}#jocial .twitter{width: 150px;height: 74px;background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8-IKY64FRGN4qsjlmGIDExzwufW1KNTbO4tfiVWzfwH7lDf4NGItgSsJ6ep_3niV6bQb1CcDGGERlJ-9aOnustTrjuwTS-thXo7zC0GaY9enPGSuojwnf1k0_bupQ71Zt1a2yDdHvcLsZ/s1600/Twitter.png") no-repeat center center;}#jocial .googleplus{width: 150px;height: 74px;background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7Qk-xfxaCV5rqb_4GCiIwTRAiG_UMZMeDbTMo1-_JdlqmpVq_gm4pG41WmEduhwhI0NwD9C-x0J8KJJcyqiV9nV0W275bMPIdc0O2ZMV4foyOqRVzfGv0Dz9_M57CyTQHQZGpWNmVLsJt/s1600/google+plus.png") no-repeat center center;}#jocial .rss{ width: 302px;height: 74px;background: rgba(59,89,152,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg2AaiDh4GZjiiDb-NRzl9b9aaDTs4pFwlj7lvdPteafCzUBkedZ0eTP0279QDdM1PjB4BvOgInB8tWyhRy2O4yt9o49OuAKZgYnHO7t9Nhhe9Aw2JGB3vffZ87L2dlarstVIVSHk4oip-/s1600/rss.png") no-repeat center center;}#jocial li:hover .facebook{background-color:#3468B6;-moz-transition: all 0.1s ease-in-out;-webkit-transition: all 0.1s ease-in-out;}#jocial li:hover .twitter{background:rgba(64,153,255,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8-IKY64FRGN4qsjlmGIDExzwufW1KNTbO4tfiVWzfwH7lDf4NGItgSsJ6ep_3niV6bQb1CcDGGERlJ-9aOnustTrjuwTS-thXo7zC0GaY9enPGSuojwnf1k0_bupQ71Zt1a2yDdHvcLsZ/s1600/Twitter.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;-webkit-transition: all 0.1s ease-in-out;}#jocial li:hover .googleplus{background:rgba(228,69,36,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7Qk-xfxaCV5rqb_4GCiIwTRAiG_UMZMeDbTMo1-_JdlqmpVq_gm4pG41WmEduhwhI0NwD9C-x0J8KJJcyqiV9nV0W275bMPIdc0O2ZMV4foyOqRVzfGv0Dz9_M57CyTQHQZGpWNmVLsJt/s1600/google+plus.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;-webkit-transition: all 0.1s ease-in-out;}#jocial li:hover .rss{background:rgba(255,102,0,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg2AaiDh4GZjiiDb-NRzl9b9aaDTs4pFwlj7lvdPteafCzUBkedZ0eTP0279QDdM1PjB4BvOgInB8tWyhRy2O4yt9o49OuAKZgYnHO7t9Nhhe9Aw2JGB3vffZ87L2dlarstVIVSHk4oip-/s1600/rss.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;-webkit-transition: all 0.1s ease-in-out;}</style>

Metro UI v3.0

Metro UI v3.0

<style type='text/css'>#sidebar-subscribe-box{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHD5ew8mI3gu7shSyOqaODvOAmsBsUcQ-wSNMW_izPJU3Iv-OdPgeJXUb-x_sSksW9y_IPIjS14EY8FesLjDAps7tI10mWSFvcJWFJrhUoepsh-jymN0k5iM6-jbO0pQV9ySZyYK4CJHj2/s1600/colored-strip.png) repeat scroll 0 0 transparent;border:1px solid #aaa;border-radius:3px;padding:3px 0}.sidebar-subscribe-box-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpOAHnqLaIT_ukpty-zRTZYpWzw9jiftwmWCjUWqVCVHzGQGDz5QHdANevYZHMZFVdEtW9oErXIggCXKzwkJFeGwZNqN6G0fCkzlDFsVu7fjEM2zkog-Szho6r339ktDQU6dFT1Z7S-KUU/s1600/bg-pattern.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/AVvXsEgf7e7qXKpDVuy2qt8GJSS_AXut-3rhbgNtOBp2yOR6dfb1C6NG60NVzaXBY6OVfAm8_-t9gRsXzpu5Ck7DhKMf1N1judEEre722eCH6LCaP-OclPYI10NcasJB5BCOenLwxtNWSTX__R_C/s1600/sprites.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:95%}.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{background:#f5f5f5 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUgKsG4ba71SEhJgL0ICaUMDHUWFg2OEcBE_VQTXSW91Lqxu4oPpYkrp_fjd8FcAZZFVhZZ6i9oqVEjIPR-yrfn-rpyKUx8cNCOdqG1WT5ll2jnXHp6EsGFQRzhHQKkJKU_DFV-ghA-NL8/s0/bg-pattern.png) repeat top left;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%}p#rb_socialicons img { /* Spinning Social Icons Widget By www.digitalhubinc.com/ */ -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out;}p#rb_socialicons img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg);}/* Spinning Social Icons Widget By www.digitalhubinc.com/ */</style><div id="sidebar-subscribe-box"> <div class="sidebar-subscribe-box-wrapper"> <div class="sidebar-subscribe-box-form"> <center> <p id="rb_socialicons"> <a href="http://feeds.feedburner.com/digitalhubinc"> <img alt="Click Me" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnhyaoivgENM4_0NrGwL36eMt4W0-I9PBHVQ98qs0lYTOPJXwG_Fx_yT9DxrKGSotGDiCql-7yZPqJBk8DiQNX-_5z7p02DjCpAKR33G6dw9nFMFpf-UHkBIO_oL4hNf5Vq5rZwgLWGQPo/s1600/rss-inactive.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtZUJTz8O0OUci0qo7X9_tmbe-fJ0NeXFVgF6V7urUEo-rYcxXmJRVZ9CvcHmfaUPSptP3E4PWLTnd2mLQob7CLREyexoKahEesVuPmjHVQ4EcP2PNLNPtBtkiKFB2H22VSeuUgb4IVC5g/s1600/rss.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnhyaoivgENM4_0NrGwL36eMt4W0-I9PBHVQ98qs0lYTOPJXwG_Fx_yT9DxrKGSotGDiCql-7yZPqJBk8DiQNX-_5z7p02DjCpAKR33G6dw9nFMFpf-UHkBIO_oL4hNf5Vq5rZwgLWGQPo/s1600/rss-inactive.png" /></a><a href="http://facebook.com/digitalhubinc"><img alt="Click Me" hieght="100" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjte3-D9FX6S0PVBV63TN7FkZFTBXy6vaIVa8cUEfIQyWpgqtKBCW5RafMQS0ZFMK-WFQwieBx5yeaLJgRcQx2ZxuawcNTBQm0QnShKMhyphenhyphenmjpG1oWFwLh5H-eIgUA3BTqQQrOj_k903HTxz/s1600/facebook-inactive.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaVMZPU3uEwHuoImFuMzoo9euPnKH66OldqgFpv2Vjtc59xgkYGJz_DNQ8JgZEA737C_qCrDsOECmcgnRHYOuPmKUe6aBHOhg0nIAKf1aUjpwLjQwBA21f6dSR2d19c9_TuEFlRS_L68W3/s1600/facebook.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjte3-D9FX6S0PVBV63TN7FkZFTBXy6vaIVa8cUEfIQyWpgqtKBCW5RafMQS0ZFMK-WFQwieBx5yeaLJgRcQx2ZxuawcNTBQm0QnShKMhyphenhyphenmjpG1oWFwLh5H-eIgUA3BTqQQrOj_k903HTxz/s1600/facebook-inactive.png" /></a><a href="http://twitter.com/digitalhubinc"><img alt="Click Me" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiubJqqk32WGhdzYiWq-UTvmUXsv2_DHTNeeQ3wsu8GBIgtAT6tXDBAnRK1KMB1CwE47PgjBb3IsIr47CDf9j3fXnrFJ9FDHACa1Shh_65hyCYSRS8D55dRxMKKnZqavbm2lmM1MgVSk0k4/s1600/twitter-inactive.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipncmCHrFUnJPjfTG-71LIQJHmrkWjm9w1ySrWR_lEpekDQ-WwNx_DdpaPDGFlKDbsleQimRgojZz03Tji19Af-JfTGaZB_evH2aEIYoWLz4MnYtnvWSUKuA075XA8IsMJkujAucv_CDCk/s1600/twitter.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiubJqqk32WGhdzYiWq-UTvmUXsv2_DHTNeeQ3wsu8GBIgtAT6tXDBAnRK1KMB1CwE47PgjBb3IsIr47CDf9j3fXnrFJ9FDHACa1Shh_65hyCYSRS8D55dRxMKKnZqavbm2lmM1MgVSk0k4/s1600/twitter-inactive.png" /></a><a href="https://plus.google.com/116441114801311321617/"><img alt="Click Me" hieght="160" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg-Yudw8tY1qkDkt21Yo_i1rPSgkbogY08yAvwdHevOej9OV_De0AjCSXkctTFe2kSxPveDSL-ZSDZ7JlJTKEKByUAM0Wsx0E3CVu867XsA3Cnmu_PVWaFTcQR8u8INIVCC5AXw7_lhxhJ/s1600/google-plus-inactive.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtEIdjIkQyZjSgJG6F9oH1B5O38U1_ocuydpyG8oHDW7xNHZcIx_tg-aqwB0mzBKB8N68bNpIo2YiAD-M53A82RcsQEDFSmK8-_qIaMfa_TZ2oeq-GEuTNHxJJxzlacZ0AZ2hCczGzuRJU/s1600/google-plus.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg-Yudw8tY1qkDkt21Yo_i1rPSgkbogY08yAvwdHevOej9OV_De0AjCSXkctTFe2kSxPveDSL-ZSDZ7JlJTKEKByUAM0Wsx0E3CVu867XsA3Cnmu_PVWaFTcQR8u8INIVCC5AXw7_lhxhJ/s1600/google-plus-inactive.png" /></a><a href="http://pinterest.com/digitalhubinc/"><img alt="Click Me" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy1PfpAHZ_iZvfQ8-iW8ezX3OmHGNAwffcQlYKeznyke6xqb75brCpmG-5v5r7kR_-YEo0oqPDda0ZeF8-rp6xDYotXW9X-UbVXax6hyphenhyphen_-2lUGRMBer6pqrCvKjHqnmu0WvDtlGKpZ1eQe/s1600/pinterest-inactive.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0d03BIFHe4wtEtHifvRqHRMEmMKpH9ZySUHipisN_U7YrVoBwacngpSv8hn_uJ3n7MnVuQzrNRPQrF1SE0X066dYwojpb_LiC8_RJdUY32I6_ngk8XKb7iqPi45J_qDjmy2Hj54IJ-X0u/s1600/pinterest.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy1PfpAHZ_iZvfQ8-iW8ezX3OmHGNAwffcQlYKeznyke6xqb75brCpmG-5v5r7kR_-YEo0oqPDda0ZeF8-rp6xDYotXW9X-UbVXax6hyphenhyphen_-2lUGRMBer6pqrCvKjHqnmu0WvDtlGKpZ1eQe/s1600/pinterest-inactive.png" /></a><a href="mailto:digitalhubinc@gmail.com"><img alt="Click Me" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYEM2bErY3TAswas_1J8D0frnCmGPfy6w8wCb9eKFwb0PfhZ4JxrgtVVwpA_itMGrqDyV_hzOtNsL5VQ0pmsIhAFc-g4ALRdk9XBIn7Rq73YGbctX8tj5badmq-pFdrP2Th_UUSi-Zwkp4/s1600/email-inactive.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghZmkijBV9h-uszvHaSGhtIsDCj_-tgTZSgM-weEdQxiPuQSlyxa8SmT42NuaTN_AilgeEZ7XLmmdgdemlgYmABLIDH3YwJcJCZDHPez-Kh1XNNZWzQ-QsGM_r6vtWMHraMFOK24kL0YPe/s1600/email-shadow.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYEM2bErY3TAswas_1J8D0frnCmGPfy6w8wCb9eKFwb0PfhZ4JxrgtVVwpA_itMGrqDyV_hzOtNsL5VQ0pmsIhAFc-g4ALRdk9XBIn7Rq73YGbctX8tj5badmq-pFdrP2Th_UUSi-Zwkp4/s1600/email-inactive.png" /> </a></p> </center> <form action="http://feedburner.google.com/fb/a/mailverify?uri=digitalhubinc" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=digitalhubinc', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"> <input name="uri" type="hidden" value="digitalhubinc" /><input name="loc" type="hidden" value="en_US" /><input class="sidebar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="Enter your email address :)"/><input class="sidebar-subscribe-box-email-button" title="" type="submit" value="Subscribe Now !" /></form> </div> </div> </div> <style></style>

Chúc các bạn thành công!
Nếu các bạn cảm thấy bài viết có ích hãy like và chia sẻ với bạn bè.

------- Thái Nguyễn -------
thuthuattienich.blogspot.com