ChugyGogog

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