Semua Tentang Seni

Hi World, saya akan membagikan tutorial tentang cara membuat efek halaman page preloader menggunakan animasi CSS dan SVGs untuk diterapkan pada blogger. Trik semacam ini dapat menjadi cara kreatif untuk pengunjung yang bosan nunggu loading, tetapi tentunya juga ga akan membebani.Contohnya pada blog saya sendiri djogzs.com yang saya gunakan saat ini. Pre Loader ini menggunakan CSS3 pada animasi transisi untuk membuka dan menutup halamanya dan menggunakan SVG animasi Loader,serta javascript agar dapat menentukan timing preloader saat proses loading data/progress yang sudah selesai upada suatu halaman dan menutup preloadernya kembali. Singkat mengenai SVG : SVG adalah singkatan dari Scalable Vector Graphics dan merupakan format file baru untuk menampilkan grafik dalam pengembangan web yang berbasis XML. masih agak sulit untuk dipahami, tetapi untuk kedepanya dipastikan lebih kompleks untuk membuat object / animasi daripada  CSS3. Sebelum menggunakan trik preloader, saya ingatkan da...

Halo dunia, kali ini saya akan memberikan video demonstrasi dasar" cara merubah tampilan posting pada template lama saya DJOGZS . Video ini dimaksudkan agar orang" dapat tahu,paham dan mengerti dasar" pengeditan template blogger,tetapi didalam video ini hanya dikhususkan pada bagian posting. Video ini juga akan menjawab pertanyaan anda misal : Bagaimana sih cara merubah tampilan posting pada template "A" seperti tampilan posting template "B" ? apakah bisa diberikan kodenya/bagaimana caranya? Caranya tentu saja tidak semudah yang dibayangkan,karena setiap template yang saya buat struktur HTMLnya sudah berubah meskipun beberapa nama CSSnya sama 100%, Saya hanya sebatas berbagi/sharing, jadi jika anda meminta saya untuk mengedit template, tolonglah untuk berusaha sendiri jangan selalu tergantung pada orang lain, be an single fighter , atau jika ingin mempunyai tampilan posting template "A" , silakan langsung mengganti template tersebut. nah,pe...

Hello,kali ini saya akan berbagi Widget CSS Dropdown Menu ,yaitu Menu dengan css yang sederhana yang dilengkapi dengan fungsi Dropdown dan Sub menu .Penggunaanya sangat praktis dan mudah untuk dimodifikasi.Contohnya kalian bisa melihat langsung dibawah ini.Ohh,saya ingatkan sebelum mencoba widget ini,ada baiknya membackup/download template kamu agar tidak terjadi sesuatu yang diinginkan. DEMO : Home Download Naruto Episode 1 Episode 2 Episode 3 Date A Live Episode 1 Episode 2 Episode 3 Devil Survivor2 Episode 1 Episode 2 Episode 3 Contact Twitter Facebook Blogger Google plus Multi sub Episode 1 Episode 2 Episode 3 Episode 4 Episode 5 Episode 6 Episode 7 Anime Email Untuk memasang menu seperti diatas,pertama login ke account blogger kamu,lalu pilih menu template,pilih edit html, lalu copy-paste CSS dibawah ini tepat diatas kode ]]></b:skin> CSS #menujohanes{ width: 100%; /* panjang menu */ margin: auto; /* posisi menu auto */ background: #fafafa; /* warna background ...

Hello Minna-san~ saya mau berbagi trik CSS lagi nih,Yaitu Notifikasi sederhana dengan css3,sebenarnya apasih fungsinya? awalnya juga notif ini saya gunakan untuk memberitahukan bahwa template hatsune miku sudah dapat didownload dan juga pemberitahuan bahwa template" saya sudah diupload semua ke hosting mediafire.nah karena saya cari" di google trik notifikasi yang cocok tidak ada,jadi saya membuat sendiri notifikasi ini yang merupakan hasil modifikasi dari trik " loading page dengan css3 animasi " .nah,apasih yang berbeda dengan trik loading page? bedanya,html dan css notifikasi ini pastinya lebih sederhana dan lebih minim penggunaanya,contohnya yang saya kurangi yaitu background rgba yang tadinya secara menyeluruh secara fullscreen,animasi loader/loading yang saya hapus.jadi yang tersisa hanyalah text dan background,serta css3 animasi agar setelah 10 detik,nofif ini akan menghilang secara otomatis.Oia,cssnya juga sudah saya rapihkan dari versi sebelumnya,jadi tidak...

Hai minna-san,hari ini saya mau sharing tentang Content Slider CSS3 yang sama dengan di template Fansuber Otaku ,karena ternyata banyak yang membutuhkan slider ini. Oia,Slider ini Sebenarnya hasil Editan saya,aslinya kamu bisa lihat di web ini : Iamceege.com . Apa sih bedanya? yang berbeda yang pasti stylenya,teruama pada judul slide,kecepatan animasi,jumlah photo yang ditampilkan,dan penambahan deskripsi pada slider,serta penambahan efek filter blur pada animasi.dan sebenarnya juga untuk pemasangan slider ini sudah pernah saya post pada banner lider,kalau yang itu cuma dibuat khusus agar cocok dengan banner.kelebihan dari slider ini yaitu ringan,tidak memerlukan javascript ataupun jquery,animasi dapat kita atur sendiri,dan cssnya mudah untuk disetting. CSS Buka blogger=>template=> Edit HTML, copy css dibawah ini,lalu letakan tepat diatas code ]]></b:skin> #slider3 { width: 610px; height: 298px; overflow: hidden; background-color: #fafafa; border: 1px solid #ddd; -moz-tr...

Untuk kalian yang mungkin sudah familiar dengen efek filter yang ada photoshop pasti tentunya sudah tahu bagaimana efek filter seperti blur,sepia,grayscale,dll pada gambar.nah kali ini saya mau berbagi informasi,trik dan tutorial menarik lagi tentang CSS3 - Filters untuk Gambar dengan penerapan yang sederhana dan dasar.mungkin sudah ada beberapa yang tahu tentang trik ini,tapi bagi yang belum,bisa kalian coba dan mempelajari tentang dasar" syntax css Filter ini.semoga bermanfaat ^^ Untuk Penerapanya nanti cukup sederhana hanya sesuaikan css name pada class html,atau copy paste syntax css pada class/id html yang anda inginkan,misalkan contoh sederhana-nya : HTML <div class=' nama-filter '> <img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsS2gvzRFb_ZU58vE-rtopb-bfYNzNzP1rqeSWiiuhyphenhypheniYjAgnEJJSIBSmfXvVXFKjIlhzRUptDWDyE-gtPO-bqLjpTBoXR-wR1uJmwOjW5Rf8CNy6_P5j5ysqsAy2MVxkQhWMDYz4fSao/s400/30059...