Well, some of you may have been waiting for my second part of the Wordpress vs Blogger review. But, I was sidetracked by a much more ambitious project - merging the dynamic with Blogger. I knew initially that this would be quite a challenge to get it right - and was I correct in that assumption. So just what is Bootstrap? You can go over to their site and read up, but, at a very high level it is designed as a starter kit for dynamic web UI layouts that utilize CSS and Javascript for a great user experience. If you've seen sites , or - you'll see how Bootstrap can be beautifully extended. In the case of Blogger almost all of their templates are very static and were designed in the 2005-2010 time frame. In the last few years the web has exploded with new, dynamic web frameworks that have reactive interactivity without page refreshes. The easy path to my task would have been to strip out the entire Blogger template and add Bootstrap in its place as some of these template providers have done. But, if you read my article you know that I am a stickler for keeping Google Blogger as pure to its original intent of a dynamic layout and user substitution of design elements vs a copy-paste of some Wordpress or other template like Bootstrap and just getting it to work. If you want to try this I've at least laid down a path that will get you past the hardest parts let me just say I spent days trying to get some of the Bootstrap basics up! The key to merging templates is trying to navigate the structures and naming collisions so that both can work. Some of the functionality simply won't work directly in certain cases such as the header image gadget. But, a creative Javascript programmer could solve some of these small problems - and, in the interest of time I needed to get the basics completed. If you want to try this you must understand web page html basics or otherwise you'll be lost. So, let's get started. Stripping Out Blogger Templates The first step is to pick a basic Blogger template and strip out a significant portion of the layout without damaging the Blogger functionality. I chose the Simple template as a the easiest path. What we'll be doing is removing most of the CSS, div tags and Variables to reduce the Blogger template down to its essential layout components so that both the Layout editor and Template editor can still work. In many external Blogger template seller sites that have modified templates for sale or are free, the designers just strip away everything and render the Blogger editors basically useless. This might be the hardest part of this tutorial for you. So, be aware you might want to practice on a test blog first. Remember, the goal is to keep Blogger functionality template design and layout gadgets. Given that, the first step is to set the template to it's simplest form. Be sure you started with the basic white Simple template. Choose the 'Template' main menu item and then click the 'Customize' button: Go 'Back to Blogger' and now select the 'Edit HTML' button. You will now be within your template. Find the section near the top called and expand it by clicking on the small black arrow next to it. Note: we're keeping the first few lines of the skin for later work. We're deleting all of the template's CSS here: Press the 'Save Template' button again. Next, we're going to remove the core template tags that are outside the gadgets note that gadgets themselves contain tags as well but we'll keep those for now. This is a very tricky step but you'll find that the template editor is your friend here. As you remove tags the editor will highlight the ending tags that are mismatched. The key to this step is that certain elements of the template need to stay in place so that the layout editor continues to function. The best way to do this is to remove small sets of tags and then try to save to find which ending tags to remove. The first set to remove is everything just after the Navbar gadget up to the tag the first tag should be : You'll have to try and keep saving the template after you delete this section above until you find all of the ending tags to remove farther down in the template be sure to keep the ending tag. Next step is to add the header information. You've probably noticed that I commented out the bootstrap. This is because of the naming collisions with Blogger I noted earlier. What we're going to do is to get a copy of this CSS code, modify it and then place it in the section of Blogger's template. Modifying Bootstrap's CSS Code The best way to do this is to copy the Bootstrap CSS link of the bootstrap. You should see the Bootstrap CSS in a new browser window now. Use the editor to do a global replace of any text with 'navbar' to 'navbar2'. You can see where my first instance of 'navbar' was changed to 'navbar2' here there are over 50 more instances : The reason we're doing this is due to the 'navbar' name in Blogger. It is different than Bootstrap's navbar so we have to alter the Bootstrap name. What this implies is that any time you add a Bootstrap navbar to Blogger you'll have to alter all of the navbar names to navbar2 which I'll show in a bit. Next, just copy the modified CSS code from your text editor and paste it into your Blogger's section just like this: Save your template now and make sure it works again by previewing it, checking if the Layout editor works and the template designer can alter your columns and footers. A ton of work has paid off! You now have a first functioning Bootstrap template. You now need to add the basic Bootstrap HTML to your template. I'm assuming you understand HTML fairly well so that you can add the Bootstrap components you desire. I'm just going to place an example here by starting with the Bootstrap navbar and jumbotron sections. One of the best parts of Bootstrap's capabilities is the flexible navbar and upper image contained in the template when you view it on different devices. This is a very simple HTML addition now - just adding the Toggle navigation Project name Home About Contact Dropdown Action Another action Something else here Nav header Separated link One more separated link Default current Static top Fixed top notice that I have altered any Bootstrap reference of the word 'navbar' to 'navbar2' in this code - look for the section I've boxed in below to see where you should paste the navbar code underneath : At this point the actual menu items would have to be altered directly in the HTML code above to add your menu items and associated page links. Connecting it to the Blogger template editor would be tougher and I just wanted to get you based functionality first here. Finally, in this tutorial I'll also add the jumbotron component. This is a large image that sits just under the navbar if you have one and will dynamically scale and scroll when you adjust your browser window. I found a simple image out on the Flickr Creative Commons for this particular test. If you've read my previous posts you need to add your desired image to Blogger's image pool first. All you have to do is add your image to a new Post, save it and publish it. Then revert it back to draft status. Your image is then saved on the Blogger network no matter if the post is active or not. Go back into your post and view the HTML. The image will have a long link like this -. Once you've uploaded the image you can now use this in the Bootstrap jumbotron component. What you'll want to do is to copy and paste this code just after the tag and before the Hello, world! This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique. Learn more Go ahead and save the template but not that this won't show the image yet. We'll place the image link into a jumbotron CSS section. Be sure to replace your link with mine. Here is where I pasted it: Save your template. We are just about ready to go. The last thing I want you to do is to add the single Bootstrap section around everything under the tag in the Blogger template. Just add it right after the tag and place an ending tag just after the tag at the end of the template. That's it for Part 1!!! You now have a template with a scalable navbar and jumbotron image! The entire image and template should slide dynamically up and down when the menu is selected in a small mobile view. Here are my examples and here is a link you can try:. My blog wouldn't show the Bootstrap for mobile and would instead show like a full site in the browser on my mobile. I also had to fix the margin-bottom in. And I moved the blogger element that contained my name into the Jumbotron. Overall, you did a great job. It pointed me in the right direction. I'm going to mess around a bit more in the code. I wish there was a guide to recognize which tags controlled what instead of removing elements one at a time to figure out what does what. Thanks for the help and spending time on this tutorial. I have practiced this tutorial cacwacsbooks. If I am not wrong you used the Clean Blog theme... How should I find the correspondent code in the Blogger template? Anonymous Hi, awesome thanks for sharing! If I am not wrong you used the Clean Blog theme... How should I find the correspondent code in the Blogger template?
