Tag Archives: design

Download Font Lucu dan Keren

download fontSalah satu aspek desain adalah penggunaan font (jenis huruf) yang cocok dengan tema yang sedang dipakai. Gak lucu kan ketika sedang membuat desain untuk anak-anak tapi font yang dipakai adalah Times New Roman atau sejenisnya. Tentu font yang dipakai harus lebih terlihat energik, fun, dan tidak kaku. Lalau dari mana kita bisa mendapatkan font yang bagus? Di Internet.

Banyak website penyedia download font lucu dan keren secara gratis. Kali ini DHINATACOM akan memandu Anda untuk menemukan website-website terbaik penyedia font gratisan. Font-font yang ada diwebsite ini akan sangat membantu bagi yang punya usaha desain misalnya ingin membuat desain kaos yang eksklusif dan keren :)

Mari kita kemon…

DaFont.Com

dafont

Dibanding dengan situs sejenis lainnya, Dafont merupakan website direktori font yang paling komplit dan uptodate. Ada 8000 lebih font dalam format TTF (TrueType Font) dan lainnya yang bisa Anda download untuk sistem operasi Windows dan Macintosh. Dari 9 kategori font yang disediakan pengguna dapat melihat preview dari font yang akan mereka download. Caranya klik salah satu gambar font, lalu pada kotak Custom preview masukkan sebuah kata atau kalimat. Klik tombol Submit maka tampilan kata yang Anda masukkan akan ditampilkan dengan desain font yang Anda pilih.

Anda juga dapat mencari jenis font ciri khas dari sebuah perusahaan. Misalnya untuk mendapatkan font yang digunakan pada logo Yahoo! ketik saja yahoo pada kotak pencarian lalu klik Search untuk menemukannya. Bahkan beberapa jenis font pada suatu film bisa Anda temukan. Misalnya jenis font yang dipakai pada logo Spiderman 3. Untuk menemukannya gunakan kotak pencari dari Google yang ada pada website tersebut. Ketik Spiderman 3 lalu klik Google Search untuk menemukannya. Jika suka, klik tombol Download yang ada disamping jenis font yang Anda inginkan.

FontPool.Com

fontpool

Jangan terkecoh dengan tampilan websitenya yang sederhana. FontPool ternyata menyimpan lebih dari 41.500 jenis font untuk komputer Anda. Ada 18 kategori font yang tersedia, mulai dari font tradisional, font modern, simbol, font untuk operasi matematika, font bergambar dan masih banyak lagi. Seperti dafont, dalam website ini juga pengguna dapat melihat preview dari font yang akan didownload dengan menampilkan desain dari kata yang kita masukkan secara on the fly. Font disediakan untuk Windows dan Macintosh, jadi sesuaikan aja dengan OS yang Anda pakai.

Website penyedia Font gratis lainnya:

Cara Install Font

Kebanyakan Website mengkompres font dalam format zip, jadi ekstrak terlebih dahulu file font (.ttf, .otf atau .fon) sebelum menginstallnya. Berikut adalah cara mudah untuk menginstall font di Windows XP, Windows Vista, Mac OS X, dan Linux.

  • Windows XP : Copy-paste font ke folder C:\Windows\Fonts.
  • Windows Vista : Klik kanan file font lalu pilih menu Install.
  • Mac OS X : Double-click file font lalu klik tombol Install font.
  • Linux : Copy file font (.ttf or .otf) ke fonts:// melalui File manager.
  • Keterangan lebih lanjut klik disini.

Membuat Halaman Single Berwarna-Warni

Sedikit curhat.. beberapa minggu yang lalu saya kembali memperbarui beberapa bug pada theme WordPress yang saya gunakan sekarang. Terutama pada penulisan CSS yang tidak valid. Setelah saya lihat-lihat dan perhatikan lagi.. sepertinya ada beberapa bagian yang kurang sesuai dengan tema yang saya pakai sekarang yaitu tampilan ala Majalah TI.

Biasanya majalah manapun akan membuat corak desain halaman yang berbeda untuk masing-masing rubrik. Paling tidak, warna tulisan dan latar halaman yang muncul pada rubrik yang satu akan berbeda dengan rubrik yang lainnya. Sedikit putar otak akhirnya saya temukan juga solusi untuk membuat halaman permalink yang dapat berubah warna sesuai dengan kategori yang telah ditentukan.

Cukup dengan memanfaatkan perintah If pada PHP dan in_category milik WordPress, kita dapat menyuruh WordPress untuk memeriksa kategori dari permalink yang dibuka oleh pengunjung kemudian menampilkan warna yang telah kita definisikan terlebih dahulu pada CSS. Agar tidak bingung silahkan download terlebih dahulu mini theme WordPress buatan saya :). Theme tersebut hanya contoh, jadi jangan gunakan pada blog Anda karena sama sekali gak ada bagus-bagusnya :).

Screenshot tampilan permalink dari berbagai kategori yang berbeda bisa Anda lihat dibawah ini (mudah-mudahan ImageCows.net gak down lagi) :

Definisi warna telah diatur oleh file Style.Css. Pada file Single.php, kunci dari pengatur warnanya adalah skrip ini:

  1. < ?php
  2. if ( in_category('1') ) {
  3. echo "<div id='head1'>";
  4. } elseif ( in_category('2') ) {
  5. echo "<div id='head2'>";
  6. } elseif ( in_category('3') ) {
  7. echo "<div id='head3'>";
  8. } elseif ( in_category('4') ) {
  9. echo "<div id='head4'>";
  10. } else {
  11. echo "<div id='head5'>";
  12. }
  13. ?>
  14. <h3>< ?php the_category(","); ?></h3></div>

Angka 1 pada in_category('1')merupakan ID dari kategori tersebut. Pada saat permalink diakses pengunjung, skrip akan memeriksa apakah artikel tersebut berada pada kategori dengan ID 1, jika benar maka style dengan ID “Head1″ akan digunakan, jika tidak maka skrip akan
kembali memeriksa apakah artikel berada pada kategori dengan ID 2, jika benar maka maka style dengan ID “Head2″ akan digunakan, begitu seterusnya.

Jika artikel bukan berasal dari kategori dengan ID 1, 2, 3, dan 4 maka style yang digunakan adalah “Head5″. Itulah sebabnya kenapa warna latar kategori 4 dan 5 sama-sama warna hijau karena warna untuk kategori 5 tidak didefinisikan. Begitu juga untuk kategori 6, 7, dan 8 akan secara otomatis menggunakan style dengan ID Head5.

Agar tidak bingung contoh nyatanya bisa Anda lihat langsung pada bagian atas halaman artikel diblog ini.

Selamat mencoba…

Tutorial desain theme WordPress: WordPress Theme Tricks

Pembahasan seri tutorial desain theme WordPress dalam 2 artikel terakhir telah membahas berbagai perintah PHP standar WordPress. Jadi tentu Anda sudah mengetahui sedikit banyak letak dan fungsi dari berbagai perintah tersebut. Artikel kali ini akan membantu Anda menggunakan berbagai trik yang digunakan oleh para pembuat theme WordPress dalam mengolah perintah WordPress untuk membuat sebuah theme yang lebih baik dan unik. Kebanyakan dari mereka juga bukan programmer kok, jadi kalau Anda mau belajar pasti bisa. Berikut ini adalah beberapa trik yang bisa Anda coba, siapa tahu beberapa diantaranya sedang Anda cari tahu cara membuatnya.

Mari kita mulai… ayuk

Title Tag Dinamis

Title tag adalah tag dasar HTML yang digunakan untuk menampilkan judul halaman pada browser. Dalam sebuah blog keterangan title tag selalu berubah mengikuti halaman yang dibuka. Kalau ingin membuat sebuah title tag yang lebih dinamis skrip berikut boleh dicoba:

  1. <title>
  2. < ?php
  3. if (is_home()) {
  4. echo bloginfo('name');
  5. } elseif (is_404()) {
  6. echo 'Error 404';
  7. } elseif (is_category()) {
  8. echo 'Arsip Kategori:'; wp_title('');
  9. } elseif (is_search()) {
  10. echo 'Hasil Pencarian';
  11. } elseif ( is_day() || is_month() || is_year() ) {
  12. echo 'Arsip:'; wp_title('');
  13. } else {
  14. echo wp_title('');
  15. }
  16. ?>
  17. </title>

Kalau mau cara yang lebih praktis, plugin WP bernama All in One SEO Pack bisa dicoba.

Konten Dinamis

Sebagai contoh Jika ada sebuah konten yang hanya ingin Anda tampilkan pada homepage, gunakan skrip berikut:

  1. < ?php if ( is_home() ) { include (TEMPLATEPATH . '/namafile.php'); } ?>

Anda bisa mengganti is_home dengan perintah lainnya seperti is_404 (halaman 404), is_category (halaman arsip), is_search (hasil pencarian), is_day (arsip harian), is_month (arsip bulanan), dan is_year (arsip tahunan). Contoh penerapan konten dinamis pada blog ini ada pada sidebar. Bagian atas sidebar yaitu icon menu dan sponsor selalu ada disemua halaman, namun bagian bawahnya selalu berubah-ubah mengikuti jenis halaman yang dibuka. Kalau Anda teliti maka perbedaan tampilan sidebar antara halaman Single, Category, dan Page pada blog ini akan terlihat.

Template Unik Single

  1. < ?php
  2. $post = $wp_query->post;
  3. if ( in_category('1') ) {
  4. include(TEMPLATEPATH . '/single1.php');
  5. } elseif ( in_category('2') ) {
  6. include(TEMPLATEPATH . '/single2.php');
  7. } else {
  8. include(TEMPLATEPATH . '/single_lain.php');
  9. }
  10. ?>

Contoh skrip diatas adalah isi dari single.php yang bisa Anda gunakan untuk membuat desain single post yang berbeda-beda sesuai dengan pengaturan Anda. Perintah in_category akan mengecek kategori dari posting yang ditampilkan dan akan menampilkan template Single sesuai pengaturan Anda. Pada contoh skrip diatas kategori 1 (1 adalah ID dari kategori tersebut) akan menggunakan template dari single1.php dan kategori 2 menggunakan single2.php. Jika posting tidak masuk dalam kategori 1 dan 2 maka template dari single_lain.php akan digunakan.

Template Unik Kategori

Seperti halaman single, halaman arsip kategori juga bisa menggunakan desain yang berbeda-beda. Caranya sangat mudah, buatlah duplikat dari file archive.php lalu rubah isi file tersebut sesuai keinginan Anda. Ganti juga nama filenya, misal menjadi category-4.php. Angka 4 merupakan ID kategori. Jangan lupa untuk selalu menambahkan karakter “-” (minus tanpa tanda kutip) dan ID kategori dibelakangannya dalam nama file. Jadi category-4.php akan digunakan untuk menampilkan categoryID 4, category-5.php akan digunakan untuk menampilkan categoryID 5, dan seterusnya.

Template Unik Halaman

Setelah membuat desain berbeda untuk single dan category maka kini giliran halaman utama blog (page) yang bisa Anda buat berbeda-beda. Dalam sebuah blog bisa saja ada halaman yang perlu dibuat beda desainnya dengan halaman yang lain misalnya halaman portfolio, produk, dan sitemap. Agar lebih mudah mengaturnya WordPress telah membuat fitur Page Template. Jadi Anda perlu mengikuti aturan yang telah dibuat oleh WordPress untuk membuat template halaman.

Berikut adalah contoh dari template halaman gallery.php:

  1. < ?php
  2. /*
  3. Template Name: Gallery
  4. */
  5. ?>
  6. < ?php get_header(); ?>
  7. //the loop
  8. < ?php get_footer(); ?>

Jangan lupa ketika membuat halaman melalui dashboard WordPress, perhatikan panel Page Template lalu pilih nama template sesuai dengan halaman yang tadi Anda buat lalu simpan. Dalam contoh diatas nama template halaman adalah Gallery. Pada WordPress 2.3+ letak dari panel Page Template ada dibagian kanan sedangkan pada WordPress 2.5+ ada dibagian bawah halaman. Contoh penggunaan Template Page pada blog ini ada pada halaman Daftar Isi.

Menampilkan Iklan setelah posting pertama

Trik ini biasa digunakan oleh para pembuat theme WordPress yang membuat theme khusus untuk AdSense, istilah kerennya AdSense ready. Caranya gak susah-susah amat kok, hanya dengan menambahkan variabel $loopcounter dalam The Loop. Pertama-tama siapkan sebuah file bernama iklanadsense.php lalu isi file tersebut dengan kode AdSense Anda. Letakkan file tersebut satu folder dengan theme yang Anda gunakan. Perhatikan contoh skrip dibawah ini:

  1. < ?php if (have_posts()) : ?>
  2. < ?php while (have_posts()) : the_post(); $loopcounter++; ?>
  3. < ?php if ($loopcounter <= 1) {
  4. include (TEMPLATEPATH . '/iklanadsense.php');
  5. } ?>
  6. < ?php endwhile; ?>
  7. < ?php else : ?>
  8. < ?php endif; ?>

Menampilkan Daftar Judul Posting Terbaru

Contoh skrip untuk menampilkan daftar 10 judul posting terbaru:

  1. < ?php query_posts('showposts=10'); ?>
  2. <ul>
  3. < ?php while (have_posts()) : the_post(); ?>
  4. <li><a href="<?php the_permalink() ?>">< ?php the_title(); ?></a></li>
  5. < ?php endwhile;?>
  6. </ul>

Menampilkan Judul Posting dari Kategori Spesifik

Misalkan Anda ingin menampilkan 5 judul artikel terbaru dari sebuah kategori dengan ID nomor 7, gunakan skrip berikut ini:

  1. < ?php query_posts('cat=7&showposts=5'); ?>
  2. <ul>
  3. < ?php while (have_posts()) : the_post(); ?>
  4. <li><a href="<?php the_permalink() ?>">< ?php the_title(); ?></a></li>
  5. < ?php endwhile;?>
  6. </ul>

Menampilkan Posting Hanya dari 1 Kategori

  1. < ?php query_posts('cat=-7'); ?>
  2. < ?php while (have_posts()) : the_post(); ?>
  3. //the loop
  4. < ?php endwhile;?>

Skrip diatas dapat Anda gunakan untuk menampilkan posting dari suatu kategori spesifik yang Anda tentukan. Dalam contoh diatas daftar posting yang ditampikan adalah HANYA dari kategori dengan ID nomor 7. Jangan lupa tambahkan tanda “-” (minus tanpa tanda kutip) sebelum ID kategori.

Menyembunyikan Halaman dan Kategori dalam Daftar

Ketika menampilkan daftar halaman/kategori pada sidebar mungkin ada halaman/kategori yang tidak ingin Anda tampilkan bersama dengan daftar yang lain. Sebagai contoh adalah halaman Sitemap. Berikut ini adalah contoh untuk menyembunyikan halaman sitemap yang memiliki ID nomor 10:

  1. < ?php wp_list_pages('exclude=10&title_li=' ); ?>

Cukup dengan menambahkan perintah exclude=nomor ID, maka halaman dengan ID tersebut tidak akan ditampilkan dalam daftar. Untuk kategori, cara penggunaannya tidak jauh berbeda. Berikut adalah contoh skripnya:

  1. < ?php wp_list_cats('exclude=19&title_li=' ); ?>

Pada skrip diatas, Category dengan ID nomor 19 tidak akan ditampilkan dalam daftar kategori.

Tempat Belajar WordPress Terbaik

Tidak ada website/blog/forum/buku/workshop sebagai tempat belajar WordPress terbaik, terlengkap, dan uptodate selain dari pada WordPress Codex. Maka jangan ragu untuk sering menjelajah kesana menimba ilmu baru dan jangan lupa kalau sudah bisa bagikan ke yang lain ya!

Artikel untuk seri tutorial desain theme WordPress berikutnya akan membahas cara pembuatan layout sederhana dengan menggunakan CSS.

Seperti biasa saya butuh kritik, saran, komentar dari Anda.. ayuk

Tutorial desain theme WordPress: Perintah PHP di WordPress – Bagian 2

Pada artikel Perintah PHP di WordPress – Bagian 1 kita telah membahas berbagai perintah PHP standar bawaan WordPress yang perlu kita pahami sebelum membuat theme. Beberapa perintah pada file functions.php, sidebar.php, dan footer.php belum dibahas. Nah, kali ini kita coba membedah berbagai fungsi yang ada. Tanpa basa-basi lagi ayo kita mulai!

Membuat berbagai fungsi di WordPress (functions.php)

Segala macam fungsi pada WordPress baik yang standar maupun buatan Anda sendiri harus diletakkan pada file bernama functions.php. Misalnya fitur Widget pada theme harus didefinisikan/didaftarkan terlebih dahulu melalui file ini. Bagi programmer yang sudah advance mereka sering membuat berbagai fitur baru yang ‘tidak biasa’. Misalnya pada theme yang memiliki banyak file CSS untuk style, fitur untuk memilih style (bukan theme tapi file style.css) bisa langsung dilakukan melalui halaman admin tanpa perlu mengutak-atik file tersebut. Contoh lain adalah theme yang memiliki widget lebih dari 1, bahkan Anda bisa membuat widget hingga 3 sekaligus dalam satu theme.

Kali ini file functions.php yang coba kita bedah hanya yang standar saja. Contoh dari functions.php adalah sebagai berikut.

  1. < ?php
  2. if ( function_exists('register_sidebar') )
  3. register_sidebar(array(
  4. 'before_widget' => '<li>',
  5. 'after_widget' => '</li>',
  6. 'before_title' => '<h2>',
  7. 'after_title' => '</h2>',
  8. ));
  9. ?>

LETAK SKRIP: Hanya ada pada file functions.php.

DEFINISI:

Skrip diatas adalah contoh sederhana bagaimana cara mendaftarkan widget pada sidebar di WordPress.

'before_widget' => '<li>',
'after_widget' => '</li>',

Setiap fitur WordPress yang Anda daftarkan melalui widget akan diapit oleh tag <li> dan diakhiri oleh tag </li>. Tag LI (List Item) biasa digunakan untuk mengelompokkan. Sehingga secara otomatis akan ada jarak antara fitur yang satu dengan yang lain.

'before_title' => '<h2>',
'after_title' => '</h2>',

Setiap NAMA fitur WordPress yang ditampilkan pada sidebar akan diapit oleh tag heading <h2> dan diakhiri oleh tag </h2>. Tag heading biasa digunakan pada judul. Anda juga bisa kok menggunakan H1-H6.

Membentuk Sidebar (sidebar.php)

Pada umumnya skrip dasar dari sidebar sebuah theme WordPress adalah sebagai berikut.

  1. < ?php
  2. if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
  3. < ?php wp_list_pages(); ?>
  4. < ?php wp_list_categories(); ?>
  5.  
  6. <form id="searchform" method="get" action="<?php bloginfo('home'); ?>">
  7. <input type="text" name="s" id="s" size="15" /><br />
  8. <input type="submit" value="Search" />
  9. </form>
  10.  
  11. < ?php wp_get_archives('type=monthly'); ?>
  12.  
  13. <li>< ?php wp_register(); ?></li>
  14. <li>< ?php wp_loginout(); ?></li>
  15. <li><a href="<?php bloginfo('rss2_url'); ?>">Langganan RSS</a></li>
  16. <li><a href="<?php bloginfo('comments_rss2_url'); ?>">Langganan Komentar</a></li>
  17.  
  18. < ?php endif; ?>

LETAK SKRIP: Biasanya hanya ada pada file sidebar.php. Tidak menutup kemungkinan juga digunakan pada file lainnya.

DEFINISI:

<?php
if ( !function_exists('dynamic_sidebar') ||
!dynamic_sidebar() ) : ?>
/* skrip dipotong */
<?php endif; ?>

Memeriksa apakah ada widget yang diaktifkan. Jika Ya, maka sidebar akan menampilkan berbagai widget secara dinamis sesuai dengan urutan dan widget yang diaktifkan. Jika tidak maka berbagai perintah PHP yang diapit oleh skrip diatas (ditandai oleh /* skrip dipotong */) akan dijalankan.

<?php wp_list_pages(); ?>
Menampilkan daftar halaman.

<?php wp_list_categories(); ?>
Menampilkan daftar kategori artikel.

<form id="searchform" method="get"
action="<?php bloginfo('home'); ?>">
<input type="text" name="s" id="s" size="15" /><br />
<input type="submit" value="Search" />
</form>

Sebenarnya ini cuma skrip untuk membuat kotak pencarian. Hasil pencarian dari kata kunci yang dimasukkan akan diarahkan oleh skrip <?php bloginfo('home'); ?> yang menuju kehalaman homepage (index.php).

<?php wp_get_archives('type=monthly'); ?>
Menampilkan arsip posting dalam bentuk bulanan. Anda bisa menggantinya dengan bentuk daily (harian), postbypost (perpost dari posting terbaru), dan weekly (mingguan). Anda juga bisa membatasi jumlah posting yang ingin ditampilkan. Cukup dengan menambahkan perintah &limit=jumlah. Misal untuk menampilkan arsip dengan tipe bulanan sampai dengan 5 bulan, skripnya adalah <?php wp_get_archives('type=monthly&limit=5'); ?>.

<?php wp_register(); ?>
Menampilkan link yang mengarah kehalaman login blog. Jika sudah login maka link akan langsung menuju halaman Dashboard.

<?php wp_loginout(); ?>
Sesuai dengan namanya, berfungsi untuk menampilkan link logout dari user Anda.

<?php bloginfo('rss2_url'); ?>
Menampilkan link untuk berlangganan RSS dari artikel.

<?php bloginfo('comments_rss2_url'); ?>
Menampilkan link untuk berlangganan RSS dari komentar.

Sebenarnya masih ada banyak fungsi lainnya. tapi karena sudah ada widget Anda tidak perlu bersusah payah menuliskan skripnya. Cukup memasukkan widget dengan drag n drop melalui dashboard Anda bisa dengan mudah mengaturnya.

Membentuk footer (footer.php)

Tidak ada yang spesial dari footer karena biasanya hanya sebagai tempat untuk menampilkan hak cipta serta informasi tambahan lain seputar blog. Namun footer bukan hal yang sepele. Ada beberapa hal yang tidak boleh Anda lupakan. Pada saat mendesain header.php kita telah menuliskan tag HTML <html> dan <body>. Kedua tag tersebut belum ditutup maka tugas footer adalah menutupnya, karena jika tidak maka isi desain blog tidak akan muncul. Berikut contoh sederhana dari footer.

  1. < ?php wp_footer(); ?>

LETAK SKRIP: Hanya ada pada file footer.php

DEFINISI:

<?php wp_footer(); ?>
Fungsinya sama dengan <?php wp_head(); ?> pada header.php. Bisa dikatakan sebagai identitas untuk menandai file tersebut sesuai dengan fungsinya.

Ingin lebih banyak?

Semua penjelasan yang ada pada artikel ini menggunakan kata-kata saya sendiri, jadi mohon maklum ya kalau ada yang penjelasan yang kurang detail, lengkap, dan akurat hehehe… Kalau Anda ingin penjelasan lebih lanjut tentang SEMUA perintah dan fungsi WordPress, maka WordPress Codex merupakan tempat belajar WordPress terbaik dibanding situs/blog manapun.

Artikel berikut akan membahas tips dan trik saat menggunakan perintah-perintah yang telah Anda pelajari. Akhir kata.. Selamat Belajar!

Jangan lupa berlanggan dan komentar ya! ayuk