You can actually write in Arabic letters easily in blog posts without the need to follow the guidelines that I will write. But you also need to know that maybe the Arabic script will look less neat or difficult to read because it uses the default font from the template used.
Of course this will annoy visitors a little, especially if the blog is managed specifically to discuss Islam or religious education, where every post must include a snippet of a verse from the Quran.
Therefore, I made this article to make it easier for you to display and make Arabic writing in blog posts neatly and comfortably when read.
For example, here is Arabic script using standard font without any code.
بِسْــــــــــــــــــمِ اللهِ الرَّØْÙ…َÙ†ِ الرَّØِÙŠْÙ…ِ
Meanwhile, if you use Arabic font and additional code to make it appear more presentable and efficient, it is as follows. You can see the difference, it looks more neat and comfortable to read. For more details, maybe you can just practice it on their respective blogs.
To see the results, please click the Demo button at the below. If successful, it will look the same as the demo below.
Demo
How to Write Arabic Letters on Blog
STYLE:01
Please enter the Blog Dashboard menu » Themes » Edit HTML , then save the following css code just below the code <style>.
/* TrickPk-arabic Text by TrickPK */ @font-face { font-family: KFGQPC Uthman Taha Naskh Bold; font-display: swap; src: url('https://cdn.statically.io/gh/MubassirUhban/Themezest/df79a8fd/UTHMANTN1B%20VER10_0.OTF') format('opentype'); font-weight: bold; font-style: normal; } .TrickPk-arabic { font-family: KFGQPC Uthman Taha Naskh Bold; font-size: 26px; font-weight: normal; line-height: 2; text-align: right; direction: rtl; margin: 1.5em 0; }
You can then edit the above code according to the information in the table below.
font-size: 26px: Change the number of this section to reduce or enlarge the text.
line-height: 2: Change the number of this section to adjust the line spacing between posts.
To apply it in a post, please return to the Blog Dashboard menu » Posts and create a New Post in HTML mode , then enter the verse or Arabic script you need into the article created by adding the calling code.
For example, I will write in Arabic "bismillah", so write it in the following code format.
<p class="TrickPk-arabic"> بِسْــــــــــــــــــمِ اللهِ الرَّØْÙ…َÙ†ِ الرَّØِÙŠْÙ…ِ </p>
Replace the Arabic text above with another Arabic text or snippet of the verse you want.
Only Blogs with an Islamic Niche
STYLE:02
For those of you who are running a blog with an Islamic religious niche, whose writings often add pieces of hadith and their meanings. Maybe you will like this, check out the demo below.
How, interested? if yes, please add more CSS code below just below the code<style>
/* Arabic Text by TrickPK */ .block-arab-TrickPk { border: 1px solid #eaeaef; border-radius: 8px; padding: 10px; margin: 1.5em 0 } .block-arab-TrickPk .arab { margin: 0 } .means-arab-TrickPk { position: relative; font-size: 90%; background-color: rgba(0, 0, 0, .05); color: #717174; border-radius: 8px; padding: 20px 10px 10px; margin: 2.5em 0 0 } .means-arab-TrickPk:before { content: 'Translated :'; position: absolute; font-weight: bold; border-radius: 50px; background: #fcfcfc; color: #333; padding: 0 15px 1px; top: -14px; left: 15px; }
Next, to apply it in the post, please enter the blog post menu with HTML mode and then place the code below wherever you want Arabic writing and its meaning appears.
<div class="block-arab-TrickPk"> <div class="arab"> Origional Text </div> <div class="means-arab-TrickPk"> Translated Text </div> </div>
According to the description, please change the color text yellow which is in the code above with a snippet of the hadith and its meaning, and try to see the results.
The code that I shared above will also work without problems on the AMP template, so for you AMP template users you can also apply this method.
If you still have problems with how to apply it, you can leave a comment below, I will help as much as I can. Thank you for visiting.