{"id":2002,"date":"2019-09-10T10:16:24","date_gmt":"2019-09-10T03:16:24","guid":{"rendered":"http:\/\/dienthoai4.w2steam.com\/?p=2002"},"modified":"2019-09-10T10:16:24","modified_gmt":"2019-09-10T03:16:24","slug":"huong-dan-tao-float-menu-tuy-chinh-dep-cho-website-wordpress","status":"publish","type":"post","link":"https:\/\/hosting.conasi.vn\/w\/googleshop2011\/huong-dan-tao-float-menu-tuy-chinh-dep-cho-website-wordpress\/","title":{"rendered":"H\u01b0\u1edbng d\u1eabn t\u1ea1o Float Menu t\u00f9y ch\u1ec9nh \u0111\u1eb9p cho website WordPress"},"content":{"rendered":"

Ch\u00e0o c\u00e1c b\u1ea1n, b\u1eefa tr\u01b0\u1edbc m\u00ecnh c\u00f3 share\u00a0code t\u1ea1o c\u00e1c n\u00fat h\u1eefu \u00edch ph\u00eda d\u01b0\u1edbi ch\u00e2n trang<\/a>\u00a0cho website WordPress r\u1ed3i ph\u1ea3i kh\u00f4ng? H\u00f4m nay m\u00ecnh ti\u1ebfp t\u1ee5c chia s\u1ebb m\u1ed9t \u0111o\u1ea1n code kh\u00e1 hay \u0111\u1ec3 t\u1ea1o Float menu (menu n\u1ed5i) b\u1eb1ng HTML, CSS v\u00e0 JavaScript, m\u1eddi c\u00e1c b\u1ea1n c\u00f9ng theo d\u00f5i.<\/h2>\n

Code n\u00e0y m\u00ecnh t\u1ea1o v\u00e0 test ch\u1ea1y t\u1ed1t tr\u00ean theme\u00a0Flatsome<\/strong>,\u00a0WordPress 4.9.8<\/strong>. Do \u0111\u00f3, b\u00e0i vi\u1ebft s\u1ebd h\u01b0\u1edbng d\u1eabn c\u00e1c b\u1ea1n th\u1ef1c hi\u1ec7n tr\u00ean theme\u00a0Flatsome<\/strong>\u00a0nh\u00e9, nh\u1eefng b\u1ea1n kh\u00f4ng d\u00f9ng theme Flatsome th\u00ec ch\u1ec9 c\u1ea7n quan t\u00e2m \u0111\u1ebfn file\u00a0footer.php<\/strong>\u00a0th\u00f4i (Giao di\u1ec7n<\/strong>\u00a0>\u00a0S\u1eeda<\/strong>\u00a0\u2013 ch\u1ecdn file\u00a0footer.php<\/strong>). V\u1ec1 c\u01a1 b\u1ea3n, giao di\u1ec7n Float menu sau khi th\u1ef1c hi\u1ec7n xong s\u1ebd nh\u01b0 h\u00ecnh \u1ea3nh d\u01b0\u1edbi \u0111\u00e2y:<\/p>\n

B\u00e0i vi\u1ebft n\u00e0y m\u00ecnh kh\u00f4ng gi\u1ea3i th\u00edch qu\u00e1 nhi\u1ec1u v\u00ec ch\u1ee7 y\u1ebfu code HTML v\u00e0 CSS th\u00f4i, ph\u1ea7n n\u00e0y c\u01a1 b\u1ea3n r\u1ed3i. Do \u0111\u00f3, m\u00ecnh ch\u1ec9 note c\u00e1c b\u01b0\u1edbc l\u00e0m cho c\u1ee5 th\u1ec3 \u0111\u1ec3 ngay c\u1ea3 nh\u1eefng ai kh\u00f4ng bi\u1ebft HTML ho\u1eb7c CSS c\u0169ng c\u00f3 th\u1ec3 ch\u1ec9 c\u1ea7n copy paste l\u00e0 s\u1eed d\u1ee5ng \u0111\u01b0\u1ee3c.<\/p>\n

B\u01b0\u1edbc 1: T\u1eaft n\u00fat back to top m\u1eb7c \u0111\u1ecbnh<\/h3>\n

V\u00ec trong \u0111o\u1ea1n code c\u1ee7a ch\u00fang ta c\u00f3 n\u00fat\u00a0\u201cL\u00ean \u0111\u1ea7u\u201d<\/strong>\u00a0n\u00ean m\u00ecnh c\u1ea7n t\u1eaft n\u00fat\u00a0Back to top<\/strong>\u00a0m\u1eb7c \u0111\u1ecbnh c\u1ee7a theme \u0111i. Th\u1ef1c ch\u1ea5t th\u00ec \u0111\u1ec3 c\u1ea3 hai v\u1eabn ho\u1ea1t \u0111\u1ed9ng \u0111\u01b0\u1ee3c nh\u01b0ng nh\u00ecn n\u00f3 tr\u00f9ng nhau n\u00ean s\u1ebd r\u1ea5t x\u1ea5u. Ho\u1eb7c b\u1ea1n n\u00e0o mu\u1ed1n d\u00f9ng n\u00fat\u00a0Back to top<\/strong>\u00a0m\u1eb7c \u0111\u1ecbnh th\u00ec d\u00f9ng, r\u1ed3i x\u00f3a n\u00fat\u00a0\u201cL\u00ean \u0111\u1ea7u\u201d<\/strong>\u00a0trong \u0111o\u1ea1n code c\u1ee7a m\u00ecnh \u0111i.<\/p>\n

\u0110\u1ed1i v\u1edbi c\u00e1c theme kh\u00e1c, t\u00f9y theme c\u00f3 h\u1ed7 tr\u1ee3 n\u00fat\u00a0Back to top<\/strong>\u00a0hay kh\u00f4ng th\u00ec m\u00ecnh kh\u00f4ng r\u00f5, nh\u01b0ng d\u1ed1i v\u1edbi theme Flatsome, c\u00e1c b\u1ea1n v\u00e0o\u00a0Giao di\u1ec7n<\/strong>\u00a0>\u00a0T\u00f9y ch\u1ec9nh<\/strong>\u00a0>\u00a0Footer<\/strong>\u00a0> B\u1ecf d\u1ea5u tick \u1edf\u00a0Back to top button<\/strong><\/p>\n

B\u01b0\u1edbc 2: Ch\u00e8n ID \u0111\u1ea7u trang<\/h3>\n

\u0110\u1ec3 n\u00fat Back to top ho\u1ea1t \u0111\u1ed9ng hi\u1ec7u qu\u1ea3 th\u00ec m\u00ecnh c\u1ea7n th\u00eam m\u1ed9t ID \u0111\u1eb7t trong \u0111o\u1ea1n HTML \u0111\u1ea7u trang. Trong theme Flatsome ch\u00fang ta v\u00e0o\u00a0Giao di\u1ec7n<\/strong>\u00a0>\u00a0T\u00f9y ch\u1ec9nh<\/strong>\u00a0>\u00a0Header<\/strong>\u00a0>\u00a0HTML > HTML1<\/strong><\/p>\n

B\u00ean trong HTML 1 c\u00e1c b\u1ea1n mu\u1ed1n vi\u1ebft g\u00ec v\u00e0o \u0111\u00f3 c\u0169ng \u0111\u01b0\u1ee3c, d\u00f9ng th\u1ebb\u00a0<div>, th\u1ebb\u00a0<span>\u00a0ho\u1eb7c th\u1ebb\u00a0<p>\u00a0g\u00ec c\u0169ng \u0111\u01b0\u1ee3c, mi\u1ec5n sao nh\u00e9t cho m\u00ecnh m\u1ed9t c\u00e1i\u00a0id=\u201dt\u00ean_id\u201d<\/strong>\u00a0v\u00e0o \u0111\u00f3 nh\u00e9!\u00a0L\u01b0u \u00fd: nh\u1edb t\u00ean c\u1ee7a ID \u0111\u1ec3 l\u00e1t n\u1eefa m\u00ecnh \u0111\u1eb7t trong link c\u1ee7a n\u00fat \u201cL\u00ean \u0111\u1ea7u\u201d nh\u00e9!<\/em><\/p>\n

B\u01b0\u1edbc 3: Ch\u00e8n code t\u1ea1o Float menu v\u00e0o giao di\u1ec7n<\/h3>\n

\u0110\u1ed1i v\u1edbi c\u00e1c theme kh\u00e1c, b\u1ea1n v\u00e0o\u00a0Qu\u1ea3n tr\u1ecb<\/strong>\u00a0>\u00a0Giao di\u1ec7n<\/strong>\u00a0\u2013\u00a0S\u1eeda<\/strong>\u00a0\u2013\u00a0Footer.php<\/strong>\u00a0v\u00e0 paste \u0111o\u1ea1n code v\u00e0o ngay sau th\u1ebb \u0111\u00f3ng\u00a0<\/body><\/strong>, tr\u01b0\u1edbc th\u1ebb \u0111\u00f3ng\u00a0<\/html>.<\/strong><\/p>\n

\u0110\u1ed1i v\u1edbi theme\u00a0Flatsome<\/strong>, b\u1ea1n copy v\u00e0 paste \u0111o\u1ea1n code v\u00e0o\u00a0Flatsome<\/strong>\u00a0\u2013\u00a0Advanced<\/strong>\u00a0\u2013\u00a0Global setting<\/strong>\u00a0\u2013\u00a0Footer Scripts.<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"

Ch\u00e0o c\u00e1c b\u1ea1n, b\u1eefa tr\u01b0\u1edbc m\u00ecnh c\u00f3 share\u00a0code t\u1ea1o c\u00e1c n\u00fat h\u1eefu \u00edch ph\u00eda d\u01b0\u1edbi ch\u00e2n trang\u00a0cho website WordPress r\u1ed3i ph\u1ea3i kh\u00f4ng? H\u00f4m nay m\u00ecnh ti\u1ebfp t\u1ee5c chia s\u1ebb m\u1ed9t \u0111o\u1ea1n code kh\u00e1 hay \u0111\u1ec3 t\u1ea1o Float menu (menu n\u1ed5i) b\u1eb1ng HTML, CSS v\u00e0 JavaScript, m\u1eddi c\u00e1c b\u1ea1n c\u00f9ng theo d\u00f5i. Code n\u00e0y m\u00ecnh t\u1ea1o …<\/p>\n","protected":false},"author":1,"featured_media":2003,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[124],"_links":{"self":[{"href":"https:\/\/hosting.conasi.vn\/w\/googleshop2011\/wp-json\/wp\/v2\/posts\/2002"}],"collection":[{"href":"https:\/\/hosting.conasi.vn\/w\/googleshop2011\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hosting.conasi.vn\/w\/googleshop2011\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hosting.conasi.vn\/w\/googleshop2011\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hosting.conasi.vn\/w\/googleshop2011\/wp-json\/wp\/v2\/comments?post=2002"}],"version-history":[{"count":1,"href":"https:\/\/hosting.conasi.vn\/w\/googleshop2011\/wp-json\/wp\/v2\/posts\/2002\/revisions"}],"predecessor-version":[{"id":2004,"href":"https:\/\/hosting.conasi.vn\/w\/googleshop2011\/wp-json\/wp\/v2\/posts\/2002\/revisions\/2004"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hosting.conasi.vn\/w\/googleshop2011\/wp-json\/wp\/v2\/media\/2003"}],"wp:attachment":[{"href":"https:\/\/hosting.conasi.vn\/w\/googleshop2011\/wp-json\/wp\/v2\/media?parent=2002"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hosting.conasi.vn\/w\/googleshop2011\/wp-json\/wp\/v2\/categories?post=2002"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hosting.conasi.vn\/w\/googleshop2011\/wp-json\/wp\/v2\/tags?post=2002"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}