MODI OCB

Beberapa css my opera

By hadi. Tuesday, 10. March 2009, 14:45:54

First rule :

letakan di custom style sheet yang ada di page design. letakan pilihanmu di Use my custom style sheet together with the current theme (* jika cssmu gak kamu rombak total) atau Use only my custom style sheet (** opsi ini untuk css penuh) . lalu klik save.

upload imagemu di my.opera (ada di account pilih files klik upload files ), jgn masukan di directory blog. kalo bs buat directory baru.

jgn ada spasi pada nama file yg akan diupload. ex : http://files.myopera.com/mirac1e/..../burung onta.jpg, maka nanti files itu akan terbaca http://files.myopera.com/mirac1e/..../burung%20onta.jpg, css opera ogah pakai yang ginian. ujung-ujungnya ga nongol imagenya.

Ganti banner :
text codenya :
#top2 {height: 300px; background: #B93B8F url(http://files.myopera.com/mirac1e/ABAN/meraloloveban.png);}

height= tinggi gambar tuk banner,
url = alamt gambarnya, lebih baik harus diupload diopera,
#B93B8F= warna merah dengan code html.
kumpulan banner siap pakai = http://my.opera.com/mirac1e/blog/bagus-desain-blognya

Merubah menu berada di kanan atas :

text codenya :
#menu a:link, #menu a:visited, #menu a:active { background-image:none; }
#menu {width:220px; height:0px; background:transparent; float:right;}
#menu ul, #menu li {margin:0; padding:0; list-style-position:outside; list-style:text;line-height:50px;font-size:18px;}
#menu a:link, #menu a:visited, #menu a {background:transparent; color:#ABA9A9;}
#menu li {float:none}
#menu {position:relative; top:-170px; background:transparent;}

* Note = trick ini akan memperpendek banner

Bikin background :

text codenya :
body {background-color:#00cc00; background: url(http://files.myopera.com/mirac1e/files/Naruto_Sasuke_Clashv3_by_Knivesofice.jpg)no-repeat fixed center;}

#00cc00= warna hijau (code warna html, lebih baik pake widget warna atau gunakan jasa misal seperti web html color code http://www.free-webmaster-tools.com/colorpicker.htm)
url = sumber alamat gambar, aku pake ukuran 1024 x 968 pixel, tp terserah juga sih berapa pun ukuranya.
no-repeat fixed center = posisi gambar biar gak mengulang, tetap, berada ditengah

* note = image hanya akan terlihat sisi kanan kirinya saja, karena bagian body tengah tertutup image yang lain.

Background transparent :

kita akan gunakan wrap berikut codenya:
#wrap4 { background: transparent url(http://files.myopera.com/bayanga/gambar/7432_pic001.jpg) bottom left no-repeat; padding-bottom: 200px; padding: 0px; width: 920px;}

* note = akan ada sedikit masalah jika jumlah blog dan comments terlalu banyak , gambar akan terpotong. Akan ada masala juga jika image kamu itu sama dengan warna komentmu.... maka saranku image kamu tu harus kamu edit, tambah sedikit contrasnya agar warna imagemu hampir serupa dengan warna body blogmu. seperti contoh berikut:

* note = bisa juga dengan kode seperti berikut tapi akan mengulang di seluruh page :
#wrap4 { background: transparent url(http://files.myopera.com/mirac1e/ABAN/blur.png) bottom left repeat-y; }

Memodi menu :

codenya :
#top #menu a:hover, #menu #selected:link, #menu #selected:visited { background: #000 url(http://files.myopera.com/mirac1e/ABAN/menu.png) center top no-repeat; color: #e80202; font-weight: bold;}
ukuran image yang dipakai itu sekitar 78 x 30 pixel.

Postingan bergambar :

.post { clear:both; padding-bottom:35px; padding-top:5px; padding-left:0; padding-right:0; width:100%; overflow:hidden; background: url(http://files.myopera.com/mirac1e/ABAN/posting.png) bottom left no-repeat;}
* Note = code diatas akan terasa sempurna jika tulisan postingan kalian sedikit dan thema yang kalian gunakan berbacground putih pada blog postnya

Menyisipkan image di "write comment" :

#message {background: url(http://files.myopera.com/mirac1e/ABAN/mess.png) bottom right no-repeat;}

* Note = ini juga tergantung dari thema layout awal kalian, jika kalian menggunakan thema yg berbackground comment warna hitam maka hal ini akan sia-sia. lebih baik menggunakan thema awal yang berbackground putih

blog yg jelasin ttg tips css my.opera :

Dr. launch = http://my.opera.com/drlaunch/blog/index.dml/tag/design
Holdowics = http://my.opera.com/holdowicz-claude/blog/how-to-change-the-background
Iroelcat = http://my.opera.com/iroelcat/blog/show.dml/1751657?cid=4967585

Contoh script css full, siap pakai :

Miss D - V = http://my.opera.com/D-V/blog/
* Note = HARAP MINTA IJIN DULU KE PEMILIK CSSNYA ( D - V ), KTIKA MAU MEMAKAI DESAIN CSS YANG ADA DI BLOGNYA .

.Basic CSS Buat Script Kiddies .Layout Project

Comments

Nyoman Suka # 14. March 2009, 15:34

Wah pantasan gambar cssku gak mau tampil. . Ternyata file gambarnya ada tnda % ya? He he. . Infonya berguna banget mas

hadi # 14. March 2009, 15:50

ada sampeyan to bli.... ini postingan lama cuma aku mau edit... tapi kok rada eror.

Nyoman Suka # 14. March 2009, 16:01

Ya kyakna pernah baca yg akhr to. . Tp bgus juga ada tutorial dari awal. . Jadi tambah mengerti. . Oya t163r di invite jga mir,pasti bisa memberi bnyak kontribusi bgi grup ini. . Aku gak tau cranya invite dia jdi modrtor alne. . He he peace

hadi # 14. March 2009, 16:11

aku kirain sampeyan uda tau caranya invite.... iya sejak wal tiger memamng suka ngotak ngatik blognya... ok aku mau jadiin dia mod. kuinvite sekarang

Nyoman Suka # 14. March 2009, 22:08

Gag tau wkwkwkwk

klick invite malah dsuruh masukkan email gtu. .Ya,aku jg pertama tau css dr dia,tp skrg jrg ol n blognya di privat untuk friend aja. .Munkin bnxak yg brtanya tntang css

Asam_manis # 22. March 2009, 04:43

masih bingung ma css

help me dunk...

hadi # 22. March 2009, 09:30

halo ceremai...bingung yang mana?
blajar dariyang mudah dulu aja..misal bikin banner,itu yang diatas ada contoh script cssnya.

atau ini ada script css dasar my opera...bikinan kang d3nix
http://files.myopera.com/d3nix/project/Basic_Script.rar

download aja

Nyoman Suka # 22. March 2009, 11:25

Filenya besar ya? . .Tpi Udah sdkit mulai mengerti neh. . .Syg klo diakses melalui hp selalu kegedean n berat loading yak?

Asam_manis # 22. March 2009, 13:18

Smuanya aku ga ngerti

td coba merubah menu ke kanan atas.. Tp hasilnya mala aneh.. Ok deh ntar aku mampir ke kang denix.. Tengkyu yaw

Stefanus Aditya # 23. March 2009, 10:20

asik nik otak atik banner, tapi kemarin aku ganti banner setelah di save kok ga langsung keluar bannernya ya?
tapi sekarang banner yang kemarin aku masukkan dah keluar.... nah barusan aku coba ganti banner lagi eh sama jg, ga langsung keluar banner yang baru.

yang nmau ditanyain apa memang ada delay gitu yah

?

mohon PENCERAHANNYA

hadi # 26. March 2009, 04:00

@bli nyomansk: iya filenya kang denix itu pdf... kalo diliat dari hape agak lambat loadingnyanya mending dari pc aja

hehehehe....@ceremai sory aku lupa nyebutin tidak semua tema opera bisa dipadu dengan "merubah menu dikanan atas"... tetep semngat design ya..

@kang toridei: iya da delay... tekan f5 aja atau reload page berulang kali... nanti akan muncul hasilnya