بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم
QURAN. Dalam menuliskan sebuah Tulisan Arab dan Terjemahan ke Blog menjadi Rapi merupakan kesenangan tersendiri bagi umat muslim, dalam hal ini (Blogger, red). Bagaimana tidak, karena dengan rapinya sebuah tulisan arab dan terjemahannya, otomatis tulisan tersebut dapat terbaca dengan baik. Karena tidak sedikit, tulisan arab yang tertulis di blog secara awut-awutan, sehingga kita pun akan kesulitan untuk membacanya. Untuk itu, tutorial ini ada dan akan saya tulis malam ini.
Seperti diketahui bahwa dengan bahasa pemrograman yang sering kita bahas, tulisan ini ada dan akan menggunakan CSS sebagai dasar penerapannya. Kenapa tidak menggunakan Java, karena penggunaan Js, tentu memberatkan loading blog. Dimana memang kelemahan Js, seperti kita tahu memberatkan loading di blog. Struktur CSS yang ringan dan ramah di template blog, menjadi rangka dasar penerapan blockquote penulisan tulisan Arab dan terjemahannya.
Saya dan mungkin kalian terutama yang muslim, pasti membutuhkan tools ini saat menuliskan tulisan arab dan terjemahannya di blog kalian. Karena dengan tools ini, tulisan menjadi rapi dan kita bisa membaca tulisan arabnya dengan nyaman. Bukankah, membaca Al Quran dapat mendapatkan pahala yang besar untuk bekal kita kelak? Oke tidak lama-lama ya, kita langsung saja praktekkan tutorial ini malam ini juga.
Baca Juga :
- Cara Memasang Tombol Download Film Korea Beserta Keterangannya
- Update : Tutorial Membuat Efek Daun Berjatuhan di Halaman Blog Terkini
- Tutorial Memasang Ikon Follow Blog Melayang Floating Follow di Blog
- Script Untuk Mencantumkan Sumber Artikel Ketika Dicopy Paste
- Membuat Efek Bounce Memantul Pada Tombol Back To Top Blog
Membuat dan Merapikan Tulisan Arab di Blog dengan Blockquote
Seperti biasa backup dulu template kalian kalau mau utak-atik template ya. Begini caranya Back Up Template
1. Masuk ke DASHBOARD Blogger
2. Klik TEMA
3. Pilih SESUAIKAN kemudian pilih EDIT HTML
4. Temukan kode ]]><b:skin/>
5. Tempelkan kode dibawah persis diatas kode ]]><b:skin/> tadi. Letaknya di tengah-tengah dari struktur template blog ya teman-teman. Supaya gampang, langsung scroll ke tengah dan cari disitu atau cari dengan menekan Control + F di templatenya. Nanti juga akan ketemu disitu.
@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;
}Sudah itu saja yang tertempel di template. Untuk koleksi tulisan arab dan terjemahan, kalian bisa mampir di Qur'an Lite untuk menempelkan nanti di postingan. Nah untuk penulisan di postingan adalah seperti ini :
<blockquote class="arab"> <p>Tulis tulisan arab disini lalu tutup dengan kode</p> <p>Masukkan terjemahannya disini lalu tutup dengan kode</p> </blockquote>
Catatan : untuk penulisan blockquote harus disertai class ya teman-teman. Maksudnya ada class="arab"
Keuntungan menggunakan CSS blockquote Arab ini :
1. Tulisan menjadi rapi2. Memudahkan membaca Al Quran dan Terjemahannya
3. Mudah dalam penerapan CSS nya
4. Tidak membuat blog berat
5. Tampilan lebih eye catching
Contoh :
Surat Al Baqarah. Ayat : 143
وَكَذٰلِكَ جَعَلْنٰكُمْ اُمَّةً وَّسَطًا لِّتَكُوْنُوْا شُهَدَاۤءَ عَلَى النَّاسِ وَيَكُوْنَ الرَّسُوْلُ عَلَيْكُمْ شَهِيْدًا ۗ وَمَا جَعَلْنَا الْقِبْلَةَ الَّتِيْ كُنْتَ عَلَيْهَآ اِلَّا لِنَعْلَمَ مَنْ يَّتَّبِعُ الرَّسُوْلَ مِمَّنْ يَّنْقَلِبُ عَلٰى عَقِبَيْهِۗ وَاِنْ كَانَتْ لَكَبِيْرَةً اِلَّا عَلَى الَّذِيْنَ هَدَى اللّٰهُ ۗوَمَا كَانَ اللّٰهُ لِيُضِيْعَ اِيْمَانَكُمْ ۗ اِنَّ اللّٰهَ بِالنَّاسِ لَرَءُوْفٌ رَّحِيْمٌ
Demikian pula Kami telah menjadikan kamu (umat Islam) umat pertengahan agar kamu menjadi saksi atas (perbuatan) manusia dan agar Rasul (Nabi Muhammad) menjadi saksi atas (perbuatan) kamu. Kami tidak menetapkan kiblat (Baitulmaqdis) yang (dahulu) kamu berkiblat kepadanya, kecuali agar Kami mengetahui (dalam kenyataan) siapa yang mengikuti Rasul dan siapa yang berbalik ke belakang. Sesungguhnya (pemindahan kiblat) itu sangat berat, kecuali bagi orang yang telah diberi petunjuk oleh Allah. Allah tidak akan menyia-nyiakan imanmu. Sesungguhnya Allah benar-benar Maha Pengasih lagi Maha Penyayang kepada manusia.
Contoh lain di blog demo saya juga ada. Ini dia :
Sudah sekian dulu teman-teman tutorial kali ini. Silakan dipraktekkan dan tampilkan surat Al Quran favorit di blog kamu sebagai penyemangat ngeblog :D. Tak lupa pada penghujung acara, saatnya saya mengucap : "Shadaqallahul 'Adzim". Salam Blogger.
