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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg43kvZ6_0uc2RP-ugGDcLZtVO0z2nDkmZ7zH8U6AHCkqJt26rS-WqP-fHc2iR23QDf22iUE-yYqiDAY2r-FBBw1w6Fco90q8MSHDR34wCgv8TDoLASEF8DFD3bB7SEzD7xKUWgb2mEhFQ/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,

11 Diskusi untuk Membuat Fungsi Scroll Untuk Menghemat Ruang

14 Desember 2011 pukul 19.19  

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

14 Desember 2011 pukul 22.45  

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

31 Januari 2012 pukul 15.51  

ko ga bisa gan...?

31 Januari 2012 pukul 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 pukul 03.47  

MAKASIH GAN

5 Maret 2012 pukul 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 pukul 15.38  

Makasih gan,,,

10 Maret 2012 pukul 12.19  

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

Ari
22 Juni 2012 pukul 19.10  

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

6 November 2012 pukul 15.59  

nice kk
bondowoso-jawa.blogspot.com/

5 Januari 2013 pukul 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,
Ping your blog, website, or RSS feed for Free Web DirectoryMy Ping in TotalPing.comBloggers - Meet Millions of Bloggers
Protected by Copyscape Duplicate Content Check

Template by Dicas Blogger | Modifikasi ulang oleh Mas Dalang

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