Introduction: Blogger.com Custom Theme Layouts
If you want to use Blogger.com but want to transform the way it looks from the standard layouts to something more modern or looking to host your static website for free, keep reading!
Step 1: Watch the Video
Step 2: Create a Blog
The first step is to create a blog: pick a name, an address, display name and click "Finish".
PS: Skip this step if you already got a blog setup.
Step 3: Custom Template
Head over to the Theme section in the left menu, click on 'Customize' icon and then 'Edit HTML'.
There, you have the option to edit the row HTML code as long as it is formatted in a specific XML format.
Luckily, I took care of this in my template. So head over to my Gitlab and get it here. Copy and paste it in Blogger.com's template editor and save. Congratulations, you just created your first custom 'Hello Word' page on Blogger.com.
Step 4: Understand Te Building Blocks
The template has 4 sections:
- the CSS header links go at the top
- the incline CSS code goes in second block
- the actual HTML body code goes in third block
* I am refering to the RED blocks shown in the image above.
Step 5: Hosting Your Images
The next challenge you will face is "Where do I host my images?" This is easy too!
Here is the trick: Create a new blog post. Upload an image, right-click on the image and copy "Copy Image Address".
This is the address you will put in the src attribute of the img tag, for example:
<img src="put-the-image-url-here" />
Repeat this step for all your images.
Step 6: Build Your Own
Now you can use this bare bone template to pretty much build any layout you like.
And in case you don't have the advanced HTML experience needed, you can use any website builder like DesignModo Slides, as featured at the beginning of the video.
These services will provide you with to the HTML, CSS and JS code and you simply copy-paste them in the blocks I showed you earlier. It is that simple now.
Step 7: Done
You are now armed with the basic understandings needed to customize your Blooger.com layout. I hope this helps you break free from the default Blogger.com look & feel and opens a door to new possibilities.
Before you go, if you found this tutorial useful, please consider subscribing to my YouTube channel. I cover other topics like home automation, hardware and softweare design. And if you are interested in supporting my work, please check my Patreon page. Follow me on Twitter