Blogger style tips

Improve your blog style in few seconds

• How to edit your blog template
• Add JQuery
• Highlight your code
• Bootstrap your blog
  • Bootstrap examples

How to edit your blog template

First of all you need to know how to edit your template. See Edit the HTML of your blog’s layout on Blogger help.

Add JQuery

It is worth to add JQuery since it is required by many JavaScript libs.

At the bottom of the head tag, just before </head>, add

<script src='https://code.jquery.com/jquery.js'/>

Highlight your code

I use highlight.js. Add this code in your template head section.

<link rel="stylesheet" href="http://yandex.st/highlightjs/8.0/styles/default.min.css"/>
<script src="http://yandex.st/highlightjs/8.0/highlight.min.js"></script>

At the bottom of the body tag, just before </body>, add

<script type="text/javascript">
$(document).ready(function() {
  $('pre code').each(function(i, e) {hljs.highlightBlock(e)});
});
</script>

Bootstrap your blog

Improve your blog style with Bootstrap.

Add this code in your template head section.

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"/>

Bootstrap examples

---

this is a lead text paragraph

<p class="lead">this is a lead text paragraph</p>

---

this is a small text paragraph

<small>this is a small text paragraph</small>

---

Center aligned text.

<p class="text-center">Center aligned text.</p>

---

Muted

Primary

Success

Info

Warning

Danger

<p class="text-muted">Muted</p>
<p class="text-primary">Primary</p>
<p class="text-success">Success</p>
<p class="text-info">Info</p>
<p class="text-warning">Warning</p>
<p class="text-danger">Danger</p>

---

Default
Primary
Success
Info
Warning
Danger

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

or even

<h3>Example heading <span class="label label-default">New</span></h3>

---

Add a Badge here

Add a <span class="badge">Badge here</span>

---

This is an alert

This is an info with a link to the Add JQuery section

This is a warning

Is this dangerours?

<div class="alert alert-success">This is an alert</div>
<div class="alert alert-info">This is an info with a link to the <a href="#add-jquery" class="alert-link">Add JQuery</a> section</div>
<div class="alert alert-warning">This is a warning</div>
<div class="alert alert-danger">Is this dangerours?</div>

---

I’m in a well. Use the well as a simple effect on an element to give it an inset effect.

I’m in a large well

I’m in a small well

<div class="well">I'm in a well. Use the well as a simple effect on an element to give it an inset effect.</div>

<div class="well well-lg">I'm in a large well</div>

<div class="well well-sm">I'm in a small well</div>