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; } .

Membuat Link yang meloncat pada link target atau jump link istilah populernya, sangat berguna ketika kita menulis postingan yang panjang dengan beberapa sub bab dengan memasang jump link bisa memudahkan pembaca yang ingin melihat bagian mana yang ingin di baca. Pada prinsipnya jump link hampir sama dengan back to top walaupun kode yang di gunakan berbeda, tentunya ini bukan hal baru untuk blogger. Jump link ini bisa di gunakan sebagai navigasi di awal postingan yang menuju pada target tulisan atau paragrap yang di inginkan ataupun sebaliknya. Cara pembuatan jump link ini cukup mudah kita hanya memberikan link yang akan di jadikan target misalnya seperti ini : Target untuk jump link yaitu paragrap pertama " Membuat Link " Tulis linknya seperti dibawah ini pada kata "Membuat Link" paragrap pertama. <A NAME=" Membuat Link "> Membuat Link </A> Pasang pada kalimat yang di targetkan, Selanjutnya kita memasang navigasi untuk jump link kodenya s

Permasalahan yang sering terjadi pada browser Internet Explorer versi jadul biasanya tampilan gambar yang dijadikan sebagai background kadang tidak muncul, dan juga layout yang menjadi kacau posisinya. Dan kali ini saya akan memberikan solusi atau trik bagaimana mengatasi background image blog yang tidak muncul di Internet Explorer , Langsung saja pada triknya. Tambahkan kode seperti dibawah ini pada bagian background image yang anda pasang : _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeQ5_ecsupQXoJG9GQr8H1asXep8FbIUXcrnNRo87j7xUVV3d-CehFc1yonn79aTs6in04ALRD4DsNip6KllbmipWkKNaNJYl1RyKjhjQ6f9tMsrNK70MvUUhyhvauIS1gkwGRFXkukeOo/s1600/body.jpg ',sizingMethod='crop'); Sebagai contoh saya memasang backround pada bagian body blog, maka hasil keseluruhan code yang telah ditambahkan dengan kode di atas seperti ini : body { background:#fff url( https://blogger.googleusercontent.c

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

jika tutorial blog sebelumnya membahas cara modifikasi label-tag seperti menu navigasi ala wordpress , dan untuk tutorial blog kali ini akan membahas cara mengganti warna background dasar blog secara otomatis tanpa harus mengdit html template anda. Cara merubah warna background dasar blog ini bisa dilakukan secara otomatis dengan menambahkan sedikit script yang bisa ditempatkan pada bagian widget blog anda. Lihat DEMO Cara pembuatannya seperti berikut : Masuk pada dasbor blog anda Pilih Rancangan >> Add widget Template >> Pilih HTML/Javascript Masukan script merubah background outomatis dibawah ini : <div style="overflow:auto; width:100%; height:100%;margin-top:16px"> <script type="text/javascript"> function bgChange(bg) { document.body.style.background=bg; } </script> Pilih Warna Latar <table border="1" width="300" height="20"> <tr> <td onclick="bgChange('')" bgcolor=&qu

Tutorial kali ini saya akan memodifikasi tampilan tag atau label pada postingan, untuk blogger biasanya label dipisahkan dengan menggunakan tanda koma[,] contohnya seperti ini : Tutorial blogger , Modifikasi label , Tag Ala Wordpress . dst, Pemisah antara tag atau label ini bisa kita modifikasi seperti menu navigasi . Lihat screen shoot gambar dibawah ini : Jika anda tertarik untuk membuat tag atau label seperti menu navigasi silahkan ikuti tutorialnya di bawah ini :: Pertama Masuk pada Edit HTML - Expand Template Widget Selanjutnya kita sembunyikan dulu comment - Author - dan Label dengan cara menambahkan kode dibawah ini pada bagian body. .post-comment-link a{display:none;} .post-author{display:none;} .post-labels{display:none;} Untuk mempercepat pengerjaan saya menggabungnya kode diatas pada bagian Tag, jadi hasil kode keseluruhan seperti berikut : .post-comment-link a{display:none;} .post-author{display:none;} .post-labels{display:none;} div.tag{font-size:11px;padding-top:5px; col

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;

Akhirnya tampilan template blog ini bisa sedikit rapih dibuka pada browser Google Crome , setelah sebelumnya mengalami masalah pada bagian readmore di postingan yang kadang muncul full di halaman depan atau homepage. Sebelumnya Saya ucapkan terimakasih untuk Mas ALamathuR d'hileudjapanist II yang telah memberikan informasi mengenai tampilan blog ini yang terkesan seperti gado gado kalau di buka di browser Google Crome karena beberapa posting terlihat full di halaman depan. Sebenarnya masalah ini sudah saya ketahui sudah lama namun memang belum menemukan solusinya jadi saya biarkan saja, hingga akhirnya saya menemukan juga solusi mengatasi tampilan postingan di browser google crome . Ternyata permasalahannya ada pada penggunaan readmore yang saya pasang di blog ini, kebetulan blog ini masih menggunakan readmore jadul dan setelah saya cek dengan blog saya yang lain yang menggunakan readmore jadul, ternyata permasalahan yang sama pun terjadi tampilannya tidak sempurna pada beberapa

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;

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