Archive

Posts Tagged ‘Character encodings in HTML’

HTML Code: “Tweet This!”

August 17, 2012 9 comments

Never become so much of an expert that you stop gaining expertise.
View life as a continuous learning experience.
~ Denis Waitley
Tweet this!

Always ready to learn new things, I find myself studying what I like and don’t like on blogs and websites. One of the things I like is the “Tweet this!” feature. They give a great quote. I love the quote. I want to tweet it, and voila!, they have a “Tweet this!” link all ready for me. Very cool.

So cool and techie that I wanted it. But how? How did they do it? Come to find out, it’s pretty basic HTML coding. If you’re even a bit familiar with typing in code, this won’t be a problem at all. You can copy, paste, and substitute your own text. Are you ready? Here we go!

THE CODE:

TYPE HERE WHAT YOU WANT TO TWEET Tweet this!

THE FOUR PARTS:

Part One:  TYPE HERE WHAT YOU WANT TO TWEET

This is where you’ll substitute whatever it is you want to. In the example that follows, I’m going to substitute in: No tears in the writer, no tears in the reader. No surprise in the writer, no surprise in the reader. ~ Robert Frost

Part Two: 

This will stay the same every time. The  code is the link that will direct you to Twitter to sign in and then send this tweet.

Part Three:  TYPE HERE WHAT YOU WANT TO TWEET via@YOUR-TWITTER-ACCOUNT “

Yes, you really are going to type right here what you want to tweet. This can vary from the actual words you typed in under PART ONE, but be sure you’re not changing it so much that the one tweeting it thinks you’re tricking them! In the example that follows, I’m going to substitute in: No tears in the writer, no tears in the reader. No surprise in the writer, no surprise in the reader. ~ Robert Frost via @RosieCochran

via @YOUR-TWITTER-ACCOUNT

I put my Twitter handle in there. You can sub in YOUR twitter handle—or you can leave this part off completely. Just be sure that at the end of this part that you don’t fail to keep the quote (  ) in there! Leaving it out will cause the HTML code to fail.

Part Four:  target=”_blank”>

I use the _blank target as this opens up Twitter on a new webpage in order to send the tweet. That means that after you’ve closed out from sending the tweet, my webpage should still be open in front of you. Yes, if we’re wanting traffic to our site, we don’t want people distracted and directed completely away from our website!

EXAMPLES:

The CODE with the example inserted…
(This would be under the TEXT tab in WordPress.com, where you type HTML code.)

No tears in the writer, no tears in the reader. No surprise in the writer, no surprise in the reader. ~ Robert Frost Tweet this!

…as it appears on the on the blog or webpage…
(This is how it would also appear under the VISUAL tab in WordPress.com.)

No tears in the writer, no tears in the reader. No surprise in the writer, no surprise in the reader. ~ Robert Frost Tweet this!

…and as it appears as a TWEET.

No tears in the writer, no tears in the reader. No surprise in the writer, no surprise in the reader. ~ Robert Frost via @RosieCochran

DRESSING IT UP:

Of course, once it’s done, you can center it, put it in a quote box, or whatever you want to do. See what I’ve done below!

“No tears in the writer, no tears in the reader.
No surprise in the writer, no surprise in the reader.”
~ Robert Frost
Tweet this!

WHEN THINGS DON’T GO AS THEY SHOULD…

If you type in the code, but it mostly disappears when you save it, it’s a sure sign that you’re omitting or adding something that you can’t. Type it again and compare it with the example under THE CODE. Some common errors are:

1) Omitting the quotation marks or carats.

2) Using quotation marks around the quote within the HTML code. The problem is that quotation marks are code and can only be used as required for the HTML coding.

For example, under PART THREE, type the following: No tears in the writer, no tears in the reader. No surprise in the writer, no surprise in the reader. ~ Robert Frost via @RosieCochran

Do NOT type in the following quotation marks: “No tears in the writer, no tears in the reader. No surprise in the writer, no surprise in the reader.” ~ Robert Frost via @RosieCochran

A lengthy explanation? Yes, it has become that. I trust that in short order you’ll be coding “Tweet this!” quickly and accurately!


ABOUT THE AUTHOR: Rosie Cochran

I’m a mother of four great sons. I’m a widow who has transitioned back into full-time missions with NTM as a staff writer in their communications department. I’m also an author of three Christian suspense novels: BetrayedIdentity Revealed, and A Murder Unseen. (Available at: Amazon.com.) Greater than that, I am a child of God with a passion for God, my family, and writing! If you want to connect with me, join me on TwitterFacebookGoodreads, and Pinterest. Interested in updates by email? CLICK HERE!

Have a question? Email Me!

Advertisements

How to Add an “E-mail Me” Widget

June 6, 2011 3 comments
Mail symbol

Image via Wikipedia (Public Domain)

Have you ever wondered how to add an E-mail Me widget in WordPress? Or maybe you are reading this and wondering what on earth a widget is! If you’re not sure what a widget is, click here on “What’s a Widget?” to find out. After you’ve been enlightened, and are so excited to start using widgets, you can come back here to make your own E-mail Me widget!

Making an E-mail Me widget is not difficult. It will involve needing to type in some HTML code, but don’t let that intimidate you, just follow the step-by-step directions below:

1) Go to your Dashboard.

2) Near the bottom on the left-hand side, click on Appearance, then Widgets.

3) Under Available Widgets, click and hold on Text, dragging it to your Sidebar.

4) Click on the down arrow at the right side of Text to open a text box to work in.

5) Under Title, type “E-mail Me.”

6) In the box below that, type in the following, substituting YOUR email address for the sample shown:

<a href=”mailto:yourname@gmail.com”>yourname@gmail.com</a>

7) Click save, click on the arrow to close the box, then go to your blog and test it out!

The advantage of keeping your e-mail address visible is for those odd times when the link fails to connect to the e-mail program. It gives your readers the opportunity to copy and paste your e-mail address if needed. However, if you don’t want your e-mail visible, you may substitute another phrase—just be sure to keep the first part to create the link! You may substitute another phrase such as “Click here to contact me!” for the last part, as shown below:

<a href=”mailto:yourname@gmail.com”>Click here to contact me!</a>

Now people can contact you directly with any questions. You can check out my E-mail Me widget on the right-hand side of my blog. For those using Blogger/Blogspot, this same coding can be used in the Text/HTML Gadget box.

Show/Hide the Kitchen Sink

Always on a quest to learn more, I was skimming through the WordPress help site for new nuggets of knowledge. The words were good, but up to that moment weren’t offering me anything I had not yet discovered.

It was a picture that caught my attention, a picture of the Add New Post screen with way more editing icons than I had yet to see—and that I had sorely missed since moving over to WordPress from Blogger several weeks earlier.

I mean, did I really have to go into HTML to make my paragraphs justified instead of centered, left-aligned or right-aligned? Did I really have to type HTML code to make headers? Obviously not!

How could I have missed the Show/Hide Kitchen Sink icon? Who knows? All I know is, I did. My duh moment has come and gone. I’m pleased to know that the small icon on the Visual screen at the far right gives me the whole kitchen sink of extra options.

With the kitchen sink thrown in, WordPress has an impressive list of posting capabilities, including the following:

  • Upload media in the form of images, videos and audio
  • Insert polls and custom forms
  • Bold, italics, strike-through, underlined and colored fonts
  • Bullets (numbered and unnumbered)
  • Blockquote
  • Right/left-aligned, center-aligned and justified text
  • Insert links and the “More” tag
  • Proofreading abilities
  • A formatting drop-down box
  • Paste plain text or from Microsoft Word
  • Remove formatting
  • Insert custom character
  • Outdent/Indent
  • Undo/Redo
  • Help! (A most wonderful icon!)

Impressive as the list is, I’m a tad surprised by the lack of an option for several of the most basic font types. Of course, should one really complain when WordPress has such a a great free service? Instead, I’ll be thankful there is the option of changing the font type by typing in the html code!

%d bloggers like this: