Right to Left

If you try to write in Hebrew, Kurdish (Sorani), Persian/Farsi, Aramaic, Azeri, Dhivehi/Maldivian, Urdu or Arabic you might want to read this post. My primary language is Indonesian, English is my second, and recently I’m learning Arabic. Indonesian and English are written in the same direction and that is left to right (ltr), but Arabic is different, it is written from right to left (rtl). While learning arabic, I tried to make a post and quoting some arabic texts in my post, here is how I write RTL language in my post…


🔖 Contents

gap
Auto Detection 🔖

I found it strange when I write arabic text, sometime it aligned to right, sometime to the left. After debugging, I think the WordPress.com web reader will automatically align text to the language in the post, when the post is considered using rtl language it will add direction properties to the container.

auto-right
When detected as RTL
no-auto
No RTL detection

As you can see in the image when it detected as RTL language the post story content block adding direction and style attribute to the element and filling the style attribute with direction and text-align properties.

gap
direction=rtl, {direction: rtl} & {text-align: right} 🔖

I don’t know the HTML attribute for direction and after I check it does nothing, so I will refer to dir HTML attribute. FYI, this attribute will give the element styles

element {
  direction: rtl;
  unicode-bidi: isolate;
}

I will just leave the dir attribute because I’m not using it, this is just for additional information.

debug-direction-text-align
Debugging direction and text-align

From the picture above I decide that I will only use the style direction: rtl; because the result is what I needed. There are a lot of technical things to deal with the rtl like unicode-bidi, but for now I’m happy enough with just that appearance. The period symbol on the div with the style direction: rtl; appear in the most left compared to the text-align: right;, so in my opinion you can ignore other attributes or properties. Now we can move on and make it real.

gap
Quoting Inline and Block RTL 🔖

As I was complained before about the difference view between reader, site, or mobile apps appearance I need to prepare classes and inline styles. In an inline view, I will need DayPicker--ar class which has the property direction: rtl;. In addition, you can add another class formatted-header__title to make the font size bigger font-size: 24px; because it appear pretty small compared to the English letters. For the inline element you can use span.

inline-block-rtl

inline-rtl-example

For the block view, I have some additional styling because I want it to appear more interesting than other parts.

block-rtl-example

It has different classes with the inline term-tree-selector for border style and notice__content to add more margin and padding. I used h1 for the rtl text part because I want to make the font even bigger than just 24px, probably. I separate the meaning with hr which is horizontal line.

code-block-rtl

Or you can just make the block rtl simpler with changing span into div from the inline.


Now I’m wondering why some languages is written right to left or left to right, or even why there are so many languages. I hope that my experience can help you if you had difficulties with writing RTL text.

Visit the Post I was talking about

السَّلَامُ عَلَيْكُمْ (assalamu ‘alaykum) means “peace be upon you”. When a muslim meet his/her brother/sister on the way, he greet him by saying this sentence or at least this is how I’ve been taught since I was little as a muslim kid. I’d like to greet you also in Islamic way because I’m planning on filling this blog with posts about Islam. […]

via May Peace be Upon You — Another Islam Student Blog

Advertisements

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!

The Liebster Award 🏆

Based on the post from a site called Wandering Waffles by Issy and Rishab, this blog have been nominated for its first ever blogger’s award: The Liebster Award. Thank You! 😄

I just found their blog about a week ago and I haven’t really read anything about it, I just opened the site in order to write this post so I can talk something about them, sorry 😁 and actually I want to know the reason why @wanderingwaffles nominate this blog…

About The Liebster Award

the-liebster-award

I will just quote from @wanderingwaffles about the award

So, what is the Liebster award? We bloggers do spend a lot of time reading, researching and writing, and we also like awarding ourselves. This is exactly what this award is. The name is inspired by the German word “Liebster” which means dearest, most beloved one, in English. This basically speaks for itself what the award is about 🙂


The rules for the Liebster Award are:

  • Acknowledge the blog that gave it to you and display the award
  • Answer the 11 questions that the blogger gives you
  • Give 11 random facts about yourself
  • Nominate 11 blogs and notify them of their nomination
  • Give these blogs 11 questions to answer

Answering Questions

  1. Q: Why is blogging important for you?
    A: I’m not good at communicating, hope with blogging I can improve that.
  2. Q: How well do your friends and family accept the fact that, you are a blogger?
    A: No one that know my real identity knows
  3. Q: How will you spend Christmas?
    A: I don’t celebrate Christmas, I just spent it with my family
  4. Q: Marvel or DC 😀 ?
    A: I’m Batman
  5. Q: What is your thoughts on Vegans?
    A: I wish I were one it seems healthy, but from my experience I need to pay more for a delicious vegan food
  6. Q: If you are working out, where do you prefer to do it? At home, in the gym or in the park?
    A: I do jogging, I can run every where usually near the place I stay
  7. Q: What would be that one food you can stop eating and never miss it? Why?
    A: Chicken – satay, fried chicken, processed chicken
  8. Q: What is your dream place to visit and why?
    A: Mecca. I need to complete my Islam
  9. Q: What would have you been doing, if you weren’t a Blogger?
    A: I don’t know. I don’t really like photography and to shy to record myself on a video.
  10. Q: Would you rather eat garlic and talk with your crush or
    A: or 😁
  11. Q: If you could chose one super power which one would it be? Why?
    A: Turn back time. I almost regret everything

Random Facts About myself

  1. Male
  2. 27 y.o.
  3. Moslem
  4. Indonesian
  5. Single
  6. 💛 Football
  7. ❤️ Math
  8. 💚 Computer Science
  9. Programmer
  10. Since 2011
  11. > 10 companies

The Blogs I’d Like to Nominate

  1. DystopianCitzn Blog ~ Ayah

    Book Reviews. Author Interviews. Short Stories. Journal. and much more

  2. A Booknerd Travels ~ Annie Yordanova

    books, travel, photography, lifestyle

  3. GunjanInks ~ Gunjan Rani

    Books, Poetries, and Stories.

  4. “The Interminable Thoughts✍️” ~ Dhilshaa❤

    You will never know untill you speak up, how effective your thoughts are….

  5. poetic essence ~ Nikita Arora

    Just explore whats inside you. And reach the forbidden. stay there for sometime; discover everything as real ; go through your zones ; fight till last breath ; at last when you get yourself home with full imaginative mind ; just sit down on a lonely place and spill it all out on papers . never follow whats other doing ; take the best and try to improve the worst; try to make comparison in you only . when you will succeed the life is yours. dont tell whole feelings write them in words. stick to the real points and ignore unwanted flirts . be straightforward till the ends . speak always truth ; as a result you will never have to bend . be nicer than nice ; be rhyming as flaws. be straightforward from mind and be clear from unwanted thoughts; here i write words experienced in real life ; straightforwardly in a particular line ! i write every type harsh; loving etc just waiting for you to read and if you ever change ; the pleasure is all mine.😇 yours – mystic

  6. This Girl’s Got Curves ~ Kimberly

    A navigation of the bipolar life

  7. yaskhan ~ Yasmin Khan

    Poetry, free verse, haiku, senryu, photography, books, art, philosophy , nature.

  8. Try to get it! ~ Sohair Ana

    A blog about Qoran and Islam

  9. Touch My Spine Book Reviews ~ Dani Pirok

    “☆~A Down to Earth and Honest Book Blog from a Free-Spirited and Custom Bilbliophile~☆”

  10. The Write Direction ~ Ayesha Syed

    ~Que Sera Sera~

  11. WELCOME TO CRYSTAL’S SITE(ORIGINALLY COUNTRY LIVING) ~ Crystal Stewart

    FAMILY, COUNTRY LIVING, ANIMALS AND MORE

My Questions

  1. What does your name mean?
  2. How do you name your blog?
  3. How important is it for you a blog description?
  4. When do you start blogging?
  5. What kind of content do you like to read from a blog?
  6. What does WordPress.com like feature mean to you?
  7. What does WordPress.com comment feature mean to you?
  8. What do you like the most from your blogging experience?
  9. What do you hate the most from your blogging experience?
  10. What is the most important thing in your life?
  11. Create your own question and answer it!

Some of the blogs I nominate have already created their Liebster Award post, but for you who read my post probably want to check their blogs, they are awesome! Once again thank your @wanderingwaffles for mentioning my blog on yours!

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.

Achievements

Do You know about achievements feature on WordPress? There are 4 kind of achievements You can get: Post Milestone, Bestday Likes, Likeable Blog & Followed Blog.

g6-4

I’m not sure about this though, this is based on my own experience, and the type of achievements I just group it by image URL that I track from notification. Based on google search I haven’t found a post that explain more about this feature but I found this

Once in a while, it’s important to stop, catch your breath, and look at your accomplishments before you move on to the next thing — to put a stake in the ground that says, “I made it this far!”

We all blog for different reasons. Some might chronicle their travel adventures, others might detail their culinary undertakings. If you find a post or a blog you enjoyed, like it or follow the blog — your action might send them a badge and make them smile. It’s easy to find great new blogs to follow using the Reader.

en.blog.wordpress.com

Pretty nice saying from the platform provider. By the way, this thing already out from 2012 and I just blogging using WordPress in the end of year 2017. I’m pretty happy about this, about everything in this blogging platform, I don’t know why I didn’t start my WordPress Blog long time ago. Okay, now I wanna reveal the real thing, the achievements…

Post Milestone

post-milestone

Just by writing posts You can get this kind of achievement, it will count the number of post You’ve published, this will pop up in to your notification when You’ve reached certain number of post up to 1000 (1, 5, 10, 20, 50, 100, 200, 500, 1000). I will get my second post milestone badge after publishing this post I believe.

Bestday Likes

post-milestone

After writing your post(s) You might get this achievement, but it really depends on the reader, You might get like if someone read your post and feel happy about it, just like when I’m reading other people post. If your post is good, I believe that it will get many likes.

Everyday You may get this notification, I guess this thing will compare your stats each day and if yesterday likes is lower than today it will reward You with this achievement. In my opinion, this kind of reward is really good to push You to be better than what You did yesterday, so You can be the best of You some day.

Likeable Blog

post-milestone

Another stats kind of achievement after Post Milestone and Bestday Likes. This reward can be achieved the same way with Bestday Likes but the difference is this will count all the likes of all your posts and its counting! (5, 10, 20, 50, 100, 200, 500, 1000) the same numbers with Post Milestone just no 1.

Followed Blog

post-milestone

The last (that I know) and the best! You start making post, You start reading others posts, You might get some likes back, and finally you get followers! This is part when You make a new post and it will appear to your followers reader, so be sure that You make a post that will make Your followers happy, cause that’s important, it’s like the point of creating blog on WordPress.

The numbers are the same with Likeable Blog reward but this is a trophy kind of achievement. I know this by seeing small icon in the bottom right of notification image, so its a win!


Thank you for the likes, Special thank You for following my blog, I’ll try my best to provide You better content every time, Have a nice day and keep posting!