Smiley emoticons to Blogger, and getElementsByClassName

This small script changes textual smileys into graphical emoticons in post texts and comments in a Blogspot blog. Before trying to apply this, you should know your way around in html and customizing your blog.

getElementsByClassName  

Go to Design -> Edit HTML. Insert this code before </head>-tag:

Data provided by Pastebin.com - Download Raw

This function does not exist on some older browsers, so if it doesn't, we define it here. This getElementsByClassName will be used by many other script snippets, too, so it is useful to add, even if you don't add the actual smiley codes, which we do next.

Smileys/emoticons script and css

In html editing, add this code before </body>-tag:

Data provided by Pastebin.com - Download Raw

You should upload decent smilies for example to your Picasa albums, and change the smilies' urls accordingly. These smilies are just for demonstration. You can use them to test the script. Smilies, now 6 of them, can be added or removed by modifying the code, the code should be self explanatory. See also Smileys test post.

And finally go to Template designer, Advanced, Add CSS, and copy this css definition there:

img.emoticon { 
border: 0; padding: 0; margin: 0; 
-moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
}

You may also add the css directly to html instead of using Template designer, if you know what you are doing.

There you go. Now find your favorite smileys and upload them to web, and change the script's img urls. :)

Know your way around

The instructions for the tips and hacks I'm going to write in this blog won't be too detailed. So you really should know your way around in customizing your blog. Basic functions that you should be able to find and use are:

Edit HTML

• when viewing your blog, click Design on the top navbar
• if you have new interface, Template is already selected from left menu, just click Edit HTML and Proceed
• if you have old interface, Design tab is already selected, just click Edit HTML.

You should not be html illiterate if you try to install these hacks. Also, I will not remind you to back up your html, which you should always do before editing anything. If you break anything, it is your responsibility, you fix it, I cannot help you. You've been warned.

Template Designer

• click Design on the navbar
• new interface: click Customize
• old interface: click Template Designer

Here you can modify how your blog looks. On Advanced options you can add CSS declarations easily,  we'll probably be using that.

Layout/Page Elements (gadgets etc)

• click Design on the navbar
• new interface: click Layout
• old interface: click Page elements

Here you can add new gadgets to your page and configure different page elements. At least HTML/Javascript gadget will be used.

I'm sorry I cannot give you too detailed instructions, with pictures etc, and help everyone no matter what their computer skills are. You can google for more help. I have multiple sclerosis and I cannot spend too much time on computer. I don't do this to earn money, just use my spare time to share these tips. Hopefully they are useful to someone :)

Smileys test post

Or is it smilies... (I think both are ok).

:) :) smile http://oi55.tinypic.com/2462gkg.jpg
;) ;) wink http://oi56.tinypic.com/20j6cdj.jpg
:( :( sad: http://oi52.tinypic.com/2my3x3b.jpg
:D :D biggrin: http://oi52.tinypic.com/157ek4h.jpg
:P :P razz: http://oi54.tinypic.com/iwkj05.jpg
;( ;( cry: http://oi51.tinypic.com/wr8e1.jpg

Smileys in my example(s) are uploaded to tinypic.com. It is better to images them for example to your Picasa-albums and change the urls accordingly.

A post from past

Background

I started writing a blog in Finnish some time after I was diagnosed with Multiple Sclerosis. Unfortunately I had had the disease for a long time, and it was already in secondary progressive stage, when diagnosed. I had already been on sickness pension because of my condition for a couple of years. I began using medical cannabis to alleviate pain and other symptoms. And the blog was about this, multiple sclerosis and medical cannabis.

First I had my blog in a Finnish cannabis forum website, where I installed Wordpress. Before I had to stop working, I was an enterpreneur and a programmer. I very much like programming. Custom installation of Wordpress was easy to modify.

After I got an official recipe for medicinal cannabis Bedrocan, I decided to "move" out from the cannabis forum website, and created a new, more personal blog in Wordpress.com. This was in February 2011. It looked first good, customization possibilities were quite limited but you could get around. But summer 2011 they for example blocked all iHerb.com-links. I wanted to tell my readers, what products I used from there, and without the links it was not working. So, pack your bags, and move to...

Blogger

I exported all Wordpress.com posts, transformed those to Blogger import file and imported to my new blog here. Customization possibilities are good here. But some things are missing or don't work. For starters I run into:

• no smiley replacement (i.e. replace chars :) by emoticon image)
• you cannot show your posts in chronological order, which you can in wordpress[.com/.org]
• Navbar search don't find posts that over week older than blog's creation date (that's why this posts date is in past)
• even the sidebar search widget did not work for me

My first big hack was the chronological posts hack. Many people miss that feature, so I decided to blog about it in English in my new Blogger blog. But then I came up with solutions to the search problems... and who knows what in the future...

Idea

So I decided to make this new blog, in English and dedicated to all sorts of Blogger tips, so my other blog won't clutter with Blogger tips. Yes, this is Yet Another Blogger Tips Blog. YABTB.blogspot.com. I created this blog September 26th 2011. Welcome. Hope you like these tips. If you do, please share the address.

Disclaimer

I have multiple sclerosis, and even I like programming I am often fatigued and cannot spend much time at computer. So I give these tips "as is", without a promise for support, if you cannot make them work. Many of the tips I implement on this blog, and you can see them working here, and you can look the source code of the pages.

My nickname mspotilas/MS-potilas means multiple sclerosis patient in Finnish.