Integrating Bootstrap Into Blogger
By: InTheWhaleGaming
Introduction:
Welcome to my first Tutorial! Today I am going to talk to you guys about how I got bootstrap to work in my blogger webpage. We are going to go over it in steps. Through Step 1-10 I am able to explain how to get bootstrap to work in a blogger instance fairly simply. Then you are able to work forward and add things such as a custom navbar and a carousel (Which I will explain in later tutorials). What you will need is a computer, access to the internet, a blogger account, NetBeans (what I use, you can use coffee cup software to notepad to the default editor in the website), and your brain. Overall, this tutorial is to provide a better understanding on how to implement bootstrap with blogger.
Steps:
Step 1: Search bootstrap in google to find it and at least learn more about it if you have not already (or go here). Step 2: Find the CDN links and copy and paste them into notepad. Step 3: Find the jQuery CDN, I use uncompressed, here. Then copy and paste in into notepad as well. Step 4: Open up your blogger developers page, go to theme and in the top right corner there is Backup / Restore. Click that and download your theme. Then rename it what ever you want and save it where you want. Step 5: Open up your HTML/CSS editor and open up the theme with it, then directly under the <head> put what you copied into the notepad and paste it there. Then you are done! *Note, make sure the jQuery comes before the javascript CDN link, otherwise it won't load in and work properly.*
Ex.
<link crossorigin='anonymous' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' integrity='sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u' rel='stylesheet'/>
<link crossorigin='anonymous' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css' integrity='sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp' rel='stylesheet'/>
<script crossorigin='anonymous' integrity='sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=' src='https://code.jquery.com/jquery-3.2.1.js'/>
<script crossorigin='anonymous' integrity='sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa' src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'/>
<link crossorigin='anonymous' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css' integrity='sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp' rel='stylesheet'/>
<script crossorigin='anonymous' integrity='sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=' src='https://code.jquery.com/jquery-3.2.1.js'/>
<script crossorigin='anonymous' integrity='sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa' src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'/>
Conclusion:
Overall, coding can be a daunting task. Fortunately, with Bootstrap it is not as bad. CSS is basically taken out of the equation except for some basic page alignment things if even at that. Html, CSS, and JavaScript are essential for website design and are, in my opinion, the founding fathers of websites. In this tutorial we went over the steps for how to add Bootstrap to Blogger.
No comments:
Post a Comment