Story of Algorithm

Build a Modern Blogger Theme for a Tech Blog

This Blogger XML theme template is designed for a professional technology blog. It is a complete website design structure that controls the visual appearance, layout, typography, colors, and SEO settings of the blog. The template is built using Blogger’s XML and CSS system, which allows the blog to display articles, sidebars, headers, footer sections, and social media elements in a clean and modern format.

Download from GitHub

The file begins with metadata and SEO configuration, including the page title, author information, viewport settings, robot directives, Open Graph tags, Twitter card tags, canonical URL, and theme color. These elements help the blog rank better in search engines and improve how the site appears when shared on social media platforms. It also includes conditional logic to check whether the blog title matches “Story of Algorithm,” (Please replace your Blog Title in below file) which is used to control the execution of analytics or advertisement scripts safely.

The template uses a modern color scheme dominated by red, white, and dark gray tones. It defines variables such as theme colors, fonts, text colors, and background styles, making the design consistent and easy to manage. The typography is carefully chosen with a clean sans-serif body font and a strong serif heading font, creating a professional and readable reading experience for blog posts. The layout is responsive and uses a structured grid system, with a main content area and a sidebar for additional information such as widgets, links, and other blog elements.

blogger_template.xml
1 <?xml version='1.0' encoding='UTF-8'?>
2 <!DOCTYPE html>
3 <html lang='en'>
4 <head>
5     <b:if cond='data:blog.title == "Story of Algorithm"'>
6     <!-- Use this if condition to check goole analytics or ads should be run in Blogger template. If the blog title is not set, then the analytics or ads code will not be executed. This is a simple way to prevent running analytics or ads on a blog that is still in development or has not been properly configured. -->
7     </b:if>
8     <title><data:blog.pageTitle/></title>
9     <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
10     <meta name='viewport' content='width=device-width, initial-scale=1.0'/>
11     <meta name='language' content='en'/>
12     <meta name='robots' content='index,follow,max-image-preview:large,max-snippet:-1,max-video-preview:-1'/>
13     <meta expr:content='data:blog.pageTitle' name='title'/>
14     <meta expr:content='data:blog.author.name' name='author'/>
15     <meta name='theme-color' content='#e95454'/>
16     <meta expr:content='data:blog.url' property='og:url'/>
17     <meta content='website' property='og:type'/>
18     <meta expr:content='data:blog.title' property='og:site_name'/>
19     <b:if cond='data:blog.pageType == "item"'>
20         <meta expr:content='data:view.description.escaped' name='description'/>
21         <meta expr:content='data:blog.pageName' property='og:title'/>
22         <meta expr:content='data:blog.pageName' name='twitter:title'/>
23         <meta expr:content='data:view.description.escaped' property='og:description'/>
24         <meta expr:content='data:view.description.escaped' name='twitter:description'/>
25     <b:else/>
26         <meta expr:content='data:view.description.escaped' name='description'/>
27         <meta expr:content='data:blog.pageTitle' property='og:title'/>
28         <meta expr:content='data:blog.pageTitle' name='twitter:title'/>
29         <meta expr:content='data:view.description.escaped' property='og:description'/>
30         <meta expr:content='data:view.description.escaped' name='twitter:description'/>
31     </b:if>
32     <!-- Add images for social media sharing -->
33     <meta content='' property='og:image'/>
34     <meta content='' name='twitter:image'/>
35     <meta name='twitter:card' content='summary_large_image'/>
36     <meta name='twitter:site' content='@storyofalgo'/>
37     <link rel='canonical' expr:href='data:blog.url'/>
38     <link rel='icon' type='image/x-icon' href=''/>
39     <link rel='preconnect' href='https://fonts.googleapis.com'/>
40     <link rel='preconnect' href='https://fonts.gstatic.com'/>
41     <link href='https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&amp;family=Merriweather:wght@700&amp;display=swap' rel='stylesheet'/>
42     <b:skin><![CDATA
43     /* Theme variables */
44     :root {
45         --highcolor: #e95454;
46         --fontcolor: #1f2937;
47         --headercolor: #111827;
48         --mutedcolor: #6b7280;
49         --surfacecolor: #ffffff;
50     }
51 
52     /* Base page styling */
53     body {
54         margin: 0;
55         padding: 0;
56         display: flex;
57         flex-direction: column;
58         font-family: "Open Sans", sans-serif;
59         font-optical-sizing: auto;
60         font-size: 17px;
61         font-weight: 400;
62         font-style: normal;
63         font-variation-settings: "wdth" 100;
64         line-height: 1.7;
65         color: var(--fontcolor);
66         background-color: var(--surfacecolor);
67     }
68 
69     pre {
70         margin: 0;
71         padding: 0;
72         tab-size: 4;
73         white-space: pre;
74     }
75 
76     /* Link and typography styles */
77     a {
78         text-decoration: none;
79         color: inherit;
80         transition: color 0.2s;
81     }
82 
83     a:hover {
84         color: var(--highcolor);
85     }
86 
87     h1, h2, h3, h4, h5, h6 {
88         font-family: 'Merriweather', serif;
89         margin: 0;
90         padding: 0;
91         color: var(--headercolor);
92         line-height: 1.3;
93         letter-spacing: -0.02em;
94     }
95 
96     #blog-pager a {
97         font-size: 24px;
98         font-weight: 700;
99         color: var(--highcolor);
100     }
101 
102     h1,h2 {
103         font-size: 32px;
104         font-weight: 700;
105     }
106 
107     h3 {
108         font-size: 24px;
109         font-weight: 700;
110     }
111 
112     h4 {
113         font-size: 20px;
114         font-weight: 700;
115     }
116 
117     /* Main layout containers */
118     header, #social-media, main, footer {
119         margin-left: auto;
120         margin-right: auto;
121         width: min(1104px, 100%);
122         max-width: 1104px;
123     }
124 
125     header {
126         font-family: 'Merriweather', serif;
127         font-size: 36px;
128         justify-content: center;
129         text-align: center;
130         color: var(--highcolor);
131         border-bottom: 4px solid var(--highcolor);
132     }
133 
134     main {
135         display: flex;
136         gap: 40px;
137         min-height: 100vh;
138     }
139 
140     section {
141         width: 728px;
142     }
143 
144     article {
145         margin-bottom: 50px;
146     }
147 
148     .post-date {
149         margin: 8px 0 18px;
150         font-size: 12px;
151         line-height: 1.4;
152         font-weight: 700;
153         letter-spacing: 0.08em;
154         text-transform: uppercase;
155         color: var(--mutedcolor);
156     }
157 
158     .post-date .post-date-icon {
159         color: var(--highcolor);
160         margin-right: 6px;
161     }
162 
163     /* Sidebar and widget styles */
164     aside {
165         width: 336px;
166         font-size: 15px;
167         color: var(--fontcolor);
168     }
169 
170     .side-bar {
171         margin: 0 0 15px;
172     }
173 
174     .side-bar h3 {
175         margin: 0 0 14px;
176     }
177 
178     aside ul {
179         margin: 0;
180     }
181 
182     .download-link {
183         display: inline-flex;
184         align-items: center;
185         justify-content: center;
186         margin: 0 0 18px;
187         padding: 10px 18px;
188         border: 1px solid var(--highcolor);
189         border-radius: 999px;
190         background: linear-gradient(135deg, rgba233, 84, 84, 0.12, rgba233, 84, 84, 0.04);
191         color: var(--highcolor);
192         font-size: 13px;
193         font-weight: 700;
194         letter-spacing: 0.08em;
195         text-transform: uppercase;
196         transition: all 0.25s ease;
197         box-shadow: 0 6px 18px rgba(233, 84, 84, 0.12);
198     }
199 
200     .download-link:hover {
201         color: var(--surfacecolor);
202         background: linear-gradient(135deg, var--highcolor, #d54a4a);
203         box-shadow: 0 10px 24px rgba(233, 84, 84, 0.22);
204         transform: translateY(-1px);
205     }
206 
207     /* Social media icons */
208     #social-media {
209         display: flex;
210         justify-content: flex-end;
211         margin-bottom: 30px;
212     }
213 
214     #social-media > span {
215         display: flex;
216         gap: 10px;
217     }
218 
219     #social-media a:hover {
220         color: #fff;
221     }
222 
223     .fa {
224         padding: 7px;
225         width: 60px;
226         box-sizing: border-box;
227         text-align: center;
228         text-decoration: none;
229         color: var(--surfacecolor);
230     }
231 
232     .fa svg {
233         fill: currentColor;
234         margin: auto;
235     }
236 
237     /* Footer and search field */
238     footer {
239         padding: 25px 0;
240         margin-top: auto;
241         text-align: center;
242         font-size: 15px;
243         color: var(--headercolor);
244         border-top: 1px solid var(--highcolor);
245     }
246 
247     #usearch {
248         display: block;
249         width: 100%;
250         box-sizing: border-box;
251         margin: 0;
252         padding: 12px 16px;
253         font-size: 15px;
254         border: 2px solid var(--highcolor);
255         border-radius: 8px;
256         background: var(--surfacecolor);
257         color: var(--fontcolor);
258         font-family: inherit;
259         line-height: 1.4;
260         transition: all 0.3s ease;
261         box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
262     }
263 
264     #uform {
265         display: block;
266         width: 100%;
267         margin: 0;
268         padding: 0;
269     }
270 
271     #usearch:focus {
272         outline: none;
273         border-color: var(--highcolor);
274         box-shadow: 0 0 0 3px rgba(245, 106, 106, 0.15);
275     }
276 
277     #usearch::placeholder {
278         color: #999;
279     }
280 
281     #usearch:hover {
282         border-color: #d94f4f;
283     }
284 
285     #PopularPosts1 ul li {
286         margin-bottom: 10px;
287     }
288 
289     /* Responsive adjustments */
290     @media (min-width: 811px) {
291         aside {
292             position: sticky;
293             top: 24px;
294             align-self: flex-start;
295             max-height: calc(100vh - 48px);
296             overflow-y: auto;
297         }
298     }
299 
300     @media (max-width: 810px) {
301         body {
302             margin: 10px;
303         }
304 
305         header, #social-media, main, footer {
306             width: 100%;
307         }
308 
309         #social-media {
310             width: 100%;
311         }
312 
313         main {
314             flex-direction: column;
315             gap: 30px;
316         }
317 
318         section, aside {
319             width: 100%;
320         }
321 
322         .fa {
323             padding: 7px;
324             width: 38px;
325         }
326     }
327 
328     /* Code and syntax highlighting */
329     .codeSection {
330         font-size:16px;
331         padding:0px;
332         margin:0px;
333     }
334 
335     .fileName {
336         color:#c586c0;
337         margin-bottom:5px;
338         font-weight:600;
339         letter-spacing:0.03em;
340     }
341 
342     .code {
343         line-height:1.6;
344         padding:15px;
345         overflow:auto;
346         color:#e6edf3;
347         background-color:#0d1117;
348         border-left:5px solid #30363d;
349         border-radius:4px;
350     }
351 
352     pre {
353         margin:0px;
354         padding:0px;
355         font-family:Consolas, "Courier New", monospace;
356         -moz-tab-size:4;
357         -o-tab-size:4;
358         tab-size:4;
359     }
360 
361     .lI {
362         color:#e6edf3;
363     }
364 
365     .kC {
366         color:#ff7b72;
367     }
368 
369     .cC {
370         color:#8b949e;
371     }
372 
373     .qC { 
374         color:#a5d6ff;
375     }
376 
377     .pC {
378         color:#c9d1d9;
379     }
380 
381     .iPC {
382         color:#79c0ff;
383     }
384 
385     .bC {
386         color:#c9d1d9;
387     }
388 
389     .iBC {
390         color:#79c0ff;
391     }
392     ]></b:skin>
393     <b:if cond='data:blog.title != "Story of Algorithm"'>
394         <style>
395         body { background-color:white; }
396         </style>
397     </b:if>
398 </head>
399 <body>
400     <header>
401         <a expr:href='data:blog.homepageUrl'><data:blog.title/></a>
402     </header>
403     <div id='social-media'>
404         <!-- Add social media links -->
405         <span style='background-color: var(--highcolor);'>
406             <a href='' target='_blank' title='Follow Twitter' class='fa'><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 32 32">
407             <path d="M18.42,14.009L27.891,3h-2.244l-8.224,9.559L10.855,3H3.28l9.932,14.455L3.28,29h2.244l8.684-10.095,6.936,10.095h7.576l-10.301-14.991h0Zm-3.074,3.573l-1.006-1.439L6.333,4.69h3.447l6.462,9.243,1.006,1.439,8.4,12.015h-3.447l-6.854-9.804h0Z"></path>
408             </svg></a>
409             <a href='' target='_blank' title='Follow Facebook' class='fa'><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 32 32">
410             <path d="M16,2c-7.732,0-14,6.268-14,14,0,6.566,4.52,12.075,10.618,13.588v-9.31h-2.887v-4.278h2.887v-1.843c0-4.765,2.156-6.974,6.835-6.974,.887,0,2.417,.174,3.043,.348v3.878c-.33-.035-.904-.052-1.617-.052-2.296,0-3.183,.87-3.183,3.13v1.513h4.573l-.786,4.278h-3.787v9.619c6.932-.837,12.304-6.74,12.304-13.897,0-7.732-6.268-14-14-14Z"></path>
411             </svg></a>
412             <a href='' target='_blank' title='Follow Tumblr' class='fa'><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 32 32">
413             <path d="M18.5,30c-4.211,0-7.349-2.166-7.349-7.349V14.35h-3.827v-4.495c4.211-1.094,5.972-4.717,6.175-7.856h4.373v7.127h5.102v5.224h-5.102v7.228c0,2.166,1.094,2.915,2.834,2.915h2.47v5.507h-4.677Z"></path>
414             </svg></a>
415             <a href='' target='_blank' title='Follow Reddit' class='fa'><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 32 32">
416             <path d="M27.332,10.323c-1.07,0-2.055,.361-2.842,.967-2.143-1.326-4.848-2.16-7.807-2.271v-.013c0-1.983,1.474-3.629,3.386-3.9v-.003c.347,1.47,1.666,2.564,3.242,2.564,1.84,0,3.331-1.491,3.331-3.331s-1.491-3.331-3.331-3.331c-1.609,0-2.95,1.14-3.262,2.657-2.694,.289-4.798,2.574-4.798,5.343v.017c-2.93,.123-5.605,.957-7.729,2.274-.789-.611-1.779-.974-2.853-.974-2.578,0-4.668,2.09-4.668,4.668,0,1.871,1.099,3.483,2.688,4.228,.155,5.419,6.06,9.778,13.323,9.778s13.176-4.364,13.323-9.787c1.576-.75,2.666-2.357,2.666-4.217,0-2.578-2.09-4.668-4.668-4.668ZM7.334,17.952c.078-1.693,1.203-2.992,2.51-2.992s2.307,1.373,2.229,3.066c-.078,1.693-1.054,2.308-2.363,2.308s-2.453-.689-2.375-2.382Zm13.596,4.424c-.804,1.922-2.703,3.273-4.919,3.273s-4.114-1.351-4.919-3.273c-.095-.228,.061-.483,.306-.508,1.437-.145,2.991-.225,4.613-.225s3.175,.08,4.613,.225c.245,.025,.401,.28,.306,.508Zm1.384-2.043c-1.307,0-2.285-.614-2.363-2.308-.078-1.693,.92-3.066,2.229-3.066s2.433,1.299,2.51,2.992c.078,1.693-1.068,2.382-2.375,2.382Z"></path>
417             </svg></a> 
418             <a href='' target='_blank' title='Follow Github' class='fa'><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 32 32">
419             <path d="M16,2.345c7.735,0,14,6.265,14,14-.002,6.015-3.839,11.359-9.537,13.282-.7,.14-.963-.298-.963-.665,0-.473,.018-1.978,.018-3.85,0-1.312-.437-2.152-.945-2.59,3.115-.35,6.388-1.54,6.388-6.912,0-1.54-.543-2.783-1.435-3.762,.14-.35,.63-1.785-.14-3.71,0,0-1.173-.385-3.85,1.435-1.12-.315-2.31-.472-3.5-.472s-2.38,.157-3.5,.472c-2.677-1.802-3.85-1.435-3.85-1.435-.77,1.925-.28,3.36-.14,3.71-.892,.98-1.435,2.24-1.435,3.762,0,5.355,3.255,6.563,6.37,6.913-.403,.35-.77,.963-.893,1.872-.805,.368-2.818,.963-4.077-1.155-.263-.42-1.05-1.452-2.152-1.435-1.173,.018-.472,.665,.017,.927,.595,.332,1.277,1.575,1.435,1.978,.28,.787,1.19,2.293,4.707,1.645,0,1.173,.018,2.275,.018,2.607,0,.368-.263,.787-.963,.665-5.719-1.904-9.576-7.255-9.573-13.283,0-7.735,6.265-14,14-14Z"></path>
420             </svg></a>
421         </span>
422     </div>
423     <main>
424         <section>
425             <b:section id='content-section'>
426                 <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog' version='1'>
427                     <b:includable id='main'>
428                         <b:loop values='data:posts' var='post'>
429                             <article>
430                                 <b:if cond='data:blog.pageType == "index"'>
431                                 <h2><a expr:href='data:post.url' rel='follow'><data:post.title/></a></h2>
432                                 <b:else/>
433                                 <h1><data:post.title/></h1>
434                                 </b:if>
435                                 <div class='post-date'><span class='post-date-icon'>●</span><data:post.timestamp/></div>
436                                 <data:post.body/>
437                                 <b:if cond='data:blog.pageType == "item"'>
438                                 <script type='application/ld+json'>
439                                 {
440                                     "@context": "https://schema.org",
441                                     "@type": "BlogPosting",
442                                     "mainEntityOfPage": {
443                                         "@type": "WebPage",
444                                         "@id": "<data:post.url/>"
445                                     },
446                                     "headline": "<data:post.title.jsonEscaped/>",
447                                     "author": {
448                                         "@type": "Person",
449                                         "name": "<data:post.author.name/>"
450                                     },
451                                     "publisher": {
452                                         "@type": "Organization",
453                                         "name": "<data:blog.title.jsonEscaped/>"
454                                     },
455                                     "datePublished": "<data:post.timestampISO8601/>",
456                                     "dateModified": "<data:post.timestampISO8601/>"
457                                 }
458                                 </script>
459                                 </b:if>
460                             </article>
461                         </b:loop>
462                         <div id='blog-pager'>
463                             <b:if cond='data:newerPageUrl'>
464                                 <span id='blog-pager-newer-link'>								
465                                     <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' rel='follow' title='Newer Post'>Newer Post</a>
466                                 </span>
467                             </b:if>
468                             <b:if cond='data:olderPageUrl'>
469                                 <span id='blog-pager-older-link'>
470                                     <a class='blog-pager-older-link' expr:href='data:olderPageUrl' rel='follow' title='Older Post'>Older Post</a>
471                                 </span>
472                             </b:if>
473                             <a class='home-link' expr:href='data:blog.homepageUrl' rel='follow'>Home</a>
474                         </div>
475                     </b:includable>
476                 </b:widget>
477             </b:section>
478         </section>
479         <aside>
480             <div class='side-bar'>            
481                 <h3>Search</h3>
482                 <form expr:action='data:blog.searchUrl' id='uform' target='_top'>
483                     <input type='text' id='usearch' placeholder='Search' name='q' expr:value='data:view.isSearch ? data:view.search.query.escaped : &quot;&quot;' autocomplete='off'/>
484                 </form>
485             </div>
486             <div class='side-bar'>
487                 <h3>Popular Posts</h3>
488                 <b:section id='popularpost-section'>
489                     <b:widget id='PopularPosts1' locked='true' title='' type='PopularPosts' version='1'>
490                         <b:includable id='main'>
491                             <ul>
492                                 <b:loop values='data:posts' var='post'>
493                                     <li><a expr:href='data:post.href'><data:post.title/></a></li>
494                                 </b:loop>
495                             </ul>
496                         </b:includable>
497                     </b:widget>
498                 </b:section>
499             </div>
500             <div class='side-bar'>
501                 <h3>Label</h3>
502                 <b:section id='label-section'>
503                     <b:widget id='Label1' locked='true' title='Labels' type='Label' version='1'>
504                         <b:includable id='main'>
505                             <ul>
506                                 <b:loop values='data:labels' var='label'>
507                                     <li><a class='label' expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/> (<data:label.count/>)</a></li>
508                                 </b:loop>
509                             </ul>
510                         </b:includable>
511                     </b:widget>
512                 </b:section>
513             </div>
514         </aside>
515     </main>
516     <footer>
517             Copyright &#9400; <data:blog.title/>. All rights reserved.
518     </footer>
519 </body>
520 </html>