ChugyGogog

Membuat slide image biasanya memerlukan script yang banyak dan rumit, kita juga tidak bisa menaruhnya langsung di blog kita karena akan menghambat akses blog yang lambat, jadi biasanya harus menggunakan pihak kedua untuk menyimpan file JS tersebut. Untuk kali ini saya coba membuat sebuah slide image dengan CSS3 tanpa java script dan JQuery . Slide image CSS3 ini sangat simple dan mudah di gunakan, saya menambahkan sedikit shadow pada bagian background utamanya dan link slide mode page number untuk melihat gambar selanjutnya. sebenarnya slide image ini cara kerjanya hampir sama dengan pagination atau page number yang mengalihkan link ke page berikutnya. untuk lebih jelas silahkan lihat demo di link bawah ini. Lihat DEMO Untuk membuat slide image dengan css3 caranya cukup simple. Lihat caranya di bawah ini. Pertama tambah Widget > Pilih HTML/JavaScript di blog anda dan Copy kode di bawah ini. <style> #images { -webkit-box-shadow: #131313 0px 2px 10px; -moz-box-shadow: #

Membuat background dengan kombinasi warna atau gradient untuk menu navigasi , background dasar dan lainnya memang mudah jika menggunakan program grafis seperti adobe photoshop dan kawan kawan, tapi tentunya tidak semua orang menguasai program grafis tersebut dan juga ukuran image yang dihasilkan relative besar. Di postingan sebelumnya pernah saya bahas warna warni gradient dengan css3 namun hanya beberapa saja , Banyak website di internet yang menyediakan pasilitas untuk membuat kombinasi warna atau gradient generator yang bisa kita manfaatkan. Dengan css gradient generator yang ada di internet anda bisa memilih banyak warna gradasi yang inginkan. Untuk kali ini saya akan memberikan situs yang menyediakan fasilitas untuk membuat background gradasi atau gradient yang sangat keren dan mudah digunakan dibandingkan dengan gradient generator yang pernah saya kunjungi, nama situsnya adalah www.colorzilla.com/gradient-editor. CSS Gradient Generator dari www.colorzilla.com/gradient-ed

postingan kali ini saya akan memberikan tutorial pembuatan menu navigasi dengan model circle atau lingkaran menggunakan css3. Menu navigasi ini full menggunakan css3 tanpa image, Circle Horizontal navigasi menu css3 ini cukup lumayan walaupun hasil dari iseng-iseng membuat lingkaran dengan css3 sehingga terpikir untuk di implementasikan kepada menu navigasi horizontal , ternyata cukup memuaskan hasilnya. Untuk contohnya lihat gambar dibawah ini. Untuk kode css3 lingkaran atau circle sebenarnya menggunakan border radius contoh kodenya seperti dibawah ini: -moz-border-radius:100px; -webkit-border-radius:100px; Langsung pada pembuatan circle menu navigasi dengan css3 : Untuk lebih mudah tanpa obrak abrik kode template, jadi saya memasang navigasi ini langsung di widget. Masuk pada Rancangan >> Tambah Gadget >> HTML/JavaScript Masukan kode di bawah ini : <style type="text/css"> ul#circle { display: inline;list-style: none; } ul#circle li { margin-right:6px;

Menambahkan postingan yang kemarin mengenai Membuat tombol Dengan CSS3 yang kebetulan ada rekan blogger BelajarCORELDRAW yang meminta beberapa source kode untuk button CSS3 yang lebih berpariasi dengan penggunaan warna yang berbeda, Karena memang kemarin saya hanya membuat satu sample button CSS3 dengan warna gradasi putih. Untuk sekarang saya mencoba memberikan source kode button Gradient CSS3 yang sedikit warna warni , Untuk contoh bisa lihat screen shoot gambar dibawah ini. Untuk source kodenya bisa diambil dibawah ini sesuai dengan warna button CSS3 yang diinginkan. Source kode Black Button : .black { color: #d7d7d7; border: solid 1px #333; background: #333; background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000)); background: -moz-linear-gradient(top, #666, #000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000');} .black:hover { background: #000; background: -webkit-gradient(linear,

Penggunaan share button (Social booksmark) di blog sangat berguna sekali untuk meningkatkan popularitas blog, tentunya blogger semua sudah tahu salah satu cara untuk meningkatkan popularitas blog yaitu dengan memasang tombol share (Social booksmark). Sekarang saya coba membuat share button dengan CSS3 , share button ini menggunakan ikon dan teks secara horizontal dan juga teks shadow, background gradient dengan CSS3. Contoh Tombol Share dengan CSS3 seperti dibawah ini. Tombol share ini saya coba pasang dibawah postingan, tapi anda bisa saja memasang di bagian yang anda inginkan. Untuk cara pembuatan tombol share dibawah posting seperti berikut : Masuk pada Edit HTML > Expand Template Widget Masukan kode dibawah ini sebelum kode ]]></b:skin> #bookmarks { padding:6px 0px;text-align:left; overflow: hidden;} #bookmarks a { padding:4px; -moz-border-radius:4px; -webkit-border-radius:4px; color: #9999; text-shadow:1px 1px 0px rgba(255,255,255,0.8); border: solid 1px #c0c0c0;