Demo Cara Mempercantik Tulisan Arab di Blog

Tulisan ini menggunakan Font Amiri, untuk tutorialnya langsung scroll ke bawah.

اَلْحَمْدُ لِلّٰهِ رَبِّ الْعَالَمِيْنَ، وَبِهِ نَسْتَعِيْنُ عَلَى أُمُوْرِ الدُّنْيَا وَالدِّيْنِ، وَالصَّلَاةُ وَالسَّلَامُ عَلَى أَشْرَفِ اْلأَنْبِيَاءِ وَالْمُرْسَلِيْنَ، نَبِيِّنَا مُحَمَّدٍ صَلَّى اللهُ عَلَيْهِ وَسَلَّمَ وَعَلَى اٰلِهِ وَأَصْحَابِهِ وَالتَّابِعِيْنَ وَمَنْ تَبِعَهُمْ بِإِحْسَانٍ إِلىَ يَوْمِ الدِّيْنِ، أَشْهَدُ أَنْ لَا إِلٰهَ إِلَّا الله وَحْدَهُ لَاشَرِيْكَ لَهُ الْمَلِكُ الْحَقُّ اْلمُبِيْن. وَأَشْهَدُ أَنَّ سَيِّدَنَا مُحَـمَّدًا عَبْدُهُ وَرَسُوْلُهُ صادِقُ الْوَعْدِ اْلأَمِيْن. أَمَّا بَعْدُ فَيَا أَيُّهَا الْحَاضِرُوْنَ. اِتَّقُوا اللهَ حَقَّ تُقَاتِهِ وَلَا تَمُوْتُنَّ إِلَّا وَأَنْتُمْ مُسْلِمُوْنَ. فَقَالَ اللهُ تَعَالَى : يٰٓاَيُّهَا الَّذِيْنَ اٰمَنُوا اجْتَنِبُوْا كَثِيْرًا مِّنَ الظَّنِّۖ اِنَّ بَعْضَ الظَّنِّ اِثْمٌ وَّلَا تَجَسَّسُوْا وَلَا يَغْتَبْ بَّعْضُكُمْ بَعْضًاۗ اَيُحِبُّ اَحَدُكُمْ اَنْ يَّأْكُلَ لَحْمَ اَخِيْهِ مَيْتًا فَكَرِهْتُمُوْهُۗ وَاتَّقُوا اللّٰهَۗ اِنَّ اللّٰهَ تَوَّابٌ رَّحِيْمٌ

Cara Membuat Teks Arab di Blog

1. Buka Blogger, Tema -> Edit HTML
2. Simpan kode ini di atas ]]</b:skin> atau di atas </style>

   @font-face {
     font-family: 'Amiri';
     font-style: normal;
     font-weight: 400;
     font-display: swap;
     src: url(https://fonts.gstatic.com/s/amiri/v17/J7aRnpd8CGxBHpUrtLMA7w.woff2) format('woff2');
     unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC;
   }
   .arab{
   font-size: 26px;
   line-height: 48px;
   font-family: "Amiri","Traditional Arabic",Tahoma,sans-serif;
   font-weight: normal;
   text-align: right;
   direction: rtl;
   }

3. Simpan

Cara Menulis di Blog

Ketika menulis gunakan Tampilan HTML, formatnya seperti ini

<div class="arab">
  لَا حَوْلَ وَلَا قُوَّةَ إِلَّا بِاللّٰهِ العَلِيِّ العَظِيْمِ
</div>