Tulisan dengan warna yang berbeda. Setiap huruf mempunyai warna yang berbeda. Bisa digunakan sebagai tulisan di menu blog. Pada saat tulisan tersebut di klik, akan terbuka halaman baru.
Sebagai contoh: saya membuat menu dengan judul Fandra Juani. Setiap huruf mempunyai warna yang berbeda-beda. Dan pada saat diklik akan terbuka halaman tentang saya. Lihat contoh dibawah ini.
Untuk lebih jelasnya tentang cara membuat tulisan dengan warna yang berbeda di blog. Ikuti langkah-langkah dibawah ini.
- Login ke blogger. Dari halaman dasbor pilih pengaturan tata letak.
- Lalu, klik tambahkan Gadget. Dan pilih HTML/Javasript.
- Selanjutnya copi kode dibawah ini.
- Dan pastekan di Gadget HTML/Javascript Tadi. Save, lalu tempatkan gadget kemanapun yang kalian inginkan. Selesai.
<style>
#tentang{background:transparent}
#tentang ul{float:left}
#tentang ul li{float:left;list-style:none}
#tentang ul li span{float:left;text-transform:uppercase;font-family:Ravie;font-size:12px;text-shadow:2px 2px 5px #1780dd;font-weight:bold;padding:0}
d{font-size:180%;color:DarkCyan}
g{color:red}
h{color:blue}
i{color:#ee3e80}
j{color:pink}
k{color:black}
l{font-size:180%;color:violet}
m{color:DarkCyan}
n{color:blue}
o{color:pink}
r{color:red}
#tentang ul li span:hover{background:transparent;font-weight:bold;color:#aaa;font-size:14px;font-family:Calligraffitti;text-shadow:2px 2px 3px #3af}
</style>
<div id='tentang'>
<ul>
<li><a href='http://fandrajuani.blogspot.com/p/blog-page_25.html' title='Fandra Juani'><span><d>F</d><g>a</g><h>n</h><i>d</i><j>r</j><k>a</k> <l>J</l><m>u</m><n>a</n><o>n</o><r>i</r></span></a></li>
</ul>
</div>
#tentang{background:transparent}
#tentang ul{float:left}
#tentang ul li{float:left;list-style:none}
#tentang ul li span{float:left;text-transform:uppercase;font-family:Ravie;font-size:12px;text-shadow:2px 2px 5px #1780dd;font-weight:bold;padding:0}
d{font-size:180%;color:DarkCyan}
g{color:red}
h{color:blue}
i{color:#ee3e80}
j{color:pink}
k{color:black}
l{font-size:180%;color:violet}
m{color:DarkCyan}
n{color:blue}
o{color:pink}
r{color:red}
#tentang ul li span:hover{background:transparent;font-weight:bold;color:#aaa;font-size:14px;font-family:Calligraffitti;text-shadow:2px 2px 3px #3af}
</style>
<div id='tentang'>
<ul>
<li><a href='http://fandrajuani.blogspot.com/p/blog-page_25.html' title='Fandra Juani'><span><d>F</d><g>a</g><h>n</h><i>d</i><j>r</j><k>a</k> <l>J</l><m>u</m><n>a</n><o>n</o><r>i</r></span></a></li>
</ul>
</div>
Keterangan Kode Diatas:
- #tentang ul li span { fungsinya untuk mengatur tebal fon-family dan ukuran huruf yang digunakan.
- #tentang ul li span:hover{ fungsinya untuk mengatur tebal fon-family dan ukuran huruf pada saat di sentuh kursor.
- Kode Merah d sampai r. untuk mengatur warna tiap2 huruf.
- Kode Biru adalah kalimat yang akan ditampilkan.
- Jadi Intinya setiap huruf mempunyai kode tersendiri. <d></d> untuk f dan seterusnya.
- Terakhir, jangan lupa diganti http://fandrajuani.blogspot.com/p/blog-page_25.html dengan alamat URL kalian sendiri.
Contoh yang saya berikan ini jumlah hurufnya ada 11, jadi ada 11 kode tersendiri di setiap hurufnya. Jika jumlah huruf kalian lebih dari 11. Tambahkan kode yang lain, misalnya <z></z> ,<t></t>.
Jika huruf yang ingin kalian buat kurang dari 11, silakan dikurangi saja beberapa kode diatas. Misal huruf kalian 6, maka gunakan kode merah d sampai k saja. Kode l sampai r hapus.
Begitu juga untuk kode biru gunakan <d>F</d><g>a</g><h>n</h><i>d</i><j>r</j><k>a</k> saja. Kode <l>J</l><m>u</m><n>a</n><o>n</o><r>i</r> hapus.
Itulah sedikit cara membuat tulisan dengan warna yang berbeda yang dapat digunakan di menu blog. Semoga Bermanfaat.
EmoticonEmoticon