Commenting on Blogger with "Emoji" ... Got it done!

2

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!

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

The final edits I will be using on my friend Ed's blog(s) :

Final Version of modified script is located at “Blogspot Emojis, Emoticons and Special Characters Script as used on our Blogs”).

  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!”

SUCCESS!

Note: UPDATED I did indeed add the commenting system to this blog…... Early on the following results were achieved while working on a friend's blog that I manage. To view the results… “Seeing Is Believing???” ... http://www.edward-t-babinski.blogspot.com/2016/03/pawn-sacrifice-how-bobby-fischer.html and check out one of the full posts. The commenting system should be available for review.

After many hours... a couple of days... hitting on dead ends on the web, and experimentation with Blogger's template, I now have Emoticons and my own unique tweaks to the script.

First, the source for the awesome scripting belongs to these two sources:

  1. “How to Add Smileys on Blogger”, allblogsolution.blogspot.com

    Not much effort was required on my part.

    A single line of script is placed above the </head> tag:

    … then “copy and paste” script below … above the </body> tag and it was done.

    Awesome deal.

    I had attempted other methods, via “free script” sites over the past couple days, and was left with the impression everything out there is a scam. But after failing at my attempted methods (see below), I decided I'd give it one more shot to try the web again, for an honest script source.

    This script worked unbelievably well, perfect for what I personally wanted to do: Add HTML “Special Characters” and make them large enough to view in a legible manner. (See below for my account from earlier tonight of trying (mostly unsuccessfully) to manipulate the Blogger template to insert HTMLicons) … specifically, to use HTML “Special Characters” … placing them directly above the comment section so visitors can “Copy and Paste” inside their comment just like they would an emoticon.

    This script took care of that matter as well.

    I modified the handy text lines that the author of the Script included!

    Here's my modified code that goes directly above the “</body>” tag:

    With further room for even more modifications.

    The blog had a black background which wasn't the right fit for the emoticons, so that had to be changed on the template with some tweaking of the CSS and I found the solution for that at the following link:

  2. Change Comment Text Color and Background in Blogger Dynamic View, southernspeakers.net

    However, even with the new CSS code to style the background to white, I had to go to the section which was previously there and mod the template. I still had to go in and remove some of the template code, for example,

    }#comments {
  background: $(comments.background);
  padding: 15px;
}

    was changed to

    }#comments {
  background: #ffffff;
  padding: 15px;
  color: #000000;
}

MEANWHILE... Earlier in the Evening

Not exactly there... but close.

Since HTML allows special symbols these days... a lot of special characters, its nice to include a list to copy and paste into the form.

I haven't perfected the code yet.

There were NO COMMENTS and the iframe with the special characters displays fine. But once you post a comment, the iframe disappears. No more Special symbols iframe. It goes caput... to see it again, you have to open a new post that has no comments.

I guess this is just the first hurdles of a work-around.

So, to get as far as I have, I will mention two modifications I applied to the Blogger Template.

The first bit of information I picked up was located at this link “Changing style for comment textarea”:

</head>

“...add this just before closing the <head> tag.”

As shown, it certainly does “style” the comment textarea.

But I sought to change the section above which is a built in, plain-text "Comment Message" which is found in your blog's “Settings > Posts and comments.” Anything beyond simple HTML used to format plain text, i.e., <b> for bold </b> is not allowed.

So, if an iframe is added, it's possible to create all sorts of “unique modifications” ... but I quickly noticed that blogger was blocking / preventing any active content, i.e., the div allowing normal scrolling.

Here's the code for the iframe within the template. And as anyone should know, you save a copy of the original before doing any modifications.

Unfortunately, as discussed, after the first post is made, the frame with special characters disappears. For now I don't know why and would like a permanent method for posting emoticons/special symbols, without necessarily having to go to outside sources like Facebook or social media apps.

The Scrolling Issue was fixed by implementing an easy script for Marquee Scrolling at this Quackit tutorial.

Blogger didn't allow the active content to occur in my iframe, but, it did at least... allow a scroll bar on the iframe.

Just for the record, for those who don't know, when you place an iframe into a site, modern HTML will display horizontal and vertical scroll bars on the frame which is a real nuisance. The code to solve this issue is by placing a tag within the style tags of your headers.

By placing “html {overflow:hidden}” in the target html page (your small html file to be placed within the window), including that tag in its headers prevents scroll bars from appearing on the edges.

Read More »
at 2 comments:
Subscribe to: Posts (Atom)