cara mempercantik blog

Jumat, 11 Maret 2011

cara membuat tabel code warna HTML

nih hasilnya ntar,,,,,,,

Warna	Contoh	Kode
Antique_white		#FAEBD7
azure		#F0FFFF
Bisque		#FFE4C4
blanched_almond		#FFEBCD
cornsilk		#FFF8DC
eggshell		#FCE6C9
floral_white		#FFFAF0
gainsboro		#DCDCDC
ghost_white		#F8F8FF
honeydew		#F0FFF0
ivory		#FFFFF0
lavender		#E6E6FA
lavender_blush		#FFF0F5
lemon_chiffon		#FFFACD
linen		#FAF0E6
mint_cream		#F5FFFA
misty_rose		#FFE4E1
moccasin		#FFE4B5
navajo_white		#FFDEAD
old_lace		#FDF5E6
papaya_whip		#FFEFD5
peach_puff		#FFDAB9
seashell		#FFF5EE
snow		#FFFAFA
thistle		#D8BFD8
titanium_white		#FCFFF0
wheat		#F5DEB3
white		#FFFFFF
white_smoke		#F5F5F5
zinc_white		#FDF8FF
Warna	Contoh	Kode
cold_grey		#808A87
dim_grey		#696969
grey		#C0C0C0
light_grey		#D3D3D3
slate_grey		#708090
slate_grey_dark		#2F4F4F
slate_grey_light		#778899
warm_grey		#808069
Warna	Contoh	Kode
black		#000000
ivory_black		#292421
lamp_black		#2E473B
Warna	Contoh	Kode
alizarin_crimson		#E32636
brick		#9C661F
cadmium_red_deep		#E3170D
coral		#FF7F50
coral_light		#F08080
deep_pink		#FF1493
english_red		#D43D1A
firebrick		#B22222
geranium_lake		#E31230
hot_pink		#FF69B4
indian_red		#B0171F
light_salmon		#FFA07A
madder_lake_deep		#E32E30
maroon		#B03060
pink		#FFC0CB
pink_light		#FFB6C1
raspberry		#872657
red		#FF0000
rose_madder		#E33638
salmon		#FA8072
tomato		#FF6347
venetian_red		#D41A1F
Warna	Contoh	Kode
beige		#A39480
brown		#802A2A
brown_madder		#DB2929
brown_ochre		#87421F
burlywood		#DEB887
burnt_sienna		#8A360F
burnt_umber		#8A3324
chocolate		#D2691E
deep_ochre		#733D1A
flesh		#FF7D40
flesh_ochre		#FF5721
gold_ochre		#C77826
greenish_umber		#FF3D0D
khaki		#F0E68C
khaki_dark		#BDB76B
light_beige		#F5F5DC
peru		#CD853F
rosy_brown		#BC8F8F
raw_sienna		#C76114
raw_umber		#734A12
sepia		#5E2612
sienna		#A0522D
saddle_brown		#8B4513
sandy_brown		#F4A460
tan		#D2B48C
van_dyke_brown		#5E2605
Warna	Contoh	Kode
cadmium_orange		#FF6103
cadmium_red_light		#FF030D
carrot		#ED9121
dark_orange		#FF8C00
mars_orange		#964514
mars_yellow		#E3701A
orange		#FF8000
orange_red		#FF4500
yellow_ochre		#E38217
Warna	Contoh	Kode
aureoline_yellow		#FFA824
banana		#E3CF57
cadmium_lemon		#FFE303
cadmium_yellow		#FF9912
cadmium_yellow_light		#FFB00F
gold		#FFD700
goldenrod		#DAA520
goldenrod_dark		#B8860B
goldenrod_light		#FAFAD2
goldenrod_pale		#EEE8AA
light_goldenrod		#EEDD82
melon		#E3A869
naples_yellow_deep		#FFA812
yellow		#FFFF00
yellow_light		#FFFFE0
Warna	Contoh	Kode
chartreuse		#7FFF00
chrome_oxide_green		#668014
cinnabar_green		#61B329
cobalt_green		#3D9140
emerald_green		#00C957
forest_green		#228B22
green		#00FF00
green_dark		#006400
green_pale		#98FB98
green_yellow		#ADFF2F
lawn_green		#7CFC00
lime_green		#32CD32
mint		#BDFCC9
olive		#3B5E2B
olive_drab		#6B8E23
olive_green_dark		#556B2F
permanent_green		#0AC92B
sap_green		#308014
sea_green		#2E8B57
sea_green_dark		#8FBC8F
sea_green_medium		#3CB371
sea_green_light		#20B2AA
spring_green		#00FF7F
spring_green_medium		#00FA9A
terre_verte		#385E0F
viridian_light		#6EFF70
yellow_green		#9ACD32
Warna	Contoh	Kode
aquamarine		#7FFFD4
aquamarine_medium		#66CDAA
cyan		#00FFFF
cyan_white		#E0FFFF
turquoise		#40E0D0
turquoise_dark		#00CED1
turquoise_medium		#48D1CC
turquoise_pale		#AFEEEE
Warna	Contoh	Kode
alice_blue		#F0F8FF
blue		#0000FF
blue_light		#ADD8E6
blue_medium		#0000CD
cadet		#5F9EA0
cobalt		#3D59AB
cornflower		#6495ED
cerulean		#05B8CC
dodger_blue		#1E90FF
indigo		#082E54
manganese_blue		#03A89E
midnight_blue		#191970
navy		#000080
peacock		#33A1C9
powder_blue		#B0E0E6
royal_blue		#4169E1
slate_blue		#6A5ACD
slate_blue_dark		#483D8B
slate_blue_light		#8470FF
slate_blue_medium		#7B68EE
sky_blue		#87CEEB
sky_blue_deep		#00BFFF
sky_blue_light		#87CEFA
steel_blue		#4682B4
steel_blue_light		#B0C4DE
turquoise_blue		#00C78C
ultramarine		#120A8F
Warna	Contoh	Kode
blue_violet		#8A2BE2
cobalt_violet_deep		#91219E
magenta		#FF00FF
orchid		#DA70D6
orchid_dark		#9932CC
orchid_medium		#BA55D3
permanent_red_violet		#DB2645
plum		#DDA0DD
purple		#A020F0
purple_medium		#9370DB
ultramarine_violet		#5C246E
violet		#8F5E99
violet_dark		#9400D3
violet_red		#D02090
violet_red_medium		#C71585
violet_red_pale		#DB7093

kalau mau oasang ikuti aja cara berikut ini......
1. login ke blog anda masing2
2. Kemudian pilih Tata Letak ---> Elemen Halaman ---> Tambah Gadget
3. Pilih HTML/Javascript
4. terahir simpan deh,,,,,,

okelah klo bgitu......heheh

Cara Membuat Kotak Scrollbar Pada Blogger

Untuk membuat kotak ini caranya sangat mudah:

1. Buka Blogger.
2. Klik menu Layout --> Page Elements
3. Klik Add a Gadget.
4. Lalu pilih HTML/Javascript
5. Masukkan kode yang dibawah ini:

<div style="overflow:auto; padding:5px; width:80px; height:80px; background-color: rgb(255, 255, 255); border:1px solid #ccc;">Tambahkan teks atau kode script disini</div>

Jika Anda ingin menambahkan teks kedalam kotak scrollbar maka ganti tulisan yang dicetak tebal dengan teks yang ingin Anda tampilkan.

Sebagai contoh, saya memasukkan:

<div style="overflow:auto; padding:5px; width:80px; height:80px; background-color: rgb(255, 255, 255); border:1px solid #ccc;">Kotak scrollbar adalah sebuah kotak yang bisa digulung kekanan atau kebawah sehingga bisa menghemat ruangan pada blog</div>

Maka hasilnya akan seperti ini:

Kotak scrollbar adalah sebuah kotak yang bisa digulung kekanan atau kebawah sehingga bisa menghemat ruangan pada blog

Jika Anda ingin menambahan gambar kedalam kotak scrollbar maka ganti tulisan yang dicetak tebal (warna biru) dengan <img src="alamat url gambar Anda" />

Sebagai contoh saya memasukkan:

<div style="border: 1px solid rgb(204, 204, 204); padding: 5px; overflow: auto; width: 300px; height: 80px; background-color: rgb(255, 255, 255);"><img src="http://www.Alamat url gambar Anda.com" /></div>

Maka hasilnya akan seperti ini:

6. Kalau sudah. Klik Save.....

Selamat Mencoba..!!

Cara membuat tulisan berjalan

nih ada yang seru buat blog kamu,,,,,,

lang sung aja ni scriptnya,,,,,,

1)Tulisan berjalan

Script : <marquee behavior="scroll">Tulisan berjalan</marquee>

2)Tulisan berjalan dengan background.

Script : <marquee bgcolor="grey" style="color:white;">Tulisan berjalan dengan background.</marquee>

3)

Dengan gambar

Script : <marquee behavior="scroll">
<img src="images/em1.gif" width="110" height="84"><br />Dengan gambar
</marquee>

4)Tulisan berjalan kekanan
Script : <marquee behavior="scroll" direction="right">Tulisan berjalan kekanan</marquee>

5)Tulisan berjalan ketas

Script : <marquee height="30" behavior="scroll" direction="up">Tulisan berjalan ketas</marquee>

6)Tulisan mantul

Script : <marquee width="200" behavior="alternate">Tulisan mantul</marquee>

7)Tulisan berjalan akan stop bila dibayangi oleh cursor

Script : <marquee onMouseOver=this.stop() onMouseOut=this.start()>Tulisan berjalan akan stop bila dibayangi oleh cursor</marquee>

8)Tulisan berjalan lambat

Script : <marquee behavior="scroll" scrolldelay=32 scrollamount=1>Tulisan berjalan lambat</marquee>

9)
Zig-zag

Script : <marquee behavior="alternate" direction="up" height="50px">
<marquee direction="right">Zig-zag</marquee>
</marquee>

10)
Bouncing around

Script : <marquee behavior="alternate" direction="up" width="300" height="100">
<marquee direction="right" behavior="alternate">Bouncing around</marquee>
</marquee>

Cara Membuat menu Tutup Buka pada posting (Spoiler)

kayak gini ni jadinya

langsung aja ni cara nya,....
1. login dulu ke blog anda
2. entri baru-->>edit html dan masukkan kode berikut....

<div style="margin: 5px;">
<div class="bigfont" style="margin-bottom: 2px;">
<input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="margin: 0px; padding: 0px; width: 60px;" type="button" value="Open" /></div>
<div class="alt2" style="-moz-border-radius: 10px 10px 10px 10px; -moz-box-shadow: 2px 2px 4px rgb(139, 210, 104); background: url("http://i1094.photobucket.com/albums/i447/kang-da2ng/web/background_posting.jpg") no-repeat scroll 0% 0% transparent; border: 1px inset; color: black; margin: 0px; padding: 6px;">
<div style="display: none;">
Contoh Tampilan Menu Tutup Buka Contoh Tampilan Menu Tutup Buka Contoh Tampilan Menu Tutup Buka Contoh Tampilan Menu Tutup Buka Contoh Tampilan Menu Tutup Buka Contoh Tampilan Menu Tutup Buka Contoh Tampilan Menu Tutup Buka Contoh Tampilan Menu Tutup Buka Contoh Tampilan Menu Tutup Buka </div>
</div>
</div>

NB: ganti tulisan yang berwarna biru dengan tulisan sesuka anda ...

wassalammualaikum wr.wb

Gambar Dengan Efek Zooming di Blog

Halo sobat-sobat mampirbro, kali ini saya ingin berbagi tutorial blog untuk membuat efek zooming pada gambar atau foto dipostingan blog kita dengan jquery. Dengan memamfaatkan fitur jquery, kita bisa membuat efek zooming yang dimana kalian pasti tahu apa itu efek zooming. Bagi sobat yang belum tahu efek zooming adalah efek dimana gambar kecil yang terdapat pada postingan apabila diklik sekali maka gambar tersebut akan menjadi besar dan apabila diklik sekali lagi maka gambar tersebut kembali menjadi kecil. Ya udah dech, dari pada binggung langsung aja lihat tutorialnya...

Berikut langkah-langkahnya:

Login ke blogmu, lalu pilih menu "Rancangan"" --> "Edit HTML", kemudian centang pada box "Expand Template Widget".
Carilah kode </head>, untuk mempersingkatnya gunakan fasilitas ctrl + f dan jika sudah ketemu, copy dan pastekan kode dibawah ini tepat diatas kode </head>.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="http://z33s.googlecode.com/files/BesaR.txt.js"> </script>

biru

Kemudian simpan template sobat.
Untuk memasukkan efek zoom pada gambar maka copy-pastekan kode berikut pada postingan atau widget yang dimana sobat ingin menaruh gambar yang akan diberi efek zoom. Berikut kodenya:

<img class="magnify" magnifyby="3" style="width: 200px; height: 250px;" src="Url gambar sobat" alt="" id="BLOGGER_PHOTO_ID_6060538624190533589" border="0" />

Ganti teks berwarna merah dengan link dari gambar sobat. Kode berwarna biru adalah tinggi dan lebarnya gambar yang dapat sobat atur, ubah dan sesuaikan dengan keinginan sobat.
Jika ingin memasukkan efek zoom lagi pada gambar yang lain, ulangi lagi langkah ke-4 untuk setiap kali memberikan efek zoom pada gambar yang lain.

Kotak Text Area Dengan Tombol Select All

Mungkinanda sudah melihat menu "tukaran link" dii blog2 oarang, anda akan menemukan kode linkbanner blog orang yang mereka bingkai dalam kotak bertombol select all. Mungkin anda ingin mencoba membuat kotak text area bertombol select all. Dengan membuat ini, dapat mempermudah para pengunjung blog sobat untuk menyeleksi teks atau kode pada kotak text area dengan cepat, jadi tidak perlu diseleksi secara manual cukup dengan menekan tombol select all.

Langsung aja ni caranya:

Anda hanya perlu copas (copy-pastekode) dibawah ini kedalam postingan atau elemen halaman blog anda.

<form name="copy"><div align="left"><input value="Select All" onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button"/></div><textarea style="padding: 3px; width:200px; height:60px" name="txt";>Taruh Teks Anda disini</textarea>

Sehingga hasilnya seperti dibawah ini:
NB:
1. Tulisan berwarna hijau adalah letak tulisan Select All, bisa anda ganti dengan right bila anda ingin menenpatkannya di kanan.
2.Tulisan berwarna biru adalah ukuran dr text area, bisa anda ganti sesuka anda.
3. sedangkan tulisan berwarna merah adalah tempat anda menaruh tulisan anda.
4. 0h ya 1 lagi,,,,,bila anda menaruhnya di postingan blog, anda harus menaruh script tadi di Edit HTML.

Cara mengganti cursor dengan gambar

caranya nie dia:::>>>>> >>>>>

1. Masuk account Blogger.

2. Dashboard/dasbor

3. Pilih tambah gadget tambahkan HTML java script

4. pastekan kode berikut

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdIGoC7Ej5MHVFsrbaEERbgxsVk9v9kS9iHilC7Uud1-Kmif36b4b-U_A1FX0XcTC1n9LEPepMB2EtjFEADOIHVx4ZApXhJ2cbYJOH_lZxFtIC8aLwsNjPVJ9RfoIbpdOO4Nk5GkhcPXw/s1600/wulu.gif

http://baykun.byethost15.com/cursorbiru.ico

http://baykun.byethost15.com/cursorkuning.ico

http://baykun.byethost15.com/cursorpanah.ico

http://baykun.byethost15.com/cursorpensil.ico

http://baykun.byethost15.com/tangan.ico
Jika ingin cursor bentuk tangan

http://baykun.byethost15.com/orang.ico
Jika ingin cursor bentuk orang

*referensi berbagai cursor unik http://www.cursors-4u.com .

         jangan lupa komentarnya,.,., 