ChugyGogog

Membuat Spectrum Equalizer dengan after effect, Tutorialnya mudah banget langsung aja cek video tutorial cara membuat spectrum equalizer. *** Jangan lupa untuk Subscribe, Like & Share. Instagram : Chugy Gogog Blog : https://chugygogog.blogspot.com cek video tutorial After effect lainnya ; Yusuf Studio Animation : https://youtu.be/88q-7UzObxU Time Remapping : https://youtu.be/gNG_b-biecQ Membuat Spectrum Equalizer : https://youtu.be/rroJvMQywo4 Motion graphic Short Duration : https://youtu.be/wLcwmm3__gI

  Halo sobat bogger semuanya semoga dalam keadaan sehat selalu. kali ini ChugyGogog ingin membahas cara membuat halaman Page / posting untuk memasang video youtube di blogger.  Untuk caranya sebenarnya tidak terlau sulit karena di blogger sebenarnya sudah ada fitur untuk membuat posting video, cuma tampilan video youtubenya sepertinya kurang memuaskan secara visual / tampilan yang menurut saya kurang enak dipandang... hehehe.  Nah ali ini saya akan membuat video youtube untuk ditampilkan di blogger dengan tampilan video menjadi kiri dan kanan / left right. Tampian dari Video Youtube inipun sudah Responsive jadi jangan khawatir untuk di akses di smartphone. Untuk contohnya bisa lihat disini .  Langsung saja ke tutorial pembuatan / pemasangan video youtube di blogger. disini saya memasang externa CSS ya jadi kita memasukan CSS nya langsung di postingan. 1. Langkah pertama masuk ke blogger 2. Masuk ke menu Posting / Halaman yang ingin dipasang video youtube 3. Buat postingan baru 4. Rubah

Membuata transfaran pada background bisa menggunakan kode opacity, namun dengan opacity objek keseluruhan biasanya akan terbawa menjadi transfaran. Dengan penggunaan css3 dengan mengubah nilai “rgba” hal ini bisa dilakukan pada area background-color, border-color maupun color pada text sehingga kesan senada dan selaras akan lebih terlihat. Contoh : body {         background: blue ; } .main-wraper {       background : rgba ( 0, 0, 0, 0.1) ;       border : 1px solid rgba ( 0, 0, 0, 0.3) ;       color : rgba ( 0, 0, 0, 0.5); }

Selamat siang brader blogger semua kembali posting ni setelah sebelumnya memposting firefox versi 4 yang ternyata memiliki tampilan yang sedikit berbeda dari versi seblumnya. untuk kali ini ini saya akan memposting bukan seputar internet komputer melainkan seputar css dan blogger. Seperti judul posting ini yaitu membuat Speak Buble dengan Css3 . Speek buble ini merupakan tehnik permainan border dengan css. Dengan menggunakan Css Speak Buble dapat dibuat tanpa menggunakan image jadi ini akan lebih ringan dibuka di browser. Langsung saja pada penerapan dan koding css-y. Sebagai contoh saya membuat speak buble untuk teks area. contohnya bisa dilihat dibawah ini. Pertama kita buat kode CSS Speak Buble-y seperti ini. .speakbuble { position:relative; padding:30px; margin:3px 0; margin-top:1%; color:#000; text-align:center; background:#CCC; font-weight:bold; text-shadow:1px 1px 1px #eee; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px;} .speakbuble:after { content:&qu

Selamat sore Brader Blogger semua akhirnya kembali membuat postingan walaupun sekarang jarang update tapi alhamdulilah disisa waktu luang ini akhirnya bs kembali update. Untuk sekarang saya akan share seputar tutorial CSS3 yang lama juga tidak ada info yang baru. Apalagi bang Hendro sesepuh CSS3 juga udah jarang ngebahas CSS3 hehehe.... gimana ni bang Hendro kabarnya kayanya lg asyik dengan koding-koding di weblognya. Langsung saja pada pokok pembahasan. tutorial CSS3 kali ini akan membahas pembuatan background dengan texture/ pattern full CSS3 seperti gambar diatas, dimana semua itu dilakukan menggunakan koding CSS3 tanpa image. Untuk Demo livenya bisa lihat pada link di bawah. Demo Live Dan untuk codingnya dibawah. Angled Pattern .angled { background-color: #ac0; background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), c

Selamat sore blogger semua kayanya udah lama chugygogog tidak buat postingan. Okelah langsung saja di tengah sedikit kesibukan saya coba membuat sebuah tutorial blogger yang mudah-mudahan bisa bermanfaat. Tutorial kali ini saya akan membahas seputar CSS3 yaitu membuat Starburst atau bentuk seperti bintang dengan sudut berbentuk segitiga seperti gambar di bawah ini. Atau untuk lebih jelasnya bisa lihat demonya pada link dibawah ini. Lihat Demo Tehnik css3 ini saya temukan diblognya www.matthewjamestaylor.com yang merupakan blogger penganut css3 silahkan dicek saja. Oke langsung pada kodingnya saja ya. ul.starbursts { list-style:none; margin:20px 0; padding:0; overflow:hidden; } ul.starbursts li { float:left; width:10em; height:10em; position:relative; } ul.starbursts * { margin:0; padding:0; line-height:1.2em; } .starburst { display:block; width:6em; height:6em; background:#fe0; -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); rotation:-45deg; posit

Untuk postingan kali ini saya akan membuat galery imege dengan hover thumbnail hanya menggunakan CSS, Hover box image thumbnail ini sangat cocok buat blogger yang blognya mengkoleksi banyak gambar atau image. Lihat Demo Untuk kodenya bisa lihat di bawah ini : CSS Code .hoverbox{ cursor: default;list-style: none;} .hoverbox a{ cursor: default;} .hoverbox a .preview{ display: none;} .hoverbox a:hover .preview{ display: block;position: absolute;top: -33px;left: -45px;z-index: 1;} .hoverbox img{ background: #fff; border:1px solid #ccc; color: inherit; padding: 2px;vertical-align: top;width: 100px;height: 75px;} .hoverbox li{ background: #eee; border:1px solid #ddd; color: inherit; display: inline;float: left;margin: 3px;padding: 5px;position: relative;} .hoverbox .preview{ border-color: #000;width: 200px;height: 150px;} HTML Code <ul class="hoverbox"> <li><a href=" LinkAnda "><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVv