gubhug reyot
Energy Saving Mode Using CSS3

Move your mouse to go back to the page!
Gerakkan mouse anda dan silahkan nikmati kembali posting kami!

Copyright * Feb 2012 * gubhugreyot.blogspot.com - All rights reserved

Kamis, 01 Maret 2012

Cara Membuat Scrollbars di Sisi Kiri Box

Scrollbars tak harus selalu disebelah kanan. Anda bisa juga membuatnya berpindah di sebelah kiri box. Dengan bantuan kode CSS hal yang sepertinya tak mungkin dan hampir tak pernah tersentuh ini dengan mudah dapat dibuat. Anda cukup gunakan satu deret kode css dan dua tag untuk xHTML-nya.

Seperti ini scrollbars yang telah berpindah di sisi sebelah kiri blog.

Kode CSS & xHTML:
Kode CSS: .GRscrollbars{ height:200px; width:400px; text-align:left; overflow:auto; padding:15px 10px; margin:15px 0; border:1px solid #666; unicode-bidi: bidi-override;direction:rtl; font-size:12px; font-family:Tahoma; } .GRscrollbars div{direction:ltr;} xHTML <div class="GRscrollbars"> <div> Tuliskan teks atau apapun yang akan disimpan dalam scrollbars di sini! </div> </div>

Cara Menggunakan kode:

  1. Login ke Blogger. Tuliskan User Name atau Alamat Email dan Password anda kemudian klik Sign in.
  2. Setelah login anda akan masuk di halaman Dasbor (Dasboard).
  3. Cari dan klik "Rancangan (Design)".
  4. Cari dan klik "Edit HTML".
  5. Setelah box Edit HTML yang berisi kode-kode html template terlihat, cari kode ]]></b:skin>.
  6. Copy dan paste-kan kode CSS di atas kode ]]></b:skin>.
  7. Klik "Simpan Template (Save Template)".
  8. Gunakan xHTML di halaman posting atau bagian blog yang lain.
  9. Anda bisa membuang kode yang mungkin tidak diperlukan seperti misalnya:
    font-family:Tahoma; dan font-size:12px;.
  10. Berberapa kode bisa juga dirubah nilainya seperti:
    height:200px;, width:400px;, padding:15px 10px;, margin:15px 0; dan border:1px solid #666;.
  11. text-align:left; dapat juga diganti dengan text-align:justify; (rata tengah).
  12. Jika digunakan di halaman posting gunakan mode posting "Edit HTML".
  13. Jika anda membutuhkan panduan yang lebih detail tentang cara menyimpan kode CSS di template, silahkan buka pada menu sebelah kiri halaman blog di http://gubhugreyot.blogspot.com (Special Tutorials)
  14. Selesai!

0 komentar: