Postingan

Menampilkan postingan dengan label Blogger

Mengatasi Background Image Blog Yang Tidak Muncul Di Internet Explorer "Hack Image IE"

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

Slide Image Full CSS3 tanpa JS dan JQuery

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: #

CSS Gradient Generator Yang Powerfull Dan Mudah Digunakan

Gambar
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

Merubah Warna Background Dasar Blog Secara Otomatis

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

Modifikasi Label - Tag Seperti Menu Navigasi Ala WordPress

Gambar
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