Skip navigation.

Log in | Sign up

permak wajah blogmu

mari belajar css sama-sama

Posts tagged with "design"

STICKY POST

.Layout Project

By .:d3nix:.. Monday, 16. March 2009, 05:39:13

,

You are allowed to modified this threads as long as it goods for everyone.
Download OCB Layout
Selama ini di forum udah banyak kan tips and trik yg dah dikasi ma para moderator kite noh *great dude! cool* apalagi bung mirac1e cieeh :cheers:. Kepikiran i want to reface neh forum juga. Actually i've got this ideas for my personal own blog, but since my 2nd house are doing fine! i guess i have to pass it on, kenapa ga renovasi juga cuy! Okay the interfaced layout look like this *just ignored those most wanted photos hehhe :D * pretty awesome hah?! kebayang ga, how to do that. Ane udah write half of the script, tapi posisinya masih lil bit messed up. Well, buat moderator lainnya klo minat let's working on it Together! i meant it. Buat slicing webnya ane bikin di photoshop, and the rest is in Bluementall or any html editor. If you guys/gurls outthere got another some really crazy f*ck*ng ideas maybe or whatever! just shout loud @ me k! i'll listening.

37 comments

Simply Classic Beta

By hadi. Monday, 11. May 2009, 00:17:58

, ,

Update : classic level 2
WATCH DEMO
Tema ini merupakan modifikasi dari tema http://my.opera.com/mg12 (thanks Mr. Mg)

Sangat simple dan klasik. Meskipun ada kekurangan di page About. ** yang sementara ku lenyapkan dulu tampilannya* but its not a big problem :whistle: .

Caranya sangat mudah jika ingin mencoba tema ini. Cukup letakkan code ini di page design stylesheet dan centang opsi "Only use my Custom Stylesheet" lalu Save.

Here is the code :

/************* For Makeupurblog's members only.... Not sharing this theme *****************/

@import url(http://files.myopera.com/SyamsulHadi/new5/mycss.css);

/*to hide personal fact*/ #userpic, #personal ul, #personal h1, #profile-col2, p.small, #personal.clear, #grouplist
{display :none !important ;}


55 comments

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.

    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 :up: .

    14 comments

    membuat image link sidebar myopera

    By hadi. Friday, 6. March 2009, 10:21:30

    , , , ...

    Update 13/12/2009
    untuk saat ini belum ada opsi tuk menyisipkan image(gambar) di links sidebar. alternatif cara untuk membuat link memiliki image adalah dgn menambah code css div.link.
    sebagai berikut kodenya:

    div.linkinfo a[href*="http://isi dengan url link blogmu"],div.sidelinx a[href*="http://isi dengan url link di blogmu"]{ display: block; padding-left: 2500px; height: 75px; line-height: 35px; background-repeat: no-repeat; background-position: 0px 0px; background-image: url('http://isi dengan url image yg kan dipake sebagai link'); }


    misal, disini link ku dari sidebar group ini yaitu http://my.opera.com/makeupurblog/blog/2008/04/01/download-stuff
    sedangkan image untuk linknya dari
    http://files.myopera.com/SyamsulHadi/new1/water.jpeg berupa gambar

    maka pengaplikasian didalam code sebagai berikut:

    div.linkinfo a[href*="http://my.opera.com/makeupurblog/blog/2008/04/01/download-stuff"],div.sidelinx a[href*="http://my.opera.com/makeupurblog/blog/2008/04/01/download-stuff"]{ display: block; padding-left: 2500px; height: 75px; line-height: 35px; background-repeat: no-repeat; background-position: 0px 0px; background-image: url('http://files.myopera.com/SyamsulHadi/new1/water.jpeg'); }

    *note: height disini untuk tinggi image yg digunakan. disini aku menggunakan ukuran gambar 120 x 75 pixels,
    sedang line-height tuk hover tinggi area url.


    Untuk melihat hasilnya silahkan prhatikan link sidebar disamping itu

    67 comments