Langsung ke konten utama

Blog Test All Browser

Blog Test All Browser - Saat mendesain tampilan blog atau web sering terjadi masalah CrossBrowser atau lebih simpelnya acak-acakan ,maksudnya seringkali kita dapati tampilan blog atau web kita berbeda pada beberapa browser. Itu terjadi karena browser tidak memiliki fitur yang sama dalam menampilkan situs web.Seperti halnya pada Chorme dan Firefox yang sering kali digunakan untuk editing css blog juga ternyata sering kedapatan menampilkan hasil yang berbeda. Pertanyaan nya sudah puaskah dengan tampilan blogmu sekarang ??Seberapa sempurnakah tampilan blog brada di semua browser ??. Contohnya seperti pada tampilan blog [OBC] yang sempurna hanya pada beberapa browser saja.


Iceape 2.7.12
Opera 9.8
Chrome 7.0.517.44
Firefox 4.0.1

Pada keempat browser tampilan blog [OBC] saya fikir cukup sempurna , tapi pada browser lainnya memang kurang begitu sempurna contohnya seperti pada  Dillo 2.1 dibawah ini , blog saya terlihat acak-acakan.

Bagi brada yang penasaran akan tampilan blognya untuk di test pada semua browser silahkan ikuti langkah-langkah nya dibawah ini . 

Silahkan masuk pada situs www.browsershots.com
Masukan URL blog brada dan centang beberapa browser yang ingin diuji atau semuanya 


Klik Submit dan tunggu hingga proses selesai , maka akan tampil beberapa gambar dari setiap browser seperti dibawah ini .


Klik saja gambarnya untuk memperbesar gambar dan mengetahui lebih lengkap infonya


Bagaimana hasilnya , berantakan  ?? itu hal biasa ibarat kata didunia ini gak ada yang sempurna brada.. jadi enjoy aja lah 


Label:

Komentar

  1. AnonimMinggu, Juli 21, 2013

    Makasi infonya, ternyata berantakan juga hahaha,,, gimana yach biar semuanya bisa sesuai... semoga ada tutorialnya :)

    BalasHapus
    Balasan
    1. Sopala MultapaSenin, Juli 22, 2013

      sudah saya katakan di dunia gak ada yg sempurna
      yang penting blog kita rapi di browser yg sering dipake aja ...

      Hapus
  2. AnonimMinggu, Juli 21, 2013

    Tapi tampilannya saya suka elegan gitu, kalau buka dari chrome lumayan bagus kok.

    BalasHapus
  3. Staff AdministratorMinggu, Juli 21, 2013

    Yg sering sy pake malah browser lewat modzila kang...jarang malah buka lewat chrome...cuman kalo merhatiin tampilannya sama kok...

    Kalo ada perbedaan..palingan dari pengaruh koneksi inet nya... :)
    Jd kurang sempurna keliatnya...

    BalasHapus
    Balasan
    1. Mas AndesSenin, Juli 22, 2013

      biar lebih sempurna ya jangan di liat tapi dirasakan mas :)

      Hapus
    2. Sopala MultapaSenin, Juli 22, 2013

      untung aja gak diraba dterawang dan dimakan hehe

      Hapus
    3. Staff AdministratorSelasa, Juli 23, 2013

      Di puter...di celup...trus di emut degh..hehe

      Hapus
  4. Hariyanto WijoyoSenin, Juli 22, 2013

    saya belum pernah coba bagaimana blog tampil di semua browser...pingin juga nyobain ach :-)

    BalasHapus
  5. AnonimSenin, Juli 22, 2013

    saya takut nyobain kang.
    blog saya udah jelek, masih kurang jelek gimana lagi coba..
    ntar kalo saya test ada footer menjadi header kan malah bingung kang, dikira modifikasinya ajaib :D

    BalasHapus
    Balasan
    1. Sopala MultapaSenin, Juli 22, 2013

      footer menjadi header kayak yg lagi nyari duit di zaman sekarang sob hehe

      Hapus
  6. HendrikSenin, Juli 22, 2013

    Waah baru tahu nie Kang saya. Saya tahunya hanya di firefox sama IE. Blog saya sendiri jika ditampilkan di IE css effectnya tidak kelihatan. Padahal css yang paling sederhana contohnya border radius

    BalasHapus
  7. AnonimSelasa, Juli 23, 2013

    langsung ke tkp buat nyoba nih, semoga saya gak shock ngeliat tampilan blog saya, hehe ^_^

    BalasHapus
  8. M. Alex JoenaediSelasa, Juli 23, 2013

    wah mantap gan euyyy, jadi dengan trik ini kita gak mesti tes satu2 via browser berbeda, edunnn lah pokonamah

    BalasHapus
  9. dedetea66Selasa, Juli 23, 2013

    waduh dalem banget nih bahasan post yang ini kang Bro hehe

    BalasHapus
  10. Kang IsmetRabu, Juli 24, 2013

    Keren2... pangintenteh kedah nginstalsadayana browser :)

    BalasHapus
    Balasan
    1. Kang IsmetRabu, Juli 24, 2013

      ternyata www.browsershots.com expired.. yang aktif browsershots.org

      Hapus
    2. Sopala MultapaRabu, Juli 24, 2013

      padahal baru aja beberapa hari kang .. eh taunya dah org hehe

      Hapus
  11. UnknownRabu, Juli 24, 2013

    Info bagus. Bearti harus uji penampilan blog saya di browser lain lg ni. soalnya sy setia ama firefox... Thanks kang

    BalasHapus
  12. dedetea66Rabu, Juli 24, 2013

    Haturan kang Bro,kumaha tarawehna heuheuheu

    BalasHapus
  13. WalidinKamis, Juli 25, 2013

    Mantap bos, saya akses pake android template blog ini mantap.

    BalasHapus
  14. WalidinKamis, Juli 25, 2013

    Chrome for android

    BalasHapus

Posting Komentar

Postingan populer dari blog ini

Membuat Menu Dengan CSS Border Animation

Setelah beberapa waktu lalu selalu membuat postingan dengan konsep blogazine sebagai ajang pelepas suntuk dan sebagai trick menghindari kejenuhan dalam blogging saat ini saya akan coba share kebiasaan lama yaitu tutorial dalam membuat menu navigasi. Kali menu yang ditawarkan sangat-sangatlah simple , hanya memanfaatkan border dan sedikit animasi hover . SEE DEMO CSS .items{ margin-top:50px; } .items li{ float:left; padding:20px 35px 20px 35px; list-style:none; border:5px solid rgba(255,255,255,0.2); margin-left:10px; -webkit-box-reflect: below 0.5px -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(75%,transparent),to(rgba(255,255,255,0.4))); } .items li:hover{ border:5px solid rgba(255,255,255,1); -webkit-transition:all ease-in 0.3s;/*Chrome*/ -moz-transition:all ease-in 0.3s;/*Firefox*/ -o-transition:all ease-in 0.3s;/*Opera*/ -ms-transition:all ease-in 0.3s;/*Microsoft*/ } .items li a{ color:#FFF; text-decoration:none
58 komentar
Baca selengkapnya

Membuat Slideout Navigation

Masih Seputar tutorial dalam membuat menu untuk bagian sidebar , namun ini agak sedikit berbeda dari menu tutorial kemaren yang menggunakan system hover , karena kali ini saya menggunakan Push Menu dengan system onclick ( menu akan muncul setelah kita klik tombol / button  tertanda ) dan sekaligus ini jawaban dan request para sahabat.  Baca: Memasang Simple Flat Sidebar  Demosion   Langkah Kustomisasi  Masukan kode CSS dibawah ini sebelum kode </style> .pushmenu { /*this is the nav*/ background: #3c3933; font-family: Arial, Helvetics, sans-serif; width: 240px; height: 100%; top: 0; z-index: 1000; position:fixed; } .pushmenu h3 { color: #cbbfad; font-size: 14px; font-weight: bold; padding: 15px 20px; margin: 0; background: #282522; height: 16px; } .pushmenu a { display: block; /* drops the nav vertically*/ color: #fff; font-size: 16px; font-weight: bold; text-decoration: none; border-top: 1px solid #56544e; b
62 komentar
Baca selengkapnya

Menu CSS3 Dengan Efect Hover

Menu CSS3 Dengan Efect Hover    - Sudah beberapa hari ini diliputi dilema pada background .. susah nentuin yang pas , biarpun pada akhirnya sedikit merasa lega juga dengan yang sekarang ,memang belum puas tapi ya sudahlah . O..ya pada sedikit kesempatan ini saya akan coba share sebuah menu simple CSS3 dengan hover efect yang lumayan bisa diandalkan untuk merubah penampilan template . Untuk lengkapnya silahkan cek demonya . See Demo Komposisi   CSS3  /.....---CSS3 BREWOK---.....\ nav {   font:700 16px/60px 'Lato', sans-serif;   width:90%;   margin:30px auto 0 auto;   background: #374D61 ;   overflow:hidden;   -webkit-border-radius:8px;   -moz-border-radius:8px;   -o-border-radius:8px;   border-radius:8px; } nav ul {   height:60px;   overflow:hidden; } nav ul li {   width:25%;   float:left;   text-align:center; } .item-container {   position:relative;   height:120px;   cursor:pointer;   -webkit-transition: all 0.3s ease; -moz-transition:  
45 komentar
Baca selengkapnya