Cara Mudah Pasang Cufon di Blog

Pengalaman ini di dapat berawal dari rasa keingin tahuan, ko bias begini sih?? Bagus banget, ni pasti ada kode-kodenya.. dimana nih kodenya?? Ubek sana-sini akhirnya dapet deh… dan coba sharing di blog ini..

Terkadang gw atau saya  (sorry kalo pake bahasa gw, biar lebih nyaman aja nih mah). Suka bosan dengan tampilan blog dalam hal ini template/themes (khususnya themes wordpress) yang designnya.. gitu-gitu aja ( emang sih kalo buat themes sendiri gw masih belum mampu, kalo untuk ngerombak themes sih ga usah di tanya lagi, pasti udah pada jago deh) J.

Terusin bacanya kawan… Gw ini bias dikatakan atau di kategorikan sebagai orang iseng, kenapa?? Karena kalo ngeliat themes bagus bawaannay langsung pegen nyobain aja, apalagi yang bertitle THEMES PREMIUM (pastinya  yang bias di donlot gratis, kalo mbayar?? Hmm.. tar dulu deh)... begitu dapet, langsung deh di praktekin, nah bagaimana dengan anda??? Apakah anda juga demikian?? Jika iya Tosss dulu ahhh.. biar ga slek..

parahnya lagi pas nyoba themes itu langsung di blog gw pribadi, ga pake acara nyoba-nyoba di localhost.. soalnya kelamaan!! Iya betul kelaman basa-basinya loe chot.. weitss.. sabar gan.. basa-basi itu perlu.. biar urat bawah ga tegang..

sebagai pemerhati themes wordpess, (halah.. sok tau deh gw).. yang paling sering menggunakan design tulisan cufon adalah themes buatannya WOOTHEME, nah entu orang yang bikin sering banget pake yang kek beginian, selain itu juga themes buatannya akhir-akhir ini selain memakai cufon juga sering memakai text-shadow untuk themesnya..(tau kan text shadow itu apa, itu tuuuh yang tulisannya berbayang.. adanya di css)  mantaf ga tuh.. (gw akui text shadow  bikin gw ampe jatuh cinta, karena mampu memanjakan mata kita, asal di imbangi dan disesuaikan dengan kebutuhan). jangan klik yang laen dulu ya tanggung nih, terusin bacanya.. sekarang saya mencoba sharing pengalaman ( ini pengalaman loh, banyak kok yang udah nulis tentang ginian.. walopun banyak yang ngebahas, tapi belum tentu anda sudah membacanya.. iya toh??

Langkah Pasang Cufon di blog

1. Yang kita butuhkan adalah 2 file javascript (script font.js dan script cufon-yui.js) dan sedikit pengetahuan tentang css karena ini penting untuk kelanjutannya..


2. Silahkan masuk ke websitenya cufon generator untuk mendapatkan font yang ingin anda pakai di blog sebagai tulisannya. disini : http://cufon.shoqolate.com/generate/


3. Kemudian upload file font anda, sebagai contoh ambil aja font yang ada di PC kamu, C:\WINDOWS\Fonts nah ambil deh tuh salah satunya, pilih font sesuai selera.. tapi inget font yang udah ada di PC untuk di copy sepertinya ga bias lewat klik kanan, tapi teken CTRL+C nah bis entu pastekan di desktop atau dimana didalem folder terserah. Atau bias juga langsung browse ke directory dimana font itu berada. Gampang lah itu mah.


4. Kembali ke web cufon generator… disana anda bias mengatur setingan sesuai keinginan, tapiiii disini kita ga usah ngatur-ngatur setingan yang laen dulu ya, jadi langsung aja kita pakai setingan bawaan dari webnya biar lebih mudah. setelah file font sudah siap di generate, beri tanda ceklist di 2 kolom The EULAs of these fonts allow Web Embedding (without Adobe Flash) dan I acknowledge and accept these terms dah Cuma itu aja, kemudian klik tombol

Nanti kita akan mendapatkan/mendownload  file fontnya. Jika sudah dapat berarti kita butuh 1 file lagi yaitu cufont-yui.js, masih di webnya cufon generate, di TAB BAGIAN ATAS ada link download, klik kanan pada tulisan download dan pilih save link As.. dapatkan filenya, nah itulah file cufon-yui.js nya..

[caption id="attachment_234" align="aligncenter" width="420" caption="Cara Mudah Pasang Cufon di Blog"][/caption]

Sekarang kita aplikasikan kedalam blog..

Upload file-file tadi kedalam blog bisa lewat ftp dan sejenisnya ( disini saya memasukannya ke dalam folder themes yang sama). 1 file cufon-yui.js dan 1 file  font nama file fontnya Qlassik.font.js

Buka themes yang kamu pakai saat ini, kemudian buka header.php masukan script di bawah ini :

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/cufon-yui.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/Qlassik.font.js"></script>

sebelum tag <?php wp_head(); ?>

Ok jika sudah, masih di file header.php sekarang masukan script dibawah ini :

<script type="text/javascript"> Cufon.replace('h1,h2,h3,h4,h5,h6'); </script>

sesudah tag <?php wp_head(); ?>

[caption id="attachment_237" align="aligncenter" width="450" caption="Kira-Kira Seperti Inilah..."][/caption]

Kemudian save..

Buka/refresh halaman depan blog kamu, lihat hasilnya… gimana??? Mudah kan..

Keterangan : lihat di cufon.script yang warna hijau di garis bawahi itu, nah disitu pengaturan CSS nya, dibagian mana saja yang mau kamu tampilkan, kamu cukup memasukan kode cssnya kedalam tanda kurung itu.

Kalau masih bingung dapetin filenya, kamu bisa download disini

http://www.mediafire.com/file/zm1etygmmy2/cufont.zip