nialafitri: Cara Membuat Kotak Scroll

Sabtu, 04 Juni 2011

Cara Membuat Kotak Scroll

Scroll box pada umumnya digunakan untuk menghemat ruang pada halaman blog. Dengan menggunakan scroll box pula menjadikan halaman blog menjadi lebih rapi, dan penggunaannya bisa disesuaikan dengan kebutuhan. Sebagai contoh, scroll box bisa dipakai untuk label, link banner, posting artikel, posting kode HTML dan lain-lain.

Pada kesempatan ini saya coba berbagi sedikit mengenai cara menggunakan scroll box yang dipadukan dengan border untuk mempercantik tampilannya.

Scroll box dengan border solid

Contoh penggunaan scroll box dengan menggunakan border solid. Warna untuk border bisa anda ganti sesuai selera masing-masing. Anda juga bisa menambahkan efek marque.

Scroll box dengan border groove

Contoh penggunaan scroll box dengan menggunakan border groove. Anda juga bisa menambahkan efek marque.

Scroll box dengan border dotted

Contoh penggunaan scroll box menggunakan border dotted. Anda juga bisa menambahkan efek marque.

Scroll box dengan background

Contoh penggunaan scroll box menggunakan border groove disertai background. Anda juga bisa menambahkan efek marque.

Untuk contoh scriptnya bisa dilihat seperti di bawah ini:


<div style="background-color:blue;height:80px;width:180px;overflow:scroll;border:8px groove #0ADA0A;">Contoh penggunaan scroll box menggunakan border groove disertai background</div>
Keterangan :
height = untuk mengatur tinggi
width = untuk mengatur lebar
border = bisa diganti ukurannya sesuai kebutuhan, semakin besar nilainya maka semakin lebar contoh: coba anda ganti dengan 10px untuk melihat bedanya.
Scroll box juga bisa dipadukan dengan efek marque.
groove = jenis border, anda bisa menggantinya dengan solid, dotted, dashed dan lainnya.
#0ADA0A = warna border

Anda juga bisa menggunakan kode banner dengan mengganti tulisan berwarna merah diatas dengan kode banner anda.

Tidak ada komentar:

Langganan: Posting Komentar (Atom)

SELAMAT DATANG DI NIALAFITRI BLOG.

Tutorial (http://nialafitri.blogspot.com)Dalam hitungan jam kami pintakan maaf setulus hati akan khilaf yang selama ini terjadi Taqobalallahu minna wa minkum, mohon maaf lahir batin atas segala kesalahan saya.

Saya Di Lahirkan di Atas Bumi dan Di Bawah Langit...Yang Tepatnya DI pulau Garam dan Saya Tinggal di Arab Saudi.... Mohon maaf kalau ada kekurangan dari saya, dan kalau ada kelebihan mohon di kembalikan he he he..,karena sifat manusia tidak luput dari segala kesalahan dan kekhilafan.........

Regards ...

Negrionta Community
(http://nialafitri.blogspot.com)

Negrionta Community

Click to Close!

Kegagalan Adalah Kesuksesan yang Tertunda.......Jadi Kebohongan Apa Sama Artinya Dengan Kejujuran Yang Tertunda...?
SEMAKIN BANYAK BELAJAR ,SEMAKIN BANYAK YANG KITA TAHU,SEMAKIN BANYAK YANG KITA TAHU,SEMAKIN BANYAK YANG KITA LUPA,DAN SEMAKIN SEDIKIT YANG KITA TAHU...,JADI KENAPA KITA HARUS SIBUK BELAJAR ...hehehe....

Nialafitri

Nialafitri Community

Saya Hanya Menyukai Blogger Dan Masih Tahap Belajar.... ‎''Jalani hidup apa adanya. Jangan memaksa dan jangan terpaksa. Yakini bahwa setiap rencana Tuhan selalu berakhir baik'' Kawan aku gak akan ada jika kau tak ada karenamu aku berarti karenamu juga aku punya alasan untuk terus menatap masadepan Tanpamu aku kosong kerena memang hanya sahabat yang menjadikan aku manusia bermakna ... !!!!

Software Gratis

Album and Catatan

Semakin lama saya hidup, semakin saya sadar Akan pengaruh sikap dalam kehidupan Sikap lebih penting daripada ilmu, daripada uang, daripada kesempatan, daripada kegagalan, daripada keberhasilan, daripada apapun yang mungkin dikatakan atau dilakukan seseorang. Sikap lebih penting daripada penampilan, karunia, atau keahlian. Hal yang paling menakjubkan adalah Kita memiliki pilihan untuk menghasilkan sikap yang kita miliki pada hari itu. Kita tidak dapat mengubah masa lalu Kita tidak dapat mengubah tingkah laku orang Kita tidak dapat mengubah apa yang pasti terjadi Satu hal yang dapat kita ubah adalah satu hal yang dapat kita kontrol, dan itu adalah sikap kita. Saya semakin yakin bahwa hidup adalah 10 persen dari apa yang sebenarnya terjadi pada diri kita, dan 90 persen adalah bagaimana sikap kita menghadapinya. Akhirnya: Seluruh pilihan terletak di tangan Anda, tidak ada JIKA atau TETAPI. Andalah pengemudinya. Andalah yang menentukan JALAN HIDUP ANDA…!!!!

Box Cantik Serba rgba by:negrionta

Background rgba mampu membentuk sebuah efek transparansi yang berbeda dengan penggunaan opacity. Pada background rgba, transparansi yang tercipta pada box terdalam (DIV) tidak akan mempengaruhi box (DIV) yang dibangun sesudahnya. Ini akan memungkinkan kita menampilkan sebuah background terdalam pada keseluruhan desain.

Kita bisa perhatikan pada Scoll Box ini. Sekalipun sebenarnya hanya dengan memberikan sebuah background warna hitam pada box terdalam, sebenarnya sudah mampu memberikan penampilan yang amat luar biasa cantik. Namun demikian, karena sifatnya yang berfungsi untuk memberikan efek transparansi, maka akan lebih "afdol" seandainya sampeyan gunakan sebuah background image pada box terdalam (DIV pertama - div class="boxe").

Penggunaan sebuah background warna cerah pada scroll Box ini juga tak kalah menariknya. Sampeyan tinggal pilih untuk menggunakan warna background yang paling tepat sehingga efect transparansi melalui background rgba ini mampu ditampilkan secara maksimal.

Get this widget! [close]

Salam buat sobat blogger ... ...

Aku hanyalah seorang blogger yang kebetulan suka nulis, suka ngenet dan terutama suka uothak-uathik template blogspot. Bila sampeyan menyukai semua yang telah aku coba tulis dan terbitkan, aku hanya berharap bahwa semuanya bisa memberi manfaat dan mungkin juga bisa memberi dorongan untuk terus nglembur, nulis dan selalu memeras otak menuangkan hal-hal baru yang bermanfaat bagi pembaca. O, ....ya ..., Yah ... moga-moga saja sampeyan semua nggak ikutan memanggil ku seperti para tetangga sebelah! Makacih, ya, atas kunjungannya. Maap nggak bisa kasih wedang kopi ma roti bolu!

Silahkan buka link di bawah ini untuk mengikuti tutorial menarik lainnya:
By:putramakkah

Menu Title

Klick - Buka

Description: This script collapses any DIV on the page and lets users manually toggle its appearance via a smooth "Web 2.0 style" animation. It's a popular effect on many social networking/ comment sites. Three distinguishing features of this script are:

Ability for the script to work on both DIVs that have an explicit CSS height attribute defined, and without.

Ability to "group" multiple collapsible content instances to act as a single unit, so opening one closes the others.

Persistence can be enabled on each collapsible content individually that will remember if the DIV has been expanded, and upon the user's return to the page within the same browser session, keep it expanded.

Individually toggle various attributes of each collapsible content, whether a fade effect should be applied, the duration of the animation, an explicit height, plus whether the content should be hidden via scripting by default when the page loads.
Ability to "group" multiple collapsible content instances to act as a single unit, so opening one closes the others.

Persistence can be enabled on each collapsible content individually that will remember if the DIV has been expanded, and upon the user's return to the page within the same browser session, keep it expanded.

Individually toggle various attributes of each collapsible content, whether a fade effect should be applied, the duration of the animation, an explicit height, plus whether the content should be hidden via scripting by default when the page loads.