ChugyGogog

Postingan ini saya coba menjawab pertanyaan [Rizky2009] yang menanyakan cara membuat navigasi Next Page - Home - Back Page dengan menggunakan Button CSS3 , untuk contohnya bisa lihat ilustrasi gambar dibawah, atau link next page di bagian bawah. Langsung pada cara membuat Button Next Page - Home - Back Page Dengan CSS3 . Pertama pastikan anda sudah memasang Button CSS3 pada template anda agar button bisa diterapkan, Untuk lebih jelasnya baca postingan sebelumnya yaitu : " Membuat Tombol Dengan CSS3 - Buttom CSS3 Style " Sekarang masuk pada Edit HTML > Expand Template Widget Cari kode seperti dibawah ini <div id='main-wrapper'> <b:section class='main' id='main' showaddelement='yes'> <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'> <b:includable id='nextprev'> <div class='blog-pager' id='blog-pager'> <b:if cond='data:newerPage

Kali ini saya mencoba membuat tombol atau buttom dengan CSS3 dengan menggabungkan ronded corner, Gradient linear CSS3 dan Box shadow CSS3 agar lebih menarik tampilan dari button ini. Button ini bisa di aplikasikan pada link di postingan maupun pada bagian template yang anda inginkan. Contoh Button menggunakan CSS3 Untuk membuatnya silahkan ikuti langkahnya dibawah ini. Masuk pada Edit HTML masukan kode dibawah ini, diatas kode ]]></b:skin> .buttom { padding: 8px;padding-top:6px; padding-bottom:6px; margin-right:3px; -moz-border-radius:4px; -webkit-border-radius:4px; -moz-box-shadow:0px 0px 2px rgba(0,0,0,0.4); -webkit-box-shadow:0px 0px 2px rgba(0,0,0,0.4); color:rgba(0,0,0,0.9); text-shadow:1px 1px 0px rgba(255,255,255,0.8); border:1px solid rgba(0,0,0,0.5); background: -webkit-gradient(linear, left top, left bottom, from(#f3f3f3), to(#cccccc)); background: -moz-linear-gradient(top, #f3f3f3, #cccccc); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#

Postingan kali ini saya coba menulis seputar CSS3 lagi, sebagai pelengkap dari CSS3 yang lalu yaitu Hover background transitions , Hover Tab menu dan juga Postingan yang lalu saya pernah membahas membuat menu navigasi CSS3 dengan menggunakan Free CSS3 Menu Maker . dan kali ini saya coba membuat menu navigasi horizontal dengan menggunakan background gradient linear full CSS3 tanpa image dengan warna Black Dop. Seperti apa bentuknya menu navigasi dengan CSS3 ini lihat screen shoot di bawah ini. Menu Navigasi diatas menggunakan background Gradient linear CSS3 dengan kode warna #444444 pada bagian atas dan #666666 untuk bagian bawah. dan juga ronded corner pada bagian ujung kiri dan kanan, semuanya menggunakan CSS3. Untuk contoh kode Gradient linear seperti ini : background: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#666666)); background: -moz-linear-gradient(top, #444444, #666666); Model navigasi seperti ini kalau dalam bahasa sundanya sih Slick navigasi

Transitions dalam CSS3 bisa diartikan sebagai perubahan warna yang bisa kita gunakan untuk merubah warna background pada bagian element halaman tertentu. Transition ini mungkin hampir sama dengan hover pada tautan link yaitu ketika mouse menyentuh link maka link tersebut bisa berubah warna, teks, ataupun backgroundnya sesuai dengan pengaturan tautan link anda. Saya coba membuat Transitions CSS3 ini pada bagian Body komentar, untuk contoh silahkan arahkan kursor mouse anda pada bagian body komentar di blog ini. Pada saat kursor menyentuh bagian body comentar, background body comentar akan berubah warna. Untuk cara pembuatan Transitions CSS3 ini bisa langsung ikuti caranya di bawah ini. Pertama masuk pada Edit HTML Cari kode seperti dibawah ini #comments-block .comment-body { background-color: #DEB887; margin:.25em 0 0; } Tambahkan kode Transitions CSS3 seperti ini. background-color: #DEB887; -o-transition-property: background-color; -o-transition-duration: 1s; } Lanjutkan dengan men

Akhirnya bisa beres juga mengganti tampilan template blog ini, walaupun cukup lama dalam pengeditan dan koneksi inet yang lagi ngadat tapi alhamdullilah akhirnya beres juga dan bisa kembali menulis postingan lagi, sebelumnya saya meminta maaf kalau pengunjung blog ini dibuat tidak nyaman dengan tampilan blog ini. Masih seputar CSS3 , Untuk sekarang saya akan membahas cara membuat Hover Tab Menu CSS3 tanpa Javasript. Tab menu mungkin sudah tidak asing lagi untuk blogger karena dari sekian blog yang pernah saya singgahi hampir 50% memasang tab menu. Lihat demo Hover Tab Menu CSS3 tanpa Javascript Tab menu ini cukup simple dan menarik dan saya rasa belum banyak yang memansang tab menu seperti ini. Tab Menu CSS3 ini di buat oleh www.kamikazemusic.com jadi silahkan blogger langsung ke situsnya untuk melihat atau mencoba membuat hover tab menu CSS3 tanpa Javascript. Langsung pada Tutorial pembuatan Hover Tab Menu CSS3