Kunjungi Blog terbaru saya corkismet - Coretan Kang Ismet - dan tinggalkan jejak sobat disana.

Modifikasi Tulisan Arab Pada Komentar dengan jQuery

Memperbesar tulisan arab di blog atau komentar agar mudah dibaca.
arab komentar
Modifikasi Tulisan Arab Pada Komentar - Bermula komentar saya di blog +MUX SPARROW  aka Muxlimo dengan tulisan Arab, saya melihat bahwa komentar dengan menggunakan tulisan Arab akan sangat kecil dan sulit untuk dibaca.

Sebetulnya untuk mengganti font dan memperbesarnya hanya dibutuhkan class tertentu saja. Dalam postingan, ini tidak akan menjadi masalah, karena mudah menyisipkan class tertentu. Lain halnya dengan komentar, kita tidak mudah menyisipkan class seenaknya.

Oleh karena itu, dengan bantuan jQuery saya mencoba mengganti jenis font dan memperbesarnya sehingga mudah untuk dibaca. Penampakannya seperti pada screenshoot dibawah ini, sebelum dan sesudah menggunakan bumbu jQuery.

arab

Tulisan arab pada komentar ini sangat jarang digunakan, tapi apabila sobat membutuhkannya, silahkan simpan kode ini diatas </body>

<script type='text/javascript'>
//<![CDATA[
$('#comments p').each(function() {
    $('b[rel="arabic"]').replaceWith(function() {
      return $('<b class=\'arabic\'>' + $(this).html() + '</b>');
});
});
//]]>
</script>

Tambahkan CSS di atas ]]></b:skin> atau </style>

.arabic {
font-size: 22px !important; line-height: 34px !important;
font-family:'KFGQPC Uthman Taha Naskh', KFGQPC_Naskh, 'Traditional Arabic', Tahoma, sans-serif;
font-weight: bold;
direction: rtl;
display:block;
text-align:right;
}

Cara penulisan Arab pada komentar :

<b rel="arabic">Tulisan Arab di sini</b>

Semoga bermanfaat...

Untuk mendapatkan update terbaru di Dasbor Blogger, silahkan ikuti Blog ini

94 komentar

1. Komentar ini, diurutkan dari yang terbaru
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image quote pre code
  1. Hmmm....saya baru tahu ada kode direction, bisa dijelaskan lagi fungsinya kang...?
    1. Wkwkwkw...dapet kejutan hahahaha... siap kang bade nyandak jaliken heula :D :D
    2. kang ada beberaoa flatform yg gak bisa ditulisi html dan script itu gimana kang
  2. Sepertinya susah juga pertamaxx :D
    1. pake premium aja atau solar :)
  3. bikin blog orang arab maunya ini kang :D
    1. blog indo juga banyak yang share ayat2 atau hadits ko sob :)
  4. Absen dulu kang! [ mumpung masih dikit orang ]
    :D thanks udah share! postingannya langkah!
    - damai -
    1. pake bumbu JQuery ternyata :D
  5. 안녕하세요.....

    Test coment pake bahasa korea kang.....
    1. Hadeueuhh kang Heri, naon eta teh artina kang :D
  6. salam persahabatan semua ya dan makasih untuk ilmu hari ini ya kang ismet
    1. sama2 semoga bermanfaat
  7. sok jieun deui tulisan jepang tah, ti luhur k handap :P
    1. Cina/mandarin tiluhur kahandap mah kang ...
    2. ngerti dikit2 b.sunda, ko kayaknya beben koben nada komentarnya d beberapa blog sinis mulu ya? :P
  8. hadirrrrr! :D beu..sayah disebut-sebut di postingan.. #demampanggung XD
    boljug, Kang.. segera diterapin. Nuhun pisan kana perhatosanna, Kang.. Jazakallahu khairan, aamiin.
    1. Sip, Kang.. maknyossss :D
      http://muxlimo.blogspot.com/2013/10/abduh-tuasikal-aduh.html?showComment=1381114996391#c581456898202073996
  9. ma'nyosssssssssssssss
    1. nyus nyuuuuuuuuuuuuuuuuuusss :D
  10. Siipp kerennn kang ...
    hebat si akang resfect sama hal-hal yg kecil padahal besar
    1. kan kadang2 hal kecil yang menjadi besar, saur abah mah : kabeureuyan mah tara ku tulang munding, tapi ku cucuk peda... sanes kituu???? saneesss.. :D
  11. mantap kang, saya coba n maknyosssssss
    1. ok sob.. mantaps :)
  12. wih keren kang :D
    1. kereeeen apanya ya? hehhe
  13. Maaf mas, cuma mau kasih tau . . Pas aku pasang tulisan arab di Postingan ku . . Pas check valid atau gaknya . . itu masuk ke Bagian Warning mas :)

    #Info aja
    1. validasi apa ya? HTML5 atau CSS3?
      dipostingan ini saya menulis huruf arab http://blog.kangismet.net/2012/07/cara-menulis-arab-di-blog.html saya cek, valid html5 ko http://validator.w3.org/check?uri=http%3A%2F%2Fblog.kangismet.net%2F2012%2F07%2Fcara-menulis-arab-di-blog.html&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.3+http%3A%2F%2Fvalidator.w3.org%2Fservices, terus valid CSS3 juga http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fblog.kangismet.net%2F2012%2F07%2Fcara-menulis-arab-di-blog.html&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en, ada contoh ga yang error validasi?
  14. punten kang abdi bade ngiring promo bade ngajual template abdi nya kang, hehe
    Saya menjual template yang sekarang saya pake harganya pun cukup murah cuman 20 ribu via pulsa im3 no hp gw : 085797428225, untuk demo di -> http://yoga-tc.blogspot.com/
    [+] Untuk pengeditan template bisa ditanyakan kepada saya, hatur nuhun kang :D
  15. Mantab Pak Bos, ijin ctrl + D. barangkali kedepan butuh langsung kawulo terapken wonten ing blog :D Matur Nuwun :)
    1. monggo mas... :D
  16. mau coba, tapi nanti ada pengaruhnya sama berat blog..
    1. ringan banget ko :)
  17. Haekal Fikri
    Komentar ini telah dihapus oleh pengarang.
  18. Mungkin keren kalau dicoba :)
    1. silahkan dicoba :D
  19. Keren Mas... :)
    1. :D
  20. Kang.. cara buat page navigation di homepage blog akang gimana??
    1. banyak ko cara membuat page navigation di blogger
  21. Tapi gak paham untuk di baca kang :D
    1. hehhe.. buat yang perlu aja sob ;)
  22. absen dulu kang :) [ kan udah bilangin pasti banyak orang yg merosot ke bawah ! wkwkwk ]
    - salam damai -
    :D
    1. damai juga lah :)
  23. Saya Mau Nanya Nie Kang Kok Emoticonnya Masih Belum Muncul Padahal Udah Saya Rubah jadi false tapi nggak work juga, Nie Vinaluv Saya Dapat Dari trollvl :(
    1. coba aja dulu pake yang ini http://www.bloggertut.com/2012/11/vinaluv-rulers-threaded-comments.html
  24. izin bookmark dulu Kang :)
  25. Wah Kang Ismet Memang Luar Biasa,Ada Saja Tips Blogger Yang Unik
    1. biasanya mucul dari pengalaman, dan cari solusinya :)
  26. Bagus Kang jarang ada yang pernah ngasi tutorial seperti ini semua lengkap tampaknya disini.
    1. heheh.. soalnya belum ada, baru ini ko :)
  27. mantep, ijin copas kodenya.
    1. silahkan sob.. jangan lupa sumbernya ;)
  28. kang Ismet sy izin nyoba ya... شكرا
    1. silahkan sob.. :)
  29. mantap kang. nambah ilmu baru ni... :)
    1. hehe.. smoga bermanfaat sob
  30. Kang jika tulisan arab pada Postingan bagaimana ?, seperti Blog DuniaIslam punya kang Ismet, Arab'a itu bagus banget kang, Hehehehe Pertamaxxx :D
    1. CSSnya sama dengan yang atas, cuman pointnya aga digedein lagi... pas nulis tinggal nambah class deh :)
  31. coba ngetes disini aah شكرا كثير ا أخ
    1. cakep fontnya pun beneran naskh... petromaxxx kang!!! heuheu
  32. Menarik Kang
    Perlu di coba, saya baru tau terima kasih atas infonya
  33. بِسْــــــــــــــــــمِ اللّهِ الرَّحْمَنِ الرَّحِيْ
    Nyobaan Kang Ismet, kaya nya pasti Berhasil deh
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.