Basic setting Bootstrap is HTML5. So, when we implementing it to Blogger then we must using HTML5. To help you in setting Bootstrap, threelas make this article as the next topic of getting started bootstrap for blogger. Because Blogger template is using XML file, then follow the instruction of basic setting below so that your blog tags is correspond to CSS Bootstrap. After that, you can add your own template style.
 |
| Source: w3.org |
Basic Setting XML Template
Based on our tutorial about how to make blogger template part 1, Bootstrap for Blogger, and original instruction from Bootstrap, then the minimum contain of your XML Template is as follow
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<title>Your Title</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css"/>
<style type="text/css"><!-- /*
<b:skin><![CDATA[*/]]></b:skin>
</head>
<body>
<b:section class='someclass' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
</body>
</html>
Please to backup your old css code, using
<style type="text/css"><!-- /*<b:skin><![CDATA[*/]]></b:skin> means you are not using css code inside <b:skin>. You only using CSS from Bootstrap. You also remember, CSS Bootstrap is using Normalise CSSWhen you are using Bootstrap javascript, then several original widgets from Blogger is not working properly. One of them is SlideShow widget. This is because conflict Jquery function between Blogger and Bootstrap.
If you are using Bootstrap javascript and Jquery UI, then several method of Bootstrap Javascript is not working properly. Such as tooltip Bootstrap. This javascript will conflict with tooltip Jquery UI.
Update November 20, 2013
Are Blogger Need Mobile First?
Basically, Blogger will detect your blog if someone is open via mobile or web. This is will make your blog is mobile friendly by default. But, it doesn't mean you can't make Mobile First on your blog based on intruction from Bootstrap. The solution is find the code below from your XML template (the code is placed before</head>)<b:if cond='data:blog.isMobile'> <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/> <b:else/> <meta content='width=1100' name='viewport'/> </b:if>
then replace the code above with
<b:if cond='data:blog.isMobile'> <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/> <b:else/> <meta content='width=device-width, initial-scale=1.0' name='viewport'/> </b:if>
This way will make your blog is satisfy with Bootstrap instruction. You can disable zooming capabilities on mobile devices by adding
user-scalable=no to the viewport meta tag. This disables zooming, meaning users are only able to scroll, and results in your site feeling a bit more like a native application.Responsive Image
To make your image is responsive (based on the width of user device), then you just add img-responsive class on<img> tag. Below is the example code<img src="image-url" class="img-responsive" alt="alt-image"/>This applies
max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element.Update November 24, 2013
To see how this work, please see the playground on Play BootPly
Post a Comment