Integrating Blogger Blog with Existing Bootstrap Website

I just finished the integration moments ago, and figured this would make a fitting first blog post. Yay first blog post!

As with most things you may try for the first time, there will be a lot of trial and error until you get it right. I definitely went through a lot of that with this integration, so hopefully my experience will help you overcome some "codeblocks" you may encounter. This is going to be a little "hacky" and you will need to know some HTML, CSS, and Bootstrap. I will go through step-by-step of what I did, along with links to the sites I found the most helpful.

My goals were to:
  1. start a new blog on the free blogging platform Blogger
  2. have it live on a subdomain of my website (blog.christineurban.net)
  3. have it look lust like my other pages, which were made in Bootstrap

Step 1: Set Up New Blog on Blogger

If you've never used blogger before, visit the link below to get started:


If you have an existing blog, proceed to Step 2.


Step 2: Put Blog on Subdomain

You can buy a custom domain and use that as the domain for your blog instead of ".blogspot.com." Since I already have a custom domain name that is in use and I wanted a "blog page" on it, I went with a subdomain. Instructions on how to set your original Blogger address to automatically forward to your domain or subdomain are below:



Step 3: Integrate Blogger with Bootstrap

This was the hardest, longest, and hackiest step, so keep that in mind. The two places you will be editing the Blogger code are:

  • HTML (Theme > Edit HTML)
  • CSS (Theme > Customize > Advanced > Add CSS)

I found that the best way to look through and edit the Blogger HTML code was to download it and edit it in a text editor, then upload it back onto Blogger for each integration. You can do so here:


I started with adding my Bootstrap navbar following these instructions:


I then added all the <head> links and scripts that I used to make my existing site work to the Blogger HTML <head>. As for code in my mystyles.css, I added only the CSS I needed to the "Add CSS" section. Since many of the links were relative paths to my webhost, I changed them to the full URLs so they would link correctly. If your custom font isn't working and the font is hosted by you, you will need to allow access to them by adding code to the .htaccess file on your host as described on this page:


Then I made the header and footer full-width:

 http://helplogger.blogspot.com/2014/08/blogger-header-footer-full-width.html

After that, I added my footer at the end of the footer section, following the same idea of adding the navbar. You can make your footer "sticky" with code from this page:

 https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

Lastly, the most tedious part: I used the developer tools in Chrome to inspect my page to target the CSS I wanted to change. I found there were a lot of things that I needed to edit in the mobile view of the blog. You can toggle device modes by following these instructions:

https://developers.google.com/web/tools/chrome-devtools/inspect-styles/


Before you think you are finished, make sure to check your site across multiple browsers and devices to make sure it looks the way you hoped. And that is it, thanks for reading!