ChugyGogog

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

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

Penggunaan jenis font pada blog sangat penting sekali karena font merupakan bagian vital yang dilihat pertama kali oleh pengunjung blog. Untuk penggunaan Karakter atau jenis font memang tidak ada aturan yang baku,namun alangkah baiknya kalau kita menggunakan font yang bisa memberikan kenyamanan membaca bagi pengunjung. Dibawah ini saya berikan contoh atau jenis font standar yang biasa digunakan pada blog ataupun website. Dengan melihat langsung jenis font anda dapat menimbang nimbang dan mimilah milah jenis font yang menurut anda cocok untuk blog anda. font-family: arial; Sample teks menggunakan font arial font-family: courier; Sample teks menggunakan font courier font-family: georgia; Sample teks menggunakan font georgia font-family: lucida grande; Sample teks menggunakan font lucida grande font-family: times; Sample teks menggunakan font times font-family: trebuchet; Sample teks menggunakan font trebuchet font-family: verdana; Sample teks menggunakan font verdana font-family: webd

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

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.

Mempercantik tampilan blog merupakan salah satu tips membuat pengunjung nyaman diblog atau webblog. Banyak cara dilakukan unuk mempercantik tampilan blog dari pengaturan warna template , layout dan lain lain. Salah satu cara mempercantik blog yaitu memasang Email Subscribe dan RSS Feeds, Dua subscribel ini memang sangat berguna sekali untuk pemilik blog tentunya Blogger sudah mengetahuinya. kali ini saya coba membuat Email Subscribe dan RSS Feeds dengan menggunakan image dan Horizontal Rule atau kalau dalam bahasa coding-ya "hr". Contoh di bawah ini : Email Subscribe Via Email RSS Feed Subscribe Via RSS Feed Untuk membuatnya caranya cukup mudah. Pilih Tambah Gadget >> HTML/JavaScript. Masukan kode di bawah ini. <img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha3ViPvDTxC3zVYFBL4dxJ6KR42E0rwHOFc9m6e5PrkF5hGVAFefFrPc2fHhnEMa1hBreeDwm5bPUsmo77rSiPiK8E5p9lCSIqb_AOhBMs6mcud9OszBkjgBfGzfqQC2stwpAfSwSFQA1u/s400/email.png " alt=""

Untuk blogger yang suka Utak - atik template atau sering bergelut dengan coding CSS untuk blog atau Webblog tentu membutuhkan fasilitas yang dapat menunjang kebutuhan anda. Diantara dengan menggunakan Program CSS Editor. Ada banyak Program CSS Editor yang digunakan oleh desainer Blog atau Desainer Website Diantaranya program Dreamwever. Dreamweaver merupakan program yang cukup terkenal bagi para desainer template karena fiturnya yang cukup lengkap. Tapi buat anda yang kurang menguasai dengan Program Dreamweaver anda bisa menggunakan pilihan Program CSS Editor yang simple dan mudah gunakan. dibawah ini ada beberapa Program CSS editor yang bisa anda jadikan pilihan untuk megolah dan mengedit Code CSS. Notepad ++ (Free version) JEdit (Free version) Stylizer (Free version) PSPad (Free version) Xyle Scope (Free version) Stylesheet Maker (Not Free) CSSEdit (Not Free) Style Studio (Not Free) Rapid CSS 2010 (Not Free) Style Master (Not Free) Program diatas merupakan CSS Editor yan

Buat blogger yang tampilan blognya masih perlu penambahan menu navigasi sebagai sarana untuk mempermudah pengunjung melihat konten atau isi di blog anda, Tapi anda masih bingung ingin membuat menu navigasi seperti apa yang pas dan menarik ? Disini saya akan memberikan alternative bagi anda yang belum mendapatkan menu navigasi yang sesuai dengan selera anda anda tidak perlu repot mendesain menu navigasi dari awal sampai akhir , anda cukup menggunakan program dari CSS Tab designer ini semuanya bisa dilakukan dengan sangat mudah. Khusus bagi anda yang ingin membuat navigasi vertikal maupun horizontal yang super cepat dengan hasil yang bagus dan profesional anda bisa menggunakan program CSS Tab Designer V 2.0. Program CSS Tab Designer V 2.0 ini akan membantu anda membuat berbagai macam navigasi baik vertical maupun horizontal dengan cara yang cukup cepat dan mudah kaena program CSS Tab Designer V 2.0 telah menyediakan beragam macam menu navigasi vertikal dan horizontal dengan banyak pi

Memasang kotak pencarian atau search box di blogger akan memberikan kemudahan bagi pengunjung untuk mencari dan melihat postingan di blog anda. Dan untuk kali ini saya coba memposting cara membuat search box menggunakan Auto Hide denga menambahkan backkground warna ataupun background image. Untuk Auto Hide tentunya anda sudah jadi saya tidak perlu menjelaskan lagi. Untuk search box sebenarnya dari blogger sendiri sudah menyediakanya. namun kita tidak bisa meng custom tampilan dari search box tersebut ataupun merubahnya. Tapi dengan cara di bawah ini anda bisa merubah tampilan dari search box di blog anda. Contoh search box auto hide seperti di bawah ini Langsung saja pada pokok bahasan membuat atau me - modifikasi search box auto show hide. Masuk ke Blogger Pilih Tata Letak ( Rancangan ) - Tambah Gadget - HTML/JavaScript Masukan Kode HTML di Bawah ini. <style type="text/css"> #searchboxo{ background:#f3f3f3; border:1px solid #6B7171 ; width:240px; height:25px; ma

Untuk kali ini sya mencoba memberikan tips atau cara membuat teks shadow pada judul posting, mungkin blogger semua sudah mengenal atau mengetahui penggunaan teks shadow ini jadi saya cuma melengkapi saja. Langsung saja : Text shadow Pada Judul posting Langkah pertama masuk pada blog anda lanjukan pada Tata Letak - Edit HTML Cari kode seperti ini .post h3{ Lalu masukan kode text shadow di bawah ini di bawah kode .post h3{ text-shadow: 2px 1px 7px ; hasil Text nya akan seperti ini. Text shadow Pada Judul posting Di bawah ada beberapa jenis atau model dari text shadow yang bisa anda gunakan. text-shadow: 2px -2px 4px; hasil Text nya akan seperti ini. Text shadow pada Judul posting text-shadow: 2px 2px 0px; hasil Text nya akan seperti ini. Text shadow pada Judul posting text-shadow: -1px -1px white, 1px 1px #333; hasil Text nya akan seperti ini. Text shadow pada Judul posting Silahkan anda pilih beberapa jenis teks shadow yang ada di atas. Anda juga bisa Mengcustomize dari jenis text

Navbar atau Navigasi Bar adalah sebuah Navigasi atau Menu yang di gunakan untuk menyimpan Link Link Menu pokok atau penting di Blog atau Website. Navigasi ini bisa berbentuk Vertical ataupun Horizontal . Navigasi Bar ini bisa dibuat dengan menggunakan image ataupun background warna saja dengan berbagai macam variasi. Di Postingan sebelumnya saya pernah membahas bagaimana Cara Membuat Menu Horizontal Yang Simple dan Cantik. silahkan di baca baca dulu untuk flash back memory anda. Kalau sudah silahkan lanjukan bacanya. Untuk kali ini saya akan memberikan informasi cara membuat Navbar atau Menu Navigasi ini secara online, yaitu dengan menggunakan Pasilitas dari Graphic navbar Generator . Graphic Navbar Generator ini menyediakan pasilitas pembuatan Navbar secara online, Sehingga Anda tidak perlu repot repot untuk membuat sebuah Navbar Menu. Baik Navbar verical maupun horizontal. Anda tinggal memilih Navbar yang sudah disediakan dengan banyak pilihan yang menarik, lihat screen shoot gam

Membuat ronded corner pada template mungkin akan mempercantik tempilan dari blog itu sendiri di bandingkan hanya dengan menggunakan Kotak persegi saja tapi tentunya bukan berarti template yang menggunakan kotak persegi jelek , Untuk selera dan penilaian setiap orang tentunya berbeda-beda. Ok langsung saja pada pokok pembahasan, kali ini saya akan memberikan tips cara merubah tampilan template anda dengan menggunakan ronded corner. Sebagai conton anda bisa lihat blog saya yang ini www.chulection.blogspot.com . Sebelumnya Sebagai tambahan saya akan menjelaskan sedikit tentang bagian-bagian dasar dari template itu sendiri. Bagian Bagian Dasar dari Template : Yang pertama Background : Ini merupakan lapisan paling bawah dari sebuah template. Yang kedua Outer Wraper : Ini merupakan lapisan kedua di atas background. yang ketiga Header - Main Wraper - Sidebar - Dan Footer : Ini merupakan lapisan paling atas dari sebuah template. Header mempunyai posisi di bagian atas . Main wraper mem

Tutorial Kali ini saya akan membahas cara membuat Vertical Menu dengan Modifikasi menggunakan Ronded Corner , Mungkin Vertical Menu ini pernah saya bahas pada postingan sebelumnya bisa di lihat disini . Sebagai tambahan saja buat teman teman blogger yang ingin merubah atau mengganti link Menu Vertical dengan Ronded Corner silahkan ikuti caranya dibawah ini. seperti biasa saya membuat menu ini tanpa harus membuka EDIT HTML template anda cukup dengan menambahkan Widget HTML/Java Sript di sidebar atau di bagian footer seperti menu vertical yang ada di blog ini. Langsung saja : 1. Masuk ke Blog anda. 2. Pilih Tata Letak di lanjutkan dengan memilih Element halaman. 3. Tambah Gadget - Lalu pilih HTML/JavaScript. 4. Masukan Kode HTML di bawah ini : <style type="text/css"> /* vertikal vertikal merah di mulai ---------------------------------------- */ /*Credits: CSS Library */ /*URL: http://css-lybrary.blogspot.com */ #vertikal-merah{ border-bottom-width: 0; } #vertikal-me

Untuk Memasang image,ikon atau gambar di judul postinga dan di judul sidebar template anda, caranya cukup mudah anda tinggal menambahkan image yang telah anda simpan di tempat upload gambar pada bagian .post h3 { untuk Judul posting, dan h2 { untuk judul di sidebar. dan mengatur jarak antara padding dan margin saja. untuk lebih jelasnya silahkan ikuti caranya di bawah ini. Menambah image sebelah kiri judul Posting : Cari kode seperti dibawah ini: .post h3 { margin:.5em 0; padding:0px 0px 0px 10px; font-size:140%; font-weight:bold; font-style:italic; line-height:1.3em; color:#333; Untuk lebih cepat silahkan anda Ganti kode tersebut dengan kode di bawah ini : .post h3 { background:url(' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrFL14uF44NwVKc7xZ1aDGmphA75I9Fz1WE0QbUryD2Q-ckVgBb-4SlUhizWcJyOPe7EVmA2mLKtYHYnaZElWFcsMmJW6FvaF5NK2u3E0OesDkAoNZ2vzHX2AnTyKdDTN0LOgbfqVjzdg/ ') no-repeat; margin:.5em 0; padding:0px 0px 05px 30px; font-size:140%; font-weight:bold;

Kali ini saya akan meberikan sebuah Tips yaitu membuat teks bergerak atau berjalan tanpa menggunakan sofwer animasi seperti flash ataupun yang lainnya, melainkan dengan menggunakan efek Marque Atau kode HTML yang mengatur pergerakan teks tersebut tersebut. Saya akan memberikan beberapa contoh efek marque yang biasa digunakan, dan saya juga menggunakan efek marque tersebut di bawah header blog ini. Contoh efek marque dengan teks bergerak dari kiri kekanan : <MARQUEE align="center" direction="right" height="100" scrollamount="2" width="100%"> tuliskan teks atau link kamu disini </MARQUEE> Hasilnya seperti ini : tulis teks atau link kamu disini Contoh efek marqu dengan teks bolak-balik ditambah dengan menggunakan bacground : <div align="left">&ltFONT FACE="georgia" color="black"><B><MARQUEE BGCOLOR="yellow" width="100%" scrollamount="3" beh

Kali ini saya akan memberikan tips bagaimana cara membuat Scrool pada SideBar diblog. Ada banyak keuntungan menggunakan Scrool pada sidebar diantaranya memperpendek tampilan blog pada side bar yang biasanya digunakan untuk judul posting ataupun link para blogger, jika blog blogger mempunyai postingan yang banyak tentunya judul postingan pun jadi banyak,jadi dengan menggunakan scroll judul postingan ataupun link blogger akan terlihat pendek,simple,dan rapih tentunya. Tanpa basa basi lagi gimana kalau langsung saja pada pokok bahasan yaitu membuat Scrool untuk judul postingan pada side bar. Langkah pertama yang harus blogger lakukan adalah buka terlebih dahulu browser internet blogger.dengan menggunakan Mozila .IE. Opera ataupun yang lainnya ketikan blogger atau blogspot.com pada broser blogger. Sign in blog Blogger>Pilih Tata Letak>Selanjutnya pilih Element halaman>Pilih add Widget yang ada pada sidebar>pilih HTML, dan masukan kode dibawah ini setelah itu klik simpan. <di