Create Responsive Blogger Template from Scratch
In this article I share my own blogger template which currently using in this blog. I used HTML5, CSS and Blogger tags for build blog design and its fully customize, you can modify various elements of the template, such as colors, fonts, layout, and background. Additionally, you can add widgets, gadgets, and HTML code to further personalize your blog.You can get the complete code from Github
blogger.xml
1 <?xml version='1.0' encoding='UTF-8'?>
2 <html>
3 <head>
4 <meta name='viewport' content='width=device-width, initial-scale=1.0'/>
5 <meta content='follow, index' name='robots'/>
6 <title><data:blog.pageTitle/></title>
7 <b:if cond='data:blog.pageType == "index"'>
8 <meta name='title' expr:content='data:blog.pageTitle'/>
9 <b:else/>
10 <meta name='title' expr:content='data:blog.pageName'/>
11 </b:if>
12 <meta name='description' expr:content='data:view.description.escaped'/>
13 <meta property='og:type' content='website'/>
14 <meta property='og:site_name' expr:content='data:blog.title'/>
15 <b:if cond='data:blog.pageType == "index"'>
16 <meta property='og:title' expr:content='data:blog.pageTitle'/>
17 <b:else/>
18 <meta property='og:title' expr:content='data:blog.pageName'/>
19 </b:if>
20 <meta property='og:description' expr:content='data:view.description.escaped'/>
21 <meta property='og:url' expr:content='data:blog.url'/>
22 <link href='https://fonts.googleapis.com/css2?family=Open+Sans:wght@300..800' rel='stylesheet'/>
23 <b:skin><![CDATA
24 /* General */
25 body {
26 margin:0px;
27 padding:0px;
28 display:flex;
29 flex-direction:column;
30 font-family:"Open Sans", sans-serif;
31 font-optical-sizing:auto;
32 font-weight:400;
33 font-size:16px;
34 color:#222222;
35 line-height:normal;
36 text-justify:inter-word;
37 word-wrap:break-word;
38 }
39
40 h1, h2, h4 {
41 margin:0px;
42 padding:0px;
43 margin-bottom:5px;
44 color:#070F2B;
45 }
46
47 h1, h2 {
48 font-weight:700;
49 font-size:25px;
50 }
51
52 h4 {
53 font-weight:700;
54 font-size:20px;
55 }
56
57 a {
58 text-decoration:none;
59 color:#3399bb;
60 }
61
62 h2 a, #popularpost-section a, #label-section a {
63 color:inherit;
64 }
65
66 ul, li {
67 margin:0px;
68 padding:0px;
69 list-style:none;
70 }
71
72 #popularpost-section li {
73 margin-bottom:10px;
74 }
75
76 /* Layout */
77 header, nav, main, footer {
78 width:990px;
79 margin-left:auto;
80 margin-right:auto;
81 }
82
83 header {
84 border-bottom:1px solid #cdcdcd;
85 margin-bottom:20px;
86 padding-top:10px;
87 padding-bottom:10px;
88 font-size:40px;
89 font-weight:700;
90 }
91
92 main {
93 display:flex;
94 flex-direction:row;
95 gap:40px;
96 min-height:100vh;
97 }
98
99 section {
100 width:650px;
101 }
102
103 aside {
104 width:300px;
105 font-size:15px;
106 }
107
108 footer {
109 border-top:1px dotted #cdcdcd;
110 margin-top:20px;
111 padding-top:10px;
112 padding-bottom:10px;
113 }
114
115 /* Section */
116 article {
117 margin-bottom:40px;
118 }
119
120 /* Comment */
121 .commentdiv {
122 border-top:1px dashed #cdcdcd;
123 margin-top:10px;
124 padding-top:10px;
125 }
126
127 .comments .comments-content .comment-header, .comments .comments-content .comment-content {
128 margin:0px;
129 }
130
131 .comments .comments-content .comment:first-child {
132 padding-top:0px;
133 }
134
135 .comments .comments-content .user, .comments .continue a {
136 font-size:14px !important;
137 font-weight:600;
138 }
139
140 .comment-block {
141 padding:10px;
142 background-color:#f9f9f9;
143 }
144
145 .comment-actions a {
146 font-size:14px;
147 font-weight:600;
148 }
149
150 .datetime a {
151 font-size:13px;
152 }
153
154 #blog-pager {
155 font-size:20px;
156 font-weight:700;
157 }
158
159 /* Aside */
160 .box {
161 margin-bottom:20px;
162 }
163
164 inputtype=text {
165 padding:10px;
166 width:100%;
167 border:1px solid #ccc;
168 border-radius:6px;
169 box-sizing:border-box;
170 }
171
172 /* Code Highlighter Start */
173 .codediv {
174 font-size:16px;
175 padding:0px;
176 margin-top:5px;
177 margin-bottom:5px;
178 }
179
180 .fN {
181 color:#21094e;
182 margin-bottom:5px;
183 }
184
185 .code {
186 line-height:normal;
187 padding:15px;
188 overflow:auto;
189 color:#85d9eb;
190 background-color:#191e1e;
191 border-left:5px solid #605a56;
192 }
193
194 pre {
195 margin:0px;
196 padding:0px;
197 }
198
199 .lI {
200 color:#ffffff;
201 }
202
203 .kC {
204 color:#56e27a;
205 }
206
207 .cC {
208 color:#b8b0b0;
209 }
210
211 .qC {
212 color:#d4f088;
213 }
214
215 .pC {
216 color:#ffffff;
217 }
218
219 .iPC {
220 color:#d4f088;
221 }
222
223 .bC {
224 color:#ffffff;
225 }
226
227 .iBC {
228 color:#d4f088;
229 }
230
231 /* Mobile View */
232 @media (max-width:810px) {
233 body {
234 padding-left:5px;
235 padding-right:5px;
236 }
237
238 header, nav, main, footer {
239 width:100%;
240 }
241
242 main {
243 flex-direction:column;
244 }
245
246 section {
247 width:100%;
248 }
249
250 aside {
251 width:100%;
252 }
253 }
254 ]></b:skin>
255 </head>
256 <body>
257 <header>
258 <a expr:href='data:blog.homepageUrl'><data:blog.title/></a>
259 </header>
260 <main>
261 <section>
262 <b:section id='content-section'>
263 <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog' version='1'>
264 <b:includable id='main'>
265 <b:loop values='data:posts' var='post'>
266 <article>
267 <b:if cond='data:blog.pageType == "index"'>
268 <h2><a expr:href='data:post.url' rel='follow'><data:post.title/></a></h2>
269 <b:else/>
270 <h1><data:post.title/></h1>
271 </b:if>
272 <data:post.body/>
273 </article>
274 <b:if cond='data:blog.pageType != "index"'>
275 <div class='commentdiv'>
276 <b:include cond='data:blog.pageType in {"static_page","item"}' data='post' name='comment_picker'/>
277 </div>
278 </b:if>
279 </b:loop>
280 <div id='blog-pager'>
281 <b:if cond='data:newerPageUrl'>
282 <span id='blog-pager-newer-link'>
283 <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' rel='follow' title='Newer Post'>Newer Post</a>
284 </span>
285 </b:if>
286 <b:if cond='data:olderPageUrl'>
287 <span id='blog-pager-older-link'>
288 <a class='blog-pager-older-link' expr:href='data:olderPageUrl' rel='follow' title='Older Post'>Older Post</a>
289 </span>
290 </b:if>
291 <a class='home-link' expr:href='data:blog.homepageUrl' rel='follow'>Home</a>
292 </div>
293 </b:includable>
294 </b:widget>
295 </b:section>
296 </section>
297 <aside>
298 <div class='box'>
299 <h4>Popular Posts</h4>
300 <b:section id='popularpost-section'>
301 <b:widget id='PopularPosts1' locked='true' title='' type='PopularPosts' version='1'>
302 <b:includable id='main'>
303 <ul>
304 <b:loop values='data:posts' var='post'>
305 <li><a expr:href='data:post.href'><data:post.title/></a></li>
306 </b:loop>
307 </ul>
308 </b:includable>
309 </b:widget>
310 </b:section>
311 </div>
312 <div class='box'>
313 <h4>Search</h4>
314 <form expr:action='data:blog.searchUrl' id='uform' target='_top'>
315 <input type='text' id='usearch' placeholder='Search' name='q' expr:value='data:view.isSearch ? data:view.search.query.escaped : ""' autocomplete='off'/>
316 </form>
317 </div>
318 <div class='box'>
319 <h4>Label</h4>
320 <b:section id='label-section'>
321 <b:widget id='Label1' locked='true' title='Labels' type='Label' version='1'>
322 <b:includable id='main'>
323 <ul>
324 <b:loop values='data:labels' var='label'>
325 <li><a class='label' expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/> (<data:label.count/>)</a></li>
326 </b:loop>
327 </ul>
328 </b:includable>
329 </b:widget>
330 </b:section>
331 </div>
332 </aside>
333 </main>
334 <footer>
335 Copyright Ⓒ <data:blog.title/> | Powered by <a href='https://www.blogger.com'>Blogger.com</a>
336 </footer>
337 </body>
338 </html>