Metro UI l\u00e0 m\u1ed9t ki\u1ec3u giao di\u1ec7n d\u1ef1a tr\u00ean s\u1ef1 s\u1eafp x\u1ebfp font ch\u1eef v\u00e0 c\u00e1c m\u1ea3ng vu\u00f4ng \u0111\u01b0\u1ee3c Microsoft ph\u00e1t tri\u1ec3n. N\u00f3 b\u1eaft \u0111\u1ea7u \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 thi\u1ebft k\u1ebf cho windows phone 7 v\u00e0 b\u00e2y gi\u1edd l\u00e0 Windows 8.<\/p>\n\n\n\n\n\n\n\n
Microsoft r\u1ea5t coi tr\u1ecdng Metro UI, n\u00f3 kh\u00f4ng ph\u1ea3i l\u00e0 m\u1ed9t phong c\u00e1ch m\u00e0 l\u00e0 m\u1ed9t tri\u1ebft l\u00fd thi\u1ebft k\u1ebf m\u1edbi: \u0111\u01a1n gi\u1ea3n, hi\u1ec7n \u0111\u1ea1i, thu\u1ea7n ch\u1ea5t c\u00f4ng ngh\u1ec7. N\u00f3 \u0111\u1ed1i ch\u1ecdi ho\u00e0n to\u00e0n v\u1edbi phong c\u00e1ch c\u1ee7a Apple: tinh t\u1ebf, b\u00f3ng b\u1ea9y, sang tr\u1ecdng.<\/p>\n\n\n\n
Trong b\u00e0i vi\u1ebft n\u00e0y m\u00ecnh s\u1ebd h\u01b0\u1edbng d\u1eabn c\u00e1c b\u1ea1n “T\u1ea1o Menu Theo Phong C\u00e1ch Metro UI Cho Blogger”. Hy V\u1ecdng website c\u1ee7a b\u1ea1n c\u00f3 th\u00eam 1 ki\u1ec3u menu \u0111\u1eb9p.<\/p>\n\n\n\n
Sau \u0111\u00e2y l\u00e0 c\u00e1c b\u01b0\u1edbc th\u1ef1c hi\u1ec7n:<\/p>\n\n\n\n
1. \u0110\u0103ng nh\u1eadp v\u00e0o t\u00e0i kho\u1ea3n Blogger 5. Ch\u00e8n code sau v\u00e0o n\u01a1i b\u1ea1n mu\u1ed1n n\u00f3 hi\u1ec3n th\u1ecb:<\/p>\n\n\n Ch\u00fac c\u00e1c b\u1ea1n th\u00e0nh c\u00f4ng!<\/p>\n","protected":false},"excerpt":{"rendered":" Metro UI l\u00e0 m\u1ed9t ki\u1ec3u giao di\u1ec7n d\u1ef1a tr\u00ean s\u1ef1 s\u1eafp x\u1ebfp font ch\u1eef v\u00e0 c\u00e1c m\u1ea3ng vu\u00f4ng \u0111\u01b0\u1ee3c Microsoft […]<\/p>\n","protected":false},"author":6,"featured_media":7942,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[170],"tags":[],"class_list":["post-4566","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blogger"],"views":573,"_links":{"self":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts\/4566","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/comments?post=4566"}],"version-history":[{"count":6,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts\/4566\/revisions"}],"predecessor-version":[{"id":7985,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/posts\/4566\/revisions\/7985"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/media\/7942"}],"wp:attachment":[{"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/media?parent=4566"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/categories?post=4566"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tapchicntt.com\/rest-api\/wp\/v2\/tags?post=4566"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
2. V\u00e0o ph\u1ea7n M\u1eabu (Template)
3. Ch\u1ecdn ch\u1ec9nh s\u1eeda HTML (Edit HTML)
4. Ch\u00e8n code b\u00ean d\u01b0\u1edbi v\u00e0o tr\u01b0\u1edbc th\u1ebb ]]>< \/b:skin ><\/code><\/strong><\/p>\n\n\n\nbody {\n font-family: sans-serif;\n}\n\na {\n text-decoration: none;\n}\n\n.MTMetroMenu {\n width: 960px;\n margin: auto;\n}\n\n@media screen and (max-width:960px) {\n .MTMetroMenu {\n width: 100%;\n };\n}\n\n\/* MTMetroMenu *\/\n.MTMetroMenu {\n position: relative;\n}\n\n.om-nav {\n position: absolute;\n width: 100%;\n z-index: 999;\n display: none;\n}\n\n.om-ctrlbar {\n width: 100%;\n height: 48px;\n}\n\n.om-ctrlitems {\n margin: auto;\n padding: 0px;\n height: 48px;\n display: inline-block;\n text-align: center;\n}\n\n.om-ctrlitem {\n height: 48px;\n width: 48px;\n display: none;\n cursor: pointer;\n float: left;\n opacity: 0.5;\n -ms-filter: &amp;amp;quot;\n progid: DXImageTransform.Microsoft.Alpha(Opacity=50)&amp;amp;quot;\n !important;\n filter: alpha(opacity=50) !important;\n \/* For IE8 and earlier *\/;\n}\n\n.om-ctrlitem:hover {\n opacity: 0.8;\n -ms-filter: &amp;amp;quot;\n progid: DXImageTransform.Microsoft.Alpha(Opacity=80)&amp;amp;quot;\n !important;\n filter: alpha(opacity=80) !important;\n \/* For IE8 and earlier *\/;\n}\n\n.om-activectrlitem {\n opacity: 1 !important;\n -ms-filter: &amp;amp;quot;\n progid: DXImageTransform.Microsoft.Alpha(Opacity=100)&amp;amp;quot;\n !important;\n filter: alpha(opacity=100) !important;\n \/* For IE8 and earlier *\/;\n}\n\n.om-controlitems {\n width: 960px;\n margin: auto;\n}\n\n.om-controlitem {\n height: 48px;\n cursor: pointer;\n}\n\n.om-closenav {\n float: left;\n}\n\n.om-movenext {\n float: right;\n}\n\n.om-itemholder {\n margin: auto;\n padding: 20px 0px;\n}\n\n@media screen and (max-width:960px) {\n .om-closenav {\n position: absolute;\n z-index: 9999;\n left: 0;\n top: 0;\n }\n\n .om-movenext {\n position: absolute;\n z-index: 9999;\n right: 0;\n top: 0;\n }\n\n .om-controlitems {\n width: 100%;\n }\n\n .om-itemholder {\n width: 100%;\n };\n}\n\n.om-centerblock {\n display: inline-block;\n}\n\n.om-item {\n display: none;\n}\n\n.om-showitem {\n margin: 5px;\n float: left;\n display: none;\n}\n\/* END MTMetroMenu *\/\n\n\/* TILE BUTTONS *\/\n\/* Standar Buttons *\/\n.tile-bt {\n text-align: center;\n cursor: pointer;\n width: 90px;\n height: 90px;\n}\n\n.tile-bt a {\n display: block;\n padding-top: 12px;\n text-decoration: !important;\n}\n\n.tile-bt img {\n margin: 0 auto 0 auto;\n padding-bottom: 5px;\n height: 48px;\n width: 48px;\n position: relative;\n display: block;\n}\n\n.tile-bt span {\n font-size: 12px;\n padding-bottom: 10px;\n display: block;\n}\n\n.tile-bt:active {\n opacity: 0.5;\n}\n\/* End Standard Buttons *\/\n\n\/* Large Buttons *\/\n.tile-bt-large {\n width: 190px;\n height: 90px;\n line-height: 90px;\n text-align: center;\n cursor: pointer;\n}\n\n.tile-bt-large a {\n display: block;\n text-decoration: !important;\n}\n\n.tile-bt-large img {\n vertical-align: middle;\n margin: auto;\n padding: 0px;\n position: relative;\n width: 48px;\n height: 48px;\n}\n\n.tile-bt-large span {\n vertical-align: middle;\n display: inline;\n}\n\n.tile-bt-large:active {\n opacity: 0.5;\n}\n\/* End Large Buttons *\/\n\/* Extralarge Buttons *\/\n.tile-bt-extralarge {\n text-align: center;\n cursor: pointer;\n width: 190px;\n height: 190px;\n}\n\n.tile-bt-extralarge a {\n display: block;\n padding-top: 52px;\n text-decoration: !important;\n}\n\n.tile-bt-extralarge img {\n margin: 0 auto 0 auto;\n padding-bottom: 22px;\n height: 80px;\n width: 80px;\n position: relative;\n display: block;\n}\n\n.tile-bt-extralarge span {\n font-size: 14px;\n padding-bottom: 20px;\n display: block;\n}\n\n.tile-bt-extralarge:active {\n opacity: 0.5;\n}\n\/* End Extralarge Buttons *\/\n\n\/* END TILE BUTTONS *\/\n\n\/* SHADOW LIST *\/\n.shadow-white, .shadow-black, .shadow-blue, .shadow-green, .shadow-red {\n \/*display:inline-block;*\/;\n}\n\n.shadow-white:hover {\n box-shadow: 0px 0px 6px 3px #fff;\n -webkit-box-shadow: 0px 0px 6px 3px #fff;\n -moz-box-shadow: 0px 0px 6px 3px #fff;\n -o-box-shadow: 0px 0px 6px 3px #fff;\n -ms-box-shadow: 0px 0px 6px 3px #fff;\n}\n\n.shadow-blue:hover {\n box-shadow: 0px 0px 6px 3px #38D1F7;\n -webkit-box-shadow: 0px 0px 6px 3px #38D1F7;\n -moz-box-shadow: 0px 0px 6px 3px #38D1F7;\n -o-box-shadow: 0px 0px 6px 3px #38D1F7;\n -ms-box-shadow: 0px 0px 6px 3px #38D1F7;\n}\n\n.shadow-green:hover {\n box-shadow: 0px 0px 6px 3px #AACA37;\n -webkit-box-shadow: 0px 0px 6px 3px #AACA37;\n -moz-box-shadow: 0px 0px 6px 3px #AACA37;\n -o-box-shadow: 0px 0px 6px 3px #AACA37;\n -ms-box-shadow: 0px 0px 6px 3px #AACA37;\n}\n\n.shadow-red:hover {\n box-shadow: 0px 0px 6px 3px #E81750;\n -webkit-box-shadow: 0px 0px 6px 3px #E81750;\n -moz-box-shadow: 0px 0px 6px 3px #E81750;\n -o-box-shadow: 0px 0px 6px 3px #E81750;\n -ms-box-shadow: 0px 0px 6px 3px #E81750;\n}\n\n.shadow-black:hover {\n box-shadow: 0px 0px 6px 3px #444;\n -webkit-box-shadow: 0px 0px 6px 3px #444;\n -moz-box-shadow: 0px 0px 6px 3px #444;\n -o-box-shadow: 0px 0px 6px 3px #444;\n -ms-box-shadow: 0px 0px 6px 3px #444;\n}\n\/* END SHADOW LIST *\/\n\/* BACKGROUND LIST *\/\n\/* Solid Colors *\/\n.solid-blue {\n background: #00BBE2;\n}\n\n.solid-blue-2 {\n background: #2C84EE;\n}\n\n.solid-darkblue {\n background: #044E94;\n}\n\n.solid-violetred {\n background: #781766;\n}\n\n.solid-red {\n background: #E51400;\n}\n\n.solid-red-2 {\n background: #E81750;\n}\n\n.solid-pink {\n background: #FF539B;\n}\n\n.solid-purple {\n background: #D02090;\n}\n\n.solid-orange {\n background: #FB8F02;\n}\n\n.solid-orange-2 {\n background: #FF6600;\n}\n\n.solid-orange-3 {\n background: #DD5F37;\n}\n\n.solid-coral {\n background: #CD5B45;\n}\n\n.solid-green {\n background: #67B239;\n}\n\n.solid-green-2 {\n background: #96BF01;\n}\n\n.solid-darkgreen {\n background: #016C38;\n}\n\n.solid-olive {\n background: #999900;\n}\n\n.solid-grass {\n background: #CDCD00;\n}\n\n.solid-darkred {\n background: #5F0000;\n}\n\n.solid-gold {\n background: #FEE9AE;\n}\n\n.solid-yellow {\n background: #F7D100;\n}\n\n.solid-black {\n background: #000;\n}\n\n.solid-smoke {\n background: #F5F5F5;\n}\n\/* End Solid Colors *\/\n\n\/* MISC *\/\n.clearspace {\n clear: both;\n}\n\n.floatleft {\n float: left;\n}\n\n.floatright {\n float: right;\n}\n\n.none {\n display: none !important;\n width: 0px !important;\n}\n\n.light-text {\n color: #fff;\n}\n\n.dark-text {\n color: #1e1e1e;\n}\n\n.gradient {\n background: -moz-linear-gradient(-45deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 100%);\n \/* FF3.6+ *\/\n background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0.3)));\n \/* Chrome,Safari4+ *\/\n background: -webkit-linear-gradient(-45deg, rgba(255,255,255,0) 00%,rgba(255,255,255,0.3) 100%);\n \/* Chrome10+,Safari5.1+ *\/\n background: -o-linear-gradient(-45deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%);\n \/* Opera 11.10+ *\/\n background: -ms-linear-gradient(-45deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%);\n \/* IE10+ *\/\n background: linear-gradient(-45deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%);\n \/* W3C *\/;\n}\n\n.margin-5 {\n margin: 5px;\n}\n<\/pre><\/div>\n\n\n\n<div class='MTMetroMenu'>\n<div class='tile-bt-extralarge solid-violetred shadow-black margin-5 floatleft MTMetroMenu' data-navid='om-nav'>\n<a class='gradient' href='#'>\n<img alt='' src='http:\/\/3.bp.blogspot.com\/-Ka45aKZTBUI\/VQwak2rnnmI\/AAAAAAAAA50\/mzOvKiiPLHw\/s1600\/i-home.png'\/>\n<span class='light-text'>Homepage<\/span>\n<\/a>\n<\/div>\n\n<div class='tile-bt-large solid-coral shadow-red margin-5 floatleft MTMetroMenu' data-navid='om-nav'>\n<a class='gradient' href='#'>\n<img alt='' src='http:\/\/3.bp.blogspot.com\/-vxYtWi8a5HU\/VQwa1vGsarI\/AAAAAAAAA58\/Pp223EMQ3SE\/s1600\/i-messanger.png'\/>\n<span class='light-text'>About US<\/span>\n<\/a>\n<\/div>\n\n<div class='tile-bt solid-purple shadow-blue margin-5 floatleft MTMetroMenu' data-navid='om-nav2'>\n<a class='gradient' href='#'>\n<img alt='' src='http:\/\/4.bp.blogspot.com\/-pzzZwVdf3Fk\/VQwbEGOL5eI\/AAAAAAAAA6E\/oXvZ4CkThYk\/s1600\/i-rss.png'\/>\n<span class='light-text'>Rss Feeds<\/span>\n<\/a>\n<\/div>\n\n<div class='tile-bt-large solid-red shadow-red margin-5 floatleft MTMetroMenu' data-navid='om-nav'>\n<a class='gradient' href='#'>\n<img alt='' src='http:\/\/3.bp.blogspot.com\/-ImM68BYpVIc\/VQwbQ8vIHhI\/AAAAAAAAA6M\/mbpnHo5bnQ0\/s1600\/i-search.png'\/>\n<span class='light-text'>Search<\/span>\n<\/a>\n<\/div>\n\n<div class='tile-bt solid-darkred shadow-red margin-5 floatleft MTMetroMenu' data-navid='om-nav2'>\n<a class='gradient' href='#'>\n<img alt='' src='http:\/\/1.bp.blogspot.com\/-le0wbMumwMQ\/VDDYt5jougI\/AAAAAAAADQY\/0VRL-XEu2Fw\/s1600\/mail.png'\/>\n<span class='light-text'>Contact US<\/span>\n<\/a>\n<\/div>\n\n<div class='tile-bt solid-black shadow-black margin-5 floatleft MTMetroMenu' data-navid='om-nav2'>\n<a class='gradient' href='#'>\n<img alt='' src='http:\/\/3.bp.blogspot.com\/-DfnjVRT-4Ew\/VDDYtIAjVBI\/AAAAAAAADQM\/kOohDGbp5yA\/s1600\/help.png'\/>\n<span class='light-text'>Get HELP<\/span>\n<\/a>\n<\/div>\n\n<div class='tile-bt solid-orange shadow-black margin-5 floatleft MTMetroMenu' data-navid='om-nav2'>\n<a class='gradient' href='#'>\n<img alt='' src='http:\/\/3.bp.blogspot.com\/-v4PIcdfMdiY\/VDDYv9fVG4I\/AAAAAAAADRE\/TiNcolxM2Ic\/s1600\/youtbe.png'\/>\n<span class='light-text'>YouTube<\/span>\n<\/a>\n<\/div>\n\n<div class='tile-bt solid-darkblue shadow-blue margin-5 floatleft MTMetroMenu' data-navid='om-nav2'>\n<a class='gradient' href='#'>\n<img alt='' src='http:\/\/1.bp.blogspot.com\/-kUiJzBeUDk8\/VDDYs_LeKyI\/AAAAAAAADQE\/pG3FwxIN-sk\/s1600\/face.png'\/>\n<span class='light-text'>Facebook<\/span>\n<\/a>\n<\/div>\n\n<div class='tile-bt-large solid-blue shadow-blue margin-5 floatleft MTMetroMenu' data-navid='om-nav'>\n<a class='gradient' href='#'>\n<img alt='' src='http:\/\/2.bp.blogspot.com\/-tTdt8sH2YWE\/VDDYu3BXTmI\/AAAAAAAADQs\/2Z_FbbRCm2o\/s1600\/photo.png'\/>\n<span class='light-text'>Photos<\/span>\n<\/a>\n<\/div>\n\n<div class='tile-bt solid-olive shadow-green margin-5 floatleft MTMetroMenu' data-navid='om-nav2'>\n<a class='gradient' href='#'>\n<img alt='' src='http:\/\/4.bp.blogspot.com\/-C_MrIMJE8Ds\/VDDYuZbjohI\/AAAAAAAADQc\/1YTbPDXrsl0\/s1600\/music.png'\/>\n<span class='light-text'>Music<\/span>\n<\/a>\n<\/div>\n\n<div class='tile-bt-large solid-blue-2 shadow-blue margin-5 floatleft MTMetroMenu' data-navid='om-nav'>\n<a class='gradient' href='#'>\n<img alt='' src='http:\/\/3.bp.blogspot.com\/-2ohIIDGngGs\/VDDTnUQISrI\/AAAAAAAADP0\/8-ZbEwAhYYE\/s1600\/HBT.png'\/>\n<span class='light-text'>MT Blogger<\/span>\n<\/a>\n<\/div>\n<\/div>\n<\/pre><\/div>\n\n\n