08 May 2009

Custom Font WordPress dengan Plugin TTF Titles

Custom Font wordpressSampeyan pasti pernah bertanya-tanya, kok blognya ndop huruf titlenya aneh begitu kayak cekeran ayam? padahal setahu saya, saya ndak punya huruf jelek kayak begitu deh di kompi saya. Hmm… kok bisa ya??

Hehehe… pernahkah anda merasa begitu?? (serentak menjawab, “TIDAAAAK!!!!”)

Appaaah? tidaaak? waddoh, saya salah mengira dong… tapi nggak papa, saya tetep mau sharing tentang custom font itu.

Oke, duduk yang manis ya adik-adik.. Mas ndop akan menjelaskannya kepada adik-adik sekalian…

eegghm…

  • Download plugin TTF Title-nya di sini
  • Seperti biasa, apload di directory/folder plugins cpanelmu, dan extractlah
  • Buka isi folder plugin ttftitle, trus pada folder cache, ubah chmodnya, ubah permissionnya jadi 777
  • Buka folder fonts, lalu Apload font pilihan anda
  • Mmm.. apa lagi ya, oh ya, buka dashboard wordpress blog anda, aktifkan plugin TTF title anda
  • Lalu berkunjunglah ke halaman Appereance > TTF Title. Lalu sampeyan bisa mengedit style dengan click edit sesuka anda

TTF Title plugin Tampilan di dashboard wordpress

  • Klik Make Default untuk mengaktifkan font anda
  • Lalu, ini langkah yang lumayan mbuletisasi. Edit pada index.php anda. Eh, sebelum itu, dibackup dulu isi index.php di notepad, biar nanti kalau rusak-rusak bisa dikembalikan lagi seperti awal.
  • Untuk mengganti font dengan huruf sendiri di setiap judul postingan, maka pada index.php, yang diedit adalah:

    <a href=”<?php the_permalink() ?>” rel=”bookmark” title=”Permanent Link to <?php the_title(); ?>”><?php the_title(); ?></a>

    Diganti menjadi:

    <a href=”<?php the_permalink() ?>” rel=”bookmark” title=”Permanent Link to <?php the_title(); ?>”><?php the_ttftitle(); ?></a>

    Jadi tulisan warna ijo the_title
    diganti menjadi the_ttftitle

  • Kemudian untuk mengubah font pada header dengan font sendiri, yang diedit pada header.php adalah

    <?php get_bloginfo(‘name’); ?>

    Ditambah dengan the_ttftext menjadi:

    <?php the_ttftext(get_bloginfo(‘name’)); ?>

    Untuk yang ini, saya belum mencoba, tapi kalau sampeyan mencobanya, saya yakin akan berhasil. Soalnya banyak yang berhasil.

  • Kemudian, untuk mengganti judul di sidebar dengan font sendiri, maka yang diedit pada widgets.php (ada di folder wp-includes) adalah

    $before_title . $title . $after_title

    Ditambah dengan the_ttftext dan false

    menjadi

    $before_title . the_ttftext($title, false) . $after_title

  • Tapi untuk widget rss, ternyata hasilnya rusak susu sebelanga! alias amburadul judulnya. Makanya khusus untuk mengubah judul RSS Widget dengan font sendiri, yang dilakukan adalah menuliskan sendiri judul widgetnya di photoshop atau MS paint, lalu disave dalam bentuk gambar. Lalu apload gambar itu di folder image theme kamu.

    Lalu pada style.css, ditambahkan style sebagai berikut

    .widget_rss h4 {
    text-indent: -9999px;
    height: 35px;
    background: url(folder-image-kamu/tulisankamu.jpg) no-repeat left bottom;
    display: block;
    }

    Untuk mengetahui id widget rss anda, bisa diketahui dengan view > source pada Mozilla Firefox anda.

    Contohnya, punya saya, kalau di view > source, widget rssnya berbunyi begini:

    <li id=”rss-411738461″ class=”boxr widget widget_rss“><h4 class=”widgettitle”>

    maka di style cssnya

    .widget_rss h4 {
    }

  • PENTING BANGET: sebelum mengedit, backup semua file php ke dalam notepad atau gimana lah caranya mendobelkan file anda. Jadi kalau-kalau nanti ada kesalahan, sampean bisa mengembalikan seperti semula.

Disclaimer: saya ndak mudeng php, saya hanya sharing saja terhadap apa yang telah saya lakukan di blog saya ini. Jadi jangan nanya saya tentang fungsi kode ini-fungsi kode itu, nanti saya njawabnya ngawur, mending nanya si mbah gugel. He knows e’rithing!

Oke selamat mencoba…

Muhammad Ali Mudzofar a.k.a ndop. Punya motto hidup: Think less feel more. Lebih banyak merasa, lebih banyak manfaatnya. Lebih banyak mikir? Cepet tua loh! #eh



83 KOMENTAR KAMU KOMEN YUK ↓

Biar keluar avatarmu, daftar di gravatar.com yah ^_^

  1. Sampeyan pasti pernah bertanya-tanya, kok blognya ndop… dst …Hehehe… pernahkah anda merasa begitu??

    Iya ndop… banyak yang beda di blog ini.

    (serentak menjawab, “TIDAAAAK!!!!”)

    Jangan sok berburuk sangka dong? :D

    posting terakhirnya al-sabaliny adalah: Mengelola Blog dengan Bantuan Google Webmaster Tools

  2. waduh, kodenya blocknya pake apa kemaren yach?

    posting terakhirnya al-sabaliny adalah: Mengelola Blog dengan Bantuan Google Webmaster Tools

  3. Blognya sampeyan benar2 ..seni banget dan kelihatan artistic.nggak kaku..benar2 mantap dan top banget
    Sukses selalu mas…

  4. @al-sabaliny: wakakaka… guyon kang…

    @Diah: thankyu ya Diah…

  5. blognya mas ndop udah semakin nyata menuju web 2.0 nih…
    tulisannya berseni sangat, tapi sayang dalam bentuk gambar, jadi tak akan terlihat keindahannya olehku ( coz, q pilih no load image di opera mini aku) :dance:

  6. yesssss,,, akhirnya di share juga nih
    langsung dipraktekin mas,,,
    saia kira,,, slama nih mas menggunakan
    teknik,, img src ternyata,, pake plugin,,
    he,,he,,,

  7. hyahahayahaya blog wp ku jadi sarang sepam, belum tak jamah, akeh gawean wkkwwk

    posting terakhirnya cebong ipiet adalah: Cara Withdraw Paypal ke Rekening Bank Lokal Indonesia

  8. ya ndop aku sempat heran bagus banget seh huruf titelnya

    hmmm
    sayang aku gak pake WP
    :)

    posting terakhirnya Rusa Bawean™ adalah: Teknik SEO: Bemain Keyword Rani Juliani dan Antasari Azhar

  9. teng kyu infonya.. kalo membuat readmore yang lagi jintrak-jintrak kayak di web ini gimana ndop..
    :ampun: :ampun:

    posting terakhirnya ifoel adalah: LIFE IS PRECIOUS

  10. Wes, aku sik kuesel mulih sekolah jam 5. Blog walking/ndelok2 thok nggih.

  11. ora kecandak karo utekku, ndop… :roll:

    posting terakhirnya grubik adalah: proporsionaL

  12. Keren ndop tutorialnya. lain dari yang lain font title postingannya.

  13. keren.. :cry:

    posting terakhirnya wildspeed adalah: Curhat#10 *Bikin Kaos Dapet Award..*

  14. Wah….. ndop,, blognya jadi beda banget..
    keren…keren….

    tp waaaaaaaaa…. tutorial diatas gak mudeng aku ndop… :roll:

    posting terakhirnya BlaGaBLoGer adalah: Vidi Aldiano – Status Palsu

  15. @ierone: Haghaghag.. khan kalau dibukak pakek hape, blogku ini dalam bentuk mobile version khan??

    @nyubi: Seeep… selamat mencoba..

    @cebong ipiet: Yo diaktifne to akismete..

    @Rusa Bawean™: Hohoho.. ditunggu ditunggu pakai wpnya..

    @ifoel: Itu mah gampang, pakek img src biasa di indeks php yang ngeling ke judul posting

    @Miftahur: Inggih..

    @grubik: Hag hag hag.. sing penting komen..

    @Taktiku: Seep.. itulah tujuannya posting ini..

    @wildspeed: Kok nangis… :malaikat:

    @BlaGaBLoGer: Hahaha.. namanya aja tutorial wordpress..

  16. hebat koe ndop..

  17. nug #

    genti nick mas… kedawan nick nugroho hehehe… mending singkat padat dan jelas nug tok *eh gak pakek tok deng* hehehe…

    emang sangir blogmu tapi kanggo inet mbah buyut *seng mlkune sesenti2 kui* ngesake uabuot… buanguet… Tapi yo te2p uapik… Top markotop…

  18. Ternyata masih bisa di jadiin permalink ya mas, keren juga

    ke index ngak ya ama google?

    posting terakhirnya aNGga Labyrinth™ adalah: iCute case modding

  19. mas, tutor diatas sudah saia praktek kan, 90% berhasil cuma kendala saya, di judul postingan kalau di klik ttftitle jadi ilang kmbali ke normal, kira2 bagian mana yg perlu saya obok2, satu lagi,, saya juga pengen utk name, mail, sama website ikut pake ttftitle, atas bantuannya terima kasih!

  20. wah perlu dicoba nich, menarik juga he..he.. :)

  21. afiszone #

    Sip banget tutorialnya … !! bisa di coba ni.

  22. Reet juga ya ndooppp ya

    posting terakhirnya Ronggo adalah: Video Mesum

  23. Wah mantep nih…. Makasih ya om atas infonya…. :dance:

    posting terakhirnya buJaNG adalah: Troubleshooting Perbaikan Notebook dan Laptop

  24. makin sip saja blognya…., pating pecutut…
    kreatip

  25. Oya om, ni fontnya fonta yang biasa dipakai semisal untuk ms word atau dari mana…?

    posting terakhirnya buJaNG adalah: Troubleshooting Perbaikan Notebook dan Laptop

  26. Wah mantep nih…. Makasih ya om inponya :kabur: :kabur:

    posting terakhirnya mrpall adalah:

  27. weh pantesan ndop kok tulisanmu berubah dadi sangar-sangar ngene :D . ternyata plugin to iki :D heheheh. thanks ndop tutorialnya

    posting terakhirnya bayu mukti adalah: Kiat-Kiat Agar Barang Dagangan Kita Laris Terjual di Media Internet / Online

  28. baguis tutornya nih, patut dicoba… tapi kayanya ribet ya.. hehe

  29. oohhh..pake plugin toh,,berarti bisa terlihat di semua kompi. tadinya aq pikir pake CSS gtu. kalau pake CSS kan tergantung juga ma font yang disimpan di kompi yg melihat…makasi mas infonya..ntr saya pake deh di blog baru saya..

    posting terakhirnya TUTORIAL WEBSITE adalah: Cara Membuat Menu Flash Menggunakan Dreamweaver (2) – untuk Blogspot

  30. wew…. bagus juga neh …
    blh dicoba ah :)

  31. waawww..!!!
    dari dulu nyari yang beginian..!!
    makasih ndddoopp..!! :dance:

    posting terakhirnya -tikabanget- adalah: Si Dian USD yang kena kanker otak stadium 4 ituh..

  32. halah..baca berulang kali masih gak mudheng. belum sampai mas..
    eh kemarin saya kopdar ke tempat zarot, katanya dia sedang gelisah menunggu kelahiran anak pertamanya yang berada di jawa

    posting terakhirnya budi adalah: KURSI MALAS tanpa menunggu penghitungan kursi

  33. :roll: bagus amat blognya sekarang…
    sudah berbulan” nggak nyambangin… :sip:

    siap untuk dicoba! =))

    posting terakhirnya Ginza adalah: Countdown To USEK

  34. wah makasih buat trik ama infonya.. bisa buat tambah-tambah bekal ‘masa depan’he.. he…

    Thenk kyuuu…

    posting terakhirnya Joddie adalah: The Luck Factor

  35. @Deteksi: wah aq mung sharing tok. gak iso nggae dw.

    @nug: abot kuwi relatif. hehe.. nek dbukak nggae hp cepet kok.

    @angga: bisa keindex kok. kopi aja judulnya di search google.

    @nyubi: oh, ada yg lupa, edit juga untuk single.php dan page.php. sama kayak ngedit index.php

    @munawar am: kyk wong sing nduwe kang, kating pecutut.

    @bujang: pokoknya extensyennya .ttf

    @reza: nggak ribet kok kalau dpraktekkan.

    @Tutorial website: nah, itu dia gunanya plugin ini..

    @budi: wow, aku kok gak dikabari.. semoga lancar kelahirannya..

    @

  36. kereeeen, sip, top bgt deh

    posting terakhirnya buwel adalah: DIAM, BERGERAK, ATAU…….

  37. weks.. mumet ndop.. gak ngerti aku.. wes aku standar2 ae lah..

  38. heh..heh..heh.. *menggeh menggeh mergo kaboten karo sing diwoco..

  39. wah nice info mas, thanx
    nanti saya coba :D

    posting terakhirnya Generasi Patah Hati adalah: Ujian Sekolah, Ujian Santai

  40. kalo fontnya di ambil dari mana ndop…. aslin bingung nih… :doh:

    posting terakhirnya ifoel adalah: LIFE IS PRECIOUS

  41. gag eroh lah… :ayoh:

  42. wik.. apik!..
    tapi tulisane dirender dadi image yo ndop

  43. suwun sanget atas informasi dan penjelasannya

    posting terakhirnya reallylife adalah: GOD Loves All of Us ( Tuhan Sayang Dengan Kita Semua )

  44. @zarod: wah, kok kyk hbs berbuat ae kang. hahaha..

    @ifoel: biasanya di drive c, windows, fonts. kalau yg punyaku itu, aq buat sendiri fontnya.

    @kucluk: betul cluk, apike plugin iki image e menimpa judul, dadi asline yo jik enek tulisan judule. cm ditimpa dg image. coba buka blogku dg image dimatikan, ntar huruf cekeran pitik wi lak ilang.

  45. nais inpo ndop :ampun: :ampun:

    posting terakhirnya wahyoe adalah: Banjir Spam!!!!

  46. Nice post n thanks

    posting terakhirnya wahyu ¢ wasaka adalah: Kuburan Untuk Istriku

  47. Ade #

    Bacanya harus pelan2 n sambil praktek kayaknya biar mudeng 8O

    posting terakhirnya Ade adalah: Ceritanya begini…

  48. Masih trauma edit mengedit..

  49. Jiah keren abis bos
    tukeran link mau g
    byme

    posting terakhirnya byme adalah: Amerika serikat mempunyai lebih dari 2.500 kasus flu babi

  50. @Ade: persis kayak saya… hehehe..

    @arikaka.com: wah, ini pasti pernah error, hahaha…

    @byme: mau dong…

  51. uda bisa mas, ttftitle nya berjalan normal, tuh sudah saia review di blog saia yg bamznyubi.co.cc di komen iah, mas klo di posting komen, biar name, mail atau website ttftitle nya gimana tuh? ajarin dong?

  52. kalao pasang di blogspot caranya gimana mas?

    posting terakhirnya Belajar Mencari Uang di Internet adalah: Sejarah, Kelebihan, Seluk-Beluk dan Template Keren Untuk Blogspot

  53. nice info.

  54. Durung wani…
    Wedi nek font ganti Arab!!!

    posting terakhirnya marsudiyanto adalah: Mati Semua

  55. @nyubi: kapan2 aq kasih phpnya.. themeku udah ganti soalnya.

    @belajar mencari..: wah ndak tau saya..

    @marsudianto: hahaha.. menyisan dadi huruf jowo!

  56. setelah saya cek ternyata pluginnya pakai script flir bos. ada alternatif lain juga pakai plugin WP-sIFR yg pake script sIFR yg gak bikin teks jadi image tapi teks flash yg bisa di-highlight seperti teks normal :dance:

    posting terakhirnya fanari adalah: Solusi Tipografi dengan Metode Alternatif sIFR dan FLIR

  57. Useful information , great post . Thanks for sharing !!

  58. ??????? ? ????????? ? ?????? ????? ????? ? ???? ??????????

  59. ????? ????? ??????????? ??????

  60. ???? ? ???? ?? ????? ???-?? ???????? ???????

  61. hey this is a very interesting article!

  62. thanks…kalo mau masukin gambar dengan format .gif gimana caranya..tapi di widget. supaya gambarnya bergerak

    posting terakhirnya rangga adalah: Portable Software Part 1

  63. blognya keren kayak orang nya
    mas kalo mau tukar link bisa gak? :rock:

    posting terakhirnya komputer murah surabaya adalah: Promo ION PC dan Laptop

  64. gimana kabar nya mas?

    posting terakhirnya micro komputer adalah: Barang bekas

  65. mantabhhhhhh….tapi kok kolom komennya warna ungu, itu kan warna janda ha ha ha ha :rock:
    .-= Zulhaq´s last blog ..Migrasi Blog Versi Sinting =-.

  66. Kalo yang dibake buat ganti font seluruhnya isi artikel pake apa ya?? :rock:

    • wadduh.. kalau itu aku belum pernah tau… soba search google, ntar kalau sudah ketemu, tulislah… hehehehe…

  67. Hmmm… kayaknya lumayan mbulet yah bagi pemula, coba aja Plug in ANY FONT. Lebih mudah insyaAlloh

    • et elQolam: wow… aku baru denger mas… silakan diposting tutorialnya mas, siapa tau bermanfaat… insya Alloh. hhheh..

  68. hmmmm…kalo harus bikin tutorialnya, kayaknya kang Ndop lebih mantap, untuk bikin kata2 yang mengena. Jajal bae kang!!!

  69. wah..sussah bgt ngikutinnya..hehehe padahal tinggal ngikutn ya….
    lha kalo nulis di post dgn karakter font berbeda2 gimana kang
    .-= Oelil´s last blog ..Kesengsem =-.

  70. @elQolam.com: aduh aku wis lali, maksudnya tutorial apa ya?

    @Oelil: Nah itu susah… hehe..

  71. :rock:
    Scipting ….
    Ampun dech gan …
    Ndak punya execute file yha ???

    Set Mode : PUYENK .. = ON
    .-= vote4theusa´s last blog ..Presidential Election Electoral Vote Tracker =-.

    • ndak ada mas… heheh… saya aja sekarang nggak pakek kok..

  72. he’e wis mas… apik kteok’e…
    .-= mubaroki´s last blog ..Google Docs Bag. 1 =-.

  73. salam kenal Mas….
    mohon pencerahannya .. klo untuk wordpress.com gimana ya.. maklum .. saya newbie.. :-)
    trima kasih sebelumnya.. oia klo ada waktu.. mampir2 ke blog saya ya .. ditunggu komen n masukannya
    .-= wulan audy´s last blog ..About Me… =-.

    • @wulan audy: kalau wordpress.com ndak bisa diapa-apain hurufnya/templatenya mas…

  74. kekeke..saya ngakak liat emoticonnya kreatif banget y xixi
    saya cuma mau nyari buat ganti font secara keseluruhan bagaimana y caranya :D
    .-= kang i@n´s last blog ..Ketika pemuda ingin menikah =-.

    • ternyata eh saya dah komen wkwk
      dengan topik pencarian yang sama kesini :D

  75. eleh mau bagus koq ribet juga y mas
    wkwkw
    tapi makasih mas infonya :D
    kangmas ian punya postingan keren nih: Meminang Bidadari Bagian 2

  76. makasi infonya, dapat tambahan ilmu nih :D
    madman punya postingan keren nih: Hoisin Beef &amp Scallion Rolls

  77. guud apps, bisa lebih mempermudah pekerjaan nih!
    madrecipes punya postingan keren nih: Potatoes Pizza

  78. mau tanya mas untuk membuat 1 kata atau kalimat gimana ???


0 Trackbacks/Pingbacks

  1. silver eagle proofs 29 11 11

Komentar Kamu

Current day month ye@r *

Tampilkan Postingan Kerenmu
:wink: :twisted: :tidur: :tepuk: :takut: :taktahu: :ssst: :siul: :sip: :shock: :sad: :rolleyes: :rock: :pukul: :pertamax: :oops: :notme: :ngiler: :neutral: :muntah: :mrgreen: :mataduitan: :malaikat: :mad: :lol: :kiss: :kabur: :hug: :hipnotis: :hihi: :glundung: :fastreading: :evil: :eek: :doh: :doa: :dance: :cry: :cool: :ayoh: :angop: :ampun: :P :D :???: :-)