Cara Membuat Tulisan Arab di Blogspot Lebih Rapi (Pakai CSS saja)

Table of Contents

Tulisan ini membahas tentang bagaimana cara membuat tulisan arab di blogspot agar lebih rapi. Seperti biasa tulisan ini menjelaskan beberapa hal terlebih dahulu sebelum masuk ke inti pembahasan. Hal ini dilakukan agar pembaca lebih tahu bagaiaman alur dan cara secara tepat. Harapannya juga tahu struktur tentang blogspot.

qowim.net

Sudah lama saya cari-cari cara untuk merapikan tampilan font arab dengan model CSS, alhamdulillah dapat tutorial yang mudah dipraktikkan dari blog https://www.magelang1337.comdengan sedikit memodifikasinya

Pengantar 

Jika Anda salah satu penulis blog yang banyak mencantumkan tulisan-tulisan arab seperti kutipan al-Qur'an, Hadis, dan pendapat ulama sesuai teks aslinya, pasti membutuhkan tools ini. Tulisan arab tetap rapi dan bisa membuat pengunjung lebih nyaman ketika membacanya. 

Cara ini tidak memakai kode java script sehingga tidak akan memberikan dampak berat saat loading blog. Saya akan bagikan menggunakan kode CSS saja. Anda bisa membuat inovasi sendiri tentang hal tersebut. 

Contoh hasilnya bisa seperti ini QS. Al-Baqarah 61

وَاِذْ قُلْتُمْ يٰمُوْسٰى لَنْ نَّصْبِرَ عَلٰى طَعَامٍ وَّاحِدٍ فَادْعُ لَنَا رَبَّكَ يُخْرِجْ لَنَا مِمَّا تُنْۢبِتُ الْاَرْضُ مِنْۢ بَقْلِهَا وَقِثَّاۤىِٕهَا وَفُوْمِهَا وَعَدَسِهَا وَبَصَلِهَا ۗ قَالَ اَتَسْتَبْدِلُوْنَ الَّذِيْ هُوَ اَدْنٰى بِالَّذِيْ هُوَ خَيْرٌ ۗ اِهْبِطُوْا مِصْرًا فَاِنَّ لَكُمْ مَّا سَاَلْتُمْ ۗ وَضُرِبَتْ عَلَيْهِمُ الذِّلَّةُ وَالْمَسْكَنَةُ وَبَاۤءُوْ بِغَضَبٍ مِّنَ اللّٰهِ ۗ ذٰلِكَ بِاَنَّهُمْ كَانُوْا يَكْفُرُوْنَ بِاٰيٰتِ اللّٰهِ وَيَقْتُلُوْنَ النَّبِيّٖنَ بِغَيْرِ الْحَقِّ ۗ ذٰلِكَ بِمَا عَصَوْا وَّكَانُوْا يَعْتَدُوْنَ ࣖ - ٦١

Dan (ingatlah), ketika kamu berkata, “Wahai Musa! Kami tidak tahan hanya (makan) dengan satu macam makanan saja, maka mohonkanlah kepada Tuhanmu untuk kami, agar Dia memberi kami apa yang ditumbuhkan bumi, seperti: sayur-mayur, mentimun, bawang putih, kacang adas dan bawang merah.” Dia (Musa) menjawab, “Apakah kamu meminta sesuatu yang buruk sebagai ganti dari sesuatu yang baik? Pergilah ke suatu kota, pasti kamu akan memperoleh apa yang kamu minta.” Kemudian mereka ditimpa kenistaan dan kemiskinan, dan mereka (kembali) mendapat kemurkaan dari Allah. Hal itu (terjadi) karena mereka mengingkari ayat-ayat Allah dan membunuh para nabi tanpa hak (alasan yang benar). Yang demikian itu karena mereka durhaka dan melampaui batas.

Bagus dan rapi, kan? 

Oke langsung saja kita masuk pembahasan, sebelumnya agar tidak asal ikut-ikutan, berikut ini manfaat dari kode CSS font arabic.  

Apa Manfaat Memakai Kode CSS ini? 

Di antaranya adalah sebagai berikut

• Mudah diterapkan
• Membuat tampilan lebih rapi 
• Teks arab memiliki kesan yang lebih mudah keterbacaannya

Cara Membuat Tulisan Arab dengan Kode CSS

Silakan ke pengaturan HTML teman Anda dan temukan kode </style> lalu tempel kode CSS di bawah ini tepat di atas kode </style>

/* blockquote arab by:qowim.net*/
@font-face{font-family:LPMQ;src:url(https://cdn.statically.io/gh/jp-rafiqi/jp-project/9218c079/LPMQ.eot);src:url(https://litequran.net/assets/fonts/LPMQ.eot?#iefix) format('embedded-opentype'), url(https://cdn.statically.io/gh/jp-rafiqi/jp-project/9218c079/LPMQ.woff) format('woff'), url(https://cdn.statically.io/gh/jp-rafiqi/jp-project/9218c079/LPMQ.ttf) format('truetype')}
blockquote.arab {
  border:1px solid rgba(0, 0, 0, .1);
  border-radius: 8px;
  padding:10px;
  margin:1.5em 0;
  background:#fff;
}
blockquote.arab p:nth-child(1) {
  font-family:LPMQ;
  font-size:21px;
  font-weight:normal;
  line-height:2;
  text-align:right;
  direction:rtl;
  margin:0;
}
blockquote.arab p:nth-child(2) {
  position:relative;
  font-size:90%;
  background-color:rgba(0, 0, 0, .1);
  color:#222;
  border-radius:8px;
  padding:20px 10px 10px;
  margin:2.5em 0 0;
  text-align:justify;
}
blockquote.arab p:nth-child(2):before {
  content:'Artinya :';
  position:absolute;
  font-weight:bold;
  border-radius:50px;
  background:#fcfcfc;
  color:#222;
  padding:5px 15px 5px;
  top:-14px;
  left:15px;
}

Keterangan

Pada CSS ini mengikuti .blockquote lalu di dalam class-nya adalah "arab". Jadi cara penggunaannya nanti menggunakan css blockquote dengan class="arab". Selain itu, cara penggunaanya terdapat dua kode <p>; pertama adalah tulisan arab dan yang kedua adalah artinya. 

Masih kurang jelas memahaminya? 

Intinya begini aja, praktikkan langsung biar paham 😅😅😅 minimal memahami strukturnya terlebih dulu, intinya menggunakan css .blockquote dengan class="arab"

Setelah memasukkan CSS di template mari kita gunakan pada postingan blog.

Begini caranya

Klik Postingan baru dan masuk ke mode html jangan mode compose. Siapkan tulisan arab dan artinya lalu perhatikan cara menuliskannya seperti di bawah ini 

<blockquote class="arab"><p>Tulis tulisan arab di sini lalu tutup dengan kode </p><p>Masukkan artinya di sini lalu tutup dengan kode </p>
</blockquote>

Coba klik pratinjau agar mengetahui bagaimana hasilnya. 

Penutup

Segini dulu tentang cara membuat tulisan arab di blogspot agar lebih rapi. Semoga tulisan ini bermanfaat. Jika ada pertanyaan silakan cantumkan di kolom komentar.