Semua Tentang Seni

Sobat bosen dengan tampilan blog sobat?sekedar berbagi ilmu,bagaimana caranya warna background pada home page berbeda dengan tampilan saat membaca posting blog,seperti blog saya.mau tau cara'a gan?Cekidot gan... Untuk dapat merubah tampilan blog,cara yang kita gunakan hanya CSS3 dan HTML b:if cond yang sudah saya kasih tau di artikel 5 Kode HTML Untuk Mengatur Tampilan Blog .yang kita lakukan sekarang,hanya merubah css pada tampilan posting,kita tidak perlu menambah kode HTML lagi pada primary CSS/homepage.disini saya hanya akan share trik sederhana untuk mengganti background. yang kita akan gunakan adalah kode HTML: <b:if cond='data:blog.pageType == &quot;item&quot;'> isi widget </b:if> Dan CSS external dengan Style HTML: <style type='text/css'> Isi CSS </style> TRik pertama: merubah warna background pada Halaman posting. Sobat copy paste dulu kode HTML di bawah ini <b:if cond='data:blog.pageType == &quot;item&

apa kabar sobat?sehat kan?sebelum'a saya mengucapkan natal dan tahun baru 2011 ^^ ok,kali ini saya mau share tentang dasar - dasar tentang trik CSS3 yang sudah kita coba selama ini ,mungkin sebagian dari sobat hanya copy paste css ke template,tanpa mengerti arti kode tersebut dan fungsinya,dan mengalami kesulitan untuk mengatur sendiri css'a. pertama kita harus tahu dulu apa itu CSS ?? Cascading Style Sheet (CSS) merupakan salah satu bahasa pemrograman web untuk mengatur beberapa komponen atau elemen dalam sebuah web sehingga akan lebih terstruktur dan seragam dengan HTML/script.Untuk saat ini terdapat tiga versi CSS, yaitu CSS1,CSS2 dan saat ini yang sedang populer adalah CSS3 .CSS 1 dikembangkan berpusat pada pemformatan dokumen HTML,CSS 2 dikembangkan untuk memenuhi kebutuhan terhadap format dokumen agar bisa ditampilkan di printer. Selain itu CSS 2 mendukung penentuan posisi konten, downloadable, huruf (font), tampilan pada tabel (table layout) dan media tipe untuk printe

apa kabar sobat?kali ini saya mau share trik menarik lagi nih.membuat Menu Bubbles Dengan Jquery Dan CSS3,sebenarnya'a ini trik lama ,tapi beda'a disini saya menambahkan Sentuhan CSS3 agar lebih menarik. efek bubble akan muncul jika sobat arahkan kursor ke tombolnya.mau?cekidot gan.... Pertama,cobat copy paste CSS di bawah ini di Rancangan =>Edit HTML =>lalu letakan css'a di template sobat di atas kode ]]></b:skin> .bubbles { margin: 100px 0 0; padding: 0; list-style: none; } .bubbles li { padding: 0; margin: 0 2px; float: left; position: relative; text-align: center; } .bubbles a { padding: 15px 10px; display: block; color: #000000; width: 140px; text-decoration: none; font-weight: bold; background: -moz-linear-gradient(top, #e0f3fa 0%, #d8f0fc 50%, #b8e2f6 51%, #b6dffd 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e0f3fa), color-stop(50%,#d8f0fc), color-stop(51%,#b8e2f6), color-stop(100%,#b6dffd)); -webkit-border-radius:

sobat mungkin terdengar agak asing dengan dengan em,pt,dan px? sekedar berbagi pengetahuan tentang apa itu em,pt,dan px,yang biasa kita temukan pada css template blog kita.ke tiga elemen itu berfungsi hampir sama kq ... langsung aja saya mau kasih tau aja nih ^^ pertama,kita pejari pixel dulu ya ^^ PX/PIXEL Dalam dunia blog,pixel digunakan untuk mengatur besar text,gambar,background,dan widget2 yang ada pada web/blog,tapi Dalam digital imaging,px atau yang biasa kita sebut pixel (atau elemen gambar) adalah satu titik dalam citra raster. Pixel adalah elemen terkecil dialamatkan layar, itu adalah unit terkecil dari gambar yang dapat dikendalikan. Setiap piksel memiliki alamat sendiri. Alamat dari piksel yang sesuai dengan yang koordinat. Pixel biasanya disusun dalam grid dua dimensi, dan sering direpresentasikan menggunakan titik-titik atau kotak. Setiap pixel adalah contoh dari gambar asli; sampel lebih biasanya memberikan representasi yang lebih akurat yang asli. Intensitas setiap pix

Mungkin sobat sudah pernah melihat atau menggunakan trik ini menggunakan javascript dan jquery yang membuat link jadi berkedip warna - warni,tetapi trik menggunakan javasript itu bisa membuat blog kita berat ,bahkan jadi hang...nah,disini saya akan kasih tau gimana cara'a membuat kostum link hover dengan pilihan warna yang bisa kita atur sendiri menggunakan KEYFRAME CSS3.trik ini sangat mudah digunakan,dan tidak akan memberatkan blog sobat karena penggunaan css'a tidak terlalu banyak. untuk contoh'a bisa sobat lihat dan rasakan di blog ini,tpi harus menggunakan browser yang mendukung CSS3 ya..sayang'a mozila firefox belum mendukung TT..TT sobat coba menggunakan google chrome deh.. langsung aja saya kasih tutorial'a nih n_n Pertama,buka blog sobat buka Rancangan => edit HTML lalu masukan css dibawah ini di template sobat. a:hover { -webkit-animation-name: pulsate; -webkit-animation-duration: 3s; -webkit-animation-timing-function: ease-in-out; } @-webkit-keyframes

ini dia kehebatan CSS3,effect'a yang keren dan mirip dengan effect jquery dan flash.menggunakan css3 tidak akan memberatkan blog sobat tergantung banyak'a pemakaian css pada blog sobat ,nah..kali ini saya akan share 30 Kreasi css3 dari saya yang unik2 n_n  ,terdiri dari jenis CSS3 border radius atau corner,CSS3 gradient,dan CSS3 animation.untuk menikmati CSS3 ini,disarankan sobat menggunakan browser versi terbaru,dan mendukung CSS3 agar tidak ralat dalam menampilkan CSS3 ini sperti google chrome,safari,dan mozilla firefox,tetapi mozilla firefox saat ini belum mendukung 100% CSS3 animation. Kode HTML masukan kode html ini di elemen halaman sobat,tapi ganti class name pada kode html di bawah ini <div class="ganti dengan nama css/kotak"></div> Contoh: <div class="kotak2"></div> <div class="lingkaran"></div> CSS3 Border radius kotak1 .kotak1 { -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; b

Sobat bingung dalam menentukan warna saat membuat css gradient yang sobat buat?saya punya alternatif'a nih..CSS3 gradient generator.dengan generator ini,akan memudahkan kita untuk mengatur besar,radius dan warna yang kita inginkan.Cekidot gan. Sobat bisa kunjungi situs alternatif'a di http://csscorners.com/ http://www.colorzilla.com/gradient-editor/ http://www.westciv.com/tools/gradients/ http://freehtml5templates.com/gradientgenerator/gradient-generator.php Semoga bermanfaat gan n_n

Apa kabar sobat?udah pernah lihat menu melayang belum?pasti sudah kan..kali ini saya mau share trik menu melayang,tetapi menu ini dilengkapi jquery dan css3.effect animasi hover'a dengan css3 dan effect melayang dengan jquery yang selalu mengikuti layar kita.contoh'a bisa sobat lihat disini  mau tau cara'a?lets go... Pertama,buka blogger sobat, Rancangan => Edit HTML lalu masukan css dibawah ini ke template sobat #floatMenu { position:absolute; top:150px; left:50%; margin-left:235px; width:80px;} #floatMenu ul {list-style-type: none;} #floatMenu ul li a { display:block; background:-moz-linear-gradient(-90deg, #222, #2b2b2b) repeat scroll 0 0 transparent; background:-webkit-gradient(linear, left top, left bottom, from(#222), to(#2b2b2b)); border:1px solid #999; border-left:6px solid #999; text-decoration:none; color:#ccc; padding:5px 5px 5px 25px; width:80px; -webkit-transition: all 0.6s ease-out; box-shadow: #333 0px 0px 10px; -moz-box-shadow: #333 0px 0px 10px; -webkit

Untuk sobat yang suka template simple,tapi bagus dan penuh warna,saya mau share template buatan saya sendiri nih n_n.daripada disimpen di flashdisk berhari2,mending saya share aja buat sobat.template ini full CSS3 tanpa menggunakan gambar sama sekali,kecuali untuk logo dan background'a.tpi untuk dapat merasakan css3,disarankan menggunakan browser versi terbaru yang mendukung css3 seperti google chrome dan mozilla,tetapi untuk fasilitas readmore css3 animation,tidak bisa dilihat dengan browser mozilla. Preview Fitur blog Retropop 1. Comment list yang stylist,dan dilengkapi dengan CSS3 2. Sharebar menggunakan CSS3 bila di hover 3. menggunakan Font google api:Philosopher,pada semua text 4. Tombol readmore dilengkapi CSS3 animation dan Jquery text bubble Pengaturan Blog: 1. untuk masalah UNDEFINED pada tanggal posting,sobat ganti format time pada Pengaturan => Format,lalu ikuti pengaturan Format Header Tanggal,Format Tanggal Index Arsip dan Format Timestamp seperti gambar di bawa

Ini dia sobat.google font api,google memberikan layanan kostum font dengan slogan - 'Making Beautiful Web!.dgn font dari google ini,sobat bisa mengganti font/gaya tulisan/tipografi yang unik-unik untuk blog sobat. mau tau cara menerapkan google font api di blog kita?cekidot gan.. Sebelum menggunakan font ini,ada baik'a sobat backup dulu template'a.. Pertama,sobat kunjungi gallery font'a di diSini disana,sobat akan lihat kumpulan variasi font yang sudah disediakan oleh google. kalau sudah ada yg cocok,sobat pilih salah satu,atau kalau mau banyak juga boleh n_n lalu,sobat akan dibawa kehalaman keterangan font yg sobat pilih tadi seperti gambar dibawah ini setelah itu,sobat pilih USE THIS FONT.,lalu akan tampil halaman untuk menambahkan kode'a tinggal di copy paste aja dah kode'a.... copy paste dimana???ini dia trik'a.... Tahap kedua, Buka blogger sobat => rancangan=> Edit HTML. Sobat copy paste CSS 'a yang seperti dibawah ini di bawah kode <head&g

hai sobat,saya mau share trik css3 lagi nih,kali ini saya akan share cara membuat 3D text atau text 3dimensi hanya dengan css3 hasil modifikasi saya dan ditambah dengan css hover efect animation. jadi text animasi dah n_n.Sobat bisa lihat contoh dan Css'a DISINI .Untuk menggunanakan trik ini,ada baik'a sobat backup dulu template sobat n_n Sebelum sobat mencoba trik ini,sobat harus tau,kalau trik hover animation hanya muncul di browser yang mendukung css3 animation,seperti google chrome.untuk mozilla,belum bisa mendukung css3 animation,tetapi untuk 3D text/shadow bisa dinikmati di mozilla4.saran saya buat sobat,sering-seringlah update browser ke versi baru agar sobat bisa merasakan kehebatan CSS3. ok dah~ langsung aja... pertama,kamu pilih style shadow'a DISINI kemudian css'a sobat taruh di template sobat,jika sudah pilih salah satu, sobat masukan kode html dibawah ini <div id="footer_container"> <h2 class="footer_title"> Blog Johanes<

hai sobat,kali ini saya akan kasih tau gimana cara'a menambahkan efek Cermin atau Reflections pada gambar yang kita inginkan.contoh'a bisa sobat lihat disini .ini dia cara'a,Cekidot gan... Cara'a mudah kq,sobat tinggal copy paste kode ini ke template kamu. kode dibawah ini adalah css yang mempengaruhi efek cermin pada gambar -webkit-box-reflect: below 4px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(white)); lalu sobat cari kata : img {  di template sobat,lalu copy paste css dibawah ini di css gambar sobat. jadi seperti ini img { -webkit-box-reflect: below 4px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(white)); } selesai deh.dengan cara diatas,akibat'a semua gambar di blog sobat,akan berefek cermin semua.. karena secara umum,semua gambar menggunakan tag "img" nah loh!!!jangan panik ya...jika sobat ga mau pake cara diatas,ada cara alternatif ni