test: CSS

Jumat, 07 September 2012

Merubah Tampilan Scrollbar, Scrollbar Menjadi Lebih Keren

Tampilan Kustomisasi Sederhana Scrollbar

Scrollbar muncul ketika blog Anda mempunyai artikel yang panjang, dan tampilannya kadang tidak matching dengan tema blog Anda. Saya ingin merubah tampilan scrollbar supaya menjadi lebih keren? Bisa? Tentu saja bisa. Anda bisa membuat scrollbar kustom di IE (5.5) dengan CSS Property yang non-standar seperti scrollbar-base-color Anda bisa menggunakannya pada elemen yang bisanya tergulung (seperti <body>) tapi itu masa lalu, dan saya yakin Anda tidak akan suka dengan tampilannya :). Tampilannya di IE sangat payah.

Sekarang, menyesuaikan tampilan scrollbar bisa lebih menyenangkan karena tampilan custom scrollbar sekarang menjadi lebih keren, yakni dengan menggunakan WebKit. Tampilannya menjadi lebih enak untuk dilihat, karena properties-nya didukung oleh vendor browser (misalnya ::-webkit-scrollbar) dan menggunakan "Shadow DOM" (atau ada yang menyebut-nya pseudo element?). Kustomasi ini sebenarnya telah ada lumayan lama. Dave Hyatt kira-kira pada awal 2009 dan membuat sebuah halaman contoh kombinasi scrollbar yang mungkin anda inginkan, alias lengkap.

Berikut ini adalah pseudo element yang merupakan pembentuk scrollbars itu sendiri:

::-webkit-scrollbar              { /* 1 */ }
::-webkit-scrollbar-button       { /* 2 */ }
::-webkit-scrollbar-track        { /* 3 */ }
::-webkit-scrollbar-track-piece  { /* 4 */ }
::-webkit-scrollbar-thumb        { /* 5 */ }
::-webkit-scrollbar-corner       { /* 6 */ }
::-webkit-resizer                { /* 7 */ }

Lihat gambar berikut untuk lebih jelasnya.

Sedagkan berikut ini adalah pseudo class selector yang bisa Anda gunakan untuk menyeleksi secara lebih spesifik kondisi tertentu dari scrollbar, misalnya ketika pointer (mouse) melewatinya.

Inilah selector-selector tersebut:

:horizontal
:vertical
:decrement
:increment
:start
:end 
:double-button
:single-button
:no-button
:corner-present
:window-inactive

Simak penjelasan untuk masing-masing selector diatas seperti dijelaskan dalam postingan Dave Hyatt

: horizontal - pseudo-class Horizontal berlaku untuk setiap scrollbar yang memiliki orientasi horizontal.

: vertical - pseudo-class vertikal yang berlaku untuk setiap scrollbar yang memiliki orientasi vertikal.

: decrement - pseudo-class decrement berlaku untuk tombol dan slider. Ini menunjukkan ada atau tidaknya pengurangan posisi bagian tombol atau track ketika digunakan (misalnya, keatas untuk scrollbar vertikal, kiri pada scrollbar horisontal).

: increment - pseudo-class increment berlaku untuk tombol dan slider. Ini juga menunjukkan ada atau tidaknya pengurangan posisi bagian tombol atau track ketika digunakan (misalnya, kebawah scrollbar vertikal, kanan pada scrollbar horisontal).

: start - pseudo-class start berlaku untuk tombol dan slider. Ini menunjukkan apakah objek ditempatkan sebelum jempol.

: end - Akhir pseudo-class berlaku untuk tombol dan slider. Ini menunjukkan apakah objek ditempatkan setelah jempol.

: double-button - pseudo-class double-button berlaku untuk tombol dan slider. Hal ini digunakan untuk mendeteksi apakah tombol merupakan bagian dari double-button yang bersinggungan di ujung yang sama dari scrollbar. Untuk slider, menunjukkan apakah slider bersinggungan dengan double-button.

: single-button - pseudo-class single-buton berlaku untuk tombol dan potongan lagu. Hal ini digunakan untuk mendeteksi apakah tombol ada pada akhir scrollbar. Untuk slider, menunjukkan apakah slider berbatasan dengan single-button.

: no-button - Berlaku untuk melacak slider dan mendeteksi ada atau tidaknya slider di bagian trek scrollbar.

: corner-present - Berlaku untuk semua slider scrollbar dan mmendeteksi ada atau tidaknya bagian sudut dalam scrollbar.

: window-inactive - Berlaku untuk semua potongan scrollbar dan menunjukkan ada atau tidaknya window yang berisi scrollbar yang sedang aktif. (pseudo-class ini sekarang berlaku untuk :: selection)

Contoh sederhana peng-aplikasian kustomisasi tampilan scrollbar ini bisa anda lihat pada kode berikut

::-webkit-scrollbar {
    width: 12px;
}
 
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}
 
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

Hasilnya akan seperti gambar yang ada di bagian awal artikel Merubah Tampilan Scrollbar, Scrollbar Menjadi Lebih Keren ini.

Kamis, 26 Juli 2012

Tutorial Menghaluskan Scroll pada Halaman Blog

Scroll smoth yang saat ini saya ulas adalah scroll yang menargetan suatu halaman pada sebuah posting blog dengan target url tanpa harus menggunakan scroll browser atau yang biasa kita gunakan dengan scroll mouse, Maksud saya scrolling pada satu halaman yang sama. nah dari cara ini kita akan menggunakan beberapa script halus (saya terjemahkan saja seperti itu dari kata scroll smooth) dan penambahan scroll to top (kembali ke atas) jika naskah atau postingan kita terlalu panjang.

Biasanya jika kita menggunakan scroll atau menggulung dengan hash (#), contohnya memberi tampilannya akan seperti meloncat. Nah, dengan scroll smoth hal ini bisa membuat scrolling pada halaman terlihat lebih halus. Mari kita lihat langkah demi langkahnya.

Catatan: Bagi yang belum mengerti dengan teknik ini silahkan di baca keterangan mengenai Kontribusi dengan HTML yang menentukan penargetan URL dan ID

Sebelum mencoba tutorial ini pastikan bahwa di blog sudah ada JQuery Library agar bisa berjalan dengan baik. jika belum ada maka gunakan script berikut untuk memasukkan JQuery kedalam Blog
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
Javascript yang digunakan untuk menghaluskan Scroll atau penggulungan halaman adalah sebagai berikut:

<script>
$(function () {

    function filterPath(string) {
      return string.replace(/^\//, '').replace(/(index|default).[a-zA-Z]{3,4}$/, '').replace(/\/$/, '');
    }

    var locationPath = filterPath(location.pathname);
    var scrollElem = scrollableElement('html', 'body');

   //Setiap link dengan tag hash di dalamnya (tidak bisa melakukan ^ = untuk mengecek bahwa link berada di halamn yg sama)
    $('a[href*=#]').each(function () {

      // Pastikan link-nya adalah halaman yang sama
      var thisPath = filterPath(this.pathname) || locationPath;
      if (locationPath == thisPath && (location.hostname == this.hostname || !this.hostname) && this.hash.replace(/#/, '')) {

        // Pastikan target
        var $target = $(this.hash),
          target = this.hash;
        if (target) {

          // Cari lokasi dari target
          var targetOffset = $target.offset().top;
          $(this).click(function (event) {

            // Mencegah jump-down
            event.preventDefault();

            // Animate untuk menargetkan
            $(scrollElem).animate({
              scrollTop: targetOffset
            }, 400, function () {

              // Set hash URL setelah animasi sukses
              location.hash = target;

            });
          });
        }
      }

    });

    // Gunakan elemen pertama yaitu "scrollable" (memperbaiki masalah lintas platform browser)
    function scrollableElement(els) {
      for (var i = 0, argLength = arguments.length; i < argLength; i++) {
        var el = arguments[i],
          $scrollElement = $(el);
        if ($scrollElement.scrollTop() > 0) {
          return el;
        } else {
          $scrollElement.scrollTop(1);
          var isScrollable = $scrollElement.scrollTop() > 0;
          $scrollElement.scrollTop(0);
          if (isScrollable) {
            return el;
          }
        }
      }
      return [];
    }

});
</script>

Contoh peng-aplikasi-an pada HTML (untuk memposting mode ini gunakan mode HTML bukan Compose)

<ul>
          <li><a href="#contoh2">Scroll Ke Halaman 2</a></li>
          <li><a href="#contoh3">Scroll Ke Halaman 3</a></li>
        </ul>

        <h1 id="contoh1">Halaman 1</h1>

        <p> ........ Kalimat atau isi postingan blog ........... </p>

        <h1 id="contoh2">Halaman 2</h1>

        <p><a href="#main">Top</a></p>

        <p> ........ Kalimat atau isi postingan blog ........... </p>

        <h1 id="contoh3">Halaman 3</h1>

        <p><a href="#main">Top</a></p>

        <p> ........ Kalimat atau isi postingan blog ........... </p>

test

Jumat, 07 September 2012

Merubah Tampilan Scrollbar, Scrollbar Menjadi Lebih Keren

Kamis, 26 Juli 2012

Tutorial Menghaluskan Scroll pada Halaman Blog

Contact Online

Labels

Most View Product

Template Information

Sample Footer

Template Information

Test Footer