{"id":5401,"date":"2025-09-25T17:00:51","date_gmt":"2025-09-25T10:00:51","guid":{"rendered":"https:\/\/siammakemoney.com\/?p=5401"},"modified":"2025-11-22T17:45:43","modified_gmt":"2025-11-22T10:45:43","slug":"blogger-make-blank-template","status":"publish","type":"post","link":"https:\/\/siammakemoney.com\/en\/blogger-make-blank-template\/","title":{"rendered":"Blogger theme creation guide for beginners: blogger blank page"},"content":{"rendered":"\n<h2 class=\"wp-block-heading has-text-color has-link-color wp-elements-597ea9a5266b82d49b3240e732762eb9\" style=\"color:#e36d27\">\u0e04\u0e39\u0e48\u0e21\u0e37\u0e2d\u0e2a\u0e23\u0e49\u0e32\u0e07 \u0e18\u0e35\u0e21 Blogger<\/h2>\n\n\n\n<p>\u0e04\u0e39\u0e48\u0e21\u0e37\u0e2d\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e1c\u0e39\u0e49\u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19\u0e43\u0e19\u0e01\u0e32\u0e23\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e18\u0e35\u0e21 Blogger \u0e42\u0e04\u0e23\u0e07\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e1e\u0e37\u0e49\u0e19\u0e10\u0e32\u0e19\u0e02\u0e2d\u0e07\u0e42\u0e04\u0e49\u0e14 XML \u0e17\u0e35\u0e48\u0e43\u0e0a\u0e49\u0e43\u0e19 Blogger \u0e23\u0e27\u0e21\u0e16\u0e36\u0e07\u0e27\u0e34\u0e18\u0e35\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e31\u0e1a\u0e41\u0e15\u0e48\u0e07 CSS \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e2d\u0e2d\u0e01\u0e41\u0e1a\u0e1a\u0e2b\u0e19\u0e49\u0e32\u0e15\u0e32\u0e02\u0e2d\u0e07\u0e1a\u0e25\u0e47\u0e2d\u0e01\u0e43\u0e2b\u0e49\u0e2a\u0e27\u0e22\u0e07\u0e32\u0e21\u0e41\u0e25\u0e30\u0e15\u0e2d\u0e1a\u0e2a\u0e19\u0e2d\u0e07\u0e15\u0e48\u0e2d\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c\u0e15\u0e48\u0e32\u0e07\u0e46 \u0e19\u0e2d\u0e01\u0e08\u0e32\u0e01\u0e19\u0e35\u0e49\u0e22\u0e31\u0e07\u0e41\u0e19\u0e30\u0e19\u0e33\u0e40\u0e01\u0e35\u0e48\u0e22\u0e27\u0e01\u0e31\u0e1a\u0e2d\u0e07\u0e04\u0e4c\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a\u0e2b\u0e25\u0e31\u0e01\u0e17\u0e35\u0e48\u0e2a\u0e33\u0e04\u0e31\u0e0d \u0e40\u0e0a\u0e48\u0e19 \u0e2a\u0e48\u0e27\u0e19\u0e2b\u0e31\u0e27 (header), \u0e40\u0e19\u0e37\u0e49\u0e2d\u0e2b\u0e32 (content), \u0e41\u0e16\u0e1a\u0e14\u0e49\u0e32\u0e19\u0e02\u0e49\u0e32\u0e07 (sidebar) \u0e41\u0e25\u0e30\u0e2a\u0e48\u0e27\u0e19\u0e17\u0e49\u0e32\u0e22 (footer) \u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e17\u0e31\u0e49\u0e07\u0e15\u0e31\u0e27\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e27\u0e34\u0e14\u0e40\u0e08\u0e47\u0e15\u0e15\u0e48\u0e32\u0e07\u0e46 \u0e43\u0e19 Blogger \u0e0b\u0e36\u0e48\u0e07\u0e0a\u0e48\u0e27\u0e22\u0e43\u0e2b\u0e49\u0e1c\u0e39\u0e49\u0e2d\u0e48\u0e32\u0e19\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e40\u0e02\u0e49\u0e32\u0e43\u0e08\u0e41\u0e25\u0e30\u0e19\u0e33\u0e44\u0e1b\u0e1b\u0e23\u0e30\u0e22\u0e38\u0e01\u0e15\u0e4c\u0e43\u0e0a\u0e49\u0e43\u0e19\u0e01\u0e32\u0e23\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e18\u0e35\u0e21\u0e02\u0e2d\u0e07\u0e15\u0e19\u0e40\u0e2d\u0e07\u0e44\u0e14\u0e49\u0e07\u0e48\u0e32\u0e22\u0e02\u0e36\u0e49\u0e19.<\/p>\n\n\n\n<h2 class=\"wp-block-heading has-text-color has-link-color wp-elements-02c97c8ca9b69cbbdb9f288131871b1b\" style=\"color:#dd5500;font-size:31px\"><em>\u0e17\u0e33\u0e2b\u0e19\u0e49\u0e32 Blank Page \u0e41\u0e1a\u0e1a \u201c\u0e27\u0e48\u0e32\u0e07\u0e08\u0e23\u0e34\u0e07\u0e46\u201d \u0e14\u0e49\u0e27\u0e22 HTML<\/em><\/h2>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color wp-elements-476f16684185ef0ac0f7e18999d1d625\" style=\"color:#206221;font-size:32px\">1. \u0e42\u0e04\u0e49\u0e14 \u0e18\u0e35\u0e21 Blogger \u0e27\u0e48\u0e32\u0e07\u0e40\u0e1b\u0e25\u0e48\u0e32 blogger blank page<\/h3>\n\n\n\n<pre class=\"wp-block-code has-orange-color has-secondary-background-color has-text-color has-background has-link-color wp-elements-6719ece987120a4f8389718d073da7ef\"><code>&lt;?xml version=\"1.0\" encoding=\"UTF-8\" ?&gt;\n&lt;html xmlns='http:\/\/www.w3.org\/1999\/xhtml' xmlns:b='http:\/\/www.google.com\/2005\/gml\/b' xmlns:data='http:\/\/www.google.com\/2005\/gml\/data' xmlns:expr='http:\/\/www.google.com\/2005\/gml\/expr'&gt;\n &lt;head&gt;\n  &lt;meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'\/&gt; \n  &lt;b:if cond='data:blog.isMobile'&gt; \n   &lt;meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'\/&gt; \n  &lt;b:else\/&gt; \n   &lt;meta content='width=1100' name='viewport'\/&gt; \n  &lt;\/b:if&gt; \n  &lt;b:include data='blog' name='all-head-content'\/&gt;\n  &lt;title&gt;&lt;data:blog.pageTitle\/&gt;&lt;\/title&gt;\n  <strong>&lt;b:skin&gt;\n   &lt;!&#91;CDATA&#91;\/* \n    ----- css Yours here -----\n   ]]>\n  &lt;\/b:skin&gt;<\/strong>\n &lt;\/head&gt;\n &lt;body&gt;\n  &lt;b:section class='main' id='main' showaddelement='yes'\/&gt;\n  &lt;!-- Please Keep The Credits --&gt;\n  &lt;center&gt;&lt;a href=\"\/\/siammakemoney.com\/\"&gt;siammakemoney.com\/&lt;\/a&gt;&lt;\/center&gt;\n &lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n<style scoped>\n            .gc-box{margin-bottom:30px;padding:20px;border-left:5px solid transparent;line-height:24px}.gc-box .label-info{background-color:#5bc0de;display:inline-block;margin:0 5px 10px 0;padding:3px 6px;font-size:75%;font-weight:700;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em;line-height:14px}.gc-box.green_type{color:#3c763d;background-color:#dff0d8;border-color:#cae6be}.gc-box.blue_type{color:#31708f;background-color:#d9edf7;border-color:#bcdff1}.gc-box.red_type{color:#a94442;background-color:#f2dede;border-color:#e8c4c4}.gc-box.grey_type{background:#ddd;border-color:#ccc;color:#444}.gc-box.info_type{color:#155724;background-color:#d4edda;border-color:#c3e6cb}.gc-box.info_type svg{fill:#30a030}.gc-box.download_type{color:#004085;background-color:#cce5ff;border-color:#b8daff}.gc-box.download_type svg{fill:#3a9aff}.gc-box.update_type{color:#004458;background-color:#d9edf7;border:1px solid #bce8f1}.gc-box.notice_type{color:#856404;background-color:#fff3cd;border-color:#ffeeba}.gc-box.notice_type svg{fill:#f7a000}.gc-box.error_type{color:#721c24;background-color:#f8d7da;border-color:#f5c6cb}.gc-box.error_type svg{fill:#c70000}.gc-box.border_type{border:2px solid #ddd}.gc-box.icon_type{display:flex}.gc-box.icon_type .gc-box-icon{width:28px}.gc-box.icon_type .gc-box-text{flex-grow:1;margin:0 15px}.gc-box-text > *{margin-bottom: 20px;}\n        .gc-box-text > *:last-child{margin-bottom:0}        \n        <\/style><div class=\"gc-box info_type icon_type\" style=\"text-align:left;border-radius:20px;box-shadow: 0 10px 10px #00000007\">\n\t\t\t<div class=\"gc-box-icon\"><svg x=\"0px\" y=\"0px\" viewBox=\"0 0 512 512\"> <g><g> <path d=\"M256,0C114.497,0,0,114.507,0,256c0,141.503,114.507,256,256,256c141.503,0,256-114.507,256-256 C512,114.497,397.492,0,256,0z M256,472c-119.393,0-216-96.615-216-216c0-119.393,96.615-216,216-216 c119.393,0,216,96.615,216,216C472,375.393,375.384,472,256,472z\"\/> <\/g> <\/g> <g> <g> <path d=\"M256,214.33c-11.046,0-20,8.954-20,20v128.793c0,11.046,8.954,20,20,20s20-8.955,20-20.001V234.33 C276,223.284,267.046,214.33,256,214.33z\"\/> <\/g> <\/g> <g> <g> <circle cx=\"256\" cy=\"162.84\" r=\"27\"\/> <\/g> <\/g> <\/svg><\/div>\n\t\t\t\n\t\t\t<div class=\"gc-box-text\">\n\n<p>&#8212;&#8211; css Yours here &#8212;&#8211; \u0e43\u0e2a\u0e48 css\u0e02\u0e2d\u0e07\u0e04\u0e38\u0e13\u0e44\u0e14\u0e49\u0e08\u0e32\u0e01\u0e17\u0e35\u0e48\u0e19\u0e35\u0e48<\/p>\n\n<\/div>\n\t\t<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<h2 class=\"wp-block-heading has-text-color has-link-color wp-elements-73654bad26fef3a1c575c3339b28625a\" style=\"color:#0f6e67\">\u0e2d\u0e18\u0e34\u0e1a\u0e32\u0e22\u0e42\u0e04\u0e49\u0e14\u0e1e\u0e37\u0e49\u0e19\u0e10\u0e32\u0e19<\/h2>\n\n\n<div class=\"gc-box download_type icon_type\" style=\"text-align:left;border-radius:20px;box-shadow: 0 10px 10px #00000007\">\n\t\t\t<div class=\"gc-box-icon\"><svg viewBox=\"0 0 612 612\"> <g> <g> <g> <path d=\"M403.939,295.749l-78.814,78.833V172.125c0-10.557-8.568-19.125-19.125-19.125c-10.557,0-19.125,8.568-19.125,19.125 v202.457l-78.814-78.814c-7.478-7.478-19.584-7.478-27.043,0c-7.478,7.478-7.478,19.584,0,27.042l108.19,108.19 c4.59,4.59,10.863,6.005,16.812,4.953c5.929,1.052,12.221-0.382,16.811-4.953l108.19-108.19c7.478-7.478,7.478-19.583,0-27.042 C423.523,288.29,411.417,288.29,403.939,295.749z M306,0C137.012,0,0,136.992,0,306s137.012,306,306,306s306-137.012,306-306 S475.008,0,306,0z M306,573.75C158.125,573.75,38.25,453.875,38.25,306C38.25,158.125,158.125,38.25,306,38.25 c147.875,0,267.75,119.875,267.75,267.75C573.75,453.875,453.875,573.75,306,573.75z\"\/> <\/g> <\/g> <\/g> <\/svg><\/div>\n\t\t\t\n\t\t\t<div class=\"gc-box-text\">\n\n<p>\u0e42\u0e04\u0e49\u0e14\u0e19\u0e35\u0e49\u0e04\u0e37\u0e2d <strong>\u0e42\u0e04\u0e23\u0e07\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e1e\u0e37\u0e49\u0e19\u0e10\u0e32\u0e19\u0e17\u0e35\u0e48\u0e2a\u0e38\u0e14\u0e02\u0e2d\u0e07\u0e18\u0e35\u0e21 Blogger<\/strong> \u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a\u0e14\u0e49\u0e27\u0e22:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u0e42\u0e04\u0e23\u0e07\u0e23\u0e48\u0e32\u0e07 HTML + namespace \u0e02\u0e2d\u0e07 Blogger<\/li>\n\n\n\n<li>meta \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e21\u0e37\u0e2d\u0e16\u0e37\u0e2d\/\u0e40\u0e14\u0e2a\u0e01\u0e4c\u0e17\u0e47\u0e2d\u0e1b<\/li>\n\n\n\n<li>\u0e01\u0e32\u0e23\u0e14\u0e36\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25 blog \u0e40\u0e0a\u0e48\u0e19\u0e0a\u0e37\u0e48\u0e2d\u0e40\u0e1e\u0e08<\/li>\n\n\n\n<li>\u0e1e\u0e37\u0e49\u0e19\u0e17\u0e35\u0e48\u0e43\u0e2b\u0e49\u0e43\u0e2a\u0e48 CSS<\/li>\n\n\n\n<li>\u0e2b\u0e19\u0e36\u0e48\u0e07 section \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e43\u0e2a\u0e48 widget<\/li>\n\n\n\n<li>\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e04\u0e23\u0e14\u0e34\u0e15\u0e14\u0e49\u0e32\u0e19\u0e25\u0e48\u0e32\u0e07<\/li>\n<\/ul>\n\n\n\n<p>\u0e40\u0e23\u0e35\u0e22\u0e1a\u0e07\u0e48\u0e32\u0e22\u0e41\u0e25\u0e30\u0e43\u0e0a\u0e49\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e40\u0e17\u0e21\u0e40\u0e1e\u0e25\u0e15 Blogger \u0e41\u0e1a\u0e1a minimal<\/p>\n\n<\/div>\n\t\t<\/div>\n\n<div class=\"gc-box border_type \" style=\"text-align:left;border-radius:20px;box-shadow: 0 10px 10px #00000007\">\n\t\t\t<div class=\"gc-box-icon\"><\/div>\n\t\t\t\n\t\t\t<div class=\"gc-box-text\">\n\n<h3 class=\"wp-block-heading has-medium-font-size\">\u2714 \u0e2a\u0e48\u0e27\u0e19\u0e19\u0e35\u0e49\u0e04\u0e37\u0e2d\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e01\u0e32\u0e28 XML \u0e41\u0e25\u0e30\u0e01\u0e33\u0e2b\u0e19\u0e14 namespace<\/h3>\n\n\n\n<pre class=\"wp-block-code has-border-color has-orange-border-color has-layout-color has-secondary-background-color has-text-color has-background has-link-color wp-elements-896bb7d640316dcef63d8a3d93536864\" style=\"border-width:10px\"><code>&lt;?xml version=\"1.0\" encoding=\"UTF-8\" ?&gt;\n&lt;html xmlns='http:\/\/www.w3.org\/1999\/xhtml'\n      xmlns:b='http:\/\/www.google.com\/2005\/gml\/b'\n      xmlns:data='http:\/\/www.google.com\/2005\/gml\/data'\n      xmlns:expr='http:\/\/www.google.com\/2005\/gml\/expr'&gt;<\/code><\/pre>\n\n\n<div class=\"gc-box border_type \" style=\"text-align:left;border-radius:0px;box-shadow: 0 10px 10px #00000007\">\n\t\t\t<div class=\"gc-box-icon\"><\/div>\n\t\t\t\n\t\t\t<div class=\"gc-box-text\">\n\n<ul class=\"wp-block-list\">\n<li><code>xmlns:b<\/code> = \u0e43\u0e0a\u0e49\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e41\u0e17\u0e47\u0e01 Blogger \u0e40\u0e0a\u0e48\u0e19 <code>&lt;b:if&gt;<\/code>, <code>&lt;b:section&gt;<\/code><\/li>\n\n\n\n<li><code>xmlns:data<\/code> = \u0e43\u0e0a\u0e49\u0e14\u0e36\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e08\u0e32\u0e01 blog \u0e40\u0e0a\u0e48\u0e19 <code>data:blog.pageTitle<\/code><\/li>\n\n\n\n<li><code>xmlns:expr<\/code> = \u0e43\u0e0a\u0e49\u0e1b\u0e23\u0e30\u0e21\u0e27\u0e25\u0e1c\u0e25 expression \u0e15\u0e48\u0e32\u0e07\u0e46<\/li>\n<\/ul>\n\n<\/div>\n\t\t<\/div>\n<\/div>\n\t\t<\/div>\n\n<div class=\"gc-box border_type \" style=\"text-align:left;border-radius:20px;box-shadow: 0 10px 10px #00000007\">\n\t\t\t<div class=\"gc-box-icon\"><\/div>\n\t\t\t\n\t\t\t<div class=\"gc-box-text\">\n\n<h3 class=\"wp-block-heading has-medium-font-size\">\u2714 \u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32\u0e43\u0e2b\u0e49 Internet Explorer \u0e41\u0e2a\u0e14\u0e07\u0e1c\u0e25\u0e41\u0e1a\u0e1a IE7<\/h3>\n\n\n\n<pre class=\"wp-block-code has-border-color has-orange-border-color has-layout-color has-secondary-background-color has-text-color has-background has-link-color wp-elements-58e73d99ba0223040fc26a0ee150d1fd\" style=\"border-width:10px\"><code>&lt;head&gt;\n  &lt;meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'\/&gt;\n<\/code><\/pre>\n\n<\/div>\n\t\t<\/div>\n\n<div class=\"gc-box border_type \" style=\"text-align:left;border-radius:20px;box-shadow: 0 10px 10px #00000007\">\n\t\t\t<div class=\"gc-box-icon\"><\/div>\n\t\t\t\n\t\t\t<div class=\"gc-box-text\">\n\n<h3 class=\"wp-block-heading has-medium-font-size\">\u2714 \u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32\u0e02\u0e19\u0e32\u0e14\u0e2b\u0e19\u0e49\u0e32\u0e08\u0e2d\u0e41\u0e22\u0e01\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a mobile \/ desktop<\/h3>\n\n\n\n<pre class=\"wp-block-code has-border-color has-orange-border-color has-layout-color has-secondary-background-color has-text-color has-background has-link-color wp-elements-265861fa65ed032730cfdd18a78cf9a4\" style=\"border-width:10px\"><code>&lt;b:if cond='data:blog.isMobile'&gt;\n   &lt;meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'\/&gt;\n&lt;b:else\/&gt;\n   &lt;meta content='width=1100' name='viewport'\/&gt;\n&lt;\/b:if&gt;<\/code><\/pre>\n\n\n<div class=\"gc-box border_type \" style=\"text-align:left;border-radius:0px;box-shadow: 0 10px 10px #00000007\">\n\t\t\t<div class=\"gc-box-icon\"><\/div>\n\t\t\t\n\t\t\t<div class=\"gc-box-text\">\n\n<ul class=\"wp-block-list\">\n<li>\u0e16\u0e49\u0e32\u0e40\u0e1b\u0e47\u0e19\u0e21\u0e37\u0e2d\u0e16\u0e37\u0e2d \u2192 \u0e43\u0e0a\u0e49 viewport responsive<\/li>\n\n\n\n<li>\u0e16\u0e49\u0e32\u0e40\u0e1b\u0e47\u0e19 desktop \u2192 \u0e01\u0e33\u0e2b\u0e19\u0e14\u0e04\u0e27\u0e32\u0e21\u0e01\u0e27\u0e49\u0e32\u0e07\u0e40\u0e1b\u0e47\u0e19 1100px<\/li>\n<\/ul>\n\n<\/div>\n\t\t<\/div>\n<\/div>\n\t\t<\/div>\n\n<div class=\"gc-box border_type \" style=\"text-align:left;border-radius:20px;box-shadow: 0 10px 10px #00000007\">\n\t\t\t<div class=\"gc-box-icon\"><\/div>\n\t\t\t\n\t\t\t<div class=\"gc-box-text\">\n\n<h3 class=\"wp-block-heading has-medium-font-size\">\u2714 \u0e1a\u0e2d\u0e01 Blogger \u0e43\u0e2b\u0e49\u0e23\u0e27\u0e21\u0e40\u0e19\u0e37\u0e49\u0e2d\u0e2b\u0e32 <code>&lt;head&gt;<\/code> \u0e21\u0e32\u0e15\u0e23\u0e10\u0e32\u0e19\u0e02\u0e2d\u0e07 Blogger<\/h3>\n\n\n\n<pre class=\"wp-block-code has-border-color has-orange-border-color has-layout-color has-secondary-background-color has-text-color has-background has-link-color wp-elements-1626414b83e3ad82f25977ad99919966\" style=\"border-width:10px\"><code>&lt;b:include data='blog' name='all-head-content'\/&gt;<\/code><\/pre>\n\n\n<div class=\"gc-box border_type \" style=\"text-align:left;border-radius:0px;box-shadow: 0 10px 10px #00000007\">\n\t\t\t<div class=\"gc-box-icon\"><\/div>\n\t\t\t\n\t\t\t<div class=\"gc-box-text\">\n\n<ul class=\"wp-block-list\">\n<li>\u0e40\u0e0a\u0e48\u0e19 script \u0e2d\u0e31\u0e15\u0e42\u0e19\u0e21\u0e31\u0e15\u0e34, meta tag \u0e15\u0e48\u0e32\u0e07 \u0e46<\/li>\n<\/ul>\n\n<\/div>\n\t\t<\/div>\n<\/div>\n\t\t<\/div>\n\n<div class=\"gc-box border_type \" style=\"text-align:left;border-radius:20px;box-shadow: 0 10px 10px #00000007\">\n\t\t\t<div class=\"gc-box-icon\"><\/div>\n\t\t\t\n\t\t\t<div class=\"gc-box-text\">\n\n<h3 class=\"wp-block-heading has-medium-font-size\">\u2714 \u0e15\u0e31\u0e49\u0e07\u0e0a\u0e37\u0e48\u0e2d\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a \u0e08\u0e32\u0e01\u0e0a\u0e37\u0e48\u0e2d\u0e40\u0e1e\u0e08\u0e02\u0e2d\u0e07\u0e1a\u0e25\u0e47\u0e2d\u0e01<\/h3>\n\n\n\n<pre class=\"wp-block-code has-border-color has-orange-border-color has-layout-color has-secondary-background-color has-text-color has-background has-link-color wp-elements-7df826d0983c5a9a5586f32e605a4cf2\" style=\"border-width:10px\"><code>&lt;title&gt;&lt;data:blog.pageTitle\/&gt;&lt;\/title&gt;<\/code><\/pre>\n\n\n<div class=\"gc-box border_type \" style=\"text-align:left;border-radius:0px;box-shadow: 0 10px 10px #00000007\">\n\t\t\t<div class=\"gc-box-icon\"><\/div>\n\t\t\t\n\t\t\t<div class=\"gc-box-text\">\n\n<ul class=\"wp-block-list\">\n<li>\u0e43\u0e0a\u0e49\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e17\u0e35\u0e48 Blogger \u0e2a\u0e23\u0e49\u0e32\u0e07\u0e43\u0e2b\u0e49\u0e42\u0e14\u0e22\u0e2d\u0e31\u0e15\u0e42\u0e19\u0e21\u0e31\u0e15\u0e34<\/li>\n<\/ul>\n\n<\/div>\n\t\t<\/div>\n<\/div>\n\t\t<\/div>\n\n<div class=\"gc-box border_type \" style=\"text-align:left;border-radius:20px;box-shadow: 0 10px 10px #00000007\">\n\t\t\t<div class=\"gc-box-icon\"><\/div>\n\t\t\t\n\t\t\t<div class=\"gc-box-text\">\n\n<h3 class=\"wp-block-heading has-medium-font-size\">\u2714 \u0e2a\u0e48\u0e27\u0e19\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e43\u0e2a\u0e48 CSS \u0e02\u0e2d\u0e07\u0e18\u0e35\u0e21<\/h3>\n\n\n\n<pre class=\"wp-block-code has-border-color has-orange-border-color has-layout-color has-secondary-background-color has-text-color has-background has-link-color wp-elements-97017c8c650be7e8ea032bb2cdf65ae9\" style=\"border-width:10px\"><code>&lt;b:skin&gt;\n   &lt;!&#91;CDATA&#91;\/* \n    ----- css Yours here -----\n   ]]>\n&lt;\/b:skin&gt;<\/code><\/pre>\n\n\n<div class=\"gc-box border_type \" style=\"text-align:left;border-radius:0px;box-shadow: 0 10px 10px #00000007\">\n\t\t\t<div class=\"gc-box-icon\"><\/div>\n\t\t\t\n\t\t\t<div class=\"gc-box-text\">\n\n<ul class=\"wp-block-list\">\n<li><code>&lt;![CDATA[ ]]><\/code> = \u0e43\u0e0a\u0e49\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e43\u0e2a\u0e48\u0e42\u0e04\u0e49\u0e14\u0e17\u0e35\u0e48\u0e44\u0e21\u0e48\u0e43\u0e2b\u0e49 XML \u0e1b\u0e23\u0e30\u0e21\u0e27\u0e25\u0e1c\u0e25\u0e42\u0e14\u0e22\u0e15\u0e23\u0e07 \u0e40\u0e0a\u0e48\u0e19 CSS<\/li>\n<\/ul>\n\n<\/div>\n\t\t<\/div>\n<\/div>\n\t\t<\/div>\n\n<div class=\"gc-box border_type \" style=\"text-align:left;border-radius:20px;box-shadow: 0 10px 10px #00000007\">\n\t\t\t<div class=\"gc-box-icon\"><\/div>\n\t\t\t\n\t\t\t<div class=\"gc-box-text\">\n\n<h3 class=\"wp-block-heading has-medium-font-size\">\u2714 \u0e2a\u0e48\u0e27\u0e19\u0e41\u0e2a\u0e14\u0e07\u0e04\u0e2d\u0e19\u0e40\u0e17\u0e19\u0e15\u0e4c\u0e2b\u0e25\u0e31\u0e01\u0e02\u0e2d\u0e07 Blogger<\/h3>\n\n\n\n<pre class=\"wp-block-code has-border-color has-orange-border-color has-layout-color has-secondary-background-color has-text-color has-background has-link-color wp-elements-3edd61112d07231939dee6541f6a011b\" style=\"border-width:10px\"><code>&lt;\/head&gt;\n&lt;body&gt;\n  &lt;b:section class='main' id='main' showaddelement='yes'\/&gt;<\/code><\/pre>\n\n\n<div class=\"gc-box border_type \" style=\"text-align:left;border-radius:0px;box-shadow: 0 10px 10px #00000007\">\n\t\t\t<div class=\"gc-box-icon\"><\/div>\n\t\t\t\n\t\t\t<div class=\"gc-box-text\">\n\n<ul class=\"wp-block-list\">\n<li><code>&lt;b:section&gt;<\/code> \u0e04\u0e37\u0e2d\u0e2a\u0e48\u0e27\u0e19\u0e17\u0e35\u0e48\u0e40\u0e23\u0e32\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e40\u0e1e\u0e34\u0e48\u0e21 widget \u0e44\u0e14\u0e49<\/li>\n\n\n\n<li><code>showaddelement='yes'<\/code> = \u0e17\u0e33\u0e43\u0e2b\u0e49\u0e40\u0e1e\u0e34\u0e48\u0e21 gadget \u0e43\u0e19 Layout \u0e44\u0e14\u0e49<\/li>\n<\/ul>\n\n<\/div>\n\t\t<\/div>\n<\/div>\n\t\t<\/div>\n\n<div class=\"gc-box border_type \" style=\"text-align:left;border-radius:20px;box-shadow: 0 10px 10px #00000007\">\n\t\t\t<div class=\"gc-box-icon\"><\/div>\n\t\t\t\n\t\t\t<div class=\"gc-box-text\">\n\n<h3 class=\"wp-block-heading has-medium-font-size\">\u2714 \u0e1b\u0e34\u0e14\u0e42\u0e04\u0e23\u0e07\u0e2a\u0e23\u0e49\u0e32\u0e07 HTML<\/h3>\n\n\n\n<pre class=\"wp-block-code has-border-color has-orange-border-color has-layout-color has-secondary-background-color has-text-color has-background has-link-color wp-elements-1a147393a185193a94187e36a509e019\" style=\"border-width:10px\"><code>&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n<\/div>\n\t\t<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color wp-elements-3357e758fe822ee229cd11c9cfa94c0d\" style=\"color:#206221\">2. \u0e18\u0e35\u0e21 Blogger (\u0e44\u0e21\u0e48\u0e21\u0e35\u0e41\u0e17\u0e1a\u0e14\u0e49\u0e32\u0e19\u0e02\u0e49\u0e32\u0e07)<\/h3>\n\n\n\n<pre class=\"wp-block-code has-orange-color has-secondary-background-color has-text-color has-background has-link-color wp-elements-32cf059120b2dbf6ca10a9f8c3f6fc06\"><code>&lt;?xml version=\"1.0\" encoding=\"UTF-8\" ?&gt;\n&lt;html xmlns='http:\/\/www.w3.org\/1999\/xhtml' \n      xmlns:b='http:\/\/www.google.com\/2005\/gml\/b' \n      xmlns:data='http:\/\/www.google.com\/2005\/gml\/data' \n      xmlns:expr='http:\/\/www.google.com\/2005\/gml\/expr'&gt;\n\n&lt;head&gt;\n  &lt;meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'\/&gt; \n\n  &lt;b:if cond='data:blog.isMobile'&gt; \n    &lt;meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'\/&gt; \n  &lt;b:else\/&gt; \n    &lt;meta content='width=device-width, initial-scale=1.0' name='viewport'\/&gt; \n  &lt;\/b:if&gt; \n\n  &lt;b:include data='blog' name='all-head-content'\/&gt;\n  &lt;title&gt;&lt;data:blog.pageTitle\/&gt;&lt;\/title&gt;\n\n  &lt;link href='https:\/\/fonts.googleapis.com\/css2?family=Kanit:wght@400;600&amp;amp;display=swap' rel='stylesheet'\/&gt;\n\n  &lt;b:skin&gt;&lt;!&#91;CDATA&#91;\n    \/* Reset *\/\n    * {\n      margin: 0;\n      padding: 0;\n      box-sizing: border-box;\n    }\n\n    body {\n      font-family: 'Kanit', sans-serif;\n      background: #f7f9fc;\n      color: #333;\n      line-height: 1.6;\n    }\n\n    a {\n      color: inherit;\n      text-decoration: none;\n      transition: color 0.3s;\n    }\n    a:hover {\n      color: #008f7a;\n    }\n\n    header {\n      background: #ffffff;\n      box-shadow: 0 2px 8px rgba(0,0,0,0.05);\n      padding: 15px 30px;\n      position: sticky;\n      top: 0;\n      z-index: 100;\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n    }\n\n    header h1 {\n      font-size: 1.5rem;\n      font-weight: 600;\n      color: #008f7a;\n    }\n\n    nav ul {\n      list-style: none;\n      display: flex;\n      gap: 20px;\n    }\n\n    nav li {\n      font-weight: 500;\n    }\n\n    .container {\n      max-width: 1100px;\n      margin: 30px auto;\n      padding: 0 15px;\n    }\n\n    \/* Blog Post Card *\/\n    .post-card {\n      background: #fff;\n      border-radius: 16px;\n      padding: 20px;\n      margin-bottom: 20px;\n      box-shadow: 0 4px 12px rgba(0,0,0,0.05);\n      transition: transform 0.3s;\n    }\n    .post-card:hover {\n      transform: translateY(-4px);\n    }\n\n    .post-card h2 {\n      font-size: 1.4rem;\n      margin-bottom: 10px;\n      color: #222;\n    }\n    .post-card p {\n      color: #666;\n      font-size: 1rem;\n    }\n\n    \/* Footer *\/\n    footer {\n      background: #222;\n      color: #eee;\n      text-align: center;\n      padding: 20px;\n      margin-top: 40px;\n    }\n\n  ]]>&lt;\/b:skin&gt;\n&lt;\/head&gt;\n\n<strong>&lt;body&gt;\n  &lt;!-- Header --&gt;\n  &lt;header&gt;\n    &lt;h1&gt;&lt;data:blog.title\/&gt;&lt;\/h1&gt;\n    &lt;nav&gt;\n      &lt;ul&gt;\n        &lt;li&gt;&lt;a expr:href='data:blog.homepageUrl'&gt;Home&lt;\/a&gt;&lt;\/li&gt;\n        &lt;li&gt;&lt;a href='#'&gt;About&lt;\/a&gt;&lt;\/li&gt;\n        &lt;li&gt;&lt;a href='#'&gt;Contact&lt;\/a&gt;&lt;\/li&gt;\n      &lt;\/ul&gt;\n    &lt;\/nav&gt;\n  &lt;\/header&gt;\n\n  &lt;!-- Content --&gt;\n  &lt;div class=\"container\"&gt;\n    &lt;b:section id='main' class='main' showaddelement='yes'&gt;\n      &lt;b:widget id='Blog1' type='Blog' title='Blog Posts' visible='true'\/&gt;\n    &lt;\/b:section&gt;\n  &lt;\/div&gt;\n\n  &lt;!-- Footer --&gt;\n  &lt;footer&gt;\n    &lt;p&gt;\u00a9 &lt;data:blog.title\/&gt; - Powered by Blogger&lt;\/p&gt;\n    &lt;p&gt;&lt;a href='\/\/siammakemoney.com' style='color:#00c9a7;'&gt;siammakemoney.com&lt;\/a&gt;&lt;\/p&gt;\n  &lt;\/footer&gt;\n\n&lt;\/body&gt;<\/strong>\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code has-primary-color has-text-color has-background has-link-color wp-elements-3d6595f17e9288adcb282088f30ccd14\" style=\"background-color:#f2e8d5\"><code>&lt;!-- Content --&gt;\n  &lt;div class=\"container\"&gt;\n    &lt;b:section id='main' class='main' showaddelement='yes'&gt;\n      &lt;b:widget id='Blog1' type='Blog' title='Blog Posts' visible='true'\/&gt;\n    &lt;\/b:section&gt;\n  &lt;\/div&gt;<\/code><\/pre>\n\n\n<div class=\"gc-box info_type icon_type\" style=\"text-align:left;border-radius:20px;box-shadow: 0 10px 10px #00000007\">\n\t\t\t<div class=\"gc-box-icon\"><svg x=\"0px\" y=\"0px\" viewBox=\"0 0 512 512\"> <g><g> <path d=\"M256,0C114.497,0,0,114.507,0,256c0,141.503,114.507,256,256,256c141.503,0,256-114.507,256-256 C512,114.497,397.492,0,256,0z M256,472c-119.393,0-216-96.615-216-216c0-119.393,96.615-216,216-216 c119.393,0,216,96.615,216,216C472,375.393,375.384,472,256,472z\"\/> <\/g> <\/g> <g> <g> <path d=\"M256,214.33c-11.046,0-20,8.954-20,20v128.793c0,11.046,8.954,20,20,20s20-8.955,20-20.001V234.33 C276,223.284,267.046,214.33,256,214.33z\"\/> <\/g> <\/g> <g> <g> <circle cx=\"256\" cy=\"162.84\" r=\"27\"\/> <\/g> <\/g> <\/svg><\/div>\n\t\t\t\n\t\t\t<div class=\"gc-box-text\">\n\n<p>&lt;!&#8211; Header &#8211;&gt; \u0e2a\u0e48\u0e27\u0e19\u0e2b\u0e31\u0e27\u0e40\u0e21\u0e19\u0e39<\/p>\n\n\n\n<p>&lt;!&#8211; Content &#8211;&gt; \u0e2a\u0e48\u0e27\u0e19\u0e19\u0e35\u0e49\u0e04\u0e37\u0e2d\u0e01\u0e32\u0e23\u0e14\u0e36\u0e07\u0e42\u0e1e\u0e2a\u0e21\u0e32\u0e41\u0e2a\u0e14\u0e07<\/p>\n\n\n\n<p>&lt;!&#8211; Footer &#8211;&gt; \u0e2a\u0e48\u0e27\u0e19\u0e17\u0e49\u0e32\u0e22<\/p>\n\n<\/div>\n\t\t<\/div>\n\n<div class=\"gc-box border_type \" style=\"text-align:left;border-radius:20px;box-shadow: 0 10px 10px #00000007\">\n\t\t\t<div class=\"gc-box-icon\"><\/div>\n\t\t\t\n\t\t\t<div class=\"gc-box-text\">\n\n<h3 class=\"wp-block-heading\">\ud83e\uddf1 <strong>\u0e2a\u0e48\u0e27\u0e19\u0e1a\u0e19\u0e02\u0e2d\u0e07\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c (Header)<\/strong><\/h3>\n\n\n\n<pre class=\"wp-block-code has-border-color has-orange-border-color has-secondary-background-color has-background\" style=\"border-width:10px\"><code>&lt;header&gt;\n  &lt;h1&gt;&lt;data:blog.title\/&gt;&lt;\/h1&gt;\n  &lt;nav&gt;\n    &lt;ul&gt;\n      &lt;li&gt;&lt;a expr:href='data:blog.homepageUrl'&gt;Home&lt;\/a&gt;&lt;\/li&gt;\n      &lt;li&gt;&lt;a href='#'&gt;About&lt;\/a&gt;&lt;\/li&gt;\n      &lt;li&gt;&lt;a href='#'&gt;Contact&lt;\/a&gt;&lt;\/li&gt;\n    &lt;\/ul&gt;\n  &lt;\/nav&gt;\n&lt;\/header&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83d\udcf0 <strong>\u0e2a\u0e48\u0e27\u0e19\u0e40\u0e19\u0e37\u0e49\u0e2d\u0e2b\u0e32 (Content Section)<\/strong><\/h3>\n\n\n\n<pre class=\"wp-block-code has-border-color has-orange-border-color has-secondary-background-color has-background\" style=\"border-width:10px\"><code>&lt;div class=\"container\"&gt;\n  &lt;b:section id='main' class='main' showaddelement='yes'&gt;\n    &lt;b:widget id='Blog1' type='Blog' title='Blog Posts' visible='true'\/&gt;\n  &lt;\/b:section&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n\n\n<div class=\"gc-box border_type \" style=\"text-align:left;border-radius:20px;box-shadow: 0 10px 10px #00000007\">\n\t\t\t<div class=\"gc-box-icon\"><\/div>\n\t\t\t\n\t\t\t<div class=\"gc-box-text\">\n\n<h4 class=\"wp-block-heading\"><strong>\u0e2a\u0e48\u0e27\u0e19\u0e40\u0e19\u0e37\u0e49\u0e2d\u0e2b\u0e32<\/strong> \u0e17\u0e33\u0e07\u0e32\u0e19\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e44\u0e23?<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>&lt;b:section&gt;<\/code> = \u0e1e\u0e37\u0e49\u0e19\u0e17\u0e35\u0e48\u0e43\u0e2a\u0e48 widget (\u0e08\u0e31\u0e14\u0e1c\u0e48\u0e32\u0e19 Layout \u0e43\u0e19 Blogger)<\/li>\n\n\n\n<li><code>&lt;b:widget type=\"Blog\"&gt;<\/code> = \u0e41\u0e2a\u0e14\u0e07\u0e42\u0e1e\u0e2a\u0e15\u0e4c\u0e02\u0e2d\u0e07 Blogger<\/li>\n\n\n\n<li>Blogger \u0e08\u0e30 generate HTML \u0e14\u0e49\u0e32\u0e19\u0e43\u0e19 \u0e40\u0e0a\u0e48\u0e19:\n<ul class=\"wp-block-list\">\n<li>\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e42\u0e1e\u0e2a\u0e15\u0e4c\u0e43\u0e19\u0e2b\u0e19\u0e49\u0e32\u0e41\u0e23\u0e01<\/li>\n\n\n\n<li>\u0e15\u0e31\u0e27\u0e40\u0e15\u0e47\u0e21\u0e1a\u0e17\u0e04\u0e27\u0e32\u0e21\u0e43\u0e19\u0e2b\u0e19\u0e49\u0e32\u0e42\u0e1e\u0e2a\u0e15\u0e4c<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n<\/div>\n\t\t<\/div>\n\n\n<h3 class=\"wp-block-heading\">\ud83d\udcd8 <strong>\u0e2a\u0e48\u0e27\u0e19\u0e17\u0e49\u0e32\u0e22 (Footer)<\/strong><\/h3>\n\n\n\n<pre class=\"wp-block-code has-border-color has-orange-border-color has-secondary-background-color has-background\" style=\"border-width:10px\"><code>&lt;footer&gt;\n  &lt;p&gt;\u00a9 &lt;data:blog.title\/&gt; - Powered by Blogger&lt;\/p&gt;\n  &lt;p&gt;&lt;a href='\/\/siammakemoney.com'&gt;siammakemoney.com&lt;\/a&gt;&lt;\/p&gt;\n&lt;\/footer&gt;\n<\/code><\/pre>\n\n<\/div>\n\t\t<\/div>\n\n\n<h4 class=\"wp-block-heading\">2.1 \u0e42\u0e04\u0e23\u0e07\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e43\u0e19 Blogger \u0e15\u0e48\u0e32\u0e07\u0e46<\/h4>\n\n\n\n<pre class=\"wp-block-code has-orange-color has-primary-background-color has-text-color has-background has-link-color wp-elements-50d332db34635f45c2d683c8173c6c2b\"><code>&lt;?xml version=\"1.0\" encoding=\"UTF-8\" ?&gt;\n&lt;html xmlns='http:\/\/www.w3.org\/1999\/xhtml'\n      xmlns:b='http:\/\/www.google.com\/2005\/gml\/b'\n      xmlns:data='http:\/\/www.google.com\/2005\/gml\/data'\n      xmlns:expr='http:\/\/www.google.com\/2005\/gml\/expr'&gt;\n\n&lt;head&gt;\n  &lt;!-- meta, title, CSS\/JS --&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n  &lt;!-- header --&gt;\n  &lt;!-- navigation --&gt;\n  &lt;!-- main content --&gt;\n  &lt;!-- sidebar --&gt;\n  &lt;!-- footer --&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code has-orange-color has-primary-background-color has-text-color has-background has-link-color wp-elements-e2848c9b1b479a02df85e173d7fac992\"><code>&lt;b:section class='header' id='header' maxwidgets='1' showaddelement='no'&gt;\n  &lt;b:widget id='Header1' locked='true' title='Header' type='Header'\/&gt;\n&lt;\/b:section&gt;\n\n&lt;b:section class='content' id='content' showaddelement='yes'&gt;\n  &lt;b:widget id='Blog1' type='Blog' title='Blog Posts'\/&gt;\n&lt;\/b:section&gt;\n\n&lt;b:section class='sidebar' id='sidebar' showaddelement='yes'&gt;\n  &lt;b:widget id='Profile1' type='Profile' title='About Me'\/&gt;\n&lt;\/b:section&gt;\n\n&lt;b:section class='footer' id='footer' showaddelement='yes'&gt;\n  &lt;b:widget id='Attribution1' type='Attribution' title=''\/&gt;\n&lt;\/b:section&gt;\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">2.2 \u0e40\u0e1e\u0e34\u0e48\u0e21\u0e0a\u0e37\u0e48\u0e2d\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07 Blogger<\/h4>\n\n\n\n<pre class=\"wp-block-code has-orange-color has-primary-background-color has-text-color has-background has-link-color wp-elements-b54ec142428e489ef7e05a1cc08fcb90\"><code>&lt;title&gt;&lt;data:blog.pageTitle\/&gt;&lt;\/title&gt;<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color wp-elements-245daa0eb7dd3819b76943d96588d996\" style=\"color:#206221;font-size:29px\">3. \u0e18\u0e35\u0e21\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e41\u0e16\u0e1a\u0e14\u0e49\u0e32\u0e19\u0e02\u0e49\u0e32\u0e07 (Sidebar Gadgets\/Widgets)<\/h3>\n\n\n\n<pre class=\"wp-block-code has-orange-color has-secondary-background-color has-text-color has-background has-link-color wp-elements-6c6fdb7bc509c1f7e573f5600561aef3\"><code>&lt;?xml version=\"1.0\" encoding=\"UTF-8\" ?&gt;\n&lt;html xmlns='http:\/\/www.w3.org\/1999\/xhtml' \n      xmlns:b='http:\/\/www.google.com\/2005\/gml\/b' \n      xmlns:data='http:\/\/www.google.com\/2005\/gml\/data' \n      xmlns:expr='http:\/\/www.google.com\/2005\/gml\/expr'&gt;\n\n&lt;head&gt;\n  &lt;meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'\/&gt; \n  &lt;b:if cond='data:blog.isMobile'&gt; \n    &lt;meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'\/&gt; \n  &lt;b:else\/&gt; \n    &lt;meta content='width=device-width, initial-scale=1.0' name='viewport'\/&gt; \n  &lt;\/b:if&gt; \n\n  &lt;b:include data='blog' name='all-head-content'\/&gt;\n  &lt;title&gt;&lt;data:blog.pageTitle\/&gt;&lt;\/title&gt;\n\n  &lt;link href='https:\/\/fonts.googleapis.com\/css2?family=Kanit:wght@400;600&amp;amp;display=swap' rel='stylesheet'\/&gt;\n\n  &lt;b:skin&gt;&lt;!&#91;CDATA&#91;\n    body {\n      font-family: 'Kanit', sans-serif;\n      background: #f7f9fc;\n      color: #333;\n      line-height: 1.6;\n      margin: 0;\n    }\n\n    a { text-decoration: none; color: inherit; }\n\n    header {\n      background: #fff;\n      padding: 15px 30px;\n      box-shadow: 0 2px 8px rgba(0,0,0,0.05);\n      position: sticky;\n      top: 0;\n      z-index: 100;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n\n    header h1 { color: #008f7a; font-size: 1.5rem; }\n\n    nav ul { display: flex; gap: 20px; list-style: none; }\n    nav li { font-weight: 500; }\n\n    .container {\n      display: grid;\n      grid-template-columns: 2fr 1fr; \/* Main 2 \u0e2a\u0e48\u0e27\u0e19 \/ Sidebar 1 \u0e2a\u0e48\u0e27\u0e19 *\/\n      gap: 20px;\n      max-width: 1200px;\n      margin: 30px auto;\n      padding: 0 15px;\n    }\n\n    \/* Post card *\/\n    .post-card {\n      background: #fff;\n      border-radius: 12px;\n      padding: 20px;\n      margin-bottom: 20px;\n      box-shadow: 0 4px 12px rgba(0,0,0,0.05);\n      transition: transform 0.3s;\n    }\n    .post-card:hover { transform: translateY(-4px); }\n    .post-card h2 { font-size: 1.3rem; margin-bottom: 10px; }\n    .post-card p { color: #666; }\n\n    \/* Sidebar *\/\n    .sidebar {\n      background: #fff;\n      border-radius: 12px;\n      padding: 20px;\n      box-shadow: 0 4px 12px rgba(0,0,0,0.05);\n      height: fit-content;\n    }\n    .sidebar h3 { font-size: 1.2rem; margin-bottom: 15px; color: #008f7a; }\n\n    \/* Footer *\/\n    footer {\n      background: #222;\n      color: #eee;\n      text-align: center;\n      padding: 20px;\n      margin-top: 40px;\n    }\n\n  ]]>&lt;\/b:skin&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n  &lt;!-- Header --&gt;\n  &lt;header&gt;\n    &lt;h1&gt;&lt;data:blog.title\/&gt;&lt;\/h1&gt;\n    &lt;nav&gt;\n      &lt;ul&gt;\n        &lt;li&gt;&lt;a expr:href='data:blog.homepageUrl'&gt;Home&lt;\/a&gt;&lt;\/li&gt;\n        &lt;li&gt;&lt;a href='#'&gt;About&lt;\/a&gt;&lt;\/li&gt;\n        &lt;li&gt;&lt;a href='#'&gt;Contact&lt;\/a&gt;&lt;\/li&gt;\n      &lt;\/ul&gt;\n    &lt;\/nav&gt;\n  &lt;\/header&gt;\n\n  &lt;!-- Content --&gt;\n  &lt;div class=\"container\"&gt;\n    &lt;!-- Main --&gt;\n    &lt;main&gt;\n      &lt;b:section id='main' class='main' showaddelement='yes'&gt;\n        &lt;b:widget id='Blog1' type='Blog' title='Blog Posts' visible='true'\/&gt;\n      &lt;\/b:section&gt;\n    &lt;\/main&gt;\n\n    <strong>&lt;!-- Sidebar --&gt;\n    &lt;aside class=\"sidebar\"&gt;\n      &lt;h3&gt;Gadgets&lt;\/h3&gt;\n      &lt;b:section id='sidebar' class='sidebar-widgets' showaddelement='yes'\/&gt;\n    &lt;\/aside&gt;\n  &lt;\/div&gt;<\/strong>\n\n  &lt;!-- Footer --&gt;\n  &lt;footer&gt;\n    &lt;p&gt;\u00a9 &lt;data:blog.title\/&gt; - Powered by Blogger&lt;\/p&gt;\n    &lt;p&gt;&lt;a href='\/\/siammakemoney.com' style='color:#00c9a7;'&gt;siammakemoney.com&lt;\/a&gt;&lt;\/p&gt;\n  &lt;\/footer&gt;\n\n  &lt;!-- Back to top --&gt;\n  &lt;button id=\"back-to-top\" class=\"back-to-top\"&gt;\u2191&lt;\/button&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n<div class=\"gc-box info_type icon_type\" style=\"text-align:left;border-radius:20px;box-shadow: 0 10px 10px #00000007\">\n\t\t\t<div class=\"gc-box-icon\"><svg x=\"0px\" y=\"0px\" viewBox=\"0 0 512 512\"> <g><g> <path d=\"M256,0C114.497,0,0,114.507,0,256c0,141.503,114.507,256,256,256c141.503,0,256-114.507,256-256 C512,114.497,397.492,0,256,0z M256,472c-119.393,0-216-96.615-216-216c0-119.393,96.615-216,216-216 c119.393,0,216,96.615,216,216C472,375.393,375.384,472,256,472z\"\/> <\/g> <\/g> <g> <g> <path d=\"M256,214.33c-11.046,0-20,8.954-20,20v128.793c0,11.046,8.954,20,20,20s20-8.955,20-20.001V234.33 C276,223.284,267.046,214.33,256,214.33z\"\/> <\/g> <\/g> <g> <g> <circle cx=\"256\" cy=\"162.84\" r=\"27\"\/> <\/g> <\/g> <\/svg><\/div>\n\t\t\t\n\t\t\t<div class=\"gc-box-text\">\n\n<p><strong>\u0e41\u0e16\u0e1a\u0e14\u0e49\u0e32\u0e19\u0e02\u0e49\u0e32\u0e07 (Sidebar Gadgets\/Widgets)<\/strong> \u0e43\u0e19\u0e18\u0e35\u0e21 Blogger \u0e40\u0e23\u0e32\u0e15\u0e49\u0e2d\u0e07\u0e40\u0e1e\u0e34\u0e48\u0e21 <code>&lt;b:section&gt;<\/code> \u0e44\u0e27\u0e49\u0e43\u0e19 <code>&lt;body&gt;<\/code> \u0e02\u0e49\u0e32\u0e07 \u0e46 <code>main<\/code> (\u0e2a\u0e48\u0e27\u0e19\u0e41\u0e2a\u0e14\u0e07\u0e42\u0e1e\u0e2a\u0e15\u0e4c)<\/p>\n\n<\/div>\n\t\t<\/div>\n\n\n<h4 class=\"wp-block-heading\">\u2705 3.1. \u0e2a\u0e48\u0e27\u0e19\u0e1b\u0e23\u0e30\u0e01\u0e32\u0e28 XML \u0e41\u0e25\u0e30 Namespace<\/h4>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-secondary-background-color has-text-color has-background has-link-color wp-elements-922245705145cdd5813e3c5ded7e3ce0\"><code>&lt;?xml version=\"1.0\" encoding=\"UTF-8\" ?&gt;\n&lt;html xmlns='http:\/\/www.w3.org\/1999\/xhtml' \n      xmlns:b='http:\/\/www.google.com\/2005\/gml\/b' \n      xmlns:data='http:\/\/www.google.com\/2005\/gml\/data' \n      xmlns:expr='http:\/\/www.google.com\/2005\/gml\/expr'&gt;\n<\/code><\/pre>\n\n\n\n<h5 class=\"wp-block-heading\">\u0e2d\u0e18\u0e34\u0e1a\u0e32\u0e22<\/h5>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>&lt;?xml ...?&gt;<\/code> \u2192 \u0e1a\u0e2d\u0e01\u0e27\u0e48\u0e32\u0e40\u0e1b\u0e47\u0e19\u0e44\u0e1f\u0e25\u0e4c XML \u0e17\u0e35\u0e48 Blogger \u0e43\u0e0a\u0e49\u0e41\u0e1b\u0e25\u0e07\u0e40\u0e1b\u0e47\u0e19 HTML<\/li>\n\n\n\n<li><code>xmlns:b<\/code> \u2192 \u0e43\u0e0a\u0e49\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e41\u0e17\u0e47\u0e01\u0e02\u0e2d\u0e07 Blogger \u0e40\u0e0a\u0e48\u0e19 <code>&lt;b:section&gt;<\/code>, <code>&lt;b:widget&gt;<\/code><\/li>\n\n\n\n<li><code>xmlns:data<\/code> \u2192 \u0e43\u0e0a\u0e49\u0e14\u0e36\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25 \u0e40\u0e0a\u0e48\u0e19 <code>&lt;data:blog.title\/&gt;<\/code><\/li>\n\n\n\n<li><code>xmlns:expr<\/code> \u2192 \u0e43\u0e0a\u0e49\u0e43\u0e2a\u0e48\u0e19\u0e34\u0e1e\u0e08\u0e19\u0e4c \u0e40\u0e0a\u0e48\u0e19 <code>expr:href='data:blog.url'<\/code><\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h4 class=\"wp-block-heading\">\u2705 3.2. <code>&lt;head&gt;<\/code> \u0e2a\u0e48\u0e27\u0e19\u0e2b\u0e31\u0e27\u0e02\u0e2d\u0e07\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c<\/h4>\n\n\n\n<h5 class=\"wp-block-heading\">3.2.1 \u0e23\u0e2d\u0e07\u0e23\u0e31\u0e1a Internet Explorer \u0e40\u0e01\u0e48\u0e32<\/h5>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-secondary-background-color has-text-color has-background has-link-color wp-elements-f8ea26c6fc4657a443d91949b73c9f66\"><code>&lt;meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'\/&gt;\n<\/code><\/pre>\n\n\n\n<h5 class=\"wp-block-heading\">3.2.2 Viewport \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e21\u0e37\u0e2d\u0e16\u0e37\u0e2d \/ \u0e40\u0e14\u0e2a\u0e01\u0e4c\u0e17\u0e47\u0e2d\u0e1b<\/h5>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-secondary-background-color has-text-color has-background has-link-color wp-elements-756cfa59a3f387b09f866cdb0c174faf\"><code>&lt;b:if cond='data:blog.isMobile'&gt;\n  &lt;meta content='width=device-width,initial-scale=1.0,...' name='viewport'\/&gt;\n&lt;b:else\/&gt;\n  &lt;meta content='width=device-width, initial-scale=1.0' name='viewport'\/&gt;\n&lt;\/b:if&gt;\n<\/code><\/pre>\n\n\n\n<p><strong>\u0e17\u0e33\u0e07\u0e32\u0e19\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e44\u0e23?<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u0e16\u0e49\u0e32\u0e40\u0e02\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a\u0e14\u0e49\u0e27\u0e22\u0e21\u0e37\u0e2d\u0e16\u0e37\u0e2d \u2192 \u0e43\u0e0a\u0e49 viewport \u0e41\u0e1a\u0e1a mobile friendly<\/li>\n\n\n\n<li>\u0e16\u0e49\u0e32\u0e40\u0e1b\u0e47\u0e19 desktop \u2192 \u0e43\u0e0a\u0e49\u0e41\u0e1a\u0e1a\u0e40\u0e15\u0e47\u0e21\u0e2b\u0e19\u0e49\u0e32\u0e08\u0e2d<\/li>\n<\/ul>\n\n\n\n<h5 class=\"wp-block-heading\">3.2.3 \u0e42\u0e2b\u0e25\u0e14\u0e2a\u0e48\u0e27\u0e19 head \u0e2d\u0e31\u0e15\u0e42\u0e19\u0e21\u0e31\u0e15\u0e34\u0e02\u0e2d\u0e07 Blogger<\/h5>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-secondary-background-color has-text-color has-background has-link-color wp-elements-0bff4783996ec1a5ba1cc8b8eaca4706\"><code>&lt;b:include data='blog' name='all-head-content'\/&gt;\n<\/code><\/pre>\n\n\n\n<p>\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a\u0e14\u0e49\u0e27\u0e22:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>meta \u0e02\u0e2d\u0e07\u0e1a\u0e17\u0e04\u0e27\u0e32\u0e21<\/li>\n\n\n\n<li>Open Graph<\/li>\n\n\n\n<li>Schema \u0e1e\u0e37\u0e49\u0e19\u0e10\u0e32\u0e19<\/li>\n\n\n\n<li>Feed<br><strong>\u0e2a\u0e33\u0e04\u0e31\u0e0d\u0e21\u0e32\u0e01 \u0e2b\u0e49\u0e32\u0e21\u0e25\u0e1a<\/strong><\/li>\n<\/ul>\n\n\n\n<h5 class=\"wp-block-heading\">3.2.4 \u0e14\u0e36\u0e07\u0e0a\u0e37\u0e48\u0e2d\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e1b\u0e47\u0e19 <code>&lt;title&gt;<\/code><\/h5>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-secondary-background-color has-text-color has-background has-link-color wp-elements-37701c68195ff66f18d6c837276cdc0c\"><code>&lt;title&gt;&lt;data:blog.pageTitle\/&gt;&lt;\/title&gt;\n<\/code><\/pre>\n\n\n\n<h5 class=\"wp-block-heading\">3.2.5 \u0e42\u0e2b\u0e25\u0e14 Google Fonts<\/h5>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-secondary-background-color has-text-color has-background has-link-color wp-elements-847fd7abb34d9744800d215329ca8699\"><code>&lt;link href=\"https:\/\/fonts.googleapis.com\/css2?family=Kanit...\" \/&gt;\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h4 class=\"wp-block-heading\">\ud83c\udfa83.3 CSS \u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14 (\u0e20\u0e32\u0e22\u0e43\u0e19 <code>&lt;b:skin&gt;<\/code>)<\/h4>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-secondary-background-color has-text-color has-background has-link-color wp-elements-c702187c8b432c1d7447c3812db0ee06\"><code>&lt;b:skin&gt;&lt;!&#91;CDATA&#91;\n  ... CSS ...\n]]>&lt;\/b:skin&gt;\n<\/code><\/pre>\n\n\n\n<p>Blogger \u0e15\u0e49\u0e2d\u0e07\u0e43\u0e2a\u0e48 CSS \u0e20\u0e32\u0e22\u0e43\u0e19 <code>&lt;b:skin&gt;<\/code> \u0e40\u0e17\u0e48\u0e32\u0e19\u0e31\u0e49\u0e19<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h4 class=\"wp-block-heading\">\ud83e\uddf1 4. \u0e2a\u0e48\u0e27\u0e19 Header \u0e02\u0e2d\u0e07\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c<\/h4>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-secondary-background-color has-text-color has-background has-link-color wp-elements-c999c24df9ac3cbb6bf181c197ea883b\"><code>&lt;header&gt;\n  &lt;h1&gt;&lt;data:blog.title\/&gt;&lt;\/h1&gt;\n  &lt;nav&gt;\n    &lt;ul&gt;\n      &lt;li&gt;&lt;a expr:href='data:blog.homepageUrl'&gt;Home&lt;\/a&gt;&lt;\/li&gt;\n      &lt;li&gt;&lt;a href='#'&gt;About&lt;\/a&gt;&lt;\/li&gt;\n      &lt;li&gt;&lt;a href='#'&gt;Contact&lt;\/a&gt;&lt;\/li&gt;\n    &lt;\/ul&gt;\n  &lt;\/nav&gt;\n&lt;\/header&gt;\n<\/code><\/pre>\n\n\n\n<h5 class=\"wp-block-heading\">\u0e2d\u0e18\u0e34\u0e1a\u0e32\u0e22<\/h5>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>&lt;data:blog.title\/&gt;<\/code> \u2192 \u0e0a\u0e37\u0e48\u0e2d\u0e1a\u0e25\u0e47\u0e2d\u0e01<\/li>\n\n\n\n<li>\u0e40\u0e21\u0e19\u0e39\u0e40\u0e23\u0e35\u0e22\u0e07\u0e08\u0e32\u0e01\u0e0b\u0e49\u0e32\u0e22\u0e44\u0e1b\u0e02\u0e27\u0e32<\/li>\n\n\n\n<li>Header Sticky \u0e15\u0e32\u0e21 CSS<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h4 class=\"wp-block-heading\">\ud83d\udcf0 5. Layout \u0e1a\u0e23\u0e34\u0e40\u0e27\u0e13\u0e40\u0e19\u0e37\u0e49\u0e2d\u0e2b\u0e32 (Content Container)<\/h4>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-secondary-background-color has-text-color has-background has-link-color wp-elements-572587a0695316628bdde2a0692be028\"><code>&lt;div class=\"container\"&gt;\n  &lt;main&gt;\n    &lt;b:section id='main'&gt;\n      &lt;b:widget type='Blog'\/&gt;\n    &lt;\/b:section&gt;\n  &lt;\/main&gt;\n\n  &lt;aside class=\"sidebar\"&gt;\n    &lt;h3&gt;Gadgets&lt;\/h3&gt;\n    &lt;b:section id='sidebar'\/&gt;\n  &lt;\/aside&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n\n\n\n<h5 class=\"wp-block-heading\">5.1 Main Content<\/h5>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-secondary-background-color has-text-color has-background has-link-color wp-elements-69bab345533ccf0cae1cebf771d0b715\"><code>&lt;b:widget type='Blog' \/&gt;\n<\/code><\/pre>\n\n\n\n<p><strong>\u0e40\u0e1b\u0e47\u0e19\u0e2b\u0e31\u0e27\u0e43\u0e08\u0e02\u0e2d\u0e07 Blogger<\/strong><br>\u0e41\u0e2a\u0e14\u0e07:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e42\u0e1e\u0e2a\u0e15\u0e4c<\/li>\n\n\n\n<li>\u0e1a\u0e17\u0e04\u0e27\u0e32\u0e21\u0e40\u0e15\u0e47\u0e21<\/li>\n\n\n\n<li>pagination<\/li>\n<\/ul>\n\n\n\n<h5 class=\"wp-block-heading\">5.2 Sidebar<\/h5>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-secondary-background-color has-text-color has-background has-link-color wp-elements-1dab3c3709151e563ecb35aad6080123\"><code>&lt;b:section id='sidebar' ... \/&gt;\n<\/code><\/pre>\n\n\n\n<p>\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e40\u0e1e\u0e34\u0e48\u0e21 widget \u0e08\u0e32\u0e01 Layout \u0e40\u0e0a\u0e48\u0e19:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Popular Posts<\/li>\n\n\n\n<li>HTML\/JavaScript<\/li>\n\n\n\n<li>Labels<\/li>\n\n\n\n<li>Ads<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h4 class=\"wp-block-heading\">\ud83e\udde9 6. Footer<\/h4>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-secondary-background-color has-text-color has-background has-link-color wp-elements-be13776c7c1c685e4bc6ced575cfdc1d\"><code>&lt;footer&gt;\n  &lt;p&gt;\u00a9 &lt;data:blog.title\/&gt; - Powered by Blogger&lt;\/p&gt;\n  &lt;p&gt;&lt;a href=\"\/\/siammakemoney.com\"&gt;...&lt;\/a&gt;&lt;\/p&gt;\n&lt;\/footer&gt;\n<\/code><\/pre>\n\n\n\n<h5 class=\"wp-block-heading\">\u0e2d\u0e18\u0e34\u0e1a\u0e32\u0e22<\/h5>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u0e14\u0e36\u0e07\u0e1b\u0e35\u0e41\u0e25\u0e30\u0e0a\u0e37\u0e48\u0e2d\u0e1a\u0e25\u0e47\u0e2d\u0e01\u0e2d\u0e31\u0e15\u0e42\u0e19\u0e21\u0e31\u0e15\u0e34<\/li>\n\n\n\n<li>\u0e43\u0e2a\u0e48\u0e40\u0e04\u0e23\u0e14\u0e34\u0e15<\/li>\n\n\n\n<li>\u0e2a\u0e35\u0e1e\u0e37\u0e49\u0e19\u0e2b\u0e25\u0e31\u0e07\u0e40\u0e1b\u0e47\u0e19\u0e14\u0e33<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h4 class=\"wp-block-heading\">\u2b06\ufe0f 7. Back-to-Top Button<\/h4>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-secondary-background-color has-text-color has-background has-link-color wp-elements-807bab45c1cb270487277114c5716a7c\"><code>&lt;button id=\"back-to-top\" class=\"back-to-top\"&gt;\u2191&lt;\/button&gt;\n<\/code><\/pre>\n\n\n\n<p>\u0e1b\u0e01\u0e15\u0e34\u0e08\u0e30\u0e15\u0e49\u0e2d\u0e07\u0e21\u0e35 JS \u0e14\u0e49\u0e27\u0e22 \u0e40\u0e0a\u0e48\u0e19:<\/p>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-secondary-background-color has-text-color has-background has-link-color wp-elements-473b7fd97b155ad83e56d7520e14090b\"><code>\nwindow.addEventListener('scroll', () =&gt; {\n  document.getElementById('back-to-top').style.display =\n    window.scrollY &gt; 300 ? 'block' : 'none';\n});\n\n\ndocument.getElementById('back-to-top').onclick = () =&gt;\n  window.scrollTo({ top: 0, behavior: 'smooth' });<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\u0e2a\u0e48\u0e27\u0e19<\/th><th>\u0e17\u0e33\u0e2d\u0e30\u0e44\u0e23<\/th><\/tr><\/thead><tbody><tr><td>XML Namespace<\/td><td>\u0e17\u0e33\u0e43\u0e2b\u0e49\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e41\u0e17\u0e47\u0e01 Blogger \u0e44\u0e14\u0e49<\/td><\/tr><tr><td>Viewport<\/td><td>Responsive<\/td><\/tr><tr><td>all-head-content<\/td><td>SEO + Meta auto \u0e08\u0e32\u0e01 Blogger<\/td><\/tr><tr><td>CSS<\/td><td>\u0e2d\u0e2d\u0e01\u0e41\u0e1a\u0e1a Layout \u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14<\/td><\/tr><tr><td>Header<\/td><td>\u0e42\u0e25\u0e42\u0e01\u0e49 + \u0e40\u0e21\u0e19\u0e39<\/td><\/tr><tr><td>Container<\/td><td>Grid 2 \u0e04\u0e2d\u0e25\u0e31\u0e21\u0e19\u0e4c<\/td><\/tr><tr><td>Blog1<\/td><td>\u0e41\u0e2a\u0e14\u0e07\u0e42\u0e1e\u0e2a\u0e15\u0e4c\u0e02\u0e2d\u0e07\u0e1a\u0e25\u0e47\u0e2d\u0e01<\/td><\/tr><tr><td>Sidebar<\/td><td>\u0e27\u0e32\u0e07 widget \u0e44\u0e14\u0e49\u0e15\u0e32\u0e21\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23<\/td><\/tr><tr><td>Footer<\/td><td>\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e25\u0e34\u0e02\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e4c<\/td><\/tr><tr><td>Back-to-Top<\/td><td>\u0e1b\u0e38\u0e48\u0e21\u0e01\u0e25\u0e31\u0e1a\u0e14\u0e49\u0e32\u0e19\u0e1a\u0e19<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color wp-elements-d5b3c96cf873e0a8ca87f15918522ba2\" style=\"color:#206221\">4. \u0e42\u0e04\u0e49\u0e14\u0e18\u0e35\u0e21 Blogger Sidebar \u0e0b\u0e49\u0e32\u0e22 + \u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e21\u0e19\u0e39\u0e44\u0e14\u0e49<\/h3>\n\n\n\n<pre class=\"wp-block-code has-orange-color has-secondary-background-color has-text-color has-background has-link-color wp-elements-227c88552866b011f2414cf63e980204\"><code>&lt;?xml version=\"1.0\" encoding=\"UTF-8\" ?&gt;\n&lt;html xmlns='http:\/\/www.w3.org\/1999\/xhtml' \n      xmlns:b='http:\/\/www.google.com\/2005\/gml\/b' \n      xmlns:data='http:\/\/www.google.com\/2005\/gml\/data' \n      xmlns:expr='http:\/\/www.google.com\/2005\/gml\/expr'&gt;\n\n&lt;head&gt;\n  &lt;meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'\/&gt; \n  &lt;b:if cond='data:blog.isMobile'&gt; \n    &lt;meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'\/&gt; \n  &lt;b:else\/&gt; \n    &lt;meta content='width=device-width, initial-scale=1.0' name='viewport'\/&gt; \n  &lt;\/b:if&gt; \n\n  &lt;b:include data='blog' name='all-head-content'\/&gt;\n  &lt;title&gt;&lt;data:blog.pageTitle\/&gt;&lt;\/title&gt;\n\n  &lt;link href='https:\/\/fonts.googleapis.com\/css2?family=Kanit:wght@400;600&amp;amp;display=swap' rel='stylesheet'\/&gt;\n\n  &lt;b:skin&gt;&lt;!&#91;CDATA&#91;\n    body {\n      font-family: 'Kanit', sans-serif;\n      background: #f7f9fc;\n      color: #333;\n      line-height: 1.6;\n      margin: 0;\n    }\n\n    a { text-decoration: none; color: inherit; }\n    a:hover { color: #008f7a; }\n\n    header {\n      background: #fff;\n      padding: 15px 30px;\n      box-shadow: 0 2px 8px rgba(0,0,0,0.05);\n      position: sticky;\n      top: 0;\n      z-index: 100;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n\n    header h1 { color: #008f7a; font-size: 1.5rem; }\n    nav ul { display: flex; gap: 20px; list-style: none; }\n    nav li { font-weight: 500; }\n\n    .container {\n      display: grid;\n      grid-template-columns: 300px 1fr; \/* Sidebar 300px \/ Main content flexible *\/\n      gap: 20px;\n      max-width: 1200px;\n      margin: 30px auto;\n      padding: 0 15px;\n    }\n\n    \/* Post card *\/\n    .post-card {\n      background: #fff;\n      border-radius: 12px;\n      padding: 20px;\n      margin-bottom: 20px;\n      box-shadow: 0 4px 12px rgba(0,0,0,0.05);\n      transition: transform 0.3s;\n    }\n    .post-card:hover { transform: translateY(-4px); }\n    .post-card h2 { font-size: 1.3rem; margin-bottom: 10px; }\n    .post-card p { color: #666; }\n\n    \/* Sidebar *\/\n    .sidebar {\n      background: #fff;\n      border-radius: 12px;\n      padding: 20px;\n      box-shadow: 0 4px 12px rgba(0,0,0,0.05);\n      height: fit-content;\n    }\n    .sidebar h3 { font-size: 1.2rem; margin-bottom: 15px; color: #008f7a; }\n\n    \/* Footer *\/\n    footer {\n      background: #222;\n      color: #eee;\n      text-align: center;\n      padding: 20px;\n      margin-top: 40px;\n    }\n\n    \/* Back to top *\/\n    .back-to-top {\n      position: fixed;\n      bottom: 20px;\n      right: 20px;\n      background: #008f7a;\n      color: #fff;\n      border: none;\n      border-radius: 50%;\n      width: 50px;\n      height: 50px;\n      font-size: 20px;\n      cursor: pointer;\n      display: none;\n      align-items: center;\n      justify-content: center;\n      box-shadow: 0 4px 8px rgba(0,0,0,0.15);\n    }\n    .back-to-top:hover {\n      background: #006f5a;\n    }\n\n    \/* Responsive *\/\n    @media screen and (max-width: 900px) {\n      .container {\n        grid-template-columns: 1fr;\n      }\n      .sidebar { margin-bottom: 20px; }\n    }\n  ]]>&lt;\/b:skin&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n  <strong>&lt;!-- Header --&gt;\n  &lt;header&gt;\n    &lt;h1&gt;&lt;data:blog.title\/&gt;&lt;\/h1&gt;\n    &lt;nav&gt;\n      &lt;ul&gt;\n        &lt;li&gt;&lt;a expr:href='data:blog.homepageUrl'&gt;Home&lt;\/a&gt;&lt;\/li&gt;\n        &lt;li&gt;&lt;a href='#'&gt;About&lt;\/a&gt;&lt;\/li&gt;\n        &lt;li&gt;&lt;a href='#'&gt;Contact&lt;\/a&gt;&lt;\/li&gt;\n      &lt;\/ul&gt;\n    &lt;\/nav&gt;\n  &lt;\/header&gt;\n\n  &lt;!-- Container: Sidebar + Main --&gt;\n  &lt;div class=\"container\"&gt;\n    &lt;!-- Sidebar --&gt;\n    &lt;aside class=\"sidebar\"&gt;\n      &lt;h3&gt;Menu &amp;amp; Gadgets&lt;\/h3&gt;\n      &lt;b:section id='sidebar' class='sidebar-widgets' showaddelement='yes'\/&gt;\n    &lt;\/aside&gt;\n\n    &lt;!-- Main content --&gt;\n    &lt;main&gt;\n      &lt;b:section id='main' class='main' showaddelement='yes'&gt;\n        &lt;b:widget id='Blog1' type='Blog' title='Blog Posts' visible='true'\/&gt;\n      &lt;\/b:section&gt;\n    &lt;\/main&gt;\n  &lt;\/div&gt;\n\n  &lt;!-- Footer --&gt;\n  &lt;footer&gt;\n    &lt;p&gt;\u00a9 &lt;data:blog.title\/&gt; - Powered by Blogger&lt;\/p&gt;\n    &lt;p&gt;&lt;a href='\/\/siammakemoney.com' style='color:#00c9a7;'&gt;siammakemoney.com&lt;\/a&gt;&lt;\/p&gt;\n  &lt;\/footer&gt;<\/strong>\n\n  &lt;!-- Back to top --&gt;\n  &lt;button id=\"back-to-top\" class=\"back-to-top\"&gt;\u2191&lt;\/button&gt;\n\n  &lt;script&gt;\n    const btn = document.getElementById('back-to-top');\n    window.addEventListener('scroll', () =&gt; {\n      btn.style.display = window.scrollY &gt; 200 ? 'flex' : 'none';\n    });\n    btn.addEventListener('click', () =&gt; {\n      window.scrollTo({ top: 0, behavior: 'smooth' });\n    });\n  &lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n<div class=\"gc-box info_type icon_type\" style=\"text-align:left;border-radius:20px;box-shadow: 0 10px 10px #00000007\">\n\t\t\t<div class=\"gc-box-icon\"><svg x=\"0px\" y=\"0px\" viewBox=\"0 0 512 512\"> <g><g> <path d=\"M256,0C114.497,0,0,114.507,0,256c0,141.503,114.507,256,256,256c141.503,0,256-114.507,256-256 C512,114.497,397.492,0,256,0z M256,472c-119.393,0-216-96.615-216-216c0-119.393,96.615-216,216-216 c119.393,0,216,96.615,216,216C472,375.393,375.384,472,256,472z\"\/> <\/g> <\/g> <g> <g> <path d=\"M256,214.33c-11.046,0-20,8.954-20,20v128.793c0,11.046,8.954,20,20,20s20-8.955,20-20.001V234.33 C276,223.284,267.046,214.33,256,214.33z\"\/> <\/g> <\/g> <g> <g> <circle cx=\"256\" cy=\"162.84\" r=\"27\"\/> <\/g> <\/g> <\/svg><\/div>\n\t\t\t\n\t\t\t<div class=\"gc-box-text\">\n\n<p>&lt;!&#8211; Sidebar (\u0e0b\u0e49\u0e32\u0e22) &#8211;&gt;<\/p>\n\n\n\n<p>&lt;!&#8211; Main content (\u0e02\u0e27\u0e32) &#8211;&gt;<\/p>\n\n<\/div>\n\t\t<\/div>\n\n\n<h4 class=\"wp-block-heading\">\ud83d\udd37 \u0e20\u0e32\u0e1e\u0e23\u0e27\u0e21\u0e02\u0e2d\u0e07\u0e42\u0e04\u0e49\u0e14\u0e43\u0e19\u0e18\u0e35\u0e21\u0e19\u0e35\u0e49<\/h4>\n\n\n\n<p>\u0e19\u0e35\u0e48\u0e04\u0e37\u0e2d <strong>Template Blogger \u0e41\u0e1a\u0e1a 2 \u0e04\u0e2d\u0e25\u0e31\u0e21\u0e19\u0e4c (Sidebar + Main)<\/strong> \u0e17\u0e35\u0e48\u0e21\u0e35:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Header sticky<\/li>\n\n\n\n<li>Sidebar fixed width (300px)<\/li>\n\n\n\n<li>Main content flexible<\/li>\n\n\n\n<li>Post card design<\/li>\n\n\n\n<li>Footer<\/li>\n\n\n\n<li>Back-to-top button<\/li>\n\n\n\n<li>Responsive layout<\/li>\n\n\n\n<li>\u0e14\u0e36\u0e07\u0e42\u0e1e\u0e2a\u0e15\u0e4c\u0e1c\u0e48\u0e32\u0e19 <code>&lt;b:widget type=\"Blog\"&gt;<\/code><\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h4 class=\"wp-block-heading\">\ud83d\udd36 4.1. \u0e2a\u0e48\u0e27\u0e19\u0e1b\u0e23\u0e30\u0e01\u0e32\u0e28 XML \u0e41\u0e25\u0e30 Namespace<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?xml version=\"1.0\" encoding=\"UTF-8\" ?&gt;\n&lt;html xmlns='http:\/\/www.w3.org\/1999\/xhtml'\n      xmlns:b='http:\/\/www.google.com\/2005\/gml\/b'\n      xmlns:data='http:\/\/www.google.com\/2005\/gml\/data'\n      xmlns:expr='http:\/\/www.google.com\/2005\/gml\/expr'&gt;\n<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">\u2714 \u0e2d\u0e18\u0e34\u0e1a\u0e32\u0e22<\/h4>\n\n\n\n<p>\u0e19\u0e35\u0e48\u0e04\u0e37\u0e2d <strong>\u0e42\u0e04\u0e23\u0e07\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e2b\u0e25\u0e31\u0e01\u0e17\u0e35\u0e48 Blogger \u0e15\u0e49\u0e2d\u0e07\u0e43\u0e0a\u0e49<\/strong>:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>namespace<\/th><th>\u0e2b\u0e19\u0e49\u0e32\u0e17\u0e35\u0e48<\/th><\/tr><\/thead><tbody><tr><td><code>b:<\/code><\/td><td>\u0e43\u0e0a\u0e49\u0e41\u0e17\u0e47\u0e01\u0e23\u0e30\u0e1a\u0e1a\u0e02\u0e2d\u0e07 Blogger \u0e40\u0e0a\u0e48\u0e19 <code>&lt;b:section&gt;<\/code>, <code>&lt;b:widget&gt;<\/code><\/td><\/tr><tr><td><code>data:<\/code><\/td><td>\u0e14\u0e36\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25 \u0e40\u0e0a\u0e48\u0e19 <code>&lt;data:blog.title\/&gt;<\/code><\/td><\/tr><tr><td><code>expr:<\/code><\/td><td>\u0e01\u0e32\u0e23\u0e40\u0e02\u0e35\u0e22\u0e19 expression \u0e40\u0e0a\u0e48\u0e19 <code>expr:href=\"data:blog.homepageUrl\"<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h4 class=\"wp-block-heading\">\ud83d\udd36 4.2. <code>&lt;head&gt;<\/code> \u2014 \u0e2a\u0e48\u0e27\u0e19\u0e2b\u0e31\u0e27\u0e02\u0e2d\u0e07\u0e40\u0e27\u0e47\u0e1a<\/h4>\n\n\n\n<h5 class=\"wp-block-heading\">\u27144.2.1 Viewport \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e21\u0e37\u0e2d\u0e16\u0e37\u0e2d<\/h5>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-secondary-background-color has-text-color has-background has-link-color wp-elements-9c34ec718453162304a05f45e6d9c456\"><code>&lt;b:if cond='data:blog.isMobile'&gt;\n  &lt;meta content=\"width=device-width, initial-scale=1.0\" \/&gt;\n&lt;b:else\/&gt;\n  &lt;meta content=\"width=device-width, initial-scale=1.0\" \/&gt;\n&lt;\/b:if&gt;\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h5 class=\"wp-block-heading\">\u2714 4.2.2 \u0e43\u0e2a\u0e48 meta \u0e41\u0e25\u0e30 script \u0e2d\u0e31\u0e15\u0e42\u0e19\u0e21\u0e31\u0e15\u0e34\u0e02\u0e2d\u0e07 Blogger<\/h5>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-secondary-background-color has-text-color has-background has-link-color wp-elements-0bff4783996ec1a5ba1cc8b8eaca4706\"><code>&lt;b:include data='blog' name='all-head-content'\/&gt;\n<\/code><\/pre>\n\n\n\n<p>Blogger \u0e08\u0e30\u0e43\u0e2a\u0e48\u0e2a\u0e34\u0e48\u0e07\u0e15\u0e48\u0e2d\u0e44\u0e1b\u0e19\u0e35\u0e49\u0e43\u0e2b\u0e49\u0e2d\u0e31\u0e15\u0e42\u0e19\u0e21\u0e31\u0e15\u0e34:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Title \/ Description \u0e02\u0e2d\u0e07\u0e2b\u0e19\u0e49\u0e32<\/li>\n\n\n\n<li>OpenGraph<\/li>\n\n\n\n<li>Schema \u0e1a\u0e17\u0e04\u0e27\u0e32\u0e21<\/li>\n\n\n\n<li>Canonical URL<\/li>\n\n\n\n<li>Feed<\/li>\n\n\n\n<li>CSS widget<\/li>\n<\/ul>\n\n\n\n<p><strong>\u0e40\u0e1b\u0e47\u0e19\u0e2a\u0e48\u0e27\u0e19\u0e2a\u0e33\u0e04\u0e31\u0e0d \u0e2b\u0e49\u0e32\u0e21\u0e25\u0e1a<\/strong><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h5 class=\"wp-block-heading\">\u2714 4.2.3 Title \u0e02\u0e2d\u0e07\u0e2b\u0e19\u0e49\u0e32<\/h5>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-secondary-background-color has-text-color has-background has-link-color wp-elements-df0058297cfed394f5afbe79e4dc39fa\"><code>&lt;title&gt;&lt;data:blog.pageTitle\/&gt;&lt;\/title&gt;<\/code><\/pre>\n\n\n\n<p>\u0e14\u0e36\u0e07\u0e0a\u0e37\u0e48\u0e2d\u0e15\u0e32\u0e21\u0e2b\u0e19\u0e49\u0e32 \u0e40\u0e0a\u0e48\u0e19:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u0e2b\u0e19\u0e49\u0e32\u0e41\u0e23\u0e01 \u2192 \u0e0a\u0e37\u0e48\u0e2d\u0e1a\u0e25\u0e47\u0e2d\u0e01<\/li>\n\n\n\n<li>\u0e2b\u0e19\u0e49\u0e32\u0e17\u0e35\u0e48\u0e41\u0e2a\u0e14\u0e07\u0e42\u0e1e\u0e2a\u0e15\u0e4c \u2192 \u0e0a\u0e37\u0e48\u0e2d\u0e42\u0e1e\u0e2a\u0e15\u0e4c<\/li>\n\n\n\n<li>\u0e2b\u0e19\u0e49\u0e32\u0e17\u0e35\u0e48\u0e21\u0e35 label \u2192 \u0e0a\u0e37\u0e48\u0e2d label<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h5 class=\"wp-block-heading\">\u2714 4.2.4 \u0e42\u0e2b\u0e25\u0e14\u0e1f\u0e2d\u0e19\u0e15\u0e4c Google<\/h5>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-secondary-background-color has-text-color has-background has-link-color wp-elements-00dfba08d0dfa65da115e3cb6bd3b16c\"><code>&lt;link href=\"https:\/\/fonts.googleapis.com\/css2?family=Kanit...\" \/&gt;<\/code><\/pre>\n\n\n\n<p>\u0e15\u0e31\u0e49\u0e07\u0e04\u0e48\u0e32\u0e1f\u0e2d\u0e19\u0e15\u0e4c\u0e17\u0e31\u0e48\u0e27\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h4 class=\"wp-block-heading\">\ud83d\udd36 4.3. <code>&lt;b:skin&gt;<\/code> \u2014 \u0e2a\u0e48\u0e27\u0e19 CSS \u0e02\u0e2d\u0e07\u0e40\u0e17\u0e21\u0e40\u0e1e\u0e25\u0e15<\/h4>\n\n\n\n<p>Blogger \u0e15\u0e49\u0e2d\u0e07\u0e43\u0e2a\u0e48 CSS \u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14\u0e20\u0e32\u0e22\u0e43\u0e19 <code>&lt;b:skin&gt;&lt;![CDATA[ ... ]]>&lt;\/b:skin&gt;<\/code><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h5 class=\"wp-block-heading\">\u2714 4.3.1 \u0e01\u0e33\u0e2b\u0e19\u0e14\u0e2a\u0e44\u0e15\u0e25\u0e4c\u0e2b\u0e25\u0e31\u0e01\u0e02\u0e2d\u0e07\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c<\/h5>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-secondary-background-color has-text-color has-background has-link-color wp-elements-638e5dd6105ad8cfc1b343985f288a62\"><code>body {\n  font-family:'Kanit';\n  background:#f7f9fc;\n  color:#333;\n}<\/code><\/pre>\n\n\n\n<p>\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e2a\u0e35\u0e1e\u0e37\u0e49\u0e19\u0e2b\u0e25\u0e31\u0e07, \u0e1f\u0e2d\u0e19\u0e15\u0e4c, \u0e2a\u0e35\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h5 class=\"wp-block-heading\">\u2714 4.3.2 Header Sticky<\/h5>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-secondary-background-color has-text-color has-background has-link-color wp-elements-c76ace725324a20d621f4c7e6e77e75a\"><code>header {\n  position:sticky;\n  top:0;\n  background:#fff;\n  box-shadow:0 2px 8px rgba(0,0,0,0.05);\n}\n<\/code><\/pre>\n\n\n\n<p>\u0e40\u0e21\u0e37\u0e48\u0e2d\u0e40\u0e25\u0e37\u0e48\u0e2d\u0e19\u0e2b\u0e19\u0e49\u0e32 \u2192 Header \u0e15\u0e34\u0e14\u0e14\u0e49\u0e32\u0e19\u0e1a\u0e19<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h5 class=\"wp-block-heading\">\u2714 4.3.3 Navigation Menu<\/h5>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-secondary-background-color has-text-color has-background has-link-color wp-elements-ddd9277cb112855dc5a51c857657dd0a\"><code>nav ul {\n  display:flex;\n  gap:20px;\n  list-style:none;\n}\n<\/code><\/pre>\n\n\n\n<p>\u0e40\u0e21\u0e19\u0e39\u0e40\u0e23\u0e35\u0e22\u0e07\u0e40\u0e1b\u0e47\u0e19\u0e41\u0e19\u0e27\u0e19\u0e2d\u0e19\u0e14\u0e49\u0e27\u0e22 Flexbox<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h5 class=\"wp-block-heading\">\u2714 4.3.4 \u0e42\u0e04\u0e23\u0e07\u0e2a\u0e23\u0e49\u0e32\u0e07 Layout \u0e41\u0e1a\u0e1a 2 \u0e04\u0e2d\u0e25\u0e31\u0e21\u0e19\u0e4c<\/h5>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-secondary-background-color has-text-color has-background has-link-color wp-elements-37e2ef220d464b2c6773504a7db5aad3\"><code>.container {\n  display:grid;\n  grid-template-columns: 300px 1fr;\n  gap:20px;\n}\n<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\u0e04\u0e2d\u0e25\u0e31\u0e21\u0e19\u0e4c<\/th><th>\u0e04\u0e27\u0e32\u0e21\u0e01\u0e27\u0e49\u0e32\u0e07<\/th><\/tr><\/thead><tbody><tr><td>Sidebar<\/td><td>300px \u0e41\u0e1a\u0e1a\u0e15\u0e32\u0e22\u0e15\u0e31\u0e27<\/td><\/tr><tr><td>Main content<\/td><td>1fr (\u0e22\u0e37\u0e14\u0e44\u0e14\u0e49\u0e40\u0e15\u0e47\u0e21\u0e17\u0e35\u0e48)<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h5 class=\"wp-block-heading\">\u2714 4.3.5 Post Card (\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e1a\u0e17\u0e04\u0e27\u0e32\u0e21)<\/h5>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-secondary-background-color has-text-color has-background has-link-color wp-elements-5957b1a68904f976d7f28d8176d48cd6\"><code>.post-card {\n  background:#fff;\n  border-radius:12px;\n  padding:20px;\n  box-shadow:0 4px 12px rgba(0,0,0,0.05);\n}\n<\/code><\/pre>\n\n\n\n<p>\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e01\u0e32\u0e23\u0e4c\u0e14\u0e42\u0e1e\u0e2a\u0e15\u0e4c\u0e41\u0e1a\u0e1a\u0e2a\u0e27\u0e22\u0e07\u0e32\u0e21<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h5 class=\"wp-block-heading\">\u2714 4.3.6 Sidebar Box<\/h5>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-secondary-background-color has-text-color has-background has-link-color wp-elements-39291f98679cae0958ba9950f307b416\"><code>.sidebar {\n  background:#fff;\n  border-radius:12px;\n  padding:20px;\n}\n<\/code><\/pre>\n\n\n\n<p>\u0e0a\u0e48\u0e2d\u0e07 Sidebar \u0e21\u0e35\u0e2a\u0e44\u0e15\u0e25\u0e4c\u0e40\u0e2b\u0e21\u0e37\u0e2d\u0e19\u0e01\u0e32\u0e23\u0e4c\u0e14<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h5 class=\"wp-block-heading\">\u2714 4.3.7 Footer<\/h5>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-secondary-background-color has-text-color has-background has-link-color wp-elements-49e444bd1cc39617b37bbc5a98b83e72\"><code>footer {\n  background:#222;\n  color:#eee;\n  text-align:center;\n}\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h5 class=\"wp-block-heading\">\u2714 4.3.8 \u0e1b\u0e38\u0e48\u0e21 Back-to-top<\/h5>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-secondary-background-color has-text-color has-background has-link-color wp-elements-395737c529d6325503a9830b458059de\"><code>.back-to-top {\n  position:fixed;\n  bottom:20px;\n  right:20px;\n  background:#008f7a;\n  width:50px;\n  height:50px;\n  border-radius:50%;\n  display:none;\n}\n<\/code><\/pre>\n\n\n\n<p>\u0e0b\u0e48\u0e2d\u0e19\u0e1b\u0e38\u0e48\u0e21\u0e44\u0e27\u0e49\u0e01\u0e48\u0e2d\u0e19<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h5 class=\"wp-block-heading\">\u27144.3.9 Responsive Mobile<\/h5>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-secondary-background-color has-text-color has-background has-link-color wp-elements-99152723f99407be298216b199dfda75\"><code>@media (max-width:900px) {\n  .container {\n    grid-template-columns:1fr;\n  }\n}\n<\/code><\/pre>\n\n\n\n<p>\u0e21\u0e37\u0e2d\u0e16\u0e37\u0e2d \u2192 \u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e40\u0e1b\u0e47\u0e19 1 \u0e04\u0e2d\u0e25\u0e31\u0e21\u0e19\u0e4c<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h4 class=\"wp-block-heading\">\ud83d\udd36 4.4 \u0e2a\u0e48\u0e27\u0e19 <code>&lt;body&gt;<\/code><\/h4>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h5 class=\"wp-block-heading\">\u2714 Header<\/h5>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-secondary-background-color has-text-color has-background has-link-color wp-elements-09ed10a3bbfa1e07817110cd9b6bf9bb\"><code>&lt;header&gt;\n  &lt;h1&gt;&lt;data:blog.title\/&gt;&lt;\/h1&gt;\n  &lt;nav&gt;\n    &lt;ul&gt;\n      &lt;li&gt;&lt;a expr:href='data:blog.homepageUrl'&gt;Home&lt;\/a&gt;&lt;\/li&gt;\n<\/code><\/pre>\n\n\n\n<p>\u0e14\u0e36\u0e07\u0e0a\u0e37\u0e48\u0e2d\u0e1a\u0e25\u0e47\u0e2d\u0e01\u0e21\u0e32\u0e41\u0e2a\u0e14\u0e07<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h5 class=\"wp-block-heading\">\u2714 Layout: Sidebar + Main<\/h5>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-secondary-background-color has-text-color has-background has-link-color wp-elements-eac16f39d1b3c025a18533b8a8b96dbc\"><code>&lt;div class=\"container\"&gt;\n<\/code><\/pre>\n\n\n\n<h5 class=\"wp-block-heading\">\ud83d\udccc Sidebar<\/h5>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-secondary-background-color has-text-color has-background has-link-color wp-elements-55330b1c517bae7c9baee4ca70d1224d\"><code>&lt;aside class=\"sidebar\"&gt;\n  &lt;b:section id='sidebar'\/&gt;\n&lt;\/aside&gt;\n<\/code><\/pre>\n\n\n\n<p>\u0e40\u0e1b\u0e47\u0e19 <strong>\u0e1e\u0e37\u0e49\u0e19\u0e17\u0e35\u0e48\u0e27\u0e32\u0e07 widget<\/strong> \u0e40\u0e0a\u0e48\u0e19:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Popular post<\/li>\n\n\n\n<li>Label<\/li>\n\n\n\n<li>HTML\/JS<\/li>\n\n\n\n<li>Profile<\/li>\n<\/ul>\n\n\n\n<p>\u0e1c\u0e39\u0e49\u0e43\u0e0a\u0e49\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e1c\u0e48\u0e32\u0e19\u0e2b\u0e19\u0e49\u0e32 Layout \u0e02\u0e2d\u0e07 Blogger<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h5 class=\"wp-block-heading\">\ud83d\udccc Main Content<\/h5>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-secondary-background-color has-text-color has-background has-link-color wp-elements-f998ffdbc99c58915603cb6957a320cf\"><code>&lt;main&gt;\n  &lt;b:section id='main'&gt;\n    &lt;b:widget type='Blog'\/&gt;\n  &lt;\/b:section&gt;\n&lt;\/main&gt;\n<\/code><\/pre>\n\n\n\n<p><strong>\u0e19\u0e35\u0e48\u0e04\u0e37\u0e2d\u0e2b\u0e31\u0e27\u0e43\u0e08\u0e02\u0e2d\u0e07\u0e40\u0e17\u0e21\u0e40\u0e1e\u0e25\u0e15<\/strong><br>\u0e41\u0e2a\u0e14\u0e07\u0e1c\u0e25:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e42\u0e1e\u0e2a\u0e15\u0e4c<\/li>\n\n\n\n<li>\u0e1a\u0e17\u0e04\u0e27\u0e32\u0e21\u0e40\u0e15\u0e47\u0e21<\/li>\n\n\n\n<li>\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e<\/li>\n\n\n\n<li>Pagination<\/li>\n\n\n\n<li>Comment form<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h5 class=\"wp-block-heading\">\u2714 Footer<\/h5>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-secondary-background-color has-text-color has-background has-link-color wp-elements-89df06ba6b1836c807ff740f4246dbf3\"><code>&lt;footer&gt;\n  \u00a9 &lt;data:blog.title\/&gt;\n&lt;\/footer&gt;\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h5 class=\"wp-block-heading\">\u2714 Back-to-top Button + Script<\/h5>\n\n\n\n<h6 class=\"wp-block-heading\">\u0e1b\u0e38\u0e48\u0e21<\/h6>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-secondary-background-color has-text-color has-background has-link-color wp-elements-807bab45c1cb270487277114c5716a7c\"><code>&lt;button id=\"back-to-top\" class=\"back-to-top\"&gt;\u2191&lt;\/button&gt;\n<\/code><\/pre>\n\n\n\n<h6 class=\"wp-block-heading\">Script \u0e01\u0e32\u0e23\u0e17\u0e33\u0e07\u0e32\u0e19<\/h6>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-secondary-background-color has-text-color has-background has-link-color wp-elements-2de56eb1731c27fc9caa126c092538af\"><code>window.addEventListener('scroll', () =&gt; {\n  btn.style.display = window.scrollY &gt; 200 ? 'flex' : 'none';\n});\n<\/code><\/pre>\n\n\n\n<p>\u0e40\u0e07\u0e37\u0e48\u0e2d\u0e19\u0e44\u0e02: \u0e40\u0e25\u0e37\u0e48\u0e2d\u0e19\u0e25\u0e07 &gt; 200px \u2192 \u0e41\u0e2a\u0e14\u0e07\u0e1b\u0e38\u0e48\u0e21<\/p>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-secondary-background-color has-text-color has-background has-link-color wp-elements-a97453dbbe4f3076d1883dcb673cb146\"><code>btn.addEventListener('click', () =&gt; {\n  window.scrollTo({ top: 0, behavior: 'smooth' });\n});\n<\/code><\/pre>\n\n\n\n<p>\u0e40\u0e21\u0e37\u0e48\u0e2d\u0e04\u0e25\u0e34\u0e01 \u2192 \u0e40\u0e25\u0e37\u0e48\u0e2d\u0e19\u0e01\u0e25\u0e31\u0e1a\u0e44\u0e1b\u0e1a\u0e19\u0e2a\u0e38\u0e14\u0e41\u0e1a\u0e1a smooth<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h4 class=\"wp-block-heading\">\u2728 \u0e2a\u0e23\u0e38\u0e1b\u0e2a\u0e34\u0e48\u0e07\u0e17\u0e35\u0e48\u0e42\u0e04\u0e49\u0e14\u0e19\u0e35\u0e49\u0e17\u0e33\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14<\/h4>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\u0e2a\u0e48\u0e27\u0e19<\/th><th>\u0e17\u0e33\u0e07\u0e32\u0e19\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e44\u0e23<\/th><\/tr><\/thead><tbody><tr><td>XML Namespace<\/td><td>\u0e40\u0e1b\u0e34\u0e14\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e41\u0e17\u0e47\u0e01 Blogger<\/td><\/tr><tr><td>Viewport<\/td><td>\u0e17\u0e33\u0e40\u0e27\u0e47\u0e1a responsive<\/td><\/tr><tr><td>all-head-content<\/td><td>SEO meta \u0e2d\u0e31\u0e15\u0e42\u0e19\u0e21\u0e31\u0e15\u0e34<\/td><\/tr><tr><td>Header<\/td><td>Sticky + Navigation<\/td><\/tr><tr><td>Container<\/td><td>Grid layout \u0e41\u0e1a\u0e1a 2 \u0e04\u0e2d\u0e25\u0e31\u0e21\u0e19\u0e4c<\/td><\/tr><tr><td>Sidebar<\/td><td>\u0e27\u0e32\u0e07 widget \u0e08\u0e32\u0e01\u0e2b\u0e19\u0e49\u0e32 Layout<\/td><\/tr><tr><td>Main section<\/td><td>\u0e41\u0e2a\u0e14\u0e07\u0e42\u0e1e\u0e2a\u0e15\u0e4c\u0e1a\u0e25\u0e47\u0e2d\u0e01\u0e2d\u0e31\u0e15\u0e42\u0e19\u0e21\u0e31\u0e15\u0e34<\/td><\/tr><tr><td>CSS<\/td><td>\u0e2d\u0e2d\u0e01\u0e41\u0e1a\u0e1a UI \u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14<\/td><\/tr><tr><td>Responsive<\/td><td>\u0e1b\u0e23\u0e31\u0e1a layout \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e21\u0e37\u0e2d\u0e16\u0e37\u0e2d<\/td><\/tr><tr><td>Back-to-top<\/td><td>\u0e1b\u0e38\u0e48\u0e21\u0e40\u0e25\u0e37\u0e48\u0e2d\u0e19\u0e02\u0e36\u0e49\u0e19\u0e2d\u0e31\u0e15\u0e42\u0e19\u0e21\u0e31\u0e15\u0e34<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color wp-elements-5e1b94332455fd04902ba1b6c7b64e43\" style=\"color:#206221\">5. Blogger Full Features Sidebar \u0e0b\u0e49\u0e32\u0e22\u0e41\u0e25\u0e30\u0e02\u0e27\u0e32<\/h3>\n\n\n\n<pre class=\"wp-block-code has-orange-color has-secondary-background-color has-text-color has-background has-link-color wp-elements-0ffff3a5d1c08d171a41e15148870f1d\"><code>&lt;?xml version=\"1.0\" encoding=\"UTF-8\" ?&gt;\n&lt;html xmlns='http:\/\/www.w3.org\/1999\/xhtml' \n      xmlns:b='http:\/\/www.google.com\/2005\/gml\/b' \n      xmlns:data='http:\/\/www.google.com\/2005\/gml\/data' \n      xmlns:expr='http:\/\/www.google.com\/2005\/gml\/expr'&gt;\n\n&lt;head&gt;\n  &lt;meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'\/&gt; \n  &lt;b:if cond='data:blog.isMobile'&gt; \n    &lt;meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'\/&gt; \n  &lt;b:else\/&gt; \n    &lt;meta content='width=1200, initial-scale=1.0' name='viewport'\/&gt; \n  &lt;\/b:if&gt; \n\n  &lt;b:include data='blog' name='all-head-content'\/&gt;\n  &lt;title&gt;&lt;data:blog.pageTitle\/&gt;&lt;\/title&gt;\n\n\n  &lt;link href='https:\/\/fonts.googleapis.com\/css2?family=Kanit:wght@400;600&amp;amp;display=swap' rel='stylesheet'\/&gt;\n\n  &lt;b:skin&gt;&lt;!&#91;CDATA&#91;\n    \/* ---------- Variables ---------- *\/\n    :root {\n      --primary-color: #008f7a;\n      --layout-max-width: 1200px;\n      --sidebar-width: 250px;\n    }\n\n    \/* ---------- Reset ---------- *\/\n    * { margin: 0; padding: 0; box-sizing: border-box; }\n\n    body {\n      font-family: 'Kanit', sans-serif;\n      background: #f7f9fc;\n      color: #333;\n      line-height: 1.6;\n    }\n\n    a { text-decoration: none; color: inherit; }\n    a:hover { color: var(--primary-color); }\n\n    header {\n      background: #fff;\n      padding: 15px 30px;\n      box-shadow: 0 2px 8px rgba(0,0,0,0.05);\n      position: sticky;\n      top: 0;\n      z-index: 100;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n\n    header h1 { color: var(--primary-color); font-size: 1.5rem; }\n    nav ul { display: flex; gap: 20px; list-style: none; }\n    nav li { font-weight: 500; }\n\n    \/* ---------- Layout ---------- *\/\n    .container {\n      display: grid;\n      grid-template-columns: var(--sidebar-width) 1fr var(--sidebar-width);\n      gap: 20px;\n      max-width: var(--layout-max-width);\n      margin: 30px auto;\n      padding: 0 15px;\n    }\n\n    main { display: flex; flex-direction: column; }\n\n    .post-card {\n      background: #fff;\n      border-radius: 12px;\n      padding: 20px;\n      margin-bottom: 20px;\n      box-shadow: 0 4px 12px rgba(0,0,0,0.05);\n      transition: transform 0.3s;\n    }\n    .post-card:hover { transform: translateY(-4px); }\n    .post-card h2 { font-size: 1.3rem; margin-bottom: 10px; }\n    .post-card p { color: #666; }\n\n    \/* ---------- Sidebar ---------- *\/\n    .sidebar {\n      background: #fff;\n      border-radius: 12px;\n      padding: 20px;\n      box-shadow: 0 4px 12px rgba(0,0,0,0.05);\n      height: fit-content;\n    }\n    .sidebar h3 { font-size: 1.2rem; margin-bottom: 15px; color: var(--primary-color); }\n\n    \/* ---------- Footer ---------- *\/\n    footer {\n      background: #222;\n      color: #eee;\n      text-align: center;\n      padding: 20px;\n      margin-top: 40px;\n    }\n\n    \/* ---------- Back to Top ---------- *\/\n    .back-to-top {\n      position: fixed;\n      bottom: 20px;\n      right: 20px;\n      background: var(--primary-color);\n      color: #fff;\n      border: none;\n      border-radius: 50%;\n      width: 50px;\n      height: 50px;\n      font-size: 20px;\n      cursor: pointer;\n      display: none;\n      align-items: center;\n      justify-content: center;\n      box-shadow: 0 4px 8px rgba(0,0,0,0.15);\n    }\n    .back-to-top:hover { background: darken(var(--primary-color), 10%); }\n\n    \/* ---------- Responsive ---------- *\/\n    @media screen and (max-width: 1200px) {\n      .container { grid-template-columns: 200px 1fr 200px; }\n    }\n\n    @media screen and (max-width: 900px) {\n      .container { grid-template-columns: 1fr; }\n      .sidebar { margin-bottom: 20px; }\n    }\n  ]]>&lt;\/b:skin&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n  &lt;!-- Header --&gt;\n  &lt;header&gt;\n    &lt;h1&gt;&lt;data:blog.title\/&gt;&lt;\/h1&gt;\n    &lt;nav&gt;\n      &lt;ul&gt;\n        &lt;li&gt;&lt;a expr:href='data:blog.homepageUrl'&gt;Home&lt;\/a&gt;&lt;\/li&gt;\n        &lt;li&gt;&lt;a href='#'&gt;About&lt;\/a&gt;&lt;\/li&gt;\n        &lt;li&gt;&lt;a href='#'&gt;Contact&lt;\/a&gt;&lt;\/li&gt;\n      &lt;\/ul&gt;\n    &lt;\/nav&gt;\n  &lt;\/header&gt;\n\n  &lt;!-- Container: Left Sidebar + Main + Right Sidebar --&gt;\n  &lt;div class=\"container\"&gt;\n    &lt;!-- Left Sidebar --&gt;\n    &lt;aside class=\"sidebar\"&gt;\n      &lt;h3&gt;Left Menu&lt;\/h3&gt;\n      &lt;b:section id='left-sidebar' class='sidebar-widgets' showaddelement='yes'\/&gt;\n    &lt;\/aside&gt;\n\n    &lt;!-- Main Content --&gt;\n    &lt;main&gt;\n      &lt;b:section id='main' class='main' showaddelement='yes'&gt;\n        &lt;b:widget id='Blog1' type='Blog' title='Blog Posts' visible='true'\/&gt;\n      &lt;\/b:section&gt;\n    &lt;\/main&gt;\n\n    &lt;!-- Right Sidebar --&gt;\n    &lt;aside class=\"sidebar\"&gt;\n      &lt;h3&gt;Right Menu&lt;\/h3&gt;\n      &lt;b:section id='right-sidebar' class='sidebar-widgets' showaddelement='yes'\/&gt;\n    &lt;\/aside&gt;\n  &lt;\/div&gt;\n\n  &lt;!-- Footer --&gt;\n  &lt;footer&gt;\n    &lt;p&gt;\u00a9 &lt;data:blog.title\/&gt; - Powered by Blogger&lt;\/p&gt;\n    &lt;p&gt;&lt;a href='\/\/siammakemoney.com' style='color:#00c9a7;'&gt;siammakemoney.com&lt;\/a&gt;&lt;\/p&gt;\n  &lt;\/footer&gt;\n\n  &lt;!-- Back to Top --&gt;\n  &lt;button id=\"back-to-top\" class=\"back-to-top\"&gt;\u2191&lt;\/button&gt;\n\n  &lt;script&gt;\n    const btn = document.getElementById('back-to-top');\n    window.addEventListener('scroll', () =&gt; {\n      btn.style.display = window.scrollY &gt; 200 ? 'flex' : 'none';\n    });\n    btn.addEventListener('click', () =&gt; {\n      window.scrollTo({ top: 0, behavior: 'smooth' });\n    });\n  &lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n<div class=\"gc-box green_type \" style=\"text-align:left;border-radius:20px;box-shadow: 0 10px 10px #00000007\">\n\t\t\t<div class=\"gc-box-icon\"><\/div>\n\t\t\t\n\t\t\t<div class=\"gc-box-text\">\n\n<p>&#8211;primary-color: #008f7a; \/* \u0e2a\u0e35\u0e2b\u0e25\u0e31\u0e01 \u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e41\u0e01\u0e49\u0e44\u0e02\u0e44\u0e14\u0e49 <em>\/ <\/em><\/p>\n\n\n\n<p><em>&#8211;layout-max-width: 1200px; \/<\/em> \u0e1b\u0e23\u0e31\u0e1a\u0e04\u0e27\u0e32\u0e21\u0e01\u0e27\u0e49\u0e32\u0e07 Layout <em>\/ <\/em><\/p>\n\n\n\n<p><em>&#8211;sidebar-width: 250px; \/<\/em> \u0e04\u0e27\u0e32\u0e21\u0e01\u0e27\u0e49\u0e32\u0e07 Sidebar *\/<\/p>\n\n<\/div>\n\t\t<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color wp-elements-ed4f6e16883634f66d64472ead50c55f\" style=\"color:#206221\">6. \u0e25\u0e1a bullet (\u0e40\u0e04\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e2b\u0e21\u0e32\u0e22\u0e08\u0e38\u0e14\u0e02\u0e49\u0e32\u0e07\u0e2b\u0e19\u0e49\u0e32)<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>(bullet \u0e08\u0e38\u0e14\u0e41\u0e1a\u0e1a\u0e19\u0e35\u0e49)<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code has-orange-color has-secondary-background-color has-text-color has-background has-link-color wp-elements-7282dbe01622145d2bbdad7d7d9c5483\"><code>ul, ol {\n  list-style: none !important;\n  padding-left: 0 !important;\n  margin-left: 0 !important;\n}\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color wp-elements-9bd7d90977c0f64af1cb7c66ba97d138\" style=\"color:#206221\">7. \u0e40\u0e1e\u0e34\u0e48\u0e21\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e\u0e02\u0e19\u0e32\u0e14 20\u00d720 px \u0e41\u0e1a\u0e1a\u0e07\u0e48\u0e32\u0e22\u0e46<\/h3>\n\n\n\n<pre class=\"wp-block-code has-orange-color has-secondary-background-color has-text-color has-background has-link-color wp-elements-3682fc13d1c2d4f9c3abd867932e82e9\"><code>&lt;img src=\"https:\/\/example.com\/icon.png\" alt=\"icon\" width=\"20\" height=\"20\"&gt;<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color wp-elements-5804e4e072583fa3c0e6737c5813f506\" style=\"color:#206221\">8. \u0e40\u0e1e\u0e34\u0e48\u0e21 Font Awesome \u0e44\u0e2d\u0e04\u0e2d\u0e19 \u0e41\u0e1a\u0e1a\u0e07\u0e48\u0e32\u0e22 \u0e46<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">8.1 \u0e40\u0e1e\u0e34\u0e48\u0e21 Font Awesome CDN (\u0e16\u0e49\u0e32\u0e22\u0e31\u0e07\u0e44\u0e21\u0e48\u0e21\u0e35)<\/h4>\n\n\n\n<pre class=\"wp-block-code has-orange-color has-secondary-background-color has-text-color has-background has-link-color wp-elements-08c2b5dc34560e370e2ec9c4f7d9de07\"><code>&lt;link href='https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css' rel='stylesheet'\/&gt;<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">8.2 \u0e43\u0e2a\u0e48\u0e44\u0e2d\u0e04\u0e2d\u0e19 Font Awesome \u0e41\u0e25\u0e30\u0e1b\u0e23\u0e31\u0e1a\u0e02\u0e19\u0e32\u0e14<\/h4>\n\n\n\n<pre class=\"wp-block-code has-orange-color has-secondary-background-color has-text-color has-background has-link-color wp-elements-93050e11735413ccaf2aeba9474f68fe\"><code>&lt;i class=\"fa-solid fa-house\" style=\"font-size:20px;\"&gt;&lt;\/i&gt;<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">8.2 \u0e40\u0e1e\u0e34\u0e48\u0e21\u0e2a\u0e35\u0e43\u0e2b\u0e49 \u0e44\u0e2d\u0e04\u0e2d\u0e19 Font Awesome<\/h4>\n\n\n\n<pre class=\"wp-block-code has-orange-color has-secondary-background-color has-text-color has-background has-link-color wp-elements-0f0f0987efba8ed41be654375947e650\"><code>&lt;style&gt;\n.icon-small {\n  font-size: 20px;\n  color: #000; \/* \u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e2a\u0e35\u0e44\u0e2d\u0e04\u0e2d\u0e19\u0e44\u0e14\u0e49 *\/\n}\n&lt;\/style&gt;\n\n&lt;i class=\"fa-solid fa-heart icon-small\"&gt;&lt;\/i&gt;<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<pre class=\"wp-block-code has-orange-color has-secondary-background-color has-text-color has-background has-link-color wp-elements-e88d3bc2b3ebf69b1e19dcc98aa7418d\"><code><code>&amp;amp;<\/code><\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color wp-elements-b24fa6b453fd062ef00a3696aea8d7f5\" style=\"color:#206221\">9. \u0e18\u0e35\u0e21 Blogger \u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e21\u0e19\u0e39\u0e14\u0e49\u0e32\u0e19\u0e1a\u0e19\u0e2a\u0e27\u0e22\u0e46<\/h3>\n\n\n\n<pre class=\"wp-block-code has-orange-color has-secondary-background-color has-text-color has-background has-link-color wp-elements-b9eb73deaa3e5572a833efa0e472366a\"><code>&lt;?xml version=\"1.0\" encoding=\"UTF-8\" ?&gt;\n&lt;html xmlns='http:\/\/www.w3.org\/1999\/xhtml' xmlns:b='http:\/\/www.google.com\/2005\/gml\/b' xmlns:data='http:\/\/www.google.com\/2005\/gml\/data' xmlns:expr='http:\/\/www.google.com\/2005\/gml\/expr'&gt;\n &lt;head&gt;\n  &lt;meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'\/&gt; \n  &lt;b:if cond='data:blog.isMobile'&gt; \n   &lt;meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'\/&gt; \n  &lt;b:else\/&gt; \n   &lt;meta content='width=1100' name='viewport'\/&gt; \n  &lt;\/b:if&gt; \n  &lt;b:include data='blog' name='all-head-content'\/&gt;\n  &lt;title&gt;&lt;data:blog.pageTitle\/&gt;&lt;\/title&gt;\n&lt;b:skin&gt;&lt;!&#91;CDATA&#91;\n\/* Reset body *\/\nbody {\n  margin: 0;\n  height: 10vh;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: #f4f4f4; \/* \u0e2a\u0e35\u0e1e\u0e37\u0e49\u0e19\u0e2b\u0e25\u0e31\u0e07 *\/\n}\n\n\/* Container \u0e40\u0e21\u0e19\u0e39 *\/\n.radio-inputs {\n  position: relative;\n  display: flex;\n  border-radius: 1rem;\n  background-image: linear-gradient(to right, #31c7c1, #499b87, #4a715b, #3d4a3b, #262724);\n  box-sizing: border-box;\n  font-size: 17px;\n  width: 80%;\n  padding: 1rem 1rem 0 1rem;\n}\n\n\/* \u0e0b\u0e48\u0e2d\u0e19 radio \u0e08\u0e23\u0e34\u0e07 *\/\n.radio-inputs .radio input {\n  display: none;\n}\n\n\/* \u0e1b\u0e38\u0e48\u0e21\u0e40\u0e21\u0e19\u0e39 *\/\n.radio-inputs .radio .name {\n  display: flex;\n  cursor: pointer;\n  align-items: center;\n  justify-content: center;\n  border-top-left-radius: 0.5rem;\n  border-top-right-radius: 0.5rem;\n  border: none;\n  padding: 0.5rem 0.8rem;\n  color: #fff;\n  transition: all 0.15s ease-in-out;\n  position: relative;\n}\n\n\/* \u0e1b\u0e38\u0e48\u0e21\u0e17\u0e35\u0e48\u0e16\u0e39\u0e01\u0e40\u0e25\u0e37\u0e2d\u0e01 *\/\n.radio-inputs .radio input:checked + .name {\n  background-color: #FFFFFF;\n  font-weight: 600;\n  color: #000;\n}\n\n\/* Hover *\/\n.radio-inputs .radio input + .name:hover {\n  color: #fff;\n}\n.radio-inputs .radio input:checked + .name:hover {\n  color: #000;\n}\n\n\/* \u0e21\u0e38\u0e21\u0e42\u0e04\u0e49\u0e07\u0e2a\u0e27\u0e22 \u0e46 \u0e40\u0e27\u0e25\u0e32\u0e40\u0e25\u0e37\u0e2d\u0e01 *\/\n.radio-inputs .radio input:checked + .name::after,\n.radio-inputs .radio input:checked + .name::before {\n  content: \"\";\n  position: absolute;\n  width: 10px;\n  height: 10px;\n  bottom: 0;\n}\n\n.radio-inputs .radio input:checked + .name::after {\n  right: -10px;\n  border-bottom-left-radius: 300px;\n  box-shadow: -3px 3px 0px 3px #FFFFFF;\n}\n.radio-inputs .radio input:checked + .name::before {\n  left: -10px;\n  border-bottom-right-radius: 300px;\n  box-shadow: 3px 3px 0px 3px #FFFFFF;\n}\n]]>&lt;\/b:skin&gt;\n\n &lt;\/head&gt;\n &lt;body&gt;\n  &lt;!-- Navigation Menu --&gt;\n  &lt;div class='radio-inputs'&gt;\n    &lt;label class='radio'&gt;\n      &lt;input checked='' name='radio' type='radio'\/&gt;\n      &lt;span class='name'&gt;Home&lt;\/span&gt;\n    &lt;\/label&gt;\n    \n    &lt;label class='radio'&gt;\n      &lt;input name='radio' type='radio'\/&gt;\n      &lt;span class='name'&gt;HTML&lt;\/span&gt;\n    &lt;\/label&gt;\n\n    &lt;label class='radio'&gt;\n      &lt;input name='radio' type='radio'\/&gt;\n      &lt;span class='name'&gt;CSS&lt;\/span&gt;\n    &lt;\/label&gt;\n    \n    &lt;label class='radio'&gt;\n      &lt;input name='radio' type='radio'\/&gt;\n      &lt;span class='name'&gt;JS&lt;\/span&gt;\n    &lt;\/label&gt;\n    \n    &lt;label class='radio'&gt;\n      &lt;input name='radio' type='radio'\/&gt;\n      &lt;span class='name'&gt;PHP&lt;\/span&gt;\n    &lt;\/label&gt;\n    \n    &lt;label class='radio'&gt;\n      &lt;input name='radio' type='radio'\/&gt;\n      &lt;span class='name'&gt;Name&lt;\/span&gt;\n    &lt;\/label&gt;\n    \n    &lt;label class='radio'&gt;\n      &lt;input name='radio' type='radio'\/&gt;\n      &lt;span class='name'&gt;Menu&lt;\/span&gt;\n    &lt;\/label&gt;\n  &lt;\/div&gt;\n  &lt;!-- Main Section --&gt;\n  &lt;b:section class='main' id='main' showaddelement='yes'\/&gt;\n  \n\n&lt;\/body&gt;\n\n&lt;\/html&gt;<\/code><\/pre>\n\n\n<div class=\"gc-box notice_type icon_type\" style=\"text-align:left;border-radius:0px;\">\n\t\t\t<div class=\"gc-box-icon\"><svg x=\"0px\" y=\"0px\" viewBox=\"0 0 486.463 486.463\" > <g> <g> <path d=\"M243.225,333.382c-13.6,0-25,11.4-25,25s11.4,25,25,25c13.1,0,25-11.4,24.4-24.4 C268.225,344.682,256.925,333.382,243.225,333.382z\"\/> <path d=\"M474.625,421.982c15.7-27.1,15.8-59.4,0.2-86.4l-156.6-271.2c-15.5-27.3-43.5-43.5-74.9-43.5s-59.4,16.3-74.9,43.4 l-156.8,271.5c-15.6,27.3-15.5,59.8,0.3,86.9c15.6,26.8,43.5,42.9,74.7,42.9h312.8 C430.725,465.582,458.825,449.282,474.625,421.982z M440.625,402.382c-8.7,15-24.1,23.9-41.3,23.9h-312.8 c-17,0-32.3-8.7-40.8-23.4c-8.6-14.9-8.7-32.7-0.1-47.7l156.8-271.4c8.5-14.9,23.7-23.7,40.9-23.7c17.1,0,32.4,8.9,40.9,23.8 l156.7,271.4C449.325,369.882,449.225,387.482,440.625,402.382z\"\/> <path d=\"M237.025,157.882c-11.9,3.4-19.3,14.2-19.3,27.3c0.6,7.9,1.1,15.9,1.7,23.8c1.7,30.1,3.4,59.6,5.1,89.7 c0.6,10.2,8.5,17.6,18.7,17.6c10.2,0,18.2-7.9,18.7-18.2c0-6.2,0-11.9,0.6-18.2c1.1-19.3,2.3-38.6,3.4-57.9 c0.6-12.5,1.7-25,2.3-37.5c0-4.5-0.6-8.5-2.3-12.5C260.825,160.782,248.925,155.082,237.025,157.882z\"\/> <\/g> <\/g> <\/svg><\/div>\n\t\t\t\n\t\t\t<div class=\"gc-box-text\">\n\n<p>\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e43\u0e2a\u0e48 script \u0e01\u0e48\u0e2d\u0e19\u0e1b\u0e34\u0e14 &lt;\/body&gt; \u0e2b\u0e23\u0e37\u0e2d \u0e2b\u0e32\u0e41\u0e17\u0e47\u0e01 <code>&lt;head&gt;<\/code><\/p>\n\n\n\n<p>\u0e43\u0e0a\u0e49 <code>&amp;amp;<\/code> \u0e41\u0e17\u0e19 <code>&amp;<\/code> \u0e40\u0e2a\u0e21\u0e2d<\/p>\n\n\n\n<p>\u0e40\u0e17\u0e21\u0e40\u0e1e\u0e25\u0e15\u0e08\u0e30\u0e15\u0e49\u0e2d\u0e07\u0e21\u0e35\u0e41\u0e17\u0e47\u0e01 b:section \u0e2d\u0e22\u0e48\u0e32\u0e07\u0e19\u0e49\u0e2d\u0e22\u0e2b\u0e19\u0e36\u0e48\u0e07\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23<\/p>\n\n<\/div>\n\t\t<\/div>\n\n\n<h3 class=\"wp-block-heading has-text-color has-link-color wp-elements-a45a620893746e54ba961138cbe6075c\" style=\"color:#206221\">10. \u0e42\u0e04\u0e49\u0e14\u0e40\u0e17\u0e21\u0e40\u0e1e\u0e25\u0e15 Blogger (\u0e1e\u0e23\u0e49\u0e2d\u0e21 SEO)<\/h3>\n\n\n\n<pre class=\"wp-block-code has-secondary-background-color has-text-color has-background has-link-color wp-elements-88636fbb7771c9bb13ef7b511ea0a28a\" style=\"color:#ff8d22\"><code>&lt;?xml version=\"1.0\" encoding=\"UTF-8\" ?&gt;\n&lt;html xmlns='http:\/\/www.w3.org\/1999\/xhtml'\n      xmlns:b='http:\/\/www.google.com\/2005\/gml\/b'\n      xmlns:data='http:\/\/www.google.com\/2005\/gml\/data'\n      xmlns:expr='http:\/\/www.google.com\/2005\/gml\/expr'&gt;\n\n&lt;head&gt;\n\n  &lt;meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'\/&gt;\n\n  &lt;!-- VIEWPORT --&gt;\n  &lt;b:if cond='data:blog.isMobile'&gt;\n    &lt;meta name='viewport' content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0'\/&gt;\n  &lt;b:else\/&gt;\n    &lt;meta name='viewport' content='width=1100'\/&gt;\n  &lt;\/b:if&gt;\n\n  &lt;!-- Blogger HEAD --&gt;\n  &lt;b:include data='blog' name='all-head-content'\/&gt;\n\n  &lt;!-- TITLE --&gt;\n  &lt;title&gt;&lt;data:blog.pageTitle\/&gt;&lt;\/title&gt;\n\n  &lt;!-- ==========================\n        SEO META TAGS\n       ========================== --&gt;\n\n  &lt;!-- Meta Description --&gt;\n  &lt;meta name=\"description\" expr:content=\"data:blog.metaDescription\"\/&gt;\n\n  &lt;!-- Keywords --&gt;\n  &lt;meta name=\"keywords\" content=\"blogger, seo, website, travel, tutorial\"\/&gt;\n\n  &lt;meta name=\"author\" content=\"Your Name\"\/&gt;\n\n  &lt;!-- Open Graph (Facebook \/ LINE) --&gt;\n  &lt;meta property=\"og:title\" expr:content=\"data:blog.pageTitle\"\/&gt;\n  &lt;meta property=\"og:description\" expr:content=\"data:blog.metaDescription\"\/&gt;\n  &lt;meta property=\"og:type\" content=\"website\"\/&gt;\n  &lt;meta property=\"og:url\" expr:content=\"data:blog.url\"\/&gt;\n  &lt;meta property=\"og:image\" expr:content=\"data:blog.postImageUrl\"\/&gt;\n\n  &lt;!-- Twitter Card --&gt;\n  &lt;meta name=\"twitter:card\" content=\"summary_large_image\"\/&gt;\n  &lt;meta name=\"twitter:title\" expr:content=\"data:blog.pageTitle\"\/&gt;\n  &lt;meta name=\"twitter:description\" expr:content=\"data:blog.metaDescription\"\/&gt;\n  &lt;meta name=\"twitter:image\" expr:content=\"data:blog.postImageUrl\"\/&gt;\n\n  &lt;!-- Canonical --&gt;\n  &lt;link rel=\"canonical\" expr:href=\"data:blog.url\"\/&gt;\n\n  &lt;!-- Robots --&gt;\n  &lt;meta name=\"robots\" content=\"index, follow\"\/&gt;\n  &lt;meta name=\"googlebot\" content=\"index, follow\"\/&gt;\n\n  &lt;!-- Schema.org --&gt;\n  &lt;script type=\"application\/ld+json\"&gt;\n  {\n    \"@context\": \"https:\/\/schema.org\",\n    \"@type\": \"WebSite\",\n    \"url\": \"&lt;data:blog.homepageUrl\/&gt;\",\n    \"name\": \"&lt;data:blog.title\/&gt;\",\n    \"alternateName\": \"&lt;data:blog.title\/&gt;\"\n  }\n  &lt;\/script&gt;\n\n  &lt;!-- Favicon --&gt;\n  &lt;link rel=\"icon\" type=\"image\/png\" href=\"YOUR-FAVICON-URL.png\"\/&gt;\n\n  &lt;!-- ==========================\n        CSS ZONE\n       ========================== --&gt;\n  &lt;b:skin&gt;\n    &lt;!&#91;CDATA&#91;\n      \/* ----- Your CSS Here ----- *\/\n      body { font-family: sans-serif; }\n    ]]>\n  &lt;\/b:skin&gt;\n\n&lt;\/head&gt;\n\n&lt;body&gt;\n\n  &lt;!-- MAIN CONTENT SECTION --&gt;\n  &lt;b:section class='main' id='main' showaddelement='yes'\/&gt;\n\n  &lt;!-- CREDITS --&gt;\n  &lt;center&gt;&lt;a href=\"\/\/siammakemoney.com\/\"&gt;siammakemoney.com\/&lt;\/a&gt;&lt;\/center&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"This beginner's guide to creating a Blogger theme covers the basic structure of XML code used in Blogger, as well as how to customize CSS to create a beautiful and responsive blog design. It also introduces key elements such as the header, content, sidebar, and footer, along with examples of how to use various widgets in Blogger, making it easier for readers to understand and apply them to their own theme development.","protected":false},"author":1,"featured_media":5433,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_singular_sidebar":"","csco_page_header_type":"","csco_page_load_nextpost":"","footnotes":""},"categories":[15,23,28],"tags":[238],"class_list":{"0":"post-5401","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-blogger","8":"category-website-creation","9":"category-html-css-javascript","10":"tag-blogger","11":"cs-entry"},"_links":{"self":[{"href":"https:\/\/siammakemoney.com\/en\/wp-json\/wp\/v2\/posts\/5401","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/siammakemoney.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/siammakemoney.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/siammakemoney.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/siammakemoney.com\/en\/wp-json\/wp\/v2\/comments?post=5401"}],"version-history":[{"count":22,"href":"https:\/\/siammakemoney.com\/en\/wp-json\/wp\/v2\/posts\/5401\/revisions"}],"predecessor-version":[{"id":5449,"href":"https:\/\/siammakemoney.com\/en\/wp-json\/wp\/v2\/posts\/5401\/revisions\/5449"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/siammakemoney.com\/en\/wp-json\/wp\/v2\/media\/5433"}],"wp:attachment":[{"href":"https:\/\/siammakemoney.com\/en\/wp-json\/wp\/v2\/media?parent=5401"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/siammakemoney.com\/en\/wp-json\/wp\/v2\/categories?post=5401"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/siammakemoney.com\/en\/wp-json\/wp\/v2\/tags?post=5401"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}