ChugyGogog

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

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

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

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

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

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

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