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>
It works, eh? Good!
Good presentation, You give is very helpful and we thank you very much..
ReplyDeleteIt works thanks for sharing
ReplyDeletenice css tip
ReplyDeleteThis comment has been removed by a blog administrator.
ReplyDeletethis 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?
ReplyDeleteCan you give the link to the post where it doesn't work — I'll take a look.
DeleteYour post is really useful for me. Additionally, how can we show a shadow button?
ReplyDeleteDo you mean a shadow under the button? Look up CSS "box-shadow" for this.
DeleteThis 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.
ReplyDeleteI am glad I could be of service, thanks for the feedback!
DeleteThis comment has been removed by the author.
ReplyDeleteThis comment has been removed by the author.
DeleteThis comment has been removed by the author.
DeleteHi 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.
DeleteAs 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.
I must drop a comment to appreciate this good post.
ReplyDeleteHeh, thanks :)
DeleteThis comment has been removed by a blog administrator.
ReplyDeletegood post
ReplyDeleteI 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.
ReplyDeleteSEO 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.
DeleteSaying 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.
hmmmm
ReplyDelete