{"id":1660,"date":"2026-08-16T23:30:23","date_gmt":"2026-08-16T23:30:23","guid":{"rendered":"https:\/\/1phantram.com\/blog\/huong-dan-widget-embed\/"},"modified":"2026-08-16T23:30:23","modified_gmt":"2026-08-16T23:30:23","slug":"huong-dan-widget-embed","status":"publish","type":"post","link":"https:\/\/1phantram.com\/blog\/huong-dan-widget-embed\/","title":{"rendered":"C\u00e1ch nh\u00fang widget m\u00e1y t\u00ednh ph\u1ea7n tr\u0103m v\u00e0o website"},"content":{"rendered":"

Tr\u1ea3 l\u1eddi nhanh<\/h2>\n
\u0110\u1ec3 nh\u00fang widget t\u00ednh ph\u1ea7n tr\u0103m<\/strong> t\u1eeb 1phantram.com v\u00e0o website, b\u1ea1n ch\u1ec9 c\u1ea7n 3 b\u01b0\u1edbc: (1) Truy c\u1eadp https:\/\/1phantram.com\/widget-embed<\/a>, (2) Ch\u1ecdn lo\u1ea1i m\u00e1y t\u00ednh v\u00e0 t\u00f9y ch\u1ec9nh giao di\u1ec7n, (3) Sao ch\u00e9p \u0111o\u1ea1n m\u00e3 iframe \u0111\u01b0\u1ee3c t\u1ea1o v\u00e0 d\u00e1n v\u00e0o m\u00e3 ngu\u1ed3n b\u00e0i vi\u1ebft ho\u1eb7c trang web c\u1ee7a b\u1ea1n. Qu\u00e1 tr\u00ecnh ho\u00e0n to\u00e0n mi\u1ec5n ph\u00ed, kh\u00f4ng gi\u1edbi h\u1ea1n v\u00e0 kh\u00f4ng y\u00eau c\u1ea7u \u0111\u0103ng k\u00fd t\u00e0i kho\u1ea3n.<\/p>\n

M\u1ee5c \u0111\u00edch c\u1ee7a vi\u1ec7c nh\u00fang widget<\/h2>\n
Vi\u1ec7c t\u00edch h\u1ee3p m\u1ed9t c\u00f4ng c\u1ee5 t\u00ednh to\u00e1n tr\u1ef1c ti\u1ebfp nh\u01b0 widget t\u00ednh ph\u1ea7n tr\u0103m v\u00e0o website ho\u1eb7c blog mang l\u1ea1i l\u1ee3i \u00edch thi\u1ebft th\u1ef1c cho c\u1ea3 ng\u01b0\u1eddi \u0111\u1ecdc v\u00e0 ch\u1ee7 website. Thay v\u00ec bu\u1ed9c ng\u01b0\u1eddi d\u00f9ng r\u1eddi trang \u0111\u1ec3 t\u00ecm ki\u1ebfm c\u00f4ng c\u1ee5 t\u00ednh to\u00e1n b\u00ean ngo\u00e0i, b\u1ea1n cung c\u1ea5p ngay cho h\u1ecd m\u1ed9t gi\u1ea3i ph\u00e1p t\u1ea1i ch\u1ed7. \u0110i\u1ec1u n\u00e0y \u0111\u1eb7c bi\u1ec7t h\u1eefu \u00edch cho c\u00e1c b\u00e0i vi\u1ebft v\u1ec1 t\u00e0i ch\u00ednh c\u00e1 nh\u00e2n (l\u00e3i su\u1ea5t, l\u01b0\u01a1ng net), mua s\u1eafm (t\u00ednh gi\u1ea3m gi\u00e1, soi sale), s\u1ee9c kh\u1ecfe (t\u00ednh BMI) hay gi\u00e1o d\u1ee5c. Ng\u01b0\u1eddi \u0111\u1ecdc c\u00f3 th\u1ec3 t\u01b0\u01a1ng t\u00e1c, th\u1eed nghi\u1ec7m v\u1edbi c\u00e1c con s\u1ed1 c\u1ee5 th\u1ec3 c\u1ee7a h\u1ecd, t\u1eeb \u0111\u00f3 t\u0103ng th\u1eddi gian \u1edf l\u1ea1i trang (dwell time) v\u00e0 m\u1ee9c \u0111\u1ed9 t\u01b0\u01a1ng t\u00e1c (engagement) \u2013 nh\u1eefng t\u00edn hi\u1ec7u t\u00edch c\u1ef1c \u0111\u01b0\u1ee3c c\u00e1c c\u00f4ng c\u1ee5 t\u00ecm ki\u1ebfm nh\u01b0 Google \u0111\u00e1nh gi\u00e1 cao.<\/p>\n
C\u00f4ng th\u1ee9c v\u00e0 logic t\u00ednh to\u00e1n (n\u1ebfu c\u00f3)<\/h2>\n
Widget t\u1eeb 1phantram.com bao g\u1ed3m nhi\u1ec1u c\u00f4ng c\u1ee5, m\u1ed7i c\u00f4ng c\u1ee5 v\u1eadn h\u00e0nh d\u1ef1a tr\u00ean c\u00e1c c\u00f4ng th\u1ee9c to\u00e1n h\u1ecdc v\u00e0 logic kinh t\u1ebf c\u1ee5 th\u1ec3. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 m\u1ed9t s\u1ed1 c\u00f4ng th\u1ee9c c\u1ed1t l\u00f5i cho c\u00e1c widget ph\u1ed5 bi\u1ebfn:<\/p>\n
\n
**T\u00ednh % c\u1ee7a m\u1ed9t gi\u00e1 tr\u1ecb:<\/strong> (Ph\u1ea7n tr\u0103m \/ 100) * Gi\u00e1 tr\u1ecb g\u1ed1c.<\/li>\n
T\u00ednh ph\u1ea7n tr\u0103m t\u0103ng\/gi\u1ea3m:<\/strong> ((Gi\u00e1 tr\u1ecb m\u1edbi – Gi\u00e1 tr\u1ecb c\u0169) \/ Gi\u00e1 tr\u1ecb c\u0169) * 100%.<\/li>\n
T\u0103ng\/Gi\u1ea3m m\u1ed9t gi\u00e1 tr\u1ecb theo %:<\/strong> Gi\u00e1 tr\u1ecb g\u1ed1c * (1 \u00b1 (Ph\u1ea7n tr\u0103m\/100)).<\/li>\n**
T\u00ednh l\u00e3i k\u00e9p:<\/strong> A = P * (1 + r\/n)^(n*t), trong \u0111\u00f3 A l\u00e0 t\u1ed5ng s\u1ed1 ti\u1ec1n nh\u1eadn \u0111\u01b0\u1ee3c, P l\u00e0 s\u1ed1 ti\u1ec1n g\u1ed1c, r l\u00e0 l\u00e3i su\u1ea5t n\u0103m, n l\u00e0 s\u1ed1 l\u1ea7n gh\u00e9p l\u00e3i trong n\u0103m, t l\u00e0 s\u1ed1 n\u0103m.<\/li>\n
T\u00ednh BMI (Ch\u1ec9 s\u1ed1 kh\u1ed1i c\u01a1 th\u1ec3):<\/strong> C\u00e2n n\u1eb7ng (kg) \/ [Chi\u1ec1u cao (m)]^2.<\/li>\n<\/ul>\n
Widget s\u1ebd t\u1ef1 \u0111\u1ed9ng th\u1ef1c hi\u1ec7n c\u00e1c ph\u00e9p t\u00ednh n\u00e0y d\u1ef1a tr\u00ean d\u1eef li\u1ec7u \u0111\u1ea7u v\u00e0o c\u1ee7a ng\u01b0\u1eddi d\u00f9ng.<\/p>\n
Chu\u1ea9n b\u1ecb d\u1eef li\u1ec7u v\u00e0 c\u00f4ng c\u1ee5<\/h2>\n
Tr\u01b0\u1edbc khi b\u1eaft \u0111\u1ea7u, b\u1ea1n c\u1ea7n chu\u1ea9n b\u1ecb:<\/p>\n
\n
Quy\u1ec1n ch\u1ec9nh s\u1eeda website:<\/strong> B\u1ea1n c\u1ea7n c\u00f3 quy\u1ec1n truy c\u1eadp \u0111\u1ec3 ch\u1ec9nh s\u1eeda m\u00e3 ngu\u1ed3n HTML c\u1ee7a b\u00e0i vi\u1ebft ho\u1eb7c trang web n\u01a1i mu\u1ed1n \u0111\u1eb7t widget (v\u00ed d\u1ee5: quy\u1ec1n Admin\/Editor tr\u00ean WordPress).<\/li>\n
X\u00e1c \u0111\u1ecbnh v\u1ecb tr\u00ed nh\u00fang:<\/strong> Quy\u1ebft \u0111\u1ecbnh v\u1ecb tr\u00ed trong n\u1ed9i dung b\u00e0i vi\u1ebft m\u00e0 b\u1ea1n mu\u1ed1n widget xu\u1ea5t hi\u1ec7n (v\u00ed d\u1ee5: ngay sau \u0111o\u1ea1n gi\u1ea3i th\u00edch v\u1ec1 c\u00e1ch t\u00ednh l\u00e3i k\u00e9p).<\/li>\n
L\u1ef1a ch\u1ecdn widget ph\u00f9 h\u1ee3p:<\/strong> Suy ngh\u0129 tr\u01b0\u1edbc v\u1ec1 lo\u1ea1i m\u00e1y t\u00ednh b\u1ea1n c\u1ea7n (v\u00ed d\u1ee5: t\u00ednh l\u00e3i k\u00e9p cho b\u00e0i v\u1ec1 \u0111\u1ea7u t\u01b0, t\u00ednh BMI cho b\u00e0i v\u1ec1 s\u1ee9c kh\u1ecfe).<\/li>\n<\/ol>\n
B\u1ea1n kh\u00f4ng c\u1ea7n chu\u1ea9n b\u1ecb b\u1ea5t k\u1ef3 d\u1eef li\u1ec7u m\u1eabu n\u00e0o v\u00ec widget s\u1ebd \u0111\u1ec3 ng\u01b0\u1eddi \u0111\u1ecdc t\u1ef1 nh\u1eadp s\u1ed1 li\u1ec7u c\u1ee7a h\u1ecd.<\/p>\n
$\"Giao$ <\/a>
Giao di\u1ec7n c\u00f4ng c\u1ee5 C\u00e1ch nh\u00fang widget m\u00e1y t\u00ednh ph\u1ea7n tr\u0103m v\u00e0o website sau khi nh\u1eadp d\u1eef li\u1ec7u m\u1eabu. Nh\u1ea5p \u1ea3nh \u0111\u1ec3 xem k\u00edch th\u01b0\u1edbc l\u1edbn.<\/figcaption><\/figure>\n
H\u01b0\u1edbng d\u1eabn t\u1eebng b\u01b0\u1edbc chi ti\u1ebft \u0111\u1ec3 nh\u00fang widget<\/h2>\n
B\u01b0\u1edbc 1: Truy c\u1eadp c\u00f4ng c\u1ee5 t\u1ea1o m\u00e3 nh\u00fang<\/h3>\n
M\u1edf tr\u00ecnh duy\u1ec7t v\u00e0 \u0111i\u1ec1u h\u01b0\u1edbng \u0111\u1ebfn trang https:\/\/1phantram.com\/widget-embed<\/a>. \u0110\u00e2y l\u00e0 giao di\u1ec7n ch\u00ednh \u0111\u1ec3 b\u1ea1n l\u1ef1a ch\u1ecdn v\u00e0 t\u00f9y ch\u1ec9nh widget.<\/p>\n
B\u01b0\u1edbc 2: Ch\u1ecdn lo\u1ea1i m\u00e1y t\u00ednh (widget)<\/h3>\n
T\u1ea1i m\u1ee5c “1. Ch\u1ecdn c\u00f4ng c\u1ee5 mu\u1ed1n nh\u00fang”, b\u1ea1n s\u1ebd th\u1ea5y danh s\u00e1ch 16 widget kh\u00e1c nhau. H\u00e3y nh\u1ea5p v\u00e0o t\u00ean ho\u1eb7c bi\u1ec3u t\u01b0\u1ee3ng c\u1ee7a widget ph\u00f9 h\u1ee3p v\u1edbi n\u1ed9i dung b\u00e0i vi\u1ebft c\u1ee7a b\u1ea1n. V\u00ed d\u1ee5: ch\u1ecdn “\ud83d\udcc8 L\u00e3i k\u00e9p” cho b\u00e0i v\u1ec1 \u0111\u1ea7u t\u01b0, ho\u1eb7c “\ud83c\udff7 T\u00ednh gi\u1ea3m gi\u00e1 \/ Sale” cho b\u00e0i review s\u1ea3n ph\u1ea9m.<\/p>\n
B\u01b0\u1edbc 3: T\u00f9y ch\u1ec9nh giao di\u1ec7n (theme)<\/h3>\n
\u1ede m\u1ee5c “2. Giao di\u1ec7n (theme)”, b\u1ea1n c\u00f3 ba l\u1ef1a ch\u1ecdn:<\/p>\n
\n
T\u1ef1 \u0111\u1ed9ng:<\/strong> Widget s\u1ebd t\u1ef1 \u0111\u1ed9ng ph\u00e1t hi\u1ec7n v\u00e0 kh\u1edbp v\u1edbi ch\u1ebf \u0111\u1ed9 s\u00e1ng\/t\u1ed1i c\u1ee7a trang web ch\u1ee7. \u0110\u00e2y l\u00e0 l\u1ef1a ch\u1ecdn \u0111\u01b0\u1ee3c khuy\u1ebfn ngh\u1ecb.<\/li>\n
S\u00e1ng:<\/strong> \u00c1p d\u1ee5ng giao di\u1ec7n s\u00e1ng cho widget.<\/li>\n
T\u1ed1i:<\/strong> \u00c1p d\u1ee5ng giao di\u1ec7n t\u1ed1i cho widget.<\/li>\n<\/ul>\n
Ch\u1ebf \u0111\u1ed9 “T\u1ef1 \u0111\u1ed9ng” \u0111\u1ea3m b\u1ea3o widget h\u00f2a nh\u1eadp m\u1ed9t c\u00e1ch t\u1ef1 nhi\u00ean v\u00e0o thi\u1ebft k\u1ebf t\u1ed5ng th\u1ec3 c\u1ee7a b\u1ea1n.<\/p>\n
B\u01b0\u1edbc 4: \u0110i\u1ec1u ch\u1ec9nh k\u00edch th\u01b0\u1edbc (t\u00f9y ch\u1ecdn)<\/h3>\n
M\u1ee5c “3. Chi\u1ec1u r\u1ed9ng” m\u1eb7c \u0111\u1ecbnh \u0111\u01b0\u1ee3c \u0111\u1eb7t l\u00e0 800px. B\u1ea1n c\u00f3 th\u1ec3 gi\u1eef nguy\u00ean ho\u1eb7c \u0111i\u1ec1u ch\u1ec9nh gi\u00e1 tr\u1ecb n\u00e0y trong \u0111o\u1ea1n m\u00e3 sau khi sao ch\u00e9p. Chi\u1ec1u cao \u0111\u01b0\u1ee3c khuy\u1ebfn ngh\u1ecb \u0111\u1ec3 \u1edf ch\u1ebf \u0111\u1ed9 “t\u1ef1 \u0111\u1ed9ng” \u0111\u1ec3 widget c\u00f3 th\u1ec3 co gi\u00e3n ph\u00f9 h\u1ee3p v\u1edbi n\u1ed9i dung b\u00ean trong.<\/p>\n
$\"Thao$ <\/a>
Thao t\u00e1c T\u1ef1 \u0111\u1ed9ng tr\u00ean c\u00f4ng c\u1ee5 C\u00e1ch nh\u00fang widget m\u00e1y t\u00ednh ph\u1ea7n tr\u0103m v\u00e0o website. Nh\u1ea5p \u1ea3nh \u0111\u1ec3 xem k\u00edch th\u01b0\u1edbc l\u1edbn.<\/figcaption><\/figure>\n
B\u01b0\u1edbc 5: Sao ch\u00e9p m\u00e3 nh\u00fang<\/h3>\n
Sau khi l\u1ef1a ch\u1ecdn, giao di\u1ec7n “XEM TR\u01af\u1edaC TR\u1ef0C TI\u1ebeP” s\u1ebd hi\u1ec3n th\u1ecb widget t\u01b0\u01a1ng \u1ee9ng. Cu\u1ed9n xu\u1ed1ng ph\u1ea7n “Code nh\u00fang”. B\u1ea1n s\u1ebd th\u1ea5y m\u1ed9t v\u00e0i t\u00f9y ch\u1ecdn \u0111\u1ecbnh d\u1ea1ng m\u00e3. L\u1ef1a ch\u1ecdn \u0111\u01a1n gi\u1ea3n v\u00e0 ph\u1ed5 bi\u1ebfn nh\u1ea5t l\u00e0 “HTML iframe”. Nh\u1ea5p v\u00e0o n\u00fat “\ud83d\udccb Copy code” \u0111\u1ec3 sao ch\u00e9p to\u00e0n b\u1ed9 \u0111o\u1ea1n m\u00e3 iframe v\u00e0o b\u1ed9 nh\u1edb t\u1ea1m c\u1ee7a b\u1ea1n. M\u00e3 s\u1ebd c\u00f3 d\u1ea1ng t\u01b0\u01a1ng t\u1ef1 nh\u01b0 sau:
\n`<iframe src=\"https:\/\/1phantram.com\/embed\/[ten-widget]?theme=auto\" width=\"800\" height=\"600\" loading=\"lazy\" title=\"[T\u00ean widget] \u2013 1phantram.com\"><\/iframe><\/code><\/p>\n`
B\u01b0\u1edbc 6: D\u00e1n m\u00e3 v\u00e0o website c\u1ee7a b\u1ea1n<\/h3>\n\u0110\u00e2y l\u00e0 b\u01b0\u1edbc th\u1ef1c thi, c\u00e1ch l\u00e0m thay \u0111\u1ed5i t\u00f9y theo n\u1ec1n t\u1ea3ng:<\/p>\n \nWordPress (Tr\u00ecnh so\u1ea1n th\u1ea3o Gutenberg\/Block):<\/strong> M\u1edf b\u00e0i vi\u1ebft c\u1ea7n ch\u1ec9nh s\u1eeda, \u0111\u1eb7t con tr\u1ecf t\u1ea1i v\u1ecb tr\u00ed mu\u1ed1n ch\u00e8n widget, nh\u1ea5p v\u00e0o d\u1ea5u “+” \u0111\u1ec3 th\u00eam Block, t\u00ecm v\u00e0 ch\u1ecdn block “Custom HTML” (HTML t\u00f9y ch\u1ec9nh). D\u00e1n \u0111o\u1ea1n m\u00e3 iframe b\u1ea1n \u0111\u00e3 sao ch\u00e9p v\u00e0o khung \u0111\u00f3. Sau \u0111\u00f3, b\u1ea1n c\u00f3 th\u1ec3 nh\u1ea5p “Preview” \u0111\u1ec3 xem tr\u01b0\u1edbc v\u00e0 “Update” \u0111\u1ec3 l\u01b0u l\u1ea1i.<\/li>\n Website HTML t\u0129nh ho\u1eb7c CMS kh\u00e1c:<\/strong> Chuy\u1ec3n sang ch\u1ebf \u0111\u1ed9 ch\u1ec9nh s\u1eeda m\u00e3 ngu\u1ed3n (HTML) c\u1ee7a trang ho\u1eb7c b\u00e0i vi\u1ebft. T\u00ecm \u0111\u00fang v\u1ecb tr\u00ed trong m\u00e3 ngu\u1ed3n v\u00e0 d\u00e1n \u0111o\u1ea1n m\u00e3 iframe v\u00e0o. L\u01b0u l\u1ea1i c\u00e1c thay \u0111\u1ed5i.<\/li>\n<\/ul>\nSau khi xu\u1ea5t b\u1ea3n, widget s\u1ebd xu\u1ea5t hi\u1ec7n v\u00e0 ho\u1ea1t \u0111\u1ed9ng \u0111\u1ea7y \u0111\u1ee7 tr\u00ean trang web c\u1ee7a b\u1ea1n.<\/p>\n V\u00ed d\u1ee5 minh h\u1ecda v\u00e0 b\u1ea3ng ki\u1ec3m ch\u1ee9ng<\/h2>\nV\u00ed d\u1ee5:<\/strong> B\u1ea1n vi\u1ebft m\u1ed9t b\u00e0i blog h\u01b0\u1edbng d\u1eabn “C\u00e1ch t\u00ednh l\u00e3i k\u00e9p \u0111\u1ec3 \u0111\u1ea7u t\u01b0 hi\u1ec7u qu\u1ea3”. Thay v\u00ec ch\u1ec9 \u0111\u01b0a ra c\u00f4ng th\u1ee9c kh\u00f4 khan, b\u1ea1n nh\u00fang widget “\ud83d\udcc8 L\u00e3i k\u00e9p” t\u1eeb 1phantram.com v\u00e0o ngay sau ph\u1ea7n gi\u1ea3i th\u00edch c\u00f4ng th\u1ee9c. Ng\u01b0\u1eddi \u0111\u1ecdc c\u00f3 th\u1ec3 ngay l\u1eadp t\u1ee9c nh\u1eadp s\u1ed1 ti\u1ec1n g\u1ed1c, l\u00e3i su\u1ea5t, k\u1ef3 h\u1ea1n c\u1ee7a ch\u00ednh h\u1ecd \u0111\u1ec3 xem k\u1ebft qu\u1ea3 t\u01b0\u01a1ng lai, t\u1eeb \u0111\u00f3 hi\u1ec3u b\u00e0i s\u00e2u h\u01a1n.<\/p>\n\n\n\n\n\n\n\n\n\n\nB\u01b0\u1edbc<\/th>\n H\u00e0nh \u0111\u1ed9ng<\/th>\n K\u1ebft qu\u1ea3 ki\u1ec3m ch\u1ee9ng<\/th>\n<\/tr>\n<\/thead>\n 1<\/td>\n Truy c\u1eadp 1phantram.com\/widget-embed<\/td>\n Giao di\u1ec7n c\u00f4ng c\u1ee5 t\u1ea1o m\u00e3 hi\u1ec7n ra.<\/td>\n<\/tr>\n 2<\/td>\n Ch\u1ecdn widget “\ud83d\udcc8 L\u00e3i k\u00e9p”<\/td>\n \u00d4 xem tr\u01b0\u1edbc b\u00ean ph\u1ea3i hi\u1ec3n th\u1ecb m\u00e1y t\u00ednh l\u00e3i k\u00e9p.<\/td>\n<\/tr>\n 3<\/td>\n Ch\u1ecdn Theme “T\u1ef1 \u0111\u1ed9ng”<\/td>\n M\u00e0u s\u1eafc widget trong \u00f4 xem tr\u01b0\u1edbc thay \u0111\u1ed5i.<\/td>\n<\/tr>\n 4<\/td>\n Copy m\u00e3 iframe<\/td>\n M\u00e3 \u0111\u01b0\u1ee3c l\u01b0u v\u00e0o clipboard.<\/td>\n<\/tr>\n 5<\/td>\n D\u00e1n m\u00e3 v\u00e0o WordPress block Custom HTML<\/td>\n Trong ch\u1ebf \u0111\u1ed9 Preview, widget hi\u1ec3n th\u1ecb \u0111\u00fang.<\/td>\n<\/tr>\n 6<\/td>\n Update b\u00e0i vi\u1ebft<\/td>\n Widget xu\u1ea5t hi\u1ec7n v\u00e0 ho\u1ea1t \u0111\u1ed9ng b\u00ecnh th\u01b0\u1eddng tr\u00ean trang published.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\nSo s\u00e1nh ph\u01b0\u01a1ng \u00e1n thay th\u1ebf<\/h2>\nB\u00ean c\u1ea1nh vi\u1ec7c nh\u00fang widget t\u1eeb m\u1ed9t d\u1ecbch v\u1ee5 b\u00ean ngo\u00e0i nh\u01b0 1phantram.com, b\u1ea1n c\u00f3 m\u1ed9t s\u1ed1 l\u1ef1a ch\u1ecdn thay th\u1ebf, m\u1ed7i ph\u01b0\u01a1ng \u00e1n c\u00f3 \u01b0u nh\u01b0\u1ee3c \u0111i\u1ec3m ri\u00eang:<\/p>\n 1. T\u1ef1 vi\u1ebft code t\u00ednh to\u00e1n t\u1eeb \u0111\u1ea7u:<\/strong> B\u1ea1n ho\u1eb7c developer c\u00f3 th\u1ec3 code tr\u1ef1c ti\u1ebfp ch\u1ee9c n\u0103ng t\u00ednh to\u00e1n b\u1eb1ng JavaScript\/HTML\/CSS v\u00e0 t\u00edch h\u1ee3p v\u00e0o website. \u01afu \u0111i\u1ec3m:<\/em> To\u00e0n quy\u1ec1n ki\u1ec3m so\u00e1t giao di\u1ec7n, logic v\u00e0 d\u1eef li\u1ec7u. Nh\u01b0\u1ee3c \u0111i\u1ec3m:<\/em> \u0110\u00f2i h\u1ecfi k\u1ef9 n\u0103ng l\u1eadp tr\u00ecnh, t\u1ed1n nhi\u1ec1u th\u1eddi gian ph\u00e1t tri\u1ec3n v\u00e0 b\u1ea3o tr\u00ec, \u0111\u1eb7c bi\u1ec7t n\u1ebfu b\u1ea1n c\u1ea7n nhi\u1ec1u lo\u1ea1i m\u00e1y t\u00ednh kh\u00e1c nhau. Gi\u1ea3i ph\u00e1p n\u00e0y kh\u00f4ng kh\u1ea3 thi cho \u0111a s\u1ed1 ng\u01b0\u1eddi d\u00f9ng ph\u1ed5 th\u00f4ng.<\/p>\n 2. S\u1eed d\u1ee5ng plugin WordPress chuy\u00ean d\u1ee5ng:<\/strong> C\u00f3 nh\u1eefng plugin WordPress cung c\u1ea5p shortcode ho\u1eb7c block \u0111\u1ec3 ch\u00e8n c\u00e1c m\u00e1y t\u00ednh \u0111\u01a1n gi\u1ea3n. \u01afu \u0111i\u1ec3m:<\/em> T\u00edch h\u1ee3p d\u1ec5 d\u00e0ng trong h\u1ec7 sinh th\u00e1i WordPress, c\u00f3 th\u1ec3 c\u00f3 nhi\u1ec1u t\u00f9y ch\u1ecdn. Nh\u01b0\u1ee3c \u0111i\u1ec3m:<\/em> Ch\u1ec9 d\u00f9ng \u0111\u01b0\u1ee3c tr\u00ean WordPress, plugin c\u00f3 th\u1ec3 l\u00e0m ch\u1eadm website n\u1ebfu kh\u00f4ng \u0111\u01b0\u1ee3c t\u1ed1i \u01b0u, v\u00e0 th\u01b0\u1eddng ch\u1ec9 c\u00f3 c\u00e1c t\u00ednh n\u0103ng c\u01a1 b\u1ea3n, kh\u00f4ng \u0111a d\u1ea1ng nh\u01b0 b\u1ed9 s\u01b0u t\u1eadp 16 widget c\u1ee7a 1phantram.com.<\/p>\n 3. D\u1eabn link ra trang t\u00ednh to\u00e1n b\u00ean ngo\u00e0i:<\/strong> \u0110\u01a1n gi\u1ea3n ch\u1ec9 c\u1ea7n ch\u00e8n m\u1ed9t hyperlink d\u1eabn ng\u01b0\u1eddi \u0111\u1ecdc \u0111\u1ebfn m\u1ed9t trang web t\u00ednh ph\u1ea7n tr\u0103m kh\u00e1c. \u01afu \u0111i\u1ec3m:<\/em> C\u1ef1c k\u1ef3 d\u1ec5 th\u1ef1c hi\u1ec7n. Nh\u01b0\u1ee3c \u0111i\u1ec3m:<\/em> \u0110\u00e2y l\u00e0 ph\u01b0\u01a1ng \u00e1n k\u00e9m hi\u1ec7u qu\u1ea3 nh\u1ea5t v\u00ec n\u00f3 bu\u1ed9c ng\u01b0\u1eddi \u0111\u1ecdc r\u1eddi kh\u1ecfi trang c\u1ee7a b\u1ea1n, l\u00e0m t\u0103ng t\u1ef7 l\u1ec7 bounce rate v\u00e0 gi\u1ea3m th\u1eddi gian \u1edf l\u1ea1i trang \u2013 ho\u00e0n to\u00e0n tr\u00e1i ng\u01b0\u1ee3c v\u1edbi m\u1ee5c ti\u00eau t\u0103ng engagement.<\/p>\n So s\u00e1nh v\u1edbi c\u00e1c ph\u01b0\u01a1ng \u00e1n tr\u00ean, vi\u1ec7c nh\u00fang widget t\u00ednh ph\u1ea7n tr\u0103m<\/strong> qua iframe t\u1eeb 1phantram.com t\u1ecf ra t\u1ed1i \u01b0u v\u1ec1 m\u1eb7t c\u00e2n b\u1eb1ng: d\u1ec5 d\u00e0ng th\u1ef1c hi\u1ec7n (kh\u00f4ng c\u1ea7n code), mi\u1ec5n ph\u00ed, \u0111a d\u1ea1ng ch\u1ee9c n\u0103ng, ho\u1ea1t \u0111\u1ed9ng tr\u00ean m\u1ecdi n\u1ec1n t\u1ea3ng, v\u00e0 quan tr\u1ecdng nh\u1ea5t l\u00e0 gi\u1eef ch\u00e2n ng\u01b0\u1eddi \u0111\u1ecdc ngay tr\u00ean site c\u1ee7a b\u1ea1n.<\/p>\n T\u1ed1i \u01b0u hi\u1ec7u su\u1ea5t khi d\u00f9ng th\u1ef1c t\u1ebf<\/h2>\nM\u1eb7c d\u00f9 widget \u0111\u01b0\u1ee3c nh\u00fang qua iframe th\u01b0\u1eddng ch\u1ea1y \u0111\u1ed9c l\u1eadp v\u00e0 \u00edt \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn hi\u1ec7u su\u1ea5t t\u1ea3i trang ch\u00ednh, b\u1ea1n v\u1eabn c\u00f3 th\u1ec3 th\u1ef1c hi\u1ec7n m\u1ed9t s\u1ed1 b\u01b0\u1edbc \u0111\u1ec3 \u0111\u1ea3m b\u1ea3o tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng l\u00e0 m\u01b0\u1ee3t m\u00e0 nh\u1ea5t:<\/p>\n 1. S\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh `loading=”lazy”`:<\/strong> \u0110o\u1ea1n m\u00e3 m\u1eabu t\u1eeb 1phantram.com \u0111\u00e3 bao g\u1ed3m thu\u1ed9c t\u00ednh n\u00e0y. N\u00f3 h\u01b0\u1edbng d\u1eabn tr\u00ecnh duy\u1ec7t ch\u1ec9 t\u1ea3i iframe khi ng\u01b0\u1eddi d\u00f9ng cu\u1ed9n \u0111\u1ebfn g\u1ea7n v\u1ecb tr\u00ed c\u1ee7a widget, gi\u00fap trang t\u1ea3i nhanh h\u01a1n ban \u0111\u1ea7u. H\u00e3y lu\u00f4n \u0111\u1ea3m b\u1ea3o thu\u1ed9c t\u00ednh n\u00e0y c\u00f3 trong m\u00e3 nh\u00fang c\u1ee7a b\u1ea1n.<\/p>\n 2. \u0110i\u1ec1u ch\u1ec9nh k\u00edch th\u01b0\u1edbc ph\u00f9 h\u1ee3p:<\/strong> M\u1eb7c d\u00f9 chi\u1ec1u r\u1ed9ng m\u1eb7c \u0111\u1ecbnh l\u00e0 800px v\u1edbi `max-width:100%` gi\u00fap widget co gi\u00e3n tr\u00ean mobile, b\u1ea1n c\u00f3 th\u1ec3 \u0111i\u1ec1u ch\u1ec9nh gi\u00e1 tr\u1ecb `width` trong m\u00e3 iframe cho ph\u00f9 h\u1ee3p v\u1edbi b\u1ed1 c\u1ee5c c\u1ed9t c\u1ee7a website. Tr\u00e1nh \u0111\u1eb7t chi\u1ec1u r\u1ed9ng qu\u00e1 l\u1edbn v\u01b0\u1ee3t qu\u00e1 khu v\u1ef1c n\u1ed9i dung ch\u00ednh.<\/p>\n 3. L\u1ef1a ch\u1ecdn widget ph\u00f9 h\u1ee3p v\u1edbi ng\u1eef c\u1ea3nh:<\/strong> Ch\u1ec9 nh\u00fang widget khi n\u00f3 th\u1ef1c s\u1ef1 b\u1ed5 sung gi\u00e1 tr\u1ecb v\u00e0 li\u00ean quan m\u1eadt thi\u1ebft \u0111\u1ebfn n\u1ed9i dung xung quanh. Vi\u1ec7c nh\u00fang qu\u00e1 nhi\u1ec1u widget kh\u00f4ng c\u1ea7n thi\u1ebft v\u00e0o m\u1ed9t trang c\u00f3 th\u1ec3 g\u00e2y r\u1ed1i m\u1eaft v\u00e0 ph\u00e2n t\u00e1n ng\u01b0\u1eddi \u0111\u1ecdc, \u0111\u1ed3ng th\u1eddi t\u0103ng nh\u1eb9 s\u1ed1 request HTTP.<\/p>\n 4. Ki\u1ec3m tra tr\u00ean thi\u1ebft b\u1ecb di \u0111\u1ed9ng:<\/strong> Sau khi nh\u00fang, h\u00e3y truy c\u1eadp trang web c\u1ee7a b\u1ea1n tr\u00ean \u0111i\u1ec7n tho\u1ea1i di \u0111\u1ed9ng \u0111\u1ec3 \u0111\u1ea3m b\u1ea3o widget hi\u1ec3n th\u1ecb \u0111\u00fang c\u00e1ch, c\u00e1c n\u00fat b\u1ea5m v\u00e0 \u00f4 nh\u1eadp li\u1ec7u d\u1ec5 thao t\u00e1c. Widget t\u1eeb 1phantram.com \u0111\u00e3 \u0111\u01b0\u1ee3c t\u1ed1i \u01b0u cho mobile, nh\u01b0ng vi\u1ec7c ki\u1ec3m tra trong b\u1ed1 c\u1ee5c c\u1ee5 th\u1ec3 c\u1ee7a b\u1ea1n l\u00e0 c\u1ea7n thi\u1ebft.<\/p>\n 5. Theo d\u00f5i t\u01b0\u01a1ng t\u00e1c (n\u1ebfu c\u00f3 th\u1ec3):<\/strong> S\u1eed d\u1ee5ng c\u00f4ng c\u1ee5 nh\u01b0 Google Analytics \u0111\u1ec3 xem li\u1ec7u c\u00e1c trang c\u00f3 ch\u1ee9a widget c\u00f3 th\u1eddi gian tr\u00ean trang (avg. session duration) cao h\u01a1n c\u00e1c trang kh\u00f4ng c\u00f3 widget hay kh\u00f4ng. \u0110i\u1ec1u n\u00e0y gi\u00fap b\u1ea1n \u0111\u00e1nh gi\u00e1 hi\u1ec7u qu\u1ea3 v\u00e0 quy\u1ebft \u0111\u1ecbnh ti\u1ebfp t\u1ee5c s\u1eed d\u1ee5ng ph\u01b0\u01a1ng ph\u00e1p n\u00e0y.<\/p>\n Ki\u1ec3m tra k\u1ebft qu\u1ea3 v\u00e0 x\u1eed l\u00fd l\u1ed7i th\u01b0\u1eddng g\u1eb7p<\/h2>\nSau khi d\u00e1n code v\u00e0o website, b\u1ea1n c\u1ea7n ki\u1ec3m tra xem widget c\u00f3 hi\u1ec3n th\u1ecb \u0111\u00fang kh\u00f4ng. H\u00e3y m\u1edf trang web tr\u00ean tr\u00ecnh duy\u1ec7t v\u00e0 t\u00ecm \u0111\u1ebfn v\u1ecb tr\u00ed \u0111\u00e3 nh\u00fang. Widget m\u00e1y t\u00ednh ph\u1ea7n tr\u0103m s\u1ebd xu\u1ea5t hi\u1ec7n nh\u01b0 m\u1ed9t khung t\u01b0\u01a1ng t\u00e1c, cho ph\u00e9p nh\u1eadp s\u1ed1 v\u00e0 t\u00ednh to\u00e1n ngay l\u1eadp t\u1ee9c. B\u1ea1n n\u00ean th\u1eed nh\u1eadp v\u00e0i ph\u00e9p t\u00ednh c\u01a1 b\u1ea3n \u0111\u1ec3 \u0111\u1ea3m b\u1ea3o ch\u1ee9c n\u0103ng ho\u1ea1t \u0111\u1ed9ng b\u00ecnh th\u01b0\u1eddng.<\/p>\n M\u1ed9t s\u1ed1 l\u1ed7i th\u01b0\u1eddng g\u1eb7p khi nh\u00fang widget t\u1eeb 1phantram.com:<\/p>\n \nWidget kh\u00f4ng hi\u1ec3n th\u1ecb (kho\u1ea3ng tr\u1eafng):<\/strong> Th\u01b0\u1eddng do code iframe b\u1ecb thi\u1ebfu thu\u1ed9c t\u00ednh quan tr\u1ecdng nh\u01b0 src<\/code> ho\u1eb7c b\u1ecb CMS l\u1ecdc b\u1ecf. H\u00e3y ki\u1ec3m tra l\u1ea1i xem b\u1ea1n \u0111\u00e3 copy \u0111\u1ea7y \u0111\u1ee7 \u0111o\u1ea1n code ch\u01b0a, \u0111\u1eb7c bi\u1ec7t l\u00e0 ph\u1ea7n URL b\u1eaft \u0111\u1ea7u b\u1eb1ng https:\/\/1phantram.com\/embed\/<\/code>.<\/li>\n Giao di\u1ec7n kh\u00f4ng kh\u1edbp v\u1edbi website:<\/strong> N\u1ebfu ch\u1ecdn theme “T\u1ef1 \u0111\u1ed9ng” m\u00e0 widget v\u1eabn s\u00e1ng\/t\u1ed1i kh\u00f4ng ph\u00f9 h\u1ee3p, b\u1ea1n c\u00f3 th\u1ec3 \u0111\u1ed5i th\u1ee7 c\u00f4ng th\u00e0nh theme=light<\/code> ho\u1eb7c theme=dark<\/code> trong URL c\u1ee7a iframe.<\/li>\n K\u00edch th\u01b0\u1edbc b\u1ecb v\u1ee1 tr\u00ean mobile:<\/strong> Code m\u1eabu \u0111\u00e3 c\u00f3 style=\"border:0;max-width:100%;\"<\/code> \u0111\u1ec3 co gi\u00e3n theo m\u00e0n h\u00ecnh. N\u1ebfu widget v\u1eabn tr\u00e0n vi\u1ec1n, h\u00e3y ki\u1ec3m tra xem container ch\u1ee9a iframe tr\u00ean website c\u1ee7a b\u1ea1n c\u00f3 thi\u1ebft l\u1eadp CSS c\u1ed1 \u0111\u1ecbnh chi\u1ec1u r\u1ed9ng hay kh\u00f4ng.<\/li>\n T\u00ednh n\u0103ng auto-resize chi\u1ec1u cao kh\u00f4ng ho\u1ea1t \u0111\u1ed9ng:<\/strong> Phi\u00ean b\u1ea3n code “HTML iframe” c\u01a1 b\u1ea3n c\u00f3 chi\u1ec1u cao c\u1ed1 \u0111\u1ecbnh (v\u00ed d\u1ee5 600px). \u0110\u1ec3 widget t\u1ef1 \u0111i\u1ec1u ch\u1ec9nh chi\u1ec1u cao theo n\u1ed9i dung, b\u1ea1n c\u1ea7n s\u1eed d\u1ee5ng code t\u1eeb tab “HTML + auto-resize” tr\u00ean c\u00f4ng c\u1ee5, t\u00edch h\u1ee3p th\u00eam JavaScript nh\u1eadn s\u1ef1 ki\u1ec7n postMessage.<\/li>\n<\/ul>\nM\u1eb9o th\u1ef1c t\u1ebf khi s\u1eed d\u1ee5ng widget<\/h2>\n\u0110\u1ec3 t\u1eadn d\u1ee5ng t\u1ed1i \u0111a widget v\u00e0 t\u0103ng tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng, b\u1ea1n c\u00f3 th\u1ec3 \u00e1p d\u1ee5ng c\u00e1c m\u1eb9o sau:<\/p>\n \nCh\u1ecdn \u0111\u00fang c\u00f4ng c\u1ee5 cho ng\u1eef c\u1ea3nh:<\/strong> N\u1ebfu b\u00e0i vi\u1ebft v\u1ec1 gi\u1ea3m c\u00e2n, h\u00e3y nh\u00fang widget “BMI + gi\u1ea3m c\u00e2n”. B\u00e0i v\u1ec1 \u0111\u1ea7u t\u01b0 th\u00ec d\u00f9ng “L\u00e3i k\u00e9p” ho\u1eb7c “L\u00e3i su\u1ea5t \u0111\u01a1n”. S\u1ef1 ph\u00f9 h\u1ee3p gi\u00fap ng\u01b0\u1eddi \u0111\u1ecdc th\u1ea5y c\u00f4ng c\u1ee5 h\u1eefu \u00edch ngay l\u1eadp t\u1ee9c.<\/li>\n \u0110\u1eb7t widget g\u1ea7n n\u1ed9i dung li\u00ean quan:<\/strong> Thay v\u00ec \u0111\u1eb7t cu\u1ed1i b\u00e0i, h\u00e3y nh\u00fang widget ngay sau \u0111o\u1ea1n v\u0103n gi\u1edbi thi\u1ec7u v\u1ea5n \u0111\u1ec1 t\u00ednh to\u00e1n. V\u00ed d\u1ee5, sau khi gi\u1ea3i th\u00edch c\u00f4ng th\u1ee9c l\u00e3i k\u00e9p, b\u1ea1n \u0111\u1eb7t widget l\u00e3i k\u00e9p \u0111\u1ec3 \u0111\u1ed9c gi\u1ea3 th\u1eed nghi\u1ec7m lu\u00f4n.<\/li>\n S\u1eed d\u1ee5ng theme “T\u1ef1 \u0111\u1ed9ng”:<\/strong> \u0110\u00e2y l\u00e0 t\u00f9y ch\u1ecdn th\u00f4ng minh, gi\u00fap widget t\u1ef1 \u0111\u1ed9ng chuy\u1ec3n sang ch\u1ebf \u0111\u1ed9 s\u00e1ng ho\u1eb7c t\u1ed1i \u0111\u1ec3 h\u00e0i h\u00f2a v\u1edbi giao di\u1ec7n website c\u1ee7a b\u1ea1n, t\u1ea1o c\u1ea3m gi\u00e1c li\u1ec1n m\u1ea1ch.<\/li>\n Ki\u1ec3m tra tr\u00ean nhi\u1ec1u thi\u1ebft b\u1ecb:<\/strong> Lu\u00f4n xem tr\u01b0\u1edbc trang web tr\u00ean \u0111i\u1ec7n tho\u1ea1i, m\u00e1y t\u00ednh b\u1ea3ng v\u00e0 desktop \u0111\u1ec3 \u0111\u1ea3m b\u1ea3o widget hi\u1ec3n th\u1ecb r\u00f5 r\u00e0ng, c\u00e1c n\u00fat b\u1ea5m d\u1ec5 thao t\u00e1c tr\u00ean m\u00e0n h\u00ecnh c\u1ea3m \u1ee9ng.<\/li>\n<\/ul>\nT\u00ecnh hu\u1ed1ng \u00e1p d\u1ee5ng c\u1ee5 th\u1ec3<\/h2>\nWidget m\u00e1y t\u00ednh ph\u1ea7n tr\u0103m c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c \u00e1p d\u1ee5ng linh ho\u1ea1t trong nhi\u1ec1u lo\u1ea1i website kh\u00e1c nhau:<\/p>\n \nBlog t\u00e0i ch\u00ednh c\u00e1 nh\u00e2n:<\/strong> Nh\u00fang widget “L\u00e3i k\u00e9p”, “L\u01b0\u01a1ng Net (thu\u1ebf TNCN)” ho\u1eb7c “Break-even \/ Ho\u00e0n v\u1ed1n” v\u00e0o c\u00e1c b\u00e0i vi\u1ebft h\u01b0\u1edbng d\u1eabn \u0111\u1ea7u t\u01b0, t\u00ednh thu\u1ebf thu nh\u1eadp, ho\u1eb7c l\u1eadp k\u1ebf ho\u1ea1ch kinh doanh. \u0110\u1ed9c gi\u1ea3 c\u00f3 th\u1ec3 t\u1ef1 nh\u1eadp s\u1ed1 li\u1ec7u c\u00e1 nh\u00e2n \u0111\u1ec3 xem k\u1ebft qu\u1ea3 c\u1ee5 th\u1ec3.<\/li>\n Website gi\u00e1o d\u1ee5c, d\u1ea1y h\u1ecdc:<\/strong> Khi gi\u1ea3ng d\u1ea1y c\u00e1c kh\u00e1i ni\u1ec7m ph\u1ea7n tr\u0103m, t\u1ef7 l\u1ec7, gi\u00e1o vi\u00ean c\u00f3 th\u1ec3 nh\u00fang c\u00e1c widget c\u01a1 b\u1ea3n nh\u01b0 “T\u00ednh % c\u1ee7a gi\u00e1 tr\u1ecb”, “Bao nhi\u00eau %” v\u00e0o b\u00e0i gi\u1ea3ng tr\u1ef1c tuy\u1ebfn, cho ph\u00e9p h\u1ecdc sinh th\u1ef1c h\u00e0nh ngay.<\/li>\n Trang web th\u01b0\u01a1ng m\u1ea1i \u0111i\u1ec7n t\u1eed, review s\u1ea3n ph\u1ea9m:<\/strong> Trong b\u00e0i vi\u1ebft soi sale, so s\u00e1nh gi\u00e1, b\u1ea1n c\u00f3 th\u1ec3 nh\u00fang widget “T\u00ednh gi\u1ea3m gi\u00e1 \/ Sale” ho\u1eb7c “So s\u00e1nh 2 gi\u00e1”. Ng\u01b0\u1eddi \u0111\u1ecdc s\u1ebd d\u1ec5 d\u00e0ng t\u00ednh to\u00e1n m\u1ee9c gi\u1ea3m gi\u00e1 th\u1ef1c t\u1ebf ho\u1eb7c ph\u1ea7n tr\u0103m ch\u00eanh l\u1ec7ch gi\u1eefa hai s\u1ea3n ph\u1ea9m.<\/li>\n Blog s\u1ee9c kh\u1ecfe, th\u1ec3 h\u00ecnh:<\/strong> Widget “BMI + gi\u1ea3m c\u00e2n” l\u00e0 c\u00f4ng c\u1ee5 t\u01b0\u01a1ng t\u00e1c tuy\u1ec7t v\u1eddi. \u0110\u1ed9c gi\u1ea3 c\u00f3 th\u1ec3 t\u1ef1 t\u00ednh ch\u1ec9 s\u1ed1 BMI v\u00e0 xem l\u01b0\u1ee3ng calo c\u1ea7n \u0111\u1ed1t ch\u00e1y \u0111\u1ec3 \u0111\u1ea1t m\u1ee5c ti\u00eau ngay tr\u00ean trang.<\/li>\n Website \u1ea9m th\u1ef1c, n\u1ea5u \u0103n:<\/strong> Widget “Scale c\u00f4ng th\u1ee9c” gi\u00fap ng\u01b0\u1eddi n\u1ed9i tr\u1ee3 d\u1ec5 d\u00e0ng \u0111i\u1ec1u ch\u1ec9nh nguy\u00ean li\u1ec7u khi mu\u1ed1n n\u1ea5u s\u1ed1 l\u01b0\u1ee3ng kh\u1ea9u ph\u1ea7n kh\u00e1c v\u1edbi c\u00f4ng th\u1ee9c g\u1ed1c.<\/li>\n<\/ul>\n<\/a>Thao t\u00e1c S\u00e1ng tr\u00ean c\u00f4ng c\u1ee5 C\u00e1ch nh\u00fang widget m\u00e1y t\u00ednh ph\u1ea7n tr\u0103m v\u00e0o website. Nh\u1ea5p \u1ea3nh \u0111\u1ec3 xem k\u00edch th\u01b0\u1edbc l\u1edbn.<\/figcaption><\/figure>\nB\u1ea3ng t\u1ed5ng h\u1ee3p l\u01b0u \u00fd nhanh<\/h2>\n\n\n\n\n\n\n\n\n\n\nH\u1ea1ng m\u1ee5c<\/th>\n L\u01b0u \u00fd quan tr\u1ecdng<\/th>\n Gi\u1ea3i ph\u00e1p\/H\u00e0nh \u0111\u1ed9ng<\/th>\n<\/tr>\n<\/thead>\n Chu\u1ea9n b\u1ecb<\/strong><\/td>\n X\u00e1c \u0111\u1ecbnh \u0111\u00fang lo\u1ea1i m\u00e1y t\u00ednh ph\u1ea7n tr\u0103m c\u1ea7n nh\u00fang, ph\u00f9 h\u1ee3p v\u1edbi n\u1ed9i dung b\u00e0i vi\u1ebft.<\/td>\n Truy c\u1eadp 1phantram.com\/widget-embed<\/a>, xem qua 16 c\u00f4ng c\u1ee5 v\u00e0 ch\u1ecdn 1.<\/td>\n<\/tr>\n Tu\u1ef3 ch\u1ec9nh<\/strong><\/td>\n Giao di\u1ec7n (theme) v\u00e0 k\u00edch th\u01b0\u1edbc \u1ea3nh h\u01b0\u1edfng l\u1edbn \u0111\u1ebfn t\u00ednh th\u1ea9m m\u1ef9 v\u00e0 kh\u1ea3 n\u0103ng hi\u1ec3n th\u1ecb.<\/td>\n Ch\u1ecdn “T\u1ef1 \u0111\u1ed9ng” \u0111\u1ec3 match m\u00e0u website. \u0110\u1eb7t chi\u1ec1u r\u1ed9ng ph\u00f9 h\u1ee3p (800px ho\u1eb7c 100%), chi\u1ec1u cao n\u00ean d\u00f9ng “t\u1ef1 \u0111\u1ed9ng” ho\u1eb7c code auto-resize.<\/td>\n<\/tr>\n Thao t\u00e1c nh\u00fang<\/strong><\/td>\n Code iframe ph\u1ea3i \u0111\u01b0\u1ee3c d\u00e1n nguy\u00ean v\u1eb9n v\u00e0o \u0111\u00fang v\u1ecb tr\u00ed trong m\u00e3 ngu\u1ed3n ho\u1eb7c tr\u00ecnh so\u1ea1n th\u1ea3o c\u1ee7a CMS.<\/td>\n Sao ch\u00e9p to\u00e0n b\u1ed9 code t\u1eeb \u00f4 “Code nh\u00fang”. V\u1edbi WordPress, d\u00f9ng block “Custom HTML”. V\u1edbi website HTML, d\u00e1n v\u00e0o v\u1ecb tr\u00ed mong mu\u1ed1n.<\/td>\n<\/tr>\n Ki\u1ec3m tra sau nh\u00fang<\/strong><\/td>\n Widget c\u00f3 th\u1ec3 g\u1eb7p l\u1ed7i kh\u00f4ng hi\u1ec3n th\u1ecb, sai k\u00edch th\u01b0\u1edbc ho\u1eb7c kh\u00f4ng t\u01b0\u01a1ng t\u00e1c \u0111\u01b0\u1ee3c.<\/td>\n M\u1edf trang web tr\u00ean tr\u00ecnh duy\u1ec7t, th\u1eed nh\u1eadp s\u1ed1 v\u00e0 t\u00ednh to\u00e1n. Ki\u1ec3m tra tr\u00ean c\u1ea3 \u0111i\u1ec7n tho\u1ea1i v\u00e0 m\u00e1y t\u00ednh. Xem Console (F12) n\u1ebfu c\u00f3 l\u1ed7i JavaScript.<\/td>\n<\/tr>\n T\u1ed1i \u01b0u ho\u00e1<\/strong><\/td>\n M\u1ee5c ti\u00eau l\u00e0 t\u0103ng tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng v\u00e0 th\u1eddi gian tr\u00ean trang.<\/td>\n \u0110\u1eb7t widget g\u1ea7n n\u1ed9i dung m\u00f4 t\u1ea3 v\u1ea5n \u0111\u1ec1 t\u00ednh to\u00e1n. Khuy\u1ebfn kh\u00edch ng\u01b0\u1eddi \u0111\u1ecdc t\u1ef1 th\u1eed trong b\u00e0i vi\u1ebft.<\/td>\n<\/tr>\n B\u1ea3o tr\u00ec<\/strong><\/td>\n Widget \u0111\u01b0\u1ee3c cung c\u1ea5p mi\u1ec5n ph\u00ed v\u00e0 host b\u1edfi 1phantram.com.<\/td>\n Kh\u00f4ng c\u1ea7n c\u1eadp nh\u1eadt code th\u1ee7 c\u00f4ng. Tuy nhi\u00ean, n\u00ean \u0111\u1ecbnh k\u1ef3 ki\u1ec3m tra xem li\u00ean k\u1ebft c\u00f3 c\u00f2n ho\u1ea1t \u0111\u1ed9ng b\u00ecnh th\u01b0\u1eddng kh\u00f4ng.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\nB\u1ea3ng tr\u00ean t\u00f3m t\u1eaft c\u00e1c b\u01b0\u1edbc t\u1eeb \u0111\u1ea7u \u0111\u1ebfn cu\u1ed1i v\u00e0 nh\u1eefng \u0111i\u1ec3m c\u1ea7n l\u01b0u t\u00e2m nh\u1ea5t. Vi\u1ec7c tu\u00e2n th\u1ee7 c\u00e1c l\u01b0u \u00fd n\u00e0y s\u1ebd gi\u00fap qu\u00e1 tr\u00ecnh nh\u00fang widget di\u1ec5n ra su\u00f4n s\u1ebb, \u0111\u1ea3m b\u1ea3o c\u00f4ng c\u1ee5 hi\u1ec3n th\u1ecb \u0111\u1eb9p m\u1eaft v\u00e0 ho\u1ea1t \u0111\u1ed9ng hi\u1ec7u qu\u1ea3, t\u1eeb \u0111\u00f3 ph\u00e1t huy t\u1ed1i \u0111a gi\u00e1 tr\u1ecb t\u01b0\u01a1ng t\u00e1c cho website c\u1ee7a b\u1ea1n.<\/p>\n K\u1ebft lu\u1eadn<\/h2>\nNh\u00fang widget m\u00e1y t\u00ednh ph\u1ea7n tr\u0103m t\u1eeb 1phantram.com v\u00e0o website l\u00e0 m\u1ed9t gi\u1ea3i ph\u00e1p \u0111\u01a1n gi\u1ea3n nh\u01b0ng mang l\u1ea1i hi\u1ec7u qu\u1ea3 t\u01b0\u01a1ng t\u00e1c cao. V\u1edbi thao t\u00e1c ch\u1ec9 g\u1ed3m ch\u1ecdn c\u00f4ng c\u1ee5, t\u00f9y ch\u1ec9nh giao di\u1ec7n, sao ch\u00e9p v\u00e0 d\u00e1n code, b\u1ea1n \u0111\u00e3 c\u00f3 th\u1ec3 t\u00edch h\u1ee3p ngay m\u1ed9t c\u00f4ng c\u1ee5 t\u00ednh to\u00e1n chuy\u00ean nghi\u1ec7p, t\u1ed1i \u01b0u cho di \u0111\u1ed9ng v\u00e0 ho\u00e0n to\u00e0n mi\u1ec5n ph\u00ed v\u00e0o blog ho\u1eb7c website c\u1ee7a m\u00ecnh. C\u00f4ng c\u1ee5 n\u00e0y kh\u00f4ng ch\u1ec9 gi\u1ea3i quy\u1ebft nhu c\u1ea7u t\u00ednh to\u00e1n ngay l\u1eadp t\u1ee9c c\u1ee7a \u0111\u1ed9c gi\u1ea3, gi\u00fap h\u1ecd \u1edf l\u1ea1i trang l\u00e2u h\u01a1n, m\u00e0 c\u00f2n l\u00e0 m\u1ed9t t\u00edn hi\u1ec7u t\u00edch c\u1ef1c cho c\u00e1c c\u00f4ng c\u1ee5 t\u00ecm ki\u1ebfm \u0111\u00e1nh gi\u00e1 ch\u1ea5t l\u01b0\u1ee3ng n\u1ed9i dung. H\u00e3y b\u1eaft \u0111\u1ea7u b\u1eb1ng vi\u1ec7c ch\u1ecdn m\u1ed9t widget ph\u00f9 h\u1ee3p nh\u1ea5t v\u1edbi ch\u1ee7 \u0111\u1ec1 b\u00e0i vi\u1ebft ti\u1ebfp theo c\u1ee7a b\u1ea1n v\u00e0 tr\u1ea3i nghi\u1ec7m s\u1ef1 kh\u00e1c bi\u1ec7t.<\/p>\n C\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p<\/h2>\nC\u00f3 c\u1ea7n \u0111\u0103ng k\u00fd t\u00e0i kho\u1ea3n tr\u00ean 1phantram.com \u0111\u1ec3 s\u1eed d\u1ee5ng widget kh\u00f4ng?<\/strong> Kh\u00f4ng. D\u1ecbch v\u1ee5 nh\u00fang widget ho\u00e0n to\u00e0n mi\u1ec5n ph\u00ed, kh\u00f4ng gi\u1edbi h\u1ea1n v\u00e0 kh\u00f4ng y\u00eau c\u1ea7u \u0111\u0103ng k\u00fd t\u00e0i kho\u1ea3n. B\u1ea1n ch\u1ec9 c\u1ea7n truy c\u1eadp trang c\u00f4ng c\u1ee5, t\u00f9y ch\u1ec9nh v\u00e0 l\u1ea5y code.<\/p>\n T\u00f4i c\u00f3 th\u1ec3 nh\u00fang nhi\u1ec1u widget kh\u00e1c nhau v\u00e0o c\u00f9ng m\u1ed9t trang web \u0111\u01b0\u1ee3c kh\u00f4ng?<\/strong> \u0110\u01b0\u1ee3c. B\u1ea1n c\u00f3 th\u1ec3 nh\u00fang bao nhi\u00eau widget t\u00f9y th\u00edch v\u00e0o c\u00e1c v\u1ecb tr\u00ed kh\u00e1c nhau tr\u00ean c\u00f9ng m\u1ed9t trang. M\u1ed7i widget s\u1ebd ho\u1ea1t \u0111\u1ed9ng \u0111\u1ed9c l\u1eadp v\u1edbi nhau.<\/p>\n Widget c\u00f3 h\u1ed7 tr\u1ee3 ti\u1ebfng Vi\u1ec7t kh\u00f4ng?<\/strong> C\u00f3. To\u00e0n b\u1ed9 giao di\u1ec7n v\u00e0 h\u01b0\u1edbng d\u1eabn tr\u00ean c\u00e1c widget \u0111\u1ec1u b\u1eb1ng ti\u1ebfng Vi\u1ec7t, ph\u00f9 h\u1ee3p v\u1edbi \u0111a s\u1ed1 ng\u01b0\u1eddi d\u00f9ng t\u1ea1i Vi\u1ec7t Nam.<\/p>\n L\u00e0m sao \u0111\u1ec3 thay \u0111\u1ed5i c\u00f4ng c\u1ee5 sau khi \u0111\u00e3 nh\u00fang code?<\/strong> B\u1ea1n c\u1ea7n thay \u0111\u1ed5i URL trong thu\u1ed9c t\u00ednh src<\/code> c\u1ee7a iframe. V\u00ed d\u1ee5, t\u1eeb ...\/embed\/bmi<\/code> th\u00e0nh ...\/embed\/lai-kep<\/code> \u0111\u1ec3 chuy\u1ec3n t\u1eeb m\u00e1y t\u00ednh BMI sang m\u00e1y t\u00ednh l\u00e3i k\u00e9p. B\u1ea1n c\u00f3 th\u1ec3 quay l\u1ea1i trang c\u00f4ng c\u1ee5, ch\u1ecdn c\u00f4ng c\u1ee5 m\u1edbi v\u00e0 copy \u0111o\u1ea1n code m\u1edbi \u0111\u1ec3 thay th\u1ebf.<\/p>\n Widget c\u00f3 ho\u1ea1t \u0111\u1ed9ng tr\u00ean c\u00e1c n\u1ec1n t\u1ea3ng nh\u01b0 Shopify, Wix, Blogger kh\u00f4ng?<\/strong> C\u00f3, v\u1ec1 nguy\u00ean t\u1eafc, n\u1ebfu n\u1ec1n t\u1ea3ng \u0111\u00f3 cho ph\u00e9p ch\u00e8n m\u00e3 HTML\/iframe t\u00f9y ch\u1ec9nh v\u00e0o b\u00e0i vi\u1ebft ho\u1eb7c trang web th\u00ec b\u1ea1n \u0111\u1ec1u c\u00f3 th\u1ec3 nh\u00fang \u0111\u01b0\u1ee3c widget. Quy tr\u00ecnh c\u01a1 b\u1ea3n v\u1eabn l\u00e0 sao ch\u00e9p v\u00e0 d\u00e1n code iframe v\u00e0o tr\u00ecnh so\u1ea1n th\u1ea3o HTML c\u1ee7a n\u1ec1n t\u1ea3ng \u0111\u00f3.<\/p>\n T\u00f4i lo ng\u1ea1i v\u1ec1 t\u1ed1c \u0111\u1ed9 t\u1ea3i trang khi nh\u00fang iframe t\u1eeb b\u00ean ngo\u00e0i?<\/strong> Widget t\u1eeb 1phantram.com \u0111\u00e3 \u0111\u01b0\u1ee3c t\u1ed1i \u01b0u h\u00f3a t\u1ed1c \u0111\u1ed9. Code m\u1eabu c\u00f3 thu\u1ed9c t\u00ednh loading=\"lazy\"<\/code> gi\u00fap tr\u00ec ho\u00e3n t\u1ea3i iframe cho \u0111\u1ebfn khi ng\u01b0\u1eddi d\u00f9ng cu\u1ed9n \u0111\u1ebfn g\u1ea7n n\u00f3, gi\u1ea3m thi\u1ec3u \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn t\u1ed1c \u0111\u1ed9 t\u1ea3i trang ch\u00ednh.<\/p>\n L\u00e0m th\u1ebf n\u00e0o \u0111\u1ec3 widget t\u1ef1 \u0111\u1ed9ng co gi\u00e3n chi\u1ec1u cao theo n\u1ed9i dung?<\/strong> Tr\u00ean c\u00f4ng c\u1ee5, sau khi ch\u1ecdn xong t\u00f9y ch\u1ec9nh, b\u1ea1n h\u00e3y chuy\u1ec3n sang tab “HTML + auto-resize” thay v\u00ec tab “HTML iframe” m\u1eb7c \u0111\u1ecbnh. \u0110o\u1ea1n code \u1edf tab n\u00e0y \u0111\u00e3 bao g\u1ed3m JavaScript \u0111\u1ec3 t\u1ef1 \u0111\u1ed9ng \u0111i\u1ec1u ch\u1ec9nh chi\u1ec1u cao c\u1ee7a iframe d\u1ef1a tr\u00ean n\u1ed9i dung b\u00ean trong.<\/p>\n","protected":false},"excerpt":{"rendered":" H\u01b0\u1edbng d\u1eabn chi ti\u1ebft t\u1eebng b\u01b0\u1edbc ki\u1ec3m tra, x\u1eed l\u00fd l\u1ed7i, m\u1eb9o s\u1eed d\u1ee5ng v\u00e0 c\u00e1c t\u00ecnh hu\u1ed1ng \u00e1p d\u1ee5ng th\u1ef1c t\u1ebf \u0111\u1ec3 nh\u00fang widget…<\/p>\n","protected":false},"author":1,"featured_media":1659,"comment_status":"","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"C\u00e1ch nh\u00fang widget m\u00e1y t\u00ednh ph\u1ea7n tr\u0103m v\u00e0o websit... | 1Ph\u1ea7n Tr\u0103m","rank_math_description":"H\u01b0\u1edbng d\u1eabn chi ti\u1ebft v\u1ec1 nh\u00fang widget m\u00e1y v\u00e0o website: c\u00f4ng th\u1ee9c, v\u00ed d\u1ee5 th\u1ef1c t\u1ebf, m\u1eb9o v\u00e0 c\u00f4ng c\u1ee5 t\u00ednh online mi\u1ec5n ph\u00ed t\u1ea1i 1phantram.com.","rank_math_focus_keyword":"nh\u00fang widget m\u00e1y v\u00e0o website","footnotes":""},"categories":[1],"tags":[],"class_list":["post-1660","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-huong-dan"],"_links":{"self":[{"href":"https:\/\/1phantram.com\/blog\/wp-json\/wp\/v2\/posts\/1660","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/1phantram.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/1phantram.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/1phantram.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/1phantram.com\/blog\/wp-json\/wp\/v2\/comments?post=1660"}],"version-history":[{"count":0,"href":"https:\/\/1phantram.com\/blog\/wp-json\/wp\/v2\/posts\/1660\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/1phantram.com\/blog\/wp-json\/wp\/v2\/media\/1659"}],"wp:attachment":[{"href":"https:\/\/1phantram.com\/blog\/wp-json\/wp\/v2\/media?parent=1660"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/1phantram.com\/blog\/wp-json\/wp\/v2\/categories?post=1660"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/1phantram.com\/blog\/wp-json\/wp\/v2\/tags?post=1660"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

Chu\u1ea9n b\u1ecb d\u1eef li\u1ec7u v\u00e0 c\u00f4ng c\u1ee5<\/h2>\nTr\u01b0\u1edbc khi b\u1eaft \u0111\u1ea7u, b\u1ea1n c\u1ea7n chu\u1ea9n b\u1ecb:<\/p>\n

H\u01b0\u1edbng d\u1eabn t\u1eebng b\u01b0\u1edbc chi ti\u1ebft \u0111\u1ec3 nh\u00fang widget<\/h2>\n

B\u01b0\u1edbc 3: T\u00f9y ch\u1ec9nh giao di\u1ec7n (theme)<\/h3>\n\u1ede m\u1ee5c “2. Giao di\u1ec7n (theme)”, b\u1ea1n c\u00f3 ba l\u1ef1a ch\u1ecdn:<\/p>\n