Cara Mengatur Warna Tulisan dan Ukuran Font pada Folder Menu DTree

Beberapa waktu yang lalu kita pernah membahas bagaimana cara membuat menu dTree alias menu seperti di windows explore dan ternyata memang banyak yang suka dengan gaya menu yang satu ini. Namun, belakangan ini ada beberapa masalah yang ditemukan oleh beberapa blogger yang ingin menggunakan dTree sebagai menu blog mereka.

Masalah ini terkait dengan pengaturan ukuran font pada menu dTree tersebut, serta cara merubah warnanya - masalah ini terutama dirasakan oleh para blogger yang menggunakan template gelap pada blognya, secara... font bawaan dari CSS dTree-nya memang berwarna gelap, yaitu itam keabu-abuan. Lalu bagaimanakah solusinya?

Untuk merubah ukuran serta warna font pada menu dTree, sobat bisa menerapkan langkah-langkah berikut:

1. Silahkan pergi ke postingan yang membahas dTree

2. Di langkah pertama pasti sobat menemukan kode-kode seperti berikut

<link rel="StyleSheet" href="http://sites.google.com/site/t4belajarblogger/js_t4belajarblogger/dtree.css" type="text/css" />
<script type="text/javascript" src="http://sites.google.com/site/t4belajarblogger/js_t4belajarblogger/createdtree.js"></script>

3. Nah, link yang saya merahin di-copy aja ke tab pencarian web, lalu tekan ENTER

4. Selanjutnya akan muncul pop-up download, silahkan centang "save file" dan kliklah tombol "OK"

5. Oke deh, sekarang silahkan pergi ke folder di mana sobat meletakkan file barusan, dan klik kanan lah file tadi, lalu pilih "edit"

6. Maka file tersebut akan terbuka, nah...di sini lah kunci dari merubah ukuran font serta warnanya, silahkan perhatikan gambar berikut

Keterangan:

• yang Hijau: Itu adalah nilai untuk ukuran font/tulisannya, silahkan disesuaikan dengan keinginan sobat
• yang Merah adalah warna font-nya nanti. Untuk mencari kode warna, silahkan surfing ke postingan ini atau yang ini biar lebih lengkap (Saran: Jika template anda berwarna gelap, untuk font-nya pilih warna putih aja agar kelihatan lebih jelas)_

Untuk kode warna seterusnya (yang berada di file CSS) tersebut bisa sobat sesuaikan dengan selera masing-masing.

7. Jika sudah mengotak-atik file di atas, silahkan disimpan: Klik File => Lalu save...!

8. Sekarang file siap di-hosting ke web hosting milik anda sendiri...

NB: Jika belum punya web hosting dan belum tahu cara membuatnya, sobat bisa mencoba layanan Google sites, silahkan dibaca tutorialnya di sini.

(ANGGAP SAJA SOBAT SUDAH PUNYA WEB HOSTING ATAU SUDAH MENERAPKAN TUTORIAL MEMBUAT WEB HOSTING DI GOOGLE SITES)

-------------------------------------/*

Yeah, kembali lagi ke kode berikut:

<link rel="StyleSheet" href="http://sites.google.com/site/t4belajarblogger/js_t4belajarblogger/dtree.css" type="text/css" />
<script type="text/javascript" src="http://sites.google.com/site/t4belajarblogger/js_t4belajarblogger/createdtree.js"></script>

Yang merah itu diganti dengan link/URL CSS hasil editan anda tadi (yang telah di-hosting ke web hosting anda sendiri), caranya:  

=> Ke Edit HTML => Centang Expand Widget Template => ganti semua kode dTree yang ada dengan yang baaru => Klik Simpan Template. Silahkan lihat tampilan baru menu dTree anda^

selesai. Semoga bermanfaat

t4belajarblogger