Custom Font WordPress dengan Plugin TTF Titles
Sampeyan 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
- 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…
Related Posts
About The Author
Muhammad Ali Mudzofar
Bocah ngganteng putranya Bapak Dokterandes Djainuri (Nganjuk) dan Munasikah (Tulungagung) ini sehari-hari bekerja di kamarnya, kadang di cafe, menggambar vector untuk klien-kliennya sedunia. Aku adalah seorang seniman (KTP) dan suka olahraga lari. Bersepeda masih, tapi untuk alat transportasi saja. Kenalan lebih lanjut? Buka halaman About Me ya!
Jangan sok berburuk sangka dong? :D
posting terakhirnya al-sabaliny adalah: Mengelola Blog dengan Bantuan Google Webmaster Tools
waduh, kodenya blocknya pake apa kemaren yach?
posting terakhirnya al-sabaliny adalah: Mengelola Blog dengan Bantuan Google Webmaster Tools
Blognya sampeyan benar2 ..seni banget dan kelihatan artistic.nggak kaku..benar2 mantap dan top banget
Sukses selalu mas…
@al-sabaliny: wakakaka… guyon kang…
@Diah: thankyu ya Diah…
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)
yesssss,,, akhirnya di share juga nih
langsung dipraktekin mas,,,
saia kira,,, slama nih mas menggunakan
teknik,, img src ternyata,, pake plugin,,
he,,he,,,
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
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
teng kyu infonya.. kalo membuat readmore yang lagi jintrak-jintrak kayak di web ini gimana ndop..
posting terakhirnya ifoel adalah: LIFE IS PRECIOUS
Wes, aku sik kuesel mulih sekolah jam 5. Blog walking/ndelok2 thok nggih.
ora kecandak karo utekku, ndop… :roll:
posting terakhirnya grubik adalah: proporsionaL
Keren ndop tutorialnya. lain dari yang lain font title postingannya.
keren..
posting terakhirnya wildspeed adalah: Curhat#10 *Bikin Kaos Dapet Award..*
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
@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…
@BlaGaBLoGer: Hahaha.. namanya aja tutorial wordpress..
hebat koe ndop..
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…
Ternyata masih bisa di jadiin permalink ya mas, keren juga
ke index ngak ya ama google?
posting terakhirnya aNGga Labyrinth™ adalah: iCute case modding
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!
wah perlu dicoba nich, menarik juga he..he..
Sip banget tutorialnya … !! bisa di coba ni.
Reet juga ya ndooppp ya
posting terakhirnya Ronggo adalah: Video Mesum
Wah mantep nih…. Makasih ya om atas infonya….
posting terakhirnya buJaNG adalah: Troubleshooting Perbaikan Notebook dan Laptop
makin sip saja blognya…., pating pecutut…
kreatip
Oya om, ni fontnya fonta yang biasa dipakai semisal untuk ms word atau dari mana…?
posting terakhirnya buJaNG adalah: Troubleshooting Perbaikan Notebook dan Laptop
Wah mantep nih…. Makasih ya om inponya
posting terakhirnya mrpall adalah:
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
baguis tutornya nih, patut dicoba… tapi kayanya ribet ya.. hehe
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
wew…. bagus juga neh …
blh dicoba ah
waawww..!!!
dari dulu nyari yang beginian..!!
makasih ndddoopp..!!
posting terakhirnya -tikabanget- adalah: Si Dian USD yang kena kanker otak stadium 4 ituh..
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
:roll: bagus amat blognya sekarang…
sudah berbulan” nggak nyambangin…
siap untuk dicoba! =))
posting terakhirnya Ginza adalah: Countdown To USEK
wah makasih buat trik ama infonya.. bisa buat tambah-tambah bekal ‘masa depan’he.. he…
Thenk kyuuu…
posting terakhirnya Joddie adalah: The Luck Factor
@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..
@
kereeeen, sip, top bgt deh
posting terakhirnya buwel adalah: DIAM, BERGERAK, ATAU…….
weks.. mumet ndop.. gak ngerti aku.. wes aku standar2 ae lah..
heh..heh..heh.. *menggeh menggeh mergo kaboten karo sing diwoco..
wah nice info mas, thanx
nanti saya coba :D
posting terakhirnya Generasi Patah Hati adalah: Ujian Sekolah, Ujian Santai
kalo fontnya di ambil dari mana ndop…. aslin bingung nih…
posting terakhirnya ifoel adalah: LIFE IS PRECIOUS
gag eroh lah…
wik.. apik!..
tapi tulisane dirender dadi image yo ndop
suwun sanget atas informasi dan penjelasannya
posting terakhirnya reallylife adalah: GOD Loves All of Us ( Tuhan Sayang Dengan Kita Semua )
@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.
nais inpo ndop
posting terakhirnya wahyoe adalah: Banjir Spam!!!!
Nice post n thanks
posting terakhirnya wahyu ¢ wasaka adalah: Kuburan Untuk Istriku
Bacanya harus pelan2 n sambil praktek kayaknya biar mudeng 8O
posting terakhirnya Ade adalah: Ceritanya begini…
Masih trauma edit mengedit..
Jiah keren abis bos
tukeran link mau g
byme
posting terakhirnya byme adalah: Amerika serikat mempunyai lebih dari 2.500 kasus flu babi
@Ade: persis kayak saya… hehehe..
@arikaka.com: wah, ini pasti pernah error, hahaha…
@byme: mau dong…
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?
kalao pasang di blogspot caranya gimana mas?
posting terakhirnya Belajar Mencari Uang di Internet adalah: Sejarah, Kelebihan, Seluk-Beluk dan Template Keren Untuk Blogspot
nice info.
Durung wani…
Wedi nek font ganti Arab!!!
posting terakhirnya marsudiyanto adalah: Mati Semua
@nyubi: kapan2 aq kasih phpnya.. themeku udah ganti soalnya.
@belajar mencari..: wah ndak tau saya..
@marsudianto: hahaha.. menyisan dadi huruf jowo!
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
posting terakhirnya fanari adalah: Solusi Tipografi dengan Metode Alternatif sIFR dan FLIR
Useful information , great post . Thanks for sharing !!
??????? ? ????????? ? ?????? ????? ????? ? ???? ??????????
????? ????? ??????????? ??????
???? ? ???? ?? ????? ???-?? ???????? ???????
hey this is a very interesting article!
thanks…kalo mau masukin gambar dengan format .gif gimana caranya..tapi di widget. supaya gambarnya bergerak
posting terakhirnya rangga adalah: Portable Software Part 1
blognya keren kayak orang nya
mas kalo mau tukar link bisa gak?
posting terakhirnya komputer murah surabaya adalah: Promo ION PC dan Laptop
gimana kabar nya mas?
posting terakhirnya micro komputer adalah: Barang bekas
mantabhhhhhh….tapi kok kolom komennya warna ungu, itu kan warna janda ha ha ha ha
.-= Zulhaq´s last blog ..Migrasi Blog Versi Sinting =-.
Kalo yang dibake buat ganti font seluruhnya isi artikel pake apa ya??
wadduh.. kalau itu aku belum pernah tau… soba search google, ntar kalau sudah ketemu, tulislah… hehehehe…
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..
hmmmm…kalo harus bikin tutorialnya, kayaknya kang Ndop lebih mantap, untuk bikin kata2 yang mengena. Jajal bae kang!!!
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 =-.
@elQolam.com: aduh aku wis lali, maksudnya tutorial apa ya?
@Oelil: Nah itu susah… hehe..
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..
he’e wis mas… apik kteok’e…
.-= mubaroki´s last blog ..Google Docs Bag. 1 =-.
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…
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
eleh mau bagus koq ribet juga y mas
wkwkw
tapi makasih mas infonya :D
makasi infonya, dapat tambahan ilmu nih :D
guud apps, bisa lebih mempermudah pekerjaan nih!
mau tanya mas untuk membuat 1 kata atau kalimat gimana ???
wah …wah tulisan mu ‘N’dopil sangat menginspirasi
aku tinggal kan jejak ku dulu di tempat mu yooo…..!!
Huahaha okay.
apakah ada cara manual untuk menginstall font tersebut di blog wordpress, thank infonya
Gan
gmn carax mengganti font setiap kita mao posting artikel
ato ada plugin yg bagus kahh
MOhon di bales dan pencerahannya
kaga fast respon nih admin
lg busy yahh -_-
maaf maaas, baru balas, aku sibuk banget sama kerjaan. Kalau setiap artikel kurang tau ya mas.. Aku aja sekarang pakai font verdana, biar aman aja bisa dibuka di broser manapun. haha..
ini nih yang ane cari, thanks gan
kok aku gak nemu index.php nya yaaa…
dibagian mana tuh
Untuk font postingan gk bisa ya gan