ChugyGogog

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='#

Kali ini saya coba membahas sedikit Permasalahan yang sering terjadi pada kotak komentar . Dari beberapa blogger yang pernah dikunjungi ChugyGogog ternyata kotak komentarnya bermaslah. Contohnya untuk blog Simple Rey, ketika saya ingin berkomentar diblognya kotak Word verifikasi-y tidak muncul sehingga tidak bisa mempublish komentar. Contohnya seperti gambar dibawah ini. Seharusnya dibawah word verification muncul kotak untuk menuliskan verifikasi tersebut, tapi di situ kotak penulisannya tidak muncul. Tapi yang saya bingung kenapa ada yang bisa berkomentar, sedangkan di kompi saya kotak word verifikation ini tidak muncul seperti gambar di atas....? " Disini saya coba memberikan saran kepada Blognya Simple rei ataupun blogger lain yang mengalami masalah yang sama pada verification komentar untuk tidak mengaktifkan word verification pada pengaturan komentar " . Yang menjadi permaslahan mungkin pada kotak word verification, dulu juga sempat terjadi kasus yang sama pada blog

Melengkapi tutorial blogger sekaligus memberikan altenatife pengaturan pada label yang kemarin - kemarin telah diposting diantaranya Mengatur label cloud dengan hover background , dan juga cara manual mengatur jumlah posting pada label , dan untuk melengkapinya saya memberikan alternative lain cara mengatur jumlah posting yang ditampilkan pada label dengan mengedit secara langsung di HTML. Kelebihan meng-edit langsung jumlah label pada bagian HTML yaitu setiap label yang dipasang baik mode Daftar maupun Cloud, maka jumlah posting yg tampil akan sama sesuai dengan angka / jumlah label yang diinginkan. Langsung pada tutorial cara mengatur jumlah posting pada label : Masuk Rancangan > Edit HTML . Beri tanda centang pada Expand Template Widget. Sekarang Cari kode seperti dibawah ini : <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'> Biasanya ada dua kode yang sama seperti diatas, tempatnya sedikit kebawah dari kode yang pertama. Kalau tidak ad

Kali ini saya coba memodifikasi tampilan dari label cloud dengan menambahkan hover background ronded corner pada setiap link label cloud tersebut, secara standar label cloud ataupun link akan mengikuti pengaturan tautan link standar dari template anda. Langsung pada tutorial mengatur Label cloud dengan hover background caranya seperti berikut : Pertama tambahkan label cloud terlebih dahulu pada blog anda Tambah Gedget > Label > Cloud > Simpan . Masuk pada Edit HTML masukan kode di bawah ini pada bagian CSS atau diatas kode ]]></b:skin&gt; #Label1{ margin:0px; padding:6px } #Label1 .widget-content{ line-hight:1.4em; text-align:center; margin:0px; padding:10px } #Label1 a{ text-shadow:1px 1px 0 rgba(255,255,255,0.8); color:#000; text-decoration:none; padding:4px; } #Label1 a:hover{ padding:1px 4px; -webkit-border-radius:5px; -khtml-border-radius:5px; -moz-border-radius:5px; border-radius:5px; background:#a0a0a0; color:#fff; } Pratinjau terlebih dahulu kalau suda

Kali ini saya akan memberikan link download koleksi pattern dengan gaya paper atau kertas yang bisa blogger gunakan sebagai background dasar template. Setelah sebelumnya memposting seputar CSS3 yaitu membuat Hover Background Transitions menggunakan CSS3. Patern background ini menurut saya cukup menarik karena miliki karakter yang cukup simple, dengan mengambil textur seperti kertas, Pattern background ini saya dapat dari situs http://www.3quarks.com. Di bawah ini ada beberapa sample background pattern yang saya ambil dari situsnya langsung. Lihat koleksi patternnya klik disini Langsung download Klik disini

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

Kayanya masih seputar CSS3 yang akan di bahas untuk postingan sekarang, mudah mudahan tidak bosan ya. Untuk kali ini saya akan memberikan info cara membuat Menu CSS3 Style simple nan cantik dengan bantuan program dari CSS Menu yaitu Free CSS3 Menu Maker. Postingan sebelumnya seputar CSS3 bisa lihat di bawah ini. (+) Buat Box Shadow dengan CSS3 (+) Menambahkan Stroke Pada Teks "Judul Blog Dengan Stroke" Program Free CSS3 Menu Maker ini bisa di download secara gratis, Free CSS3 Menu Maker akan memudahkan anda untuk membuat menu navigasi dengan gaya CSS3. Lihat Demo → Link Download →

Melanjutkan postingan seputar CSS3 yang di aplikasikan pada Teks Stroke , walaupun hanya sekelumit membahasnya karena memang saya juga masih belum begitu mendalami tentang CSS3. Dan kebetulan kemaren Bang Hendro komentat tentang Teks stroke ini yang bisa dimplementasikan dengan box Shadow. Thanks buat bang Hendro yang sudah memberikan tambahan untuk pengaplikasian CSS3 ini. dan sekarang saya coba mengaplikasikan CSS3 ini dengan membuat BOX SHADOW atau Kotak dengan tambahan bayangan menggunakan CSS3. Beberapa sample Box Shadow bisa dilihat di bawah ini: -moz-box-shadow: 1px 1px 10px #888; -webkit-box-shadow:1px 1px 10px #888; -moz-box-shadow: 0px 20px 10px -10px #888; -webkit-box-shadow:1px 1px 10px #888; -moz-box-shadow: 10px 10px 5px #888; -webkit-box-shadow:1px 1px 10px #888; -moz-box-shadow: inset 1px 1px 10px #888; -webkit-box-shadow:1px 1px 10px #888; Box Shadow di atas hanya beberapa saja mungkin untuk lebih berfariasi model,warna,tebal tipis bayangan-nya "Shadow" b

Stroke merupakan outline (garis luar) pada teks, Stroke ini biasanya digunakan untuk memperjelas dan mempertegas dari teks, penggunaan stroke ini ternyata bisa di aplikasikan pada kode css dan bisa di pasang pada teks di blog. Untuk contoh lihat saya memasang Teks Stroke ini pada Judul Blog " H1 " bisa dilihat contohnya disni atau gambar dibawah ini :: Untuk membuat teks Stroke caranya cukup mudah, Teks Stroke ini mungkin hampir sama dengan Teks sahadow karena memang disini menggunakan Teks sahadow untuk membentuk sebuah Teks Stroke. Untuk memasang teks stroke caranya cukup mudah. Masuk pada Edit HTML cari kode h1.title { Masukan code css di bawah ini di bawah kode h1.title { color:#000000; text-shadow: -1px -1px 0 #f3f3f3, 1px -1px 0 #f3f3f3, -1px 1px 0 #f3f3f3, 1px 1px 0 #f3f3f3; Silahkan di Preview terlebih dahulu, kalau cocok silahkan di save. Silahkan di ganti warna teks dan warna stroke serta ketebalan dari stroke diatas, dengan merubah angka angka angka tersebut.