Cara Mudah Membuat Tulisan Arab di Blog
Tulisan arab sangat diperlukan jika Anda menglola blog tentang islam, atau blog renungan dan berbagai ilmu agama islam lainnya. Jika mengelola jenis materi tersebut maka mau tidak mau kita dituntut juga untuk menuliskan tulisan arabnya secara langsung.
Misalnya kita ingin menuliskan tentang masalah pernikahan dan mengutip sebuah hadist tentang masalah tersebut. Rasanya ada yang kurang jika kita hanya menuliskan terjemahannya tanpa menuliskan bahasa aslinya yaitu bahasa arabnya.
Untuk membuat tulisan arab diblog sebenarnya tidak susah. Anda hanya memerlukan font tersebut dan kemudian memasangnya diblog. Namun yang perlu diperhatikan adalah Anda harus sudah mempunyai tulisan arab tersebut. Jadi disini kita tidak membuat tulisan arabnya menggunakan keyboard, tapi langsung mengcopynya. Jika Anda memiliki keyboar yang mendukung untuk membuat tulisan tersebut, itu akan lebih bagus lagi.
Baiklah langsung saja bagi Anda yang ingin membuat tulisan arab di blog tampil rapi silahkan ikuti langkah-langkahnya dibawah ini.
1. Silahkan copy dan paste CSS berikut ini di template blog Anda.
/* Tulisan Arab */
@font-face {
font-family: 'me_quran';
src: url('https://cdn.jsdelivr.net/gh/KompiAjaib/font@master/me_quran.eot');
src: url('https://cdn.jsdelivr.net/gh/KompiAjaib/font@master/me_quran.eot?#iefix') format('embedded-opentype'),
url('https://cdn.jsdelivr.net/gh/KompiAjaib/font@master/me_quran.woff') format('woff'),
url('https://cdn.jsdelivr.net/gh/KompiAjaib/font@master/me_quran.ttf') format('truetype'),
url('https://cdn.jsdelivr.net/gh/KompiAjaib/font@master/me_quran.svg#me_quran') format('svg');font-weight: normal;font-weight: 400;font-style: normal;
}
.text-arab{font-size:22px;line-height:2.2;font-family:me_quran,sans-serif;font-weight:400;text-align:right;direction:rtl}
/* Button */
@font-face{font-family:"Product Sans";src:url("https://cdn.jsdelivr.net/gh/KompiAjaib/font@master/product-sans-regular.ttf") format("ttf");font-weight:normal;font-style:normal;}
a.btn-download,a.btn-play,a.btn-google,a.btn-apple,a.btn-play:hover,a.btn-download:hover,a.btn-google:hover,a.btn-apple:hover{color:#fff}
.btn{display:inline-block;padding:10px 16px;margin:5px;font-size:18px;line-height:1.3333333;border-radius:6px;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid transparent;font-weight:500;text-decoration:none}
.btn:active:focus,.btn:focus{outline:0}
.btn:focus,.btn:hover{color:#333;text-decoration:none;outline:0}
.btn:active{outline:0;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}
.btn-play{color:#fff;background-color:#D32F2F;border-color:#C62828;padding:10px 16px 10px 40px;position:relative;font-family: 'Product Sans', Arial, sans-serif;font-weight:600}
.btn-play:focus{color:#fff;background-color:#C62828;border-color:#B71C1C}
.btn-play:active,.btn-play:hover{color:#fff;background-color:#C62828;border-color:#B71C1C}
.btn-play:before{content:"";color:#fff;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivmylamyH9i0Ngs6Emv0knn7-dLoL3-F_4XYYsFkeqh4jWjUCl9VPQHdt-ScgWAX6TKhcg3BJp7dsPlOdQKypbEkTEfXRA7rNkHsg0YLIFvl7l8uRIk7i2n2IXI65DcvWiOjFIuSbUk8zQ/s1600/play.png);background-size:cover;background-repeat:no-repeat;width:30px;height:40px;position:absolute;left:0;top:50%;margin-top:-20px}
.btn-download{color:#fff;background-color:#337ab7;border-color:#2e6da4;font-family: 'Product Sans', Arial, sans-serif;font-weight:600}
.btn-download:focus{color:#fff;background-color:#286090;border-color:#122b40}
.btn-download:active,.btn-download:hover{color:#fff;background-color:#286090;border-color:#204d74}
.btn-google,.btn-apple{color:#fff;background-color:#111;border-color:#000;position:relative;font-family: 'Product Sans', Arial, sans-serif;font-weight:600}
.btn-google{padding:15px 16px 5px 40px;}
.btn-apple{padding:15px 22px 5px 50px;}
.btn-google:focus,.btn-apple:focus{color:#fff;background-color:#555;border-color:#000}
.btn-google:active,.btn-google:hover,.btn-apple:active,.btn-apple:hover{color:#fff;background-color:#555;border-color:#000;}
.btn-apple:before,.btn-google:before{background-size:cover;background-repeat:no-repeat;width:30px;height:30px;margin-top:-15px;position:absolute}
.btn-google:before{content:"";background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZgBH39L-nMqKy1UJAW2oaTDliWCK0qsvH7f8oQvhsk5ATqgXrnhvjSMyZww7STs36TfaAsPWnXC8I8Xca0bmmBcqda41UY2daPFG7IOmxTyJonRniPF6LSrYBMB1xgrZ4aMOZD7XGJl8X/s30/nexus2cee_ic_launcher_play_store_new-1.png);left:6px;top:50%}
.btn-google:after{content:"GET IT ON";position:absolute;top:5px;left:40px;font-size:10px;font-weight:400}
.btn-apple:before{content:"";background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo6nST78K678RicydbpE0rbp_OVRecqoI6eV7QSLiJ-bwc1CRzvN-Zp9phjIx_0mu2EFh5nO4BCgaf4wFRa_lxFbMQdNED6T7ZEiiFtazfvUVMRFBsei1ip7EE1XTQi_6pTnyOyWQWdmc/s30/apple.png);left:10px;top:50%}
.btn-apple:after{content:"Download on the";position:absolute;top:5px;left:50px;font-size:11px;font-weight:400}
kbd{color:#333;display:inline-block;-moz-border-radius:3px;-moz-box-shadow:0 1px 0 rgba(0,0,0,.2),0 0 0 2px #fff inset;-webkit-border-radius:3px;-webkit-box-shadow:0 1px 0 rgba(0,0,0,.2),0 0 0 2px #fff inset;background-color:#f7f7f7;border:1px solid #ccc;border-radius:3px;box-shadow:0 1px 0 rgba(0,0,0,.2),0 0 0 2px #fff inset;font-family:Arial,Helvetica,sans-serif;font-size:11px;line-height:1.4;margin:0 .1em;padding:.1em .6em;text-shadow:0 1px 0 #fff;vertical-align:3px}
2. Kemudian untuk membuat tulisan arabnya gunakan kode html berikut ini pada mode HTML.
<div class="text-arab">
Tulisan arabnya disini
</div>
Maka hasilnya nanti akan seperti pada demo berikut ini.
Itulah cara paling mudah membuat postingan dengan tulisan arab di blog, semoga bermanfaat. Thanks to: Kompijaiab.com