Google Menyesuaikan Tampilan Blog Untuk Semua Browser Terkini | Kebinekaan

Berbagi tips, tutorial, download, dan update berbagai macam berita menarik

Wednesday, April 17, 2013

Menyesuaikan Tampilan Blog Untuk Semua Browser Terkini

Menyesuaikan Tampilan Blog Untuk Semua Web Browser
Seperti yang telah kamu ketahui Internet Explorer merupakan jendela browser milik Microsoft, kurang memiliki teknologi yang digunakan oleh browser lain pada saat ini. Sebut saja CSS 3 dan HTML 5. Beberapa perintah script kode yang berkaitan dengan bahasa tersebut, terkadang tidak di support oleh Internet Explorer sehingga tampilan situs kamu menjadi kurang menarik dan sering terlihat berantakan. Contohnya apabila kamu memasang widget musik, kotak komentar facebook, atau membuat efek zoom pada gambar belum tentu semuanya akan tampil dan berjalan dengan baik di browser tersebut.

Memang keunggulan dari Internet Explorer mulai dari versi terbaru 9 dan yang lainnya memiliki Tingkat Security yang bagus. Tetapi di balik itu semua, Microsoft pun mungkin 'sadar' akan kekurangan ini, sampai-sampai membuat cara bagaimana membuat sebuah kondisi di mana halaman web dapat mendeteksi apakah browser yang digunakan itu IE atau bukan. Caranya adalah dengan menambahkan sebuah komentar HTML pada halaman web, maka dari itu dinamakan Conditional Comments.

Untuk menggunakan conditional comments, copylah kode ini :

    <!--[if IE]>
        <p>Browser yang kamu gunakan adalah Internet Explorer, Bukan Google Chrome.</p>
    <![endif]-->

Mungkin jika kamu pengguna Blogger, pada saat mengedit template terkadang melihat kode seperti diatas. Kode tersebut akan bekerja hanya pada Internet Explorer. Sekarang coba refresh halaman web kamu. Jika kamu menggunakan IE versi apa saja, maka akan muncul paragraf tersebut. Cara ini juga digunakan untuk styling pada halaman web menggunakan CSS. Karena kode load CSS sebaiknya disimpan di head, maka conditional comment juga harus dsimpan di head. Cara menggunakannya adalah:

<!--[if IE]>
    <link rel="stylesheet" href="style_ie.css" type="text/css" />
<![endif]-->

Untuk menguji tampilan blog atau website kamu di semua browser tentu kamu harus melihatnya satu persatu dengan browser yang sebelumnya telah kamu download. Untuk mempermudah dalam pengujian tampilan website, kamu dapat menggunakan sebuah layanan yang disediakan oleh sebuah situs terkenal. kamu dapat mengetes dan melihat interface situs kamu di www.browsercam.com
Dengan menggunakan beberapa tools layanan tersebut, kamu dapat mengambil screenshoot sebuah URL menggunakan browser yang mereka miliki. Fungsi berikut fitur lainnya adalah pemotongan gambar, sistem operasi, email, dan juga dapat diakses melalui perangkat mobile "Android, Blackberry, IPhone,Windows Mobile". Demikian tutorial kali ini, semoga membantu.
Share this post
  • Share to Facebook
  • Share to Twitter
  • Share to Google+
  • Share to Stumble Upon
  • Share to Evernote
  • Share to Blogger
  • Share to Email
  • Share to Yahoo Messenger
  • More...

2 comments

  1. Mas kalau websiteku berbasis CMS (website toko online) nah kalau dibuka di google chrome dan di HP BlackBerry gambarnya sebagian ada yang gak muncul, apakah dengan menambahkan kode if IE tadi kira-kira bisa muncul ya? atau kode apa ya biar gambarnya bisa muncul di semua browser mas??

    ReplyDelete
    Replies
    1. Mungkin bisa memakai cara alternatif dengan mengganti template website CMS yang lebih RESPONTIVE, cara saja di google sudah banyak kq yang memberikan template Respontive secara gratis.

      Delete

Mohon tinggalkan sedikit jejak komentar anda disini !
Terima Kasih :)

:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer

 
© 2011 Kebinekaan. All Rights Reserved.
Posts RSSComments RSS
Back to top