{"id":4082,"date":"2026-01-01T09:52:26","date_gmt":"2026-01-01T09:52:26","guid":{"rendered":"https:\/\/cachsudung.com\/?p=4082"},"modified":"2026-01-01T09:52:26","modified_gmt":"2026-01-01T09:52:26","slug":"code-hien-thi-khuyen-mai-dep-cho-flatsome","status":"publish","type":"post","link":"https:\/\/how.congdongso.net\/en\/code-shows-beautiful-beauty-tips-for-flatsome\/","title":{"rendered":"The code shows nice promotions for flatsome like Cellphones"},"content":{"rendered":"<h2><strong>The code displays a nice promotion for flatsome<\/strong> like Cellphones.<\/h2>\n<p>This is a code snippet that displays a beautiful promotion section. It helps make the promotion section on your flastsome interface more prominent. Below is the code and detailed instructions on how to install <strong><a href=\"https:\/\/how.congdongso.net\/wordpress\/code-hien-thi-khuyen-mai-dep-cho-flatsome\/#gsc.tab=0\">The code shows nice promotions for flatsome like Cellphones<\/a> Please. <\/strong>You can also find more content at <strong><a href=\"https:\/\/how.congdongso.net\/wordpress\/code\/\" target=\"_blank\" rel=\"noopener\">Code<\/a><\/strong> or <strong><a href=\"https:\/\/how.congdongso.net\/wordpress\/\" target=\"_blank\" rel=\"noopener\">Code wordpress<\/a><\/strong><\/p>\n<p>Product image after adding code<\/p>\n<figure id=\"attachment_4093\" aria-describedby=\"caption-attachment-4093\" style=\"width: 2018px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-4093\" src=\"https:\/\/how.congdongso.net\/wp-content\/uploads\/2023\/03\/code-hien-thi-khuyen-mai-dep-cho-flatsome.png\" alt=\"The code displays a nice promotion for flatsome\" width=\"2028\" height=\"766\" title=\"\" srcset=\"https:\/\/how.congdongso.net\/wp-content\/uploads\/2023\/03\/code-hien-thi-khuyen-mai-dep-cho-flatsome.png 2028w, https:\/\/how.congdongso.net\/wp-content\/uploads\/2023\/03\/code-hien-thi-khuyen-mai-dep-cho-flatsome-300x113.png 300w, https:\/\/how.congdongso.net\/wp-content\/uploads\/2023\/03\/code-hien-thi-khuyen-mai-dep-cho-flatsome-1024x387.png 1024w, https:\/\/how.congdongso.net\/wp-content\/uploads\/2023\/03\/code-hien-thi-khuyen-mai-dep-cho-flatsome-768x290.png 768w, https:\/\/how.congdongso.net\/wp-content\/uploads\/2023\/03\/code-hien-thi-khuyen-mai-dep-cho-flatsome-1536x580.png 1536w\" sizes=\"auto, (max-width: 2028px) 100vw, 2028px\" \/><figcaption id=\"caption-attachment-4093\" class=\"wp-caption-text\">Demo code shows nice promotion for flatsome<\/figcaption><\/figure>\n<ul>\n<li><a href=\"https:\/\/hocdohoacaptoc.com\/khoa-hoc-thiet-ke-website-bang-wordpress\/\" target=\"_blank\" rel=\"noopener\">SEO standard website management course to get to the top of Google quickly<\/a><\/li>\n<li><a href=\"https:\/\/how.congdongso.net\/wordpress\/code-tu-dong-luu-anh-vao-hot\/\" target=\"_blank\" rel=\"noopener\">Code to automatically save images to hot when copying images from other pages<\/a><\/li>\n<li><a href=\"https:\/\/how.congdongso.net\/dich-vu-quan-tri-website\/\" target=\"_blank\" rel=\"noopener\">Website management services effectively take care of websites<\/a><\/li>\n<li><a href=\"https:\/\/how.congdongso.net\/dich-vu-thiet-ke-website-chuan-seo\/\" target=\"_blank\" rel=\"noopener\">Website design service according to SEO standards, good conversion<\/a><\/li>\n<li><a href=\"https:\/\/how.congdongso.net\/cai-dat-phan-mem\/\" target=\"_blank\" rel=\"noopener\">Online Computer Software Installation Service<\/a><\/li>\n<\/ul>\n<h2>Instructions for inserting code to display beautiful promotions for flatsome<\/h2>\n<h3>Step 1: Log in with your web administrator rights<\/h3>\n<p>You need to log in with the highest administrative rights to insert code into your website.<\/p>\n<h3>Step 2: Determine exactly if your website is using Flatsome<\/h3>\n<p>After logging in with administrative rights, find the following path: <strong>Interface &gt; interface<\/strong><\/p>\n<figure id=\"attachment_4095\" aria-describedby=\"caption-attachment-4095\" style=\"width: 1511px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-4095\" src=\"https:\/\/how.congdongso.net\/wp-content\/uploads\/2023\/03\/code-hien-thi-khuyen-mai-dep-cho-flatsome-1.jpg\" alt=\"The code displays a nice promotion for flatsome\" width=\"1521\" height=\"341\" title=\"\" srcset=\"https:\/\/how.congdongso.net\/wp-content\/uploads\/2023\/03\/code-hien-thi-khuyen-mai-dep-cho-flatsome-1.jpg 1521w, https:\/\/how.congdongso.net\/wp-content\/uploads\/2023\/03\/code-hien-thi-khuyen-mai-dep-cho-flatsome-1-300x67.jpg 300w, https:\/\/how.congdongso.net\/wp-content\/uploads\/2023\/03\/code-hien-thi-khuyen-mai-dep-cho-flatsome-1-1024x230.jpg 1024w, https:\/\/how.congdongso.net\/wp-content\/uploads\/2023\/03\/code-hien-thi-khuyen-mai-dep-cho-flatsome-1-768x172.jpg 768w\" sizes=\"auto, (max-width: 1521px) 100vw, 1521px\" \/><figcaption id=\"caption-attachment-4095\" class=\"wp-caption-text\">See if the interface is flatsome<\/figcaption><\/figure>\n<h3>Step 3: insert code<\/h3>\n<p>Please follow the following link to safely insert code without losing it when updating the interface. <strong>Appearance &gt; Customization &gt; Additional CSS<\/strong> Then paste the code below into the additional CSS<\/p>\n<pre>\/* Badge Sale *\/ .badge-container {margin:0} .badge-circle-inside .badge-inner, .badge-circle .badge-inner {border-radius: 8px 30px 30px 0;background: #f00;position: relative;padding: 0 5px;} .badge-circle-inside .badge-inner:after, .badge-circle .badge-inner:after {position: absolute;content: &#039;&#039;;width: 3px;height: 15px;background : #8b0018;bottom: -5px;left: 0;z-index: -1;border-radius: 0 0 0 15px;} .badge {height: 30px;width: 45px;font-size: 13px;margin-left: -3px;margin-top: 0px;}<\/pre>\n<h3>Step 4: Set up display<\/h3>\n<p>In order for the code to display beautifully, please add Settings according to the following link.<\/p>\n<figure id=\"attachment_4096\" aria-describedby=\"caption-attachment-4096\" style=\"width: 950px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-4096\" src=\"https:\/\/how.congdongso.net\/wp-content\/uploads\/2023\/03\/code-hien-thi-khuyen-mai-dep-cho-flatsome-1-1.jpg\" alt=\"The code displays a nice promotion for flatsome\" width=\"960\" height=\"480\" title=\"\" srcset=\"https:\/\/how.congdongso.net\/wp-content\/uploads\/2023\/03\/code-hien-thi-khuyen-mai-dep-cho-flatsome-1-1.jpg 960w, https:\/\/how.congdongso.net\/wp-content\/uploads\/2023\/03\/code-hien-thi-khuyen-mai-dep-cho-flatsome-1-1-300x150.jpg 300w, https:\/\/how.congdongso.net\/wp-content\/uploads\/2023\/03\/code-hien-thi-khuyen-mai-dep-cho-flatsome-1-1-768x384.jpg 768w\" sizes=\"auto, (max-width: 960px) 100vw, 960px\" \/><figcaption id=\"caption-attachment-4096\" class=\"wp-caption-text\">Set up a beautiful promotion display for flatsome<\/figcaption><\/figure>\n<p>After you select this correct display, your code will work as described in the article<\/p>\n<ol>\n<li><strong>.badge-container {margin:0}<\/strong>: Set the margin of the container containing the markup to 0.<\/li>\n<li><strong>.badge-circle-inside .badge-inner, .badge-circle .badge-inner<\/strong>: Format for inner circle and outer circle markers.<\/li>\n<li><strong>border-radius:<\/strong> 8px 30px 30px 0: Use radius to make the corner of the mark circular and rectangular.<\/li>\n<li><strong>background:<\/strong> #f00: Select the background color for the markup.<\/li>\n<li><strong>position:<\/strong> relative: Use relative position for markup.<\/li>\n<li><strong>padding:<\/strong> 0 5px;: Add space between content and border.<\/li>\n<li><strong>.badge-circle-inside .badge-inner:after, .badge-circle .badge-inner:after<\/strong>: Format the tail of the inner circle and outer circle markup.<\/li>\n<li><strong>position: absolute<\/strong><strong>:<\/strong> Use absolute positioning for the tail of the markup.<\/li>\n<li><strong>N\u1ed9i dung:<\/strong> \u201d;: Adds content to the end of the markup.<\/li>\n<li><strong>width:<\/strong> 3px;<strong>Cao:<\/strong> 15px;: Set the size for the tail of the markup.<\/li>\n<li><strong>background:<\/strong> #8b0018;: Choose the color for the tail of the bookmark.<\/li>\n<li><strong>bottom:<\/strong> -5px;<strong>left. left<\/strong>: 0;: Aligns the position of the bottom and left part of the promotion.<\/li>\n<li><strong>z-index:<\/strong> -1: Set z-index for the tail of the markup.<\/li>\n<li><strong>border-radius:<\/strong> 0 0 0 15px;: Use radius to make the tail of the marker L-shaped.<\/li>\n<li><strong>.badge<\/strong><strong>:<\/strong> Format for main markup.<\/li>\n<li><strong>Cao:<\/strong> 30px;<strong>width:<\/strong> 45px;: Set the size position for the promotion display frame<\/li>\n<li><strong>font-size:<\/strong> 13px;: Set the text size for the main markup.<\/li>\n<li><strong>margin-left:<\/strong> -12px;<strong>margin-top:<\/strong> -10px;: Set the position of the main markup so that it is visible on the promotional product.<\/li>\n<\/ol>\n<h2>\u00a0Summarize<\/h2>\n<p>The above code creates a markup on the left of the rectangle and the right of the circle to display the promotion for the product on Flatsome. Hopefully this code will help a lot to make your website display more beautiful and vivid.<\/p>\n<p>So I just shared with you details on how to make and insert <strong>The code displays a nice promotion for flatsome <\/strong>If you find it interesting and useful, don&#039;t forget to like, rate 5* or share with me.<\/p>","protected":false},"excerpt":{"rendered":"<p>Code hi\u1ec3n th\u1ecb khuy\u1ebfn m\u00e3i \u0111\u1eb9p cho flatsome gi\u1ed1ng nh\u01b0 Cellphones. \u0110\u00e2y l\u00e0 1 \u0111o\u1ea1n m\u00e3 hi\u1ec3n th\u1ecb ph\u1ea7n khuy\u1ebfn m\u00e3i r\u1ea5t \u0111\u1eb9p. N\u00f3 gi\u00fap cho ph\u1ea7n khuy\u1ebfn m\u00e3i tr\u00ean giao di\u1ec7n flastsome c\u1ee7a b\u1ea1n tr\u1edf n\u00ean n\u1ed5i b\u1eadt h\u01a1n. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 \u0111o\u1ea1n m\u00e3 code v\u00e0 h\u01b0\u1edbng d\u1eabn chi ti\u1ebft c\u00e1ch c\u00e0i Code hi\u1ec3n &hellip;<\/p>","protected":false},"author":2,"featured_media":4097,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[174,179,183],"class_list":["post-4082","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-code","tag-code-flastsome","tag-code-khuyen-mai","tag-code-wordpress"],"_links":{"self":[{"href":"https:\/\/how.congdongso.net\/en\/wp-json\/wp\/v2\/posts\/4082","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/how.congdongso.net\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/how.congdongso.net\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/how.congdongso.net\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/how.congdongso.net\/en\/wp-json\/wp\/v2\/comments?post=4082"}],"version-history":[{"count":1,"href":"https:\/\/how.congdongso.net\/en\/wp-json\/wp\/v2\/posts\/4082\/revisions"}],"predecessor-version":[{"id":21072,"href":"https:\/\/how.congdongso.net\/en\/wp-json\/wp\/v2\/posts\/4082\/revisions\/21072"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/how.congdongso.net\/en\/wp-json\/wp\/v2\/media\/4097"}],"wp:attachment":[{"href":"https:\/\/how.congdongso.net\/en\/wp-json\/wp\/v2\/media?parent=4082"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/how.congdongso.net\/en\/wp-json\/wp\/v2\/categories?post=4082"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/how.congdongso.net\/en\/wp-json\/wp\/v2\/tags?post=4082"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}