Desember 03, 2011

Membuat Fungsi Scroll Untuk Menghemat Ruang

Situseo Blog : Seperti halnya kita membuat spoiler atau teks area, dalam pembuatan fungsi scroll dalam blog berfungsi untuk menghemat halaman post maupun sidebar, dengan membuat ukuran yang sesuai dengan panjang dan lebar template kita.

Fungsi scroll tidak hanya bisa digunakan dalam suatu posting, bisa juga digunakan dalam sidebar untuk menghemat ruang sidebar atau untuk menghemat ruang dalam komentar yang berderet panjang, untuk membuat fungsi scroll ini tidak membutuhkan kode HTML yang panjang, hanya membutuhkan script seperti dibawah ini :

<div style="overflow:auto;width:350px;height:150px;padding:10px;border:1px solid #C33F00">
ISI SCROLL BAR
</div> 

Sebagai contoh kita akan membuat menu post dengan memakai fungsi scroll, penerapannya seperti contoh dibawah ini :

<div style="overflow:auto;width:350px;height:150px;padding:10px;border:1px solid #C33F00">  
1. Isi Scroll bar hanya dengan sebuah teks

2. Isi Scroll bar dengan sebuah link <a href="http://situseo.blogspot.com/2011/10/pembuatan-teks-area.html">Cara Membuat Teks Area Untuk Blogspot</a>  

3. Isi scroll bar dengan sebuah gambar <img src="http://1.bp.blogspot.com/-LBw4179bRS0/TqVBZw5QtdI/AAAAAAAAACQ/554KblqPsh4/s1600/Situseo+no+image.jpg" /> 
</div> 

Hasilnya :

1. Isi Scroll bar hanya dengan sebuah teks

2. Isi Scroll bar dengan sebuah link Cara Membuat Teks Area Untuk Blogspot

3. Isi scroll bar dengan sebuah gambar

Keterangan :
width:350px : merupakan lebar dari scroll bar
height:150px : merupakan tinggi dari scroll bar
padding : merupakan jarak antara garis pinggir
border : merupakan ketebalan garis frame

yang saya contohkan hanya sebagai ilustrasi saja, kalian bisa mengisi fungsi scroll dengan item-item yang kalian inginkan.

Semoga bermanfaat,

12 Diskusi untuk Membuat Fungsi Scroll Untuk Menghemat Ruang

14 Desember 2011 19.19  

makasih mas info nya,,,,, trik yang bagus, agar halamab blog tidak terlalu panjang..

14 Desember 2011 22.45  

@download games: sama-sama, semoga halaman blognya lebih simple, rapih, dan bermanfaat untuk orang lain

31 Januari 2012 15.51  

ko ga bisa gan...?

31 Januari 2012 23.58  

@saputra : untuk menempatkan kode html atau javascript dalam postingan dan dalam post page (post halaman statis), mode editor post dalam posisi EDIT HTML untuk merubah kebagian edit html, perhatikan pojok kanan atas bagian posting

9 Februari 2012 03.47  

MAKASIH GAN

5 Maret 2012 21.40  

Gan, supaya scrollnya agak ke dalam biar border melengkung semua gimana ??
Saya udah coba dan border dilengkungkan (sudah jadi pula) tapi pada border yang ada scrollnya ga melengkung karena scrollnya mepet ke garis.
tolong pencerahannya.
(untuk melihat kondisinya silakan cek di http://wisnu-friskian.blogspot.com/2012/03/cara-membuat-menu-horizontal-pada-blog.html (pada bagian artikel terkait).
Terima Kasih.

5 Maret 2012 23.47  

@Wisnu : coba cek yang ini http://situseo.blogspot.com/2011/10/membuat-related-post-artikel-terkait-di_16.html kamu rubah bagian padding dan margin nya

6 Maret 2012 15.38  

Makasih gan,,,

10 Maret 2012 12.19  

makasih mas. . .
infonya bagus banget dan sangat berguna. . .

Ari
22 Juni 2012 19.10  

nice... :)
tpi, kalo fungsi scroll nya dibuat untuk sidebar keseluruhan gmn caranya? apakah mas dalang tau??

6 November 2012 15.59  

nice kk
bondowoso-jawa.blogspot.com/

5 Januari 2013 07.36  

oke, bagus nih kawan. saya sudah coba. thanks ya.

Posting Komentar

supaya diskusi berjalan baik, gunakan tombol jawab untuk reply. penggunaan tombol jawab, jangan menghapus kode komentar pada kotak komentar, cukup mengetikan komentar disebelah atau dibawah kode komentar. Terima kasih.

rate this post
beri nilai posting ini
Terima kasih,

Template by Dicas Blogger | Modifikasi ulang oleh Mas Dalang

101011  ©Situseo Blog | Powered by Blogger | Back to Top