Applying different styles to the parts of the tutorial will make the article look more reader friendly. To do so we have to add some code in to the blogger template. I’ll take you through the procedure to add the ‘Code Panel’ for your ‘Blogger’ blog.
Let’s get started!
Adding Bootstrap references
As we are using the Bootstrap framework here, we need to import its CSS and JS classes. This is the important part of widget installation. Specifying wrong paths or wrong HTML will breaks the link to Bootstrap framework resources.Copy the following code and paste it in the <head> part of your blog’s template.
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
Using the widget
You’ve literally installed the widget by installing above code. You need to use it now.To use the widget in your blog posts, all you need to do is just remember the following class names and the order they are to be nested.
Level #1 – panel panel-default
Level #2.1 – panel-heading
Level #3 – panel-title
Level #2.2 – panel-body
Here is what the resultant code looks like:
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">View Code:</h3> //Panel Title
</div>
<div class="panel-body">YOUR CODE HERE or SPECIAL TEXT HERE</div>
</div>
<div class="panel-heading">
<h3 class="panel-title">View Code:</h3> //Panel Title
</div>
<div class="panel-body">YOUR CODE HERE or SPECIAL TEXT HERE</div>
</div>
Customization:
You can customize the widget though you haven’t added any CSS or JS to your template. You can add up a new CSS class and use it along with those DIVs.For example, you can create a new class with name .codetemplate and specify font values here.
.codetemplate
{
font-family:courier new;
color: #333333
}
{
font-family:courier new;
color: #333333
}
Now specify this CSS class along with panel-body in above code. It should look like like this:
..
<div class="panel-body codetemplate">YOUR CODE HERE or SPECIAL TEXT HERE</div>
</div>
..
<div class="panel-body codetemplate">YOUR CODE HERE or SPECIAL TEXT HERE</div>
</div>
..
Demo:
Hi Sasidhar,
ReplyDeletethis article providing best information abour bootstrap, how we can implement bootstrap into widget area, this is very helpful tutorial.. great work bro..
Regards
Mohd Arif
Hi Arif,
ReplyDeleteBootstrap has no implementation methods. The linking file I told you to add in head section is enough to use bootstrap packaged classes and methods.
By the way, please don't leave links in comments. 'Disqus' have already flagged you as a 'low rep' commentor. I approved it last time. Leaving links in comments for gaining backlinks is a bad practice.
Thank you for stopping by and asking the question.
Have a nice weekend :)
Check this out for reference!!
ReplyDeleteHi Thanks so much giving me suggestion, I din't have any experience on discus, Next time I remember..
ReplyDelete(thumbs up)
ReplyDeletePost a Comment