Seperti kita tau Browser IE saat ini ( gak tau kedepannya ) belum secara FULL support css3, nah tidak dipungkiri diblog kita mungkin atau sedikitnya pasti ada kode css3 dan biasanya jika dibrowser IE ( Internet Explorer ) pasti layout blog kita sedikit berantakan dan gak nyaman untuk dilihat.
Untuk Mengatasi Hal itu kalau saya lebih memilih untuk menutupi Blog Pribadi saya dengan Pesan warning yang berisi peringatan untuk mengUpdate browsernya klien. nah pada kesempatan kali ini saya akan share caranya membuat box warning diBrowser IE menggunakan CSS.
- Masuk dalam template anda
- Cari kode ]]></b:skin> atau </style>
- Masukan css dibawah ini diatas kode ]]></b:skin>
#warning {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #000;
text-align: center;
color: #900;
display: none;
z-index: 99999999;
width: 100%;
height: 100%
}
#warning h1 {
font: normal 20px/20px Arial,sans-serif;
margin: 30px 0
}
#warning .up {
font: normal 15px/20px Arial,sans-serif;
margin: 30px 0
}
#warning .up a {
text-decoration: none;
color: #9AC510
}
#warning .up a:hover {
text-decoration: underline;
}
Dan simpan kode HTML dibawah ini dibawah kode
<body><div id='warning'> <h1>Please Update Your Browser To ( Mohon Update browser anda )</h1> <div class='up'> <a href='http://www.mozilla.org/' target='_blank' title='Mozila'>Mozilla FireFox</a> or <a href='https://www.google.com/intl/en/chrome/browser/' target='_blank' title='Google Chrome'>Google Chrome</a> </div> </div>
Setelah itu simpan kode dibawah ini diatas kode
</head><!--[if IE]>
<style>
* {
margin: 0;
padding: 0
}
#warning {
display: block
}
</style>
<![endif]-->
Ok setelah itu anda bisa klik SIMPAN TEMPLATE dan coba cek blog anda menggunakan IE.
Jika css diatas tidak bekerja mungkin anda harus menggunakan jquery untuk mengaktifkan kode cssnya.
if ($.browser.msie) {
// Tulis Aksi disini
}1. Pastikan sudah ada jquery ditemplate anda.
2. Tambahkan jquery dibawah ini diatas kode
</head> / dibawah framework jquery<script>
$(function(){
if ($.browser.msie) {
$("warning").css("display","block");
}
});
</script>
