RA Mutiara Islam Kendari's main school website runs on Blogger, but instead of a generic theme, it uses a fully custom-coded template covering the homepage, a dynamic blog documenting everyday school life, and dedicated pages for Contact, Profile, and Gallery, presenting a school running since 2006 with over 600 alumni to parents researching the school organically
A scrollable look at the finished site, exactly as a visitor would browse it
Desktop
Mobile
The tools and technologies that came together to bring this project to life
Each project draws on a mix of disciplines, here’s how they came together on this one
A closer look at what the finished product offers, the obstacles along the way, and what came out of it
Building Inside a CMS With No Build Pipeline
Blogger doesn't support an external build process, so the entire template had to be written in Blogger's own templating syntax, with compiled Tailwind CSS hand-injected directly into the template's style block on every change
Avoiding a Mobile Redirect Loop
Blogger automatically appends a mobile URL parameter and re-adds it on every navigation, so a naive full-page redirect to remove it caused an infinite reload loop, fixed by rewriting the URL silently instead
Hitting a Perfect Google PageSpeed Score
Getting a green score across all four PageSpeed categories required careful optimization of image, JS, and CSS delivery, layered on top of Blogger's own template constraints
Producing and Embedding Video Testimonials
Raw parent testimonial footage needed editing before it was usable, then had to be published and embedded in a way that wouldn't slow down the homepage
How this project changed things for the business and its users after launch
Complete information in one place
Zero redirect loop
Images under 200KB
Zero external font requests
PageSpeed green across all 4 categories
Automated CSS injection workflow
Page 1 on Google for target keywords
Polished video testimonials
Ongoing article publishing
Before
The previous website covered the basics, but programs, schedules, facilities, and testimonials weren't all organized together in one clear place
After
The redesigned site now brings all of that together, making it much easier for parents to get a complete picture in one visit
Before
Blogger automatically appends a parameter for mobile visitors, and an early fix using a full-page redirect caused visitors to get stuck in an infinite reload loop
After
The URL is now rewritten silently using the browser's own history API instead of a redirect, removing the parameter with zero reload and zero loop
Before
High-resolution images across the site, not just one section, risked slowing down every page
After
Every image across the site is compressed to WebP and kept under 200KB, keeping pages fast without a visible drop in quality
Before
Loading typefaces from Google Fonts would mean an extra external request and a render-blocking delay before text appears
After
Both typefaces are self-hosted with swap-on-load behavior, removing the external dependency and letting text render immediately with a fallback font
Before
Early performance was inconsistent across the four Google PageSpeed categories
After
Continuous optimization of images, JS, and CSS delivery brought all four categories into the green
Before
Blogger offers no way to run an external build process, so any new styling would have no path to actually reach the live template
After
A small automated script compiles fresh Tailwind CSS and injects it directly into the template's style block, keeping a build-like workflow despite Blogger's constraints
Before
The previous site had limited SEO optimization, leaving room to improve how easily the school could be found in search results
After
Google Search Console and Analytics now track organic traffic, with ongoing SEO optimization bringing the site to the first page of Google for "TK Kendari" and "TK Islami Kendari"
Before
Raw parent testimonial videos weren't ready to build trust on their own
After
Edited into polished videos, published on YouTube, and embedded directly on the homepage
Before
Blog updates were occasional, leaving gaps in the public record of the school's day-to-day activities and achievements
After
Regular blog articles now document school events more consistently, building a growing, searchable history of school life