Bootstrap Code Panel Widget for Blogger

We bloggers need features more than the ‘Blogger’ provides. When writing about coding tutorials or mentioning a snippet of text or statement, we would want an inline-styled panel to make the special text or code stand out from the rest of the content.

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>

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>

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
}

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>
..

Demo:

bootstrap-code-panel-blogger-widget

5/Post a reply/Replies

  1. Hi Sasidhar,

    this 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

    ReplyDelete
  2. Hi Arif,


    Bootstrap 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 :)

    ReplyDelete
  3. Hi Thanks so much giving me suggestion, I din't have any experience on discus, Next time I remember..

    ReplyDelete

Post a Comment

Previous Post Next Post