Thursday, September 22, 2011

[TUTORIAL] Cara Menonaktifkan Fitur LightBox Blogger / Blogspot

Baru-baru ini Blogger, layanan blogging platform kepunyaan Google merilis sebuah fitur baru yang diberinama LightBox, sebuah fitur baru untuk memperbesar tampilan image/gambar/foto secara full-page tanpa membuka jendela baru, dan juga di bawahnya ditampilkan deretan image-image kecil (thumbnail) yang ada di halaman tersebut.

Fitur ini memang cukup bagus, sangat keren malah, karena blog itu jadi terlihat lebih profesional dan lebih memudahkan pengunjung untuk melihat tampilan image dalam ukuran besar secara lebih fokus dengan latar gelap, tanpa perlu membuka jendela baru atau pun keluar/pergi dari halaman artikel/post yang sedang dibacanya.

blogger-lightbox.jpg

Namun bagi sebagian orang pengguna Blogger / Blogspot, fitur ini mungkin malah mengganggu atau bahkan merusak perilaku blognya, terutama bagi para blogger yang memasang custom script di dalam blognya, atau yang memasang link tertentu pada image di blognya, atau pun pertimbangan-pertimbangan lainnya.

Berikut ini adalah tips mematikan LightBox Blogger itu, yaitu cukup dengan cara memasang script hack simpel di dalam blognya.




  1. Masuk dulu dong ke Dashboard Blogger di sini :)

  2. Ada beberapa cara untuk menempatkan script berikut ini, di antaranya:

    • Pada Template:
      Masuk ke halaman Template lalu klik Edit HTML, cari kode bertuliskan </head>, lalu tempatkan script di atas tag </head> itu.

    • Pada Gadget/Widget di bagian atas:
      Masuk ke halaman Layout lalu klik link bertuliskan "Add a gadget" pada gadget paling atas.

    • Pada artikel/post:
      Masukkan satu-persatu di setiap posting pada bagian HTML.


    Intinya adalah tempatkan script berikut ini sebelum penempatan gambar / image.

  3. Pasang script berikut ini pada tempat yang diinginkan (lihat langkah 2):
    <script type='text/javascript'>/* <![CDATA[ */
    /* zLBOff script - Set Off Blogger LightBox - by http://inimu.com via Blogger Forum */
    function zLBOdo() { for (var z=0; z<document.getElementsByTagName('img').length; z++) { document.getElementsByTagName('img')[z].onmouseover = function() { var zLBOhtml = this.parentNode.innerHTML; this.parentNode.innerHTML = zLBOhtml; this.onmouseover = null; } } } if (window.addEventListener) { window.addEventListener('load',zLBOdo,undefined); } else { window.attachEvent('onload',zLBOdo); }
    /* ]]> */</script>



*


Demo pemasangan bisa dilihat di sini.

Semoga berguna.

.

No comments:

Post a Comment