Modifikasi Tulisan Arab Pada Komentar dengan jQuery

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...
Berita Lebih Baru Berita Lebih Lama
  • Adhy Suryadi
    Profil: https://www.blogger.com/profile/06846144400647921085
    07 Oktober, 2013

    Hmmm....saya baru tahu ada kode direction, bisa dijelaskan lagi fungsinya kang...?

    • Adhy Suryadi
      Profil:https://www.blogger.com/profile/06846144400647921085
      07 Oktober, 2013

      Wkwkwkw...dapet kejutan hahahaha... siap kang bade nyandak jaliken heula :D :D

    • Anonim
      Profil:
      13 Oktober, 2013

      kang ada beberaoa flatform yg gak bisa ditulisi html dan script itu gimana kang

  • Anonim
    Profil:
    07 Oktober, 2013

    Sepertinya susah juga pertamaxx :D

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      07 Oktober, 2013

      pake premium aja atau solar :)

  • Admin
    Profil: https://www.blogger.com/profile/08859897273726144063
    07 Oktober, 2013

    bikin blog orang arab maunya ini kang :D

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      07 Oktober, 2013

      blog indo juga banyak yang share ayat2 atau hadits ko sob :)

  • no data
    Profil: https://www.blogger.com/profile/13465796310160423114
    07 Oktober, 2013

    Absen dulu kang! [ mumpung masih dikit orang ]
    :D thanks udah share! postingannya langkah!
    - damai -

    • no data
      Profil:https://www.blogger.com/profile/13465796310160423114
      07 Oktober, 2013

      pake bumbu JQuery ternyata :D

  • Gupitan
    Profil: https://www.blogger.com/profile/01958676779323309263
    07 Oktober, 2013

    안녕하세요.....

    Test coment pake bahasa korea kang.....

    • Adhy Suryadi
      Profil:https://www.blogger.com/profile/06846144400647921085
      07 Oktober, 2013

      Hadeueuhh kang Heri, naon eta teh artina kang :D

  • Beben Koben
    Profil: https://www.blogger.com/profile/08754225607191914278
    07 Oktober, 2013

    sok jieun deui tulisan jepang tah, ti luhur k handap :P

    • Sopala Multapa
      Profil:https://www.blogger.com/profile/17709242066690693656
      07 Oktober, 2013

      Cina/mandarin tiluhur kahandap mah kang ...

    • Unknown
      Profil:https://www.blogger.com/profile/03530679018893168376
      07 Oktober, 2013

      ngerti dikit2 b.sunda, ko kayaknya beben koben nada komentarnya d beberapa blog sinis mulu ya? :P

  • MUX SPARROW
    Profil: https://www.blogger.com/profile/00849002680028641130
    07 Oktober, 2013

    hadirrrrr! :D beu..sayah disebut-sebut di postingan.. #demampanggung XD
    boljug, Kang.. segera diterapin. Nuhun pisan kana perhatosanna, Kang.. Jazakallahu khairan, aamiin.

    • MUX SPARROW
      Profil:https://www.blogger.com/profile/00849002680028641130
      07 Oktober, 2013

      Sip, Kang.. maknyossss :D
      http://muxlimo.blogspot.com/2013/10/abduh-tuasikal-aduh.html?showComment=1381114996391#c581456898202073996

  • M. Alex Joenaedi
    Profil: https://www.blogger.com/profile/00071593122995725134
    07 Oktober, 2013

    ma'nyosssssssssssssss

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      07 Oktober, 2013

      nyus nyuuuuuuuuuuuuuuuuuusss :D

  • Sopala Multapa
    Profil: https://www.blogger.com/profile/17709242066690693656
    07 Oktober, 2013

    Siipp kerennn kang ...
    hebat si akang resfect sama hal-hal yg kecil padahal besar

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      07 Oktober, 2013

      kan kadang2 hal kecil yang menjadi besar, saur abah mah : kabeureuyan mah tara ku tulang munding, tapi ku cucuk peda... sanes kituu???? saneesss.. :D

  • Unknown
    Profil: https://www.blogger.com/profile/03530679018893168376
    07 Oktober, 2013

    mantap kang, saya coba n maknyosssssss

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      07 Oktober, 2013

      ok sob.. mantaps :)

  • Anonim
    Profil:
    07 Oktober, 2013

    wih keren kang :D

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      07 Oktober, 2013

      kereeeen apanya ya? hehhe

  • Yandi Mulyadi
    Profil: https://www.blogger.com/profile/05345801809802904880
    07 Oktober, 2013

    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

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      07 Oktober, 2013

      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?

  • Unknown
    Profil: https://www.blogger.com/profile/01332270890841900429
    07 Oktober, 2013

    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

  • Aditya Nugroho
    Profil: https://www.blogger.com/profile/15468906802342533105
    07 Oktober, 2013

    Mantab Pak Bos, ijin ctrl + D. barangkali kedepan butuh langsung kawulo terapken wonten ing blog :D Matur Nuwun :)

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      07 Oktober, 2013

      monggo mas... :D

  • Unknown
    Profil: https://www.blogger.com/profile/11116488033415043533
    07 Oktober, 2013

    mau coba, tapi nanti ada pengaruhnya sama berat blog..

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      07 Oktober, 2013

      ringan banget ko :)

  • Haekal Fikri
    Profil: https://www.blogger.com/profile/14322228681475571349
    07 Oktober, 2013

    Komentar ini telah dihapus oleh Haekal Fikri sebagai penulis.

  • Gojek Ewako
    Profil: https://www.blogger.com/profile/09831389500263491584
    07 Oktober, 2013

    Keren Mas... :)

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      07 Oktober, 2013

      :D

  • Unknown
    Profil: https://www.blogger.com/profile/17484727763717603316
    07 Oktober, 2013

    Kang.. cara buat page navigation di homepage blog akang gimana??

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      07 Oktober, 2013

      banyak ko cara membuat page navigation di blogger

  • Anonim
    Profil:
    07 Oktober, 2013

    Tapi gak paham untuk di baca kang :D

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      07 Oktober, 2013

      hehhe.. buat yang perlu aja sob ;)

  • no data
    Profil: https://www.blogger.com/profile/13465796310160423114
    07 Oktober, 2013

    absen dulu kang :) [ kan udah bilangin pasti banyak orang yg merosot ke bawah ! wkwkwk ]
    - salam damai -
    :D

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      07 Oktober, 2013

      damai juga lah :)

  • Anonim
    Profil:
    07 Oktober, 2013

    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 :(

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      07 Oktober, 2013

      coba aja dulu pake yang ini http://www.bloggertut.com/2012/11/vinaluv-rulers-threaded-comments.html

  • Anonim
    Profil:
    07 Oktober, 2013

    Wah Kang Ismet Memang Luar Biasa,Ada Saja Tips Blogger Yang Unik

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      07 Oktober, 2013

      biasanya mucul dari pengalaman, dan cari solusinya :)

  • Anonim
    Profil:
    07 Oktober, 2013

    Bagus Kang jarang ada yang pernah ngasi tutorial seperti ini semua lengkap tampaknya disini.

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      08 Oktober, 2013

      heheh.. soalnya belum ada, baru ini ko :)

  • zigzoor
    Profil: https://www.blogger.com/profile/10438425858295508916
    08 Oktober, 2013

    mantep, ijin copas kodenya.

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      08 Oktober, 2013

      silahkan sob.. jangan lupa sumbernya ;)

  • beritaislam.org
    Profil: https://www.blogger.com/profile/08770337116677911509
    08 Oktober, 2013

    kang Ismet sy izin nyoba ya... شكرا

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      08 Oktober, 2013

      silahkan sob.. :)

  • el-azmie
    Profil: https://www.blogger.com/profile/02857721775921285356
    08 Oktober, 2013

    mantap kang. nambah ilmu baru ni... :)

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      08 Oktober, 2013

      hehe.. smoga bermanfaat sob

  • Shiro
    Profil: https://www.blogger.com/profile/05961364136323351496
    10 Oktober, 2013

    Kang jika tulisan arab pada Postingan bagaimana ?, seperti Blog DuniaIslam punya kang Ismet, Arab'a itu bagus banget kang, Hehehehe Pertamaxxx :D

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      10 Oktober, 2013

      CSSnya sama dengan yang atas, cuman pointnya aga digedein lagi... pas nulis tinggal nambah class deh :)

  • Fathurrohman
    Profil: https://www.blogger.com/profile/03742194426300063006
    10 Oktober, 2013

    coba ngetes disini aah شكرا كثير ا أخ

    • Fathurrohman
      Profil:https://www.blogger.com/profile/03742194426300063006
      10 Oktober, 2013

      cakep fontnya pun beneran naskh... petromaxxx kang!!! heuheu

  • Unknown
    Profil: https://www.blogger.com/profile/03028304356873120390
    09 November, 2013

    Menarik Kang
    Perlu di coba, saya baru tau terima kasih atas infonya

  • Unknown
    Profil: https://www.blogger.com/profile/03028304356873120390
    09 November, 2013

    بِسْــــــــــــــــــمِ اللّهِ الرَّحْمَنِ الرَّحِيْ
    Nyobaan Kang Ismet, kaya nya pasti Berhasil deh

Tambahkan Komentar
comment url
Terima kasih telah berkomentar di Blog Kang Ismet.
  • Untuk menyisipkan Gambar, Kode, atau Kutipan silahkan klik Tab Sisipkan di atas.
  • Emoji yang bisa digunakan pada komentar :), :D, :( <3, :love dan :top
  • Untuk melihat Komentar yang telah ditambah sisipan kunjungi DEMO
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Klik tombol Salin Kode! lalu paste ke kolom komentar.


image quote pre code
91 Komentar