ChugyGogog

  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

2009 Waktu yg cukup panjang untuk memulai sebuah "TULISAN SANTAI" dicampur dengan hobi yang mencoba diekpresikan dan dipublikasikan dalam sebuah wadah GRATISAN dari BLOGGER jadilah sebuah BLOG CHUGYGOGOG. Sebuah BLOG personal yang berisikan tulisan-tulisan alakadarnya dari nemu sana sini diposting diblogger, materi kuliah diposting, sampai kegiatan yang ga jelas juga diposting, Mulai dari gaya bahasa/tulisan yang GAPTEK sampai Gaya-gayaan Profesional biar disebut orang pinter oleh yg membaca blog ini, semua dituliskan disini. Banyak kenangan indah dari blog ini mulai dari KECANDUAN NULIS begadang semalaman biar update diblogger sampai KEMALESAN NULIS yang ga tanggung-tanggung berbulan-bulan sampai beberapa tahun ga update-update. :) :v , yah itulah lika-liku seorang blogger. Mungkin memang semua manusia secara kodratullah tidak selalu konsisten dalam satu bidang, banyak faktor-faktor yang membuat orang berubah-ubah dalam jangka panjang atau pendek termasuk yg punya blog

Akhirnya bisa kembali curat coret di blog ini setelah hampir dua tahun postingan terakhir yang dipublis hadooooooh. Untung masih banyak yang ngedatengin blog ini walaupun jarang di update juga. Mudahan mudahan dengan redesign template bisa kembali bersemangat buat blogging lagi. Sebelumnya ana mau nyapa dulu ni buat kawan-kawan blogger yang satu angkatan yang masih update terus kayanya blognya ahahahaha , ada DJ Ferdinan “Aktif”, Om Rawin “Aktif”, Om Adit Belantara Indonesia “Setengah Aktif”, Om Rame “Setengah Aktif”, Bang Hendro Prayitno “Blog’a Ngilang” ahahaha siapa lagi ya kayanya masih banyak tapi dah pada lupa euy. Pokoknya buat kawan-kawan blogger semuanya happy Blogging. Sedikit cerita ni soal pergantian templet berhubung ternyata banyak kawan-kawan blogger yang pake template responsive jadi kepengen modif template jadul ini menjadi responsive, walaupun ga tau ni hasilnya responsive apa ngga ni template. Kakau juga ternyata maen dengan coding2 CSS sm HTML yan

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

Sebelumnya saya mengucapkan SELAMAT TAHUN BARU 2011 buat blogger semua, semoga di awal tehun ini kita bisa menjadi lebih baik dari tahun kemarin. Mengawali posting di awal tahun ini saya akan membahas cara pembuatan frame Content pada area template blogger. Frame Content ini bisa diterapkan pada bagian atas (top), bawah (Bottom) atau sidebar kiri dan kanan template bloger, dan untuk kali ini saya akan membuat frame content pada bagian atas template blogger. Lihat Demo Langsung pada cara pembuatan frame content : Pertama masukan kode dibawah ini diatas kode ]]></b:skin> #framecontent{ position: absolute; top: 0; left: 0; width: 100%; height: 90px; overflow: hidden; background: #6db3f2; } #maincontent{ position: fixed; top: 92px; left: 0; right: 0; bottom: 0; overflow: auto; background: #fff; } .innertube{ margin: 15px; } * html body{ /*IE6 hack*/ padding: 90px 0 0 0; /*Set value to (HeightOfFrameDiv 0 0 0)*/} * html #maincontent{ /*IE6 hack*/ height: 100%; width: 100%;} La

Melanjutkan dan menambahkan postingan yang lalu mengenai pembuatan menu navigasi horizontal dengan tab pointer no image , kali ini saya coba membuat menu navigasi horizontal dengan tambahan search box atau kotak pencari. menu navigasi horizontal ini masih cukup simple hanya menggunakan sedikit gradasi dan juga box shadow css3 pada background. Lihat Demo Untuk pemasangannya saya coba memasang pada area widget template supaya lebih cepat. Tambah widget pada bagian bawah header template blogger > Pilih HTML/JavaScript lalu masukan kode dibawah ini : <style type="text/css"> .black{ float:left; margin-bottom:10px; padding:0px; width: 100%; overflow: hidden; background: #499bea; background: -moz-linear-gradient(top, #999 0%, #000 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999), color-stop(100%,#000)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#999', endColorstr='#000',GradientType=0 ); -moz

Untuk kali ini saya coba melengkapi atau menambahkan sedikit koleksi menu navigasi horizontal untuk blogger, yang mungkin ingin merubah tampilan menu navigasi di blognya. Untuk demonya bisa lihat gambar dibawah atau klik link demo yang ada di bawah. Demo Navigasi Untuk pemasangannya navigasi horizontal saya rasa blogger sudah paham jadi silahkan lihat kodenya di bawah ini. Kode CSS (Cascading Style Sheet) .menu { padding:0; margin:0; list-style-type:none; white-space:nowrap; } .menu li { float:left; min-width:100px; } .menu a { position:relative; display:block; text-decoration:none; min-width:100px; float:left; } * html .menu a { width:100px; } .menu a span { display:block; color:#fff; background:#7cbc0a; border:1px solid #fff; border-width:2px 1px; text-align:center; padding:4px 16px; cursor:pointer; } * html .menu a span { width:100px; cursor:hand; w\idth:66px; } .menu a b { display:block; border-bottom:2px solid #06a; } .menu a em { display:none; } .