Call to Action

After reading this post you should be able to make “Call to Action” button on your post. In web terms, a call to action is usually an enticement for someone to visit a link, and that link is often designed to look like a button, ready to be clicked. Maybe you’d like visitors to head straight to your Services page? Or perhaps you’d like them to check out your latest recipe, or sign up for your newsletter?

Button Primary Scary Compact

gap
Contents πŸ”–

gap
Call to Action πŸ”–

CTA is a marketing term used extensively in advertising and selling. It refers to any device designed to prompt an immediate response or encourage an immediate sale. A CTA most often refers to the use of words or phrases that can be incorporated into sales scripts, advertising messages or web pages that encourage consumers to take prompt action.

Click Me! or Click Me!

Between the two clickable text, which one make you want to click more? I’m certain that you will click the text with button shaped background, because it’s more interesting. Although it’s not guaranteed that your link will be clicked. Let’s see how this can be achieved in your post.

gap
Button πŸ”–

Open your post editor and go to HTML tab. Create an HTML element and add class attribute and give button value to it. <a href="link" class="button">.

Please note that your button style maybe will only available from the reader, when you open your post from the reader. The class button really depends on your theme or css files that loaded in your page. You can force this to work using Inline Style method.

There are places that your post will probably be shown like in th reader, your site or mobile applications. In the current WordPress.com system this inconsistency can be prevented using 2 combined method, Inline Style and Classes.

gap
Inline StyleπŸ”–

The inline style is specific to the tag itself. The inline style uses the HTML style attribute to style a specific tag. This is not recommended, as every CSS change has to be made in every tag that has the inline style applied to it. The inline style is good for one and individual CSS change that you do not use repeatedly through the site.

There are some ways to apply CSS to your page: Internal Stylesheet, External Stylesheet and Inline Styles. In this case, you only have the Inline Style option. How to do the inline style? You just need to add the style attribute to your tag.

<a href="your.site.url" class="button" style="border: 1px solid black;padding: 4px;">Text Label</a>

Above code is just an example on how to apply inline style, for the complete syntax you can go to more buttons section.

gap
More Buttons πŸ”–

  1. button
  2. button is-primary
  3. button is-scary
  4. button is-compact

<span class="button" style="vertical-align:baseline;background:white;border-color:#c8d7e1;border-style:solid;border-width:1px 1px 2px;color:#2e4453;cursor:pointer;display:inline-block;margin:0;outline:0;overflow:hidden;font-weight:500;text-overflow:ellipsis;text-decoration:none;box-sizing:border-box;font-size:14px;line-height:21px;border-radius:4px;padding:7px 14px 9px;-webkit-appearance:none;-moz-appearance:none;appearance:none;">Button</span>

<span class="button is-primary" style="background: #00aadc;border-color: #008ab3;color: #fff;border-style: solid;border-width: 1px 1px 2px;cursor: pointer;display: inline-block;margin: 0;outline: 0;overflow: hidden;font-weight: 500;text-overflow: ellipsis;text-decoration: none;vertical-align: top;box-sizing: border-box;font-size: 14px;line-height: 21px;border-radius: 4px;padding: 7px 14px 9px;-webkit-appearance: none;-moz-appearance: none;appearance: none;">Primary</span>

<span class="button is-scary" style="padding: 7px 14px 9px;vertical-align: baseline;color: #d94f4f;background: #fff;border-color: #c8d7e1;border-style: solid;border-width: 1px 1px 2px;cursor: pointer;display: inline-block;margin: 0;outline: 0;overflow: hidden;font-weight: 500;text-overflow: ellipsis;text-decoration: none;vertical-align: top;box-sizing: border-box;font-size: 14px;line-height: 21px;border-radius: 4px;-webkit-appearance: none;-moz-appearance: none;appearance: none;">Scary</span>

<span class="button is-compact" style="vertical-align: baseline;padding: 7px;color: #537994;font-size: 12px;line-height: 1;background: #fff;border-color: #c8d7e1;border-style: solid;border-width: 1px 1px 2px;cursor: pointer;display: inline-block;margin: 0;outline: 0;overflow: hidden;font-weight: 500;text-overflow: ellipsis;text-decoration: none;vertical-align: top;box-sizing: border-box;line-height: 21px;border-radius: 4px;padding: 7px 14px 9px;-webkit-appearance: none;-moz-appearance: none;appearance: none;">Compact</span>

Try this link if you can’t see above code.

Misconception between Me and a WordPress.com Site, Probably

I write about me in the About Page of my blog and that is just wrong! But how should I know? It’s simple, you are a person or a internet user and your blog is the product that you’ve created. Write your blog’s information in the blog’s about page, and set up your profile in the me section or gravatar.

πŸ”– Contents

MeπŸ”–

I create a new account on WordPress.com and I have to create a site. So I fill in the inputs, one of them is the site name, after done configuring the site, I am directed to a new screen to create an account. I have some input boxes and one of them is login name, and it is already filled with the same site name, I should change it to a user related name, it is for account login not a site login right?

I successfully created my account and site, the first thing I want to do is changing my profile picture, because that is very important. I see the user menu on the right top side after the bell icon on my page, I click it. I am in my profile page wordpress.com/me, I see boxes about me like first, last, public display name, and About me textarea ← this is where I should write about me as a person, right? And then I see a text after those fields that say, “This information will be displayed publicly on your profile and in Gravatar Hovercards.

GravatarπŸ”–

I go to your profile link and it directs me to a whole new domain, en.gravatar.com/{username}. It’s not WordPress, what is this? It’s gravatar.

A Gravatar is a Globally Recognized Avatar, gravatar is a free service for site owners, developers, and users.

I try to access the gravatar alone without login and I can only create a gravatar account when I create a WordPress.com account, I am confused. I want to create a gravatar account but I have to create WordPress.com account which make me creating a site or blog. But I already have my account and I login using it. Later I find out that this is called WordPress.com Connect.

WordPress.com Connect πŸ”–

Chances are that you’re here because you use (or would like to use) one of the fancy services created by Automattic β€” perhaps VaultPress, Akismet, Polldaddy, Gravatar, IntenseDebate, or a third-party service β€” and you’ve been asked to create or log into a WordPress.com account to do so.

With WordPress.com Connect, one username and one password allows you to access these services. You save time and hassle not having to maintain and remember unique login credentials for each service.

Continue, I log in the en.gravatar.com, I need to authorize the app because it is a new connection between apps, WordPress.com and Gravatar. I go to My Profile section and there are another inputs, it’s already filled with my inputs in the wordpress.com/me page. I try to change the records and you know what, I visit wordpress.com/me again and see the records changed just like my changes in the gravatar. I become more confused, is it the same thing? WordPress.com == Gravatar?

Profile Hovercards πŸ”–

I have made some posts and I try to visit one of my post. In the post page I see a section called published by. I see my avatar there, I move my mouse pointer to the avatar cause I want to know if this works like facebook, you know, when you hover someone profile picture you see a hovercard of that person and yes there it is a hovercard for my avatar. If you don’t see yours check yoursite.url/wp-admin/ β†’ Settings β†’ Discussion β†’ Avatars. ← this thing is not appear in my new WordPress.com calypso site setting, I need to go to the old backend.

gravatar-hovercard

There is also a View Complete Profile link, it directs me to my gravatar profile page en.gravatar.com/{username}, and that is how people should see my user profile. So, what should I write in the blog about page?

About Page πŸ”–

I should write anything about what my blog is all about. If I want to know the detail about a person I should visit their gravatar profile page.


Nothing is wrong πŸ”–

It is probably just not the best practice of using the platform. In the new WordPress.com I can still use the old stuff, so I guess the system is not changed entirely it is just still in the phase of migrating so in the future it will be more changes and updates. What about you? Do you have similar impression with mine? I’d like to know if you have similar or different experience and approaches with me.

Falling Snow until January β„️

You can add Falling Snow on your WordPress website until January 4th. You can go to My Sites → Settings → General → Site Profile → Holiday Snow (Click the toggle and Save Settings) or You can go to {your-site.wordpress.com}/wp-admin → Settings → General → Snow (Check the checkbox input and Save Changes), after that You can visit your website URL and the snow should be falling.

view this post in a desktop browser for full experience

I have never seen snow with my own eyes, never touch it with my hands. It’s sad! I really want to experience snow. Probably I will add this to my new year resolution since I didn’t have one yet. Enough about the self pity, move on to the post. If you are interested knowing more about WordPress.com Holiday Snow feature keep reading…

Let it snow! Let it snow!

But now regardless of the weather conditions wherever you’re spending this holiday season, you can at least have snow on your blog! Go to your Dashboard, then Presentation, then click on Extras and you’ll see this:

extras-snow

Check the box, hit save, and you and your visitors will see small white flakes of snow coming down on your blog. (This works best if you don’t have a theme with a white background.) Much like snow in Houston, the flakes won’t stay long on the ground, I think because our servers tend to be a little hot. This feature will be available for a limited time only, on January 2nd it will disappear until next year, but just imagine it as our little present to you, an opportunity to spread a little cheer.

It’s been around for 10 years! Thank You WordPress.com!

It’s JavaScript

Now is the time for me to talk. After toggling the feature, the snow started falling in my site. What actually happened? I check the source of my page clicking Ctrl + u buttons combination on my keyboard, then in the new tab I click search shortcut Ctrl + f enter “script” in the bar, Enter a few times, I see this

script

I click the link, it’s opening a new tab

wp-js

It is JavaScript that make my page snowing! Is it what real snow looks like?

falling-snow


There is not much I can do to modify the snow in the page. I want more! So I created my own snow with help from http://www.schillmania.com/projects/snowstorm. The result just like this post featured image you can view the live version here. Happy holidays!

wp-admin Dashboard

What platform You use to open WordPress.com? I mostly use the website one. If You are like me How do You usually manage Your content? Do You know that You can hit the URL {your-site.url}/wp-admin? This will bring You to the backend of your WordPress site.

WordPress.com site administration has moved little by little from the WP Admin dashboard to the new-ish Calypso dashboard since it’s introduction two years ago. There are still many features that are ultimately handled in the WP Admin dashboard, even if they start out in the Calypso dashboard. Some examples include changing your site address, transferring site ownership, approving a new Viewer on a Private site, adding links to a blog roll, adding a poll to your site, disallowing comments on media files, emptying your site content without deleting your entire site, and many others.

A new user might not even know what wp-admin is. I’m new here but I have been familiar with WordPress, I usually try the WordPress.org and install it by myself. I just recently using WordPress.com and wondering the difference between them. I’m sure that they are both the same thing with different look and place. Now I’m going to talk about the wp-admin in more detail so if You are a desktop computer user and using the desktop website of WordPress.com You maybe want to read what I’m going to talk about.

Dashboard

There are few items I can see from my wp-admin dashboard like: welcome(I don’t actually know what to call this one), At a Glance, Quick Draft, Activity, WordPress Events and News, Your Stuff, Stats and What’s Hot.

Welcome

This section is just like a simple application greeting but it has some usable links like how to get started, technical questions, write a post, general settings, your profile, select theme, upgrades, WordPress.tv. I know some of them but I don’t even know what WordPress.tv is. I will probably check the link after this. The screen can also be hidden but I don’t know if I hide it how I bring it back, so for now I will just leave appear in my dashboard.

welcome

At a Glance

at-a-glance

This section has some info about Your writing content like How many posts, pages, and comments are in your site. It also has a brief information about what theme You use. Other than those, there are also the thing about akismet I don’t actually look up about this yet but in this screen it gives me the information spam comments. The last thing I can see in this part is Storage Space. I can see about this information from the Calypso, but the difference is this is more detail. I can see numbers from the wp-admin, if I look at the Calypso I will only see 0% but here I know the exact Byte.

compare-storage

Activity

activity

Activity box contains information about posts and comments, the recent published posts and recent comments on your site not comment that you’ve made in the platform. There is also tabs that can bring You to manage comments grouped by All, Pending, Approved, Spam and Trash.

Quick Draft

Me personally really like this draft thing than from the Calypso. It has really simple interface and doesn’t have automatic save feature (some time I will tell You why I don’t like the automatic save). And the most important thing is it works really well, when You Save Draft it doesn’t reload the whole page, it just load partially the Quick Draft and there it is the new Draft.

quick-draft

WordPress Events and News

events

You can organize an event through WordPress! I haven’t tried it, but based on this section I think I can. There aren’t any events scheduled near you at the moment. Would you like to organize one?. I would love to. There are some links like survey, Dev Blog, WPTavern, Matt: Design in Kentucky, Meetups, WordCamps, News. I don’t know any of them, I might try to checkout later.

Your Stuff

This is where I usually track what I was commenting. In the calypso I don’t see convenient way to do this. This part contains comment activity You’ve made or someone commented on your site. But the links for comment You’ve made for other site is not detailed, it just shows You the URL to the blog, not jump to the comment part.

your-stuff

Stats

stats

This is the only part where I prefer to use the Calypso. I believe that You can see everything about your site stats in there.

What’s Hot

WordPress.com Blog

whats-hot-blog

Latest

whats-hot-latest


Both versions will always be updated, the new one haven’t covered everything but it’s pretty, the wp-admin is powerful it is the base of the backend. I guess it worth checking out between the new and wp-admin once in a while.

HTML in Comment

Do You know that You can use HTML in your WordPress comment? There are 14 elements You can use to prettify your comments. The elements are a, abbr, acronym, b, blockquote, cite, code, del, em, i, q, s, strike, and strong. Some of them might also have attribute(s) that can be modified.

<a>

The <a> tag defines a hyperlink, which is used to link from one page to another. The most important attribute of the <a> element is the href attribute, which indicates the link’s destination.

In WordPress comment, this element has 2 attributes that can be used they are href and title. Fill the href attribute with some kind of URL and title attribute with a related title Specifies extra information about an element (displayed as a tool tip) .

<abbr> & <acronym>

The <abbr> tag defines an abbreviation or an acronym, like “Mr.”, “Dec.”, “ASAP”, “ATM”.

Tip: An abbreviation and an acronym are both shortened versions of something else. Both are often represented as a series of letters.

Marking up abbreviations can give useful information to browsers, translation systems and search-engines.

The elements have one and only attribute that can be used for the comment and that is title. This attribute works the same behavior with <a> tag, when You hover it, the tool tip will show You content of the title. Those tags are similar, probably the same, but when You are writing your own HTML page You might want to use only abbr tag. because…

The <acronym> tag is not supported in HTML5. Use the <abbr> tag instead.

<b>, <strong>, <i> & <em>

These elements are Formatting elements. <b> similar with <strong>, <i> similar with <em>. <b> means bold, <strong> also bold but with added semantic “strong” importance. <i> means italic, <em> also italic but with added semantic importance.

Here is some examples of combination from the elements.

no format = no format.
<b>bold</b> <strong>strong</strong> = bold strong.
<i>italic</i> <em>em</em> = italic em.
This sentence is important but not as important as this.

<blockquote>, <q> & <cite>

A quotation is the repetition of one expression as part of another one, particularly when the quoted expression is well-known or explicitly attributed by citation to its original source, and it is indicated by (punctuated with) quotation marks.

Paragraph above is quoted from wikipedia. I use a special element to make the appearance different with other section. I use <blockquote>tag. <blockquote> and <q> tag are the same, the difference is <blockquote> used for a long quote, and <quote> for shorter version of quote. I personally use <blockquote> in a self paragraph, and <q> for quoting a sentence inside a paragraph.

Those two tags, has an attribute that can be filled. The attribute is called cite, it usually has a value of a URL which means Specifies the source of the quotation. The attribute can be a self tag called <cite>, I haven’t actually use it a lot, I just usually use the quoting tag directly, but for example most of my references is taken from w3schools.com.

<code>

I should love this element the most. This element is me, haha.The <code> tag is a phrase tag. It defines a piece of computer code. This element make a block of text pretty different, if we take a look at other elements, this is the only element that change the background.

This element has an inline display, so if You want to make the piece of code more visible You might want to add more spaces between before and after block.

<del>, <s> and <strike>

Last but not least, for a strike through decoration text we can use these elements. The only element that has attribute that can be modified is <del> element. The attribute is datetime, if You want a precise thing for you deletion thing, You can use this element with the attribute datetime even though the format is pretty hard to memorize YYYY-MM-DDThh:mm:ssTZD.

I don’t use this kind of element so much, but maybe if You are working in a project and need versioning, You can use these element to mark that something has changed. Or, just use it to make your text noticeable in the comments.


So, now is the time to try these elements in the comment. I haven’t tried much
but I might add a comment to this post after.