Yours Theme

Siapa yang tidak kenal dengan situs css-trick.com , situs milik Chris Coyier ini selalu menghadirkan berbagai macam tutorial web design yang cukup inovatif dan menjadi salah satu situs referensi buat blog ini . Sebelum tampilan webnya berubah seperti sekarang ini ketika sobat menyambanginya tentu tidak asing dengan efek kilat pada bagian footernya yang ketika disentuh mouse garis pada linknya seperti keluar kilat . Nah sekarang saya akan mengenang kembali efek itu .  Demosion Tapi sebelumnya saya akan memperingatkan kalian untuk tidak memasangnya kalau blog kalian mempertahankan validasi pada CSS3 , karena beberapa kode mungkin tidak akan valid pada CSS3 .  Kustomisasi  CSS footer{ position:relative; width:90%; margin:0 auto; font-size:1rem; } footer, div a{ display:block; } div{ width:50%; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box; overflow:hidden; } div.lft{ float:left; text-align:left; } div.rgt{ fl

Pada kesempatan kali ini saya akan menjawab request dari sahabat yang menanyakan tentang bagaimana membuat dua kolom yang super responsive . Sebenarnya trik dalam membuat dua kolom responsive ini sudah bertaburan diluar sana , namun gak ada salahnya saya tambahkan disini . Dalam membuat dua kolom responsive sangat lah sederhana karena saya memanfaatkan CSS3 box-sizing sebagai pengatur jarak permanen. Property CSS3 box-sizing ini hampir suport pada semua browser . Kodenya seperti dibawah ini  *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } Fitur ini sangat berguna ketika kita akan mengatur lebar pada sebuah area / elemen. Contoh saya akan membuat dua area kolom . CSS .KolomKiri,.KolomKanan { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .DuaKolom { position: relative; margin: .5em; } .KolomKiri, .KolomKanan { border: 1px solid #ccc; padding: 1.25em; } .KolomKiri

Masih Seputar tutorial dalam membuat menu untuk bagian sidebar , namun ini agak sedikit berbeda dari menu tutorial kemaren yang menggunakan system hover , karena kali ini saya menggunakan Push Menu dengan system onclick ( menu akan muncul setelah kita klik tombol / button  tertanda ) dan sekaligus ini jawaban dan request para sahabat.  Baca: Memasang Simple Flat Sidebar  Demosion   Langkah Kustomisasi  Masukan kode CSS dibawah ini sebelum kode </style> .pushmenu { /*this is the nav*/ background: #3c3933; font-family: Arial, Helvetics, sans-serif; width: 240px; height: 100%; top: 0; z-index: 1000; position:fixed; } .pushmenu h3 { color: #cbbfad; font-size: 14px; font-weight: bold; padding: 15px 20px; margin: 0; background: #282522; height: 16px; } .pushmenu a { display: block; /* drops the nav vertically*/ color: #fff; font-size: 16px; font-weight: bold; text-decoration: none; border-top: 1px solid #56544e; b

Simple Flat Sidebar yang saya share kali ini tampilannya cukup simple tapi tetap menarik untuk dijadikan pilihan ketika sobat melakukan modifikasi template . Sesuai namanya Simple Flat Sidebar berarti keberadaannya tepat disamping area postingan dan menu ini akan muncul ketika kita melakukan hover  . Silahkan lihat demonya !  Demosion Langkah Kustomisasi  Masukan kode CSS sebelum kode  </style> /* Navigation */ nav{ width: 300px; height: 100%; background: #333; position: fixed; top: 0; left: -236px; z-index: 2; transition: left .7s; -webkit-transition: left .7s; } nav:hover{ left: 0; } nav:hover ~ #content{ opacity: .3; } nav a, nav a:hover{ text-decoration: none; } /* Navigation -- Icon */ nav .icon{ width: 32px; height: 32px; float: right; margin: 20px 16px 0 0; font-size: 36px; text-align: center; line-height: 32px; color: white; transition: opacity .7s; -webkit-transition: opacity .7s; } nav:hover .icon{

Pada kesempatan kali ini saya akan sedikit mendiskusikan tentang pemahaman validasi HTML5 pada blogger yang konon katanya akan meningkatkan SEO. Belakangan berbagai spekulasi berkembang mengenai validasi HTML5 yang akan menaikan kualitas Search Engine Optimization . Tapi disisi lain ada yang berpendapat bahwa Validasi HTML5 tidak begitu penting bahkan tidak penting sama sekali pada blogger dan tidak ada hubungannya sama sekali dengan SEO , benarkah ?. Sebelumnya kita akan mengenal terlebih dahulu apa itu HTML ?.  HTML  HTML ( Hyper Text Markup Language ) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web , menampilkan berbagai informasi di dalam sebuah penjelajah web internet pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegrasi . HTML dibuat oleh kolaborasi Caillau TIM dengan Berners -Lee Robert ketika mereka bekerja di CERN pada tahun 1989.  Sejarah dari standar HTML  HTM