Wednesday, July 4, 2012

Custom JavaScript and CSS in Blogger posts

Right, here's a very simple tip (or trick?) that I half-expected wouldn't work, but it does. How does one add custom post-specific style (as in CSS) and logic (as in JavaScript) to Blogger posts? This could be useful for inserting examples right into your articles, as I did at the end of my “Drawing a diagonal line with HTML/CSS/JS” opus.

You just do it (and I am not even affiliated with Nike!)

First thing to do it switch to the HTML composing mode:


You will see your article (if already typed) in all its gory glory — HTML code and all!

Here you can insert your custom HTML element, in my case I add a DIV that will serve as a custom button:
<div id="custom-button">Button</div>

In order to add custom style to it, insert your CSS code between the <style> tags, as you do:
<style>
#custom-button {
    color: white; 
    font-weight: bold; 
    background-color: #06a; 
    margin: 2em auto; 
    text-align: center; 
    line-height: 70px; 
    height: 70px; 
    width: 70px; 
    -webkit-border-radius: 100%; 
    -moz-border-radius: 100%; 
    border-radius: 100%;
}
</style>

Then, if you need to include an external library, which in my case happens to be jQuery, you can add it by inserting:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript">
</script>

You'll notice I've linked it from Google's CDN (Content Delivery Network), it is more than adequate for smaller sites (such as your humble servant's).

And, to finally add your custom JavaScript logic, insert the code between <script> tags:
<script>
$('#custom-button').click(function() {
    alert('It works!');
});
</script>

Button

It works, eh? Good!

21 comments:

  1. Good presentation, You give is very helpful and we thank you very much..

    ReplyDelete
  2. This comment has been removed by a blog administrator.

    ReplyDelete
  3. this working, but when i used again in other posting on blogger, it just working for one post, and not working for another post. any idea?

    ReplyDelete
    Replies
    1. Can you give the link to the post where it doesn't work — I'll take a look.

      Delete
  4. Your post is really useful for me. Additionally, how can we show a shadow button?

    ReplyDelete
    Replies
    1. Do you mean a shadow under the button? Look up CSS "box-shadow" for this.

      Delete
  5. This is just what I was looking for. I found lots of other posts about how to put custom css into a template, but had a mind block when it came to just sticking a script tag in the post itself (because I was thinking it had to go in the head section), as I just wanted to customize a single table.

    ReplyDelete
    Replies
    1. I am glad I could be of service, thanks for the feedback!

      Delete
  6. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
    2. This comment has been removed by the author.

      Delete
    3. Hi Kostas, I hope you already figured out that you can put your CSS styles anywhere inside your post's HTML, just make sure to wrap it in < style > tags.

      As for your HTML, don't include elements which define a whole page (html / head / body tags), since your Blogger post will already be wrapped in these. Instead, go straight to HTML code for your table.

      Delete
  7. I must drop a comment to appreciate this good post.

    ReplyDelete
  8. This comment has been removed by a blog administrator.

    ReplyDelete
  9. I have been experimenting with this on a private test blog. But I have been told that it is bad for seo. Is that true? I have actually added html styling for tables I created for individual posts. That didn't drop traffic. That's why, I am confused.

    ReplyDelete
    Replies
    1. SEO isn't an exact science, so I can't be 100% sure, but in my understanding this will only affect SEO if you modify content (e.g., use JS to add some keyword-heavy text — then most search spiders won't even see it), not styling.

      Saying that, there are also reasonable rules for mobile-friendliness. For example, if your font size is too small, then your blog will be demoted for mobile devices. So I'd ensure that the text on the page complies with most recent standards and expectations (this is what you use CSS for), and only then start enhancing it with JS.

      Delete