Djogzs Reborn

Hai sobat~saya mau share ilmu CSS lagi nih,tapi tingkat menengah.jadi yang ingin belajar,coba dan usaha dulu sebelum bertanya.tadinya sih saya mau share css yang paling dasar dulu,tapi males karena ga sempet(im sorry=_=v) jelasin'a karena banyak sekali,dan mungkin akan jadi buku.wkwkwkw.kali ini tentang CSS Pseudo - elements?apa itu?CSS pseudo-elemen adalah CSS yang digunakan untuk menambahkan efek khusus pada beberapa seleksi element yang kita inginkan tanpa harus menambahan html.css ini sebenar'a sudah umum dan banyak digunakan web designer yang sering kita lihat sekarang banyak yang ahli menggunakan CSS3 hingga terlihat artisitik.saya juga sudah lama menggunakan ini sih,baru sekarang saya share,karenalagi ada waktu luang~jadi bagi yang ingin belajar,silakan dibaca dari awal :) Contoh template yang saya terapkan menggunakan trik ini yaitu: 1. Haiyore nyaruko-san 2. Sora no otoshimono 3. Shinobu oshino 4. Green minimalist 5. Fairy tail 6. blog saya sendiri :) Dan beberapa trik...

A pa kabar sobat?akhirnya saya posting juga yang gambar'a cowo,masa gadis trus?wkwkwk template kali ini tema'a anime fairy tail,tapi design'a saya buat simple dan bersih tidak menggunakan shadow.pada template ini saya menambahkan fitur Slideshow jmpress dengan Jquery yang saya temukan dari codrops .tapi sudah saya edit dan modifikasi jquery,css dan HTML'a.kalau aslinya ukuran slide besar,dan text dengan gambar terpisah. Di template ini sudah saya buat background full dan text ada diatas gambar,sehingga mempunyai style yang sama dengan posting.kenapa saya menggunakan fitur ini?karena menurut saya effect transisi'a menarik dan pergerakan'a halus.sebenar'a saya jg sudah menemukan yang versi 100% css,tapi karena masih kaku dan agak berat,jd saya pikir pakai jquery saja~ lalu untuk menubar'a sendiri saya buat 2 bagian yang ada diatas slide dan dibawah slide.kenapa saya buat begitu?supaya design'a beda dari pada yang lain.aneh bukan?itulah saya~xD -Preview...

Lanjut sob~ saya kembangkan lagi nih template Shinobu oshino .design'a saya buat dengan CSS3 Pseudo sehingga agak sederhana dari template sebelumnya da tambah abstrak juga.yahh,namanya juga template aneh tapi unik,kalau tidak unik,bukan teemplate johanes nama'a~xD -Preview- -Pengaturan menu Buka blogger=>templates=>edit HTML lalu cari HTML seperti dibawah ini,lalu ganti tanda pagar '#' dengan URL link yang kamu inginkan. <div id='nav'> <ul> <li><a href='http://#'>Home</a></li> <li><a href='http://#'>About</a></li> <li><a href='http://#'>Contact</a></li> <li><a href='http://#'>Guestbook</a></li> <li><a href='http://#'>Exchange link</a></li> <li><a href='http://#'>Sitemap</a></li> </ul> </div> Download via google drive Download Via 4shared Demo S...

Splash Effects dengan CSS3 dan Curtain opening dengan Jquery.namanya panjang juga ya?ahh,karena ini adalah hasil experimen saya sendiri dengan menggabungkan dua trik yang fungsinya berbeda. pertama Untuk text effect'a adalah trik lama yang saya dapat dari Splash & Coming Soon Page Effects with CSS3 ( Codrops )(hanya html dan css3) dan Tombol close serta work animasinya menggunakan Jquery animated Curtain Seperti yang kalian tahu,Jquery animated itu fungsinya membuat tirai buka tutup pada halaman blog,tapi yang saya ambil hanya bagian tombol dan script yang sudah saya edit sendiri. Trik ini sudah saya terapkan pada template terbaru saya : Shinobu Oshino Untuk menggunakan Trik ini,selalu back-up template kamu agar tidak terjadi sesuatu yang diinginkan,karena ada kemungkinan kamu akan menemui beberapa problem seperti: -tombol open tidak dapat di klik. Kenapa tidak bisa diklik? Ada kemungkinan Jquery tidak aktif karena: -ada jquery lain yang sama. -ada js lain yang bentrok dengan j...

Hai sobat kali ini saya mau sharing trik menarik lagi nih,namanya Cloud animasi seperti yang saya pasang diblog saya.tapi untuk trik ini,saya modifikasi sendiri css dan htmlnya menjadi 2 versi,yang pertama awan'a berwarna putih menggunakan CSS3 css pseudo pada background.dan yang kedua awan akatsuki yang hanya diberi background gambar awan akatsuki yang saya buat sendiri,cukup menarik bukan? Tapi sebelum menggunakan trik ini saya ingatkan untuk: -Membackup terlebih dahulu blog kamu agar tidak terjadi sesuatu yang diinginkan. -mengetahui bahwa menggunakan trik ini harus dapat mengatur posisi awanya sendiri,karena ada kemungkinan saat kamu menggunakan trik ini,elemen yang dibelakangnya akan tertutupi. Contoh kemungkinan problem: -Header tertutup oleh awan ini hingga header tidak bisa berfungsi untuk diklik. -Bila kamu menggunakan menubar pada blog kamu maka ada kemungkinan tertutupi oleh awan ini. Solusi: -Gunakan/ganti nilai z-index menjadi lebih rendah/tinggi(-99999999 s/d 99...

Mencari sesuatu yang baru memang sulit.dibutuhkan kerja keras untuk mendapatkan sesuatu yang baru.inspirasipun tidak akan datang jika kita hanya berdiam diri,dan akhirinya setelah keliling" dunia browsing browsing dan browsing.akhirnya,kepala gw pusing @___@" wakakaka,memang bikin galau trik yang satu ini.sebelum'a saya cuma iseng" dengan CSS3 keyframe yang saya buat n modif sendiri di header blog saya,tapi karena kepikiran yang lain juga,banyak messages gajelas di fb yang minta share" cara'a,yweslah saya share deh.tapi trik ini agak beda dengan yang ada di header saya,beda'a CSS ini saya terapkan untuk tombol readmore.tapi sebenarnya bisa juga untuk tombol menu sendiri.karena kalau saya nyebarin masang animasi sebesar itu yang seperti blog saya,yang ada saya malah nyebarin dosa memberatkan blog kamu deh.wakwkawkawk.tapi untuk trik ini menurut saya cukup ringan,tidak ada penggunaan gambar sama sekali,100% CSS3.tapi untuk tampilan terbaik,saya sarankan u...

Shinobu Oshino Blogger template,sebenarnya ini template awalnya buat blog pribadi saya,yang artikel'a mengenai anime dan yang berbau japan.sudah di design sekeren mungkin tambah ini tambah itu.tapi karena udah maless duluan karena nanti pastinya ga bakal keurus.alhasil setelah template'a sudah rapih.langsung dishare aja deh~xD Tema template kali ini adalah Shinobu Oshino karakter yang saya ambil dari anime Bakemonogatari.untuk cerita anime'a,cari di google ya :p.Template ini adalah hasil modifikasi dari template uchiha Itachi => Sora no otoshimono yang sudah saya tambahkan beberapa fitur dalam template ini,diantaranya: -Breadcrumb -Autoreadmore. -Simple Vertikal menu. -Threaded Comment. //Fungsi reply// -Dan Splash screen Text effect dengan CSS3 keyframe dan jquery. //Hanya di halaman Home page// -Preview- Untuk Splash screenya sendiri,adalah hasil modifikasi saya dengan menggabungkan dua trik yang fungsinya berbeda. pertama Untuk text effect'a adalah trik lama ya...

Sora no otoshimono,Anime kali ini adalah salah satu anime favorite saya,terutama ikaros *.*.hwahhh,jangan anime'a deh dibahas,yg penting gambar'a udah disensor~xDD. Nah,template kali ini adalah hasil pengembangan template uchiha itachi dan juga blog saya yang lama blog akb . beberapa konten yang rusak sudah saya perbaiki,dan pada bagian posting saya rubah style'a dengan tambahan auto readmore,karena pd template sebelumnya saya tidak pasang.lalu pada halaman posting,saya tambahkan feature breadcrumbe. dan yang tadi'a sidebar tidak ada,sudah saya kembalikan menjadi normal,karena template itachi sebenar'a bertujuan untuk blog komik manga,karena itu posting'a sangat lebar.untuk design'a,saya ga buat aneh",simple aja deh, =___=v -Screenshot- -Pengaturan menu Buka blogger => edit HTML => lalu cari kode html seperti dibawah ini. <div id='nav'> <ul> <li><a href='http://#'>Home</a></li> <li><a...

apa kabar sobat,udah lama nih saya ga share trik css lagi,kali ini saya tadinya cuma iseng" otak-atik box css3,tapi akhirnya jadi begini deh,lalu saya buat saja jadi menu.menu ini menggunaan hover effect transform.jadi ketika kita hover/arahkan kursor kemenu,maka akan menampilkan beberapa menu lagi. karena itu saya sebut saja nama'a sub menu.menu'a saya buat 2 style.yaitu dengan 4 menu dan 8 menu.tadi'a sih pengen nambahin lagi,tapi karena sudah agak lelah,jadi saya posting saja sekarang,mungin nanti saya modif lagi trik sub menu ini. untuk contoh'a,kalian bisa lihat sendiri dibawah ini.direkomendasikan untuk menggunakan browser versi terbaru agar hasil'a maksimal.trik ini tidakberat kq,karena ini bukan css3 animation keyframe==v bila kalian mau mencoba,silakan copy paste saja CSS dan HTML dibawah ini. Css'a ditaruh di atas kode ]]></b:skin> .sedangkan untuk HTMl'a diantara <body> isi HTML </body>. atau bisa juga ke layout=>a...