So, our target for today is to create our very own template for your Blogspot sites using Twitter Bootstrap.
With the help of this framework, creating your own template takes only a few minutes and some creativity.
This blog itself is an example of a template made out of the said framework.
Uhm.. What is Twitter Bootstrap?
Twitter Bootstrap is a free collection of tools for creating websites and web applications. It contains HTML, javascript and CSS files that you can use for creating sites easier. You can find more information in this site.Do I need to learn anything? err.. Coding?
Well since we are designing for a website, coding is a must in here. BUT WAIT, don't be scared! we just need to rely on your basic knowledge about HTML and CSS. We don't need anything fancy in here. I'll keep the steps as simple as possible.Resources for this Tutorial
For the complete file samples used in this tutorial, you can download it on the link below. We also provided a demo site for you to check on.Steps on Creating the Template
NOTE: I'll try to make the steps as simple as possible so that every one can follow.
What we are about to do is a simple two-column responsive design for blogspot - one column for the sidebar (a place for widgets) and one for the main theme.
What we are about to do is a simple two-column responsive design for blogspot - one column for the sidebar (a place for widgets) and one for the main theme.
- Start by downloading the framework's zip file.
Download Twitter Bootstrap
Since blogspot uses a single file for template, it is a must to upload the files you downloaded to an online file storage or server. There are lots of free online file storage, such as DropBox and Google Drive, for you to choose from.
- Download the resources above this post and open
fluid.htmlusing your favorite text/code editor such as notepad. This will be your base file for our template design.
This is based on the default fluid design offered on Twitter Bootstrap's website with minor customization to emphasize the things we need to do later on. Note that a fluid design is actually a responsive design that adjusts itself based on the viewport of the browser. Meaning, it automatically fits itself in the browser even if it is resized.
- Customizing the Headers
First of all, replace the first two lines of our base template from:
<!DOCTYPE html> <html lang="en">
to:
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html> <html expr:dir='data:blog.languageDirection' lang='en' 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'>
This prepares your site from being a plain HTML to a blogspot template. Note also that the DOCTYPE is now prepared for HTML5.
- Customizing the Tags
Replace the default title tag from:
<title>Bootstrap, from Twitter</title>
to something like this:
<b:if cond='data:blog.pageType == "index"'> <title><data:blog.pageTitle/></title> <b:else/> <title><data:blog.pageName/> :: <data:blog.title/></title> </b:if>
This allows our template to switch title from the index type page and article page.
For thedescriptionandauthor, you can simply fill it out for now with whatever your description is.
- CSS Customization
On the file, search for this comment:
<!--PLACE BLOGSPOT XML HERE-->
and replace it with this:
<b:skin><![CDATA[/* Variable definitions ==================== <Variable name="bgcolor" description="Page Background Color" type="color" default="#E0DED5" value="#E0DED5"> <Variable name="textcolor" description="Text Color" type="color" default="#333" value="#333333"> <Variable name="linkcolor" description="Link Color" type="color" default="#DF3F3F" value="#DF3F3F"> <Variable name="descriptioncolor" description="Blog Description Color" type="color" default="#E2C0C0" value="#E2C0C0"> <Variable name="titlecolor" description="Post Title Color" type="color" default="#5E1111" value="#5E1111"> <Variable name="bordercolor" description="Border Color" type="color" default="#E0DED5" value="#E0DED5"> <Variable name="sidebarcolor" description="Sidebar Title Color" type="color" default="#5E1111" value="#5E1111"> <Variable name="sidebartextcolor" description="Sidebar Text Color" type="color" default="#333" value="#333333"> <Variable name="visitedlinkcolor" description="Visited Link Color" type="color" default="#DF3F3F" value="#DF3F3F"> <Variable name="bodyfont" description="Text Font" type="font" default="normal normal 100% Arial, sans-serif" value="normal normal 100% Arial, sans-serif"> */ ]]></b:skin>
The code above is required by Blogspot to be placed on your template. This is used as the basis of default colors for bloggers's widget such as AdSense and other links. It would be better if you can replace the colors later on but for now, we will just retain it as it is.
Any other customized CSS can be placed AFTER this line:
<!--PLACE ALL CUSTOMED CSS AFTER THIS-->
You can place here all CSS customization such as changing the font-size, colors, background-colors etc.
Note that the positioning of CSS files is important in web designing especially on twitter bootstrap.
- Customizing the navigation
Search and replaceBLOG NAMEwith the following code:
<data:blog.pageTitle/>
You can also replace or prepend it with an image if you like.
As for the navigation itself, beginners can make it static for now. Just add your pages by editing the contents.
Look for this block of code to edit it:
<ul class="nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul>
For the Home, replace thehrefattribute withexpr:href='data:blog.homepageUrl', making it:
<li class="active"><a expr:href='data:blog.homepageUrl'>Home</a></li>
Take note ofexprbeforehref.
For the other links, just replace thehrefattribute with the proper link. No need to prependexpr.
- Sidebar and Main Content
Look for the following within the file and replace it:
SIDE BAR GOES HERE:
<b:section class='sidebar' id='sidebar' preferred='yes'/>
MAIN CONTENT GOES HERE:
<b:section class='main' id='main' showaddelement='no'> <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/> </b:section>
COMPANY:
<data:blog.pageTitle/>
- Fix the external file locations
Look for the following, lines and fix thehrefwith the proper file locations where you place the bootstrap files you downloaded on the first step:
<link href="css/bootstrap.css" rel="stylesheet"> ... <link href="css/bootstrap-responsive.css" rel="stylesheet"> ... <script src="js/bootstrap.min.js"></script>
- That should be it. Now save your file as
myTemplate.xml.
Back-up your existing template (just to be safe) then upload your very own customized twitter bootstrap based blogspot template.
That's it, you now have your very own customized template made out of twitter bootstrap. To see if it is responsive, try to re-size your browser window and see how the site adjusts to size changes. :)
Categories
Thanks Bennix, Yes you can use it in any web designing projects, and one thing I can promise you is that it is easy to learn. :)
ReplyDeleteNow that you mention it, parang ang dami ngang whitespace sa blog ko bigla.. Must be because I had some issues with my template lately, nasira kasi ito last week tapos wala akong back-up :p
I have seen also a Windows 8 bootstrap using the Metro UI :D
ReplyDeleteHi
ReplyDeleteI'm sorry, but you are missing one important point. How do you upload the bootstrap files to an online storage in such a way as with the jquery files:
http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
When uploading to either Google Drive or Dropbox, you get a dropbox/drive interface wrapped around your code. I want to get rid of this code. You simply just mention that this is possible, but I've been looking around the interwebs and I can not seem to find any of the files uploaded already, nor can I find any help as to how I upload them myself.
Thank you in advance