Blogspot Emojis, Emoticons and Special Characters Script as used on our Blogs

TO ADD EMOJI TO YOUR BLOGSPOTS FOLLOW THESE INSTRUCTIONS

  1. Click to view Google Apis Javascript that is to be placed directly above “</head>”

  2. Install the Emoticon Javascript that is to be placed directly above “</body>” tag.

  3. Make sure “Embedded Mode” is turned on and “SAVE” your template.

THAT'S IT!

Well, for the most part…

There's a slight bug (if comments already exist on the page, the emoticon box floats to bottom of the page. You want them right above the comment box). That little bit in the template needs to be fixed. This Blogspot, “Eutechtics” takes care of giving a quick fix!

And if you want a little additional styling information then read on...



This is a highly modified version of the original script found at (“How to Add Smileys on Blogger” at allblogsolution.blogspot.com) and also including many other scripts from varied sources, and myself --to use on our own sites. Information on original sources for code and additional notes can be found at the older link, below:

  1. (Updated Page and New Code): “Blogspot Emojis, Emoticons and Special Characters Script as used on our Blogs”

  2. (Oldest Page): “Commenting on Blogger with "Emoji" ... Got it done!”

Fix the Comment Section to white background (#ffffff) and style the “Comment Editor” to match emoticon edges.

This script goes right above the closing </head> tag.

The following code wholesale replaces the “/* Posts and /*Comments” section between <head></head> tags of template. Replace both sections with the following code. (Code may have to be tweaked if color codes are different from this blog template.)

 

Add Emoticon Script Code (Part I of II) above </head> closing tag.

The following Javascript is pasted directly above the closing </head> tag.

 

Add Emoticon Script (Part II of II)

This script is pasted above the closing </body> tag.

 

Gradient Editor Background

The “Gradient Editor” background image can be produced on Photoshop. I've uploaded a copy of the *.psd file to this location, 55k file size, (gradient-editor.psd).

You'll have to find out the darkest and lightest (HTML # equivalent) colors on your blog, and apply them to the gradient tool.



Most Recent Updated Edits (5/3/2016)

Here is the latest way that I have modified scripts/code on the blogger to color coordinate the blogger comments to our sites. This is from my friend Edward's blog(s) which contain a different, green, color scheme than this blog.

To achieve the "Gradient Border" I did some study, and came to this link: Creating Gradient Borders Using CSS3. The code that I used on our blog template was as follows:

 

Editing the Emoticon Form

This is the code (See Earlier Notes) that was pasted above the </body> tag in the template. I have modified it again.



Most Recent Updated Edits (5/4/2016)

I have updated the script again, to where it is more personal for our blogs. Just a note: these edits will not take effect on this blog or other blogs that I manage, as long as text is included in these two fields and saved to the template.

Hence, by leaving the quotations of the Text/Message lines empty, this screen shot shows what is preset in the source javascript to display... since other of our blogs do contain text in those fields, the template text will over-ride the default text message.

Therefore one main javascript source can be used, as long as messages within the blog template are customized to over-ride the javascript source default text/message lines.



Most Recent Updated Edits (5/5/2016)

Here's the latest edits to the script. I like the script to be more personalized. To modify the text lines on other blogs, the following would be done...

The script source currently goes in the order as follows:

h=j.topText = the top text that says, "Thanks for visiting Ed's blog..."
b=j.bottomText = "This script was modified for use on our personal sites..."
a=j.emoMessage = "Type a space, then select emotion..."
s=j.middleText = "Special characters line..."

I've modified the template several times, so the order may or may not be true to their name yet I may or may not want those particular statements to display on my blog...

So, for Ed's blog, all that is needed in the template are empty quotation marks. The following establishes the source' text lines are to be used and not over-ride the source javascript:

I am content with the text lines as they are for the most part but on my blogs, which are not associated to Ed, I modify the Text line to where it is personalized to my blogs and not mention his name. Therefore, this is what I will do:

I've made an edit to "topText" which will prevent Edward's name being mentioned. The other lines are okay with me as they are, and I am content with the order they are arranged so by leaving blank quotes... the default lines of the source javascript will display in the order I placed them.



LAST and FINAL Edit Updates (5/6/2016)

Note: The color code combinations shown below, apply to *THIS* blog (blue) and not to the green blog.

Instruction #1

To obtain a Comments template just like our's place both the following:

  1. “comment-editor” style tag code, &
  2. Google Query Javascript

above </head> tag in your blog template. Be sure to place these pieces of cover above </head> and not below it.

Instruction #2

Place the following code above the </body> tag in your template.

Also to be certain your threaded comments match the color of your comments background, be sure to search template for “.comment-thread.inline-thread” and edit your background color :

Use your HTML Editor to locate this line in the template. This prevents the emoticons vertical alignment from displaying improperly and fastens the emoticons above the comment editor.

document.getElementById(domId).insertBefore(replybox, null)

And replace it with this line:

document.getElementById(domId).insertBefore(replybox.parentNode, null)

 

Instruction #3

Make Certain “Embedded” Mode is on for Posting


I have embedded the code above on another blue blog. This is the result:

To obtain the solid pastel backgrounds and gradient border like our blogs, you will need to replace the Comments attributes.

That should be it! For additional notes about editing, scroll through the additional editing information above.

8 comments:

  1. Usually, you have to type a little bit, then ... a little message comes up, "More emoticons coming soon.." click out of it, and then, (p) :d the little code appears beside the emoticon to copy and paste. (b)

    ReplyDelete
  2. :relieved: :americas: :128406: :stuck_out_tongue_winking_eye: :128077: :revolvingheart:

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete