Wednesday, November 1, 2017

Variasi Cara Membuat Scrol Bar di Blog

Salam alfakir, Hendi Cahyadi
Variasi Cara Membuat Scrol Bar di Blog

Scroll Bar sangat berguna ketika sobat blogger ingin menampilkan sebuah script yang panjang (dan bisa jadi membosankan. tanpa perlu memenuhi page postingan blog. Fungsi ini tentunya sangat memudahkan blogger juga ketika menampilkan script dan melewati batas post space dan membuat tampilan halaman kurang enak dilihat.

Saya sendiri kebetulan butuh menampilkan script panjang tapi tampilannya kurang enak dilihat dan meleati batas width atau lebar yang seharusnya. Maka kebetulan beberapa trik saya dapatkan ketika search di google. Nah, agar ilmunya tidak mubazir, saya akan bagikan trik ini ke pada sobat blogger.



<div style="overflow:auto;width:400px;height:200px;padding:10px;border:1px solid #eee">


<div style="overflow:auto;width:300px;height:100px;padding:10px;border:1px solid #eee">

Isi Scroll Box

</div>


<div style="background-color: #f9f8de; border: 1px #dedede double; height: 60px; overflow: auto; padding: 10px; text-align: left; width: auto;">

Tempatkan Tulisan Anda Disini

 </div>

Scroll Bar Collection Untuk HTML Postingan Blog :
Fig. Animation Scrollbar
Fig. Animation Scrollbar
Style #1. Scroll Bar Post Sederhana

Saya sendiri kebetulan butuh menampilkan script panjang tapi tampilannya kurang enak dilihat dan meleati batas width atau lebar yang seharusnya. Maka kebetulan beberapa trik saya dapatkan ketika search di google. Nah, agar ilmunya tidak mubazir, saya akan bagikan trik ini ke pada sobat blogger.

Scroll Bar sangat berguna ketika sobat blogger ingin menampilkan sebuah script yang panjang (dan bisa jadi membosankan. tanpa perlu memenuhi page postingan blog. Fungsi ini tentunya sangat memudahkan blogger juga ketika menampilkan script dan melewati batas post space dan membuat tampilan halaman kurang enak dilihat.

Copy Paste Script HTML nya ke Mode HTML di Postingan Blog


<div style="border: 1px solid #eee; height: 200px; overflow: auto; padding: 10px; width:900px;">

Letakan Tulisan / Kode HTML Anda Disini

</div>

Note :
  • Ganti tulisan warna Merah dengan text atau kode yang anda inginkan
  • Ganti angka warna Biru sesuai selera, (height: tinggi, width: lebar) jika ingin agar scroll barnya menyesuaikan secara otomatis dengan lebar template blog Anda, ganti angka 900px dengan 100%px (ingat % akan otomatis menyesuaikan dengan Template blog, seperti yang saya pake pada postingan ini)
Style #2. Scroll Bar Post Dengan Background


Saya sendiri kebetulan butuh menampilkan script panjang tapi tampilannya kurang enak dilihat dan meleati batas width atau lebar yang seharusnya. Maka kebetulan beberapa trik saya dapatkan ketika search di google. Nah, agar ilmunya tidak mubazir, saya akan bagikan trik ini ke pada sobat blogger.

Scroll Bar sangat berguna ketika sobat blogger ingin menampilkan sebuah script yang panjang (dan bisa jadi membosankan. tanpa perlu memenuhi page postingan blog. Fungsi ini tentunya sangat memudahkan blogger juga ketika menampilkan script dan melewati batas post space dan membuat tampilan halaman kurang enak dilihat.

Copy Paste Script HTML nya ke Mode HTML di Postingan Blog


<div style="background-color: mediumorchid; border: 2px solid rgb(191, 189, 189); height: 100px; overflow: auto; padding: 5px; text-align: justify; width: 300px;">TULISAN SAHABAT DISINI </div>

Note :
  • Ganti tulisan warna Merah dengan text atau kode yang anda inginkan
  • Ganti angka warna Biru sesuai selera, (height: tinggi, width: lebar) jika ingin agar scroll barnya menyesuaikan secara otomatis dengan lebar template blog Anda, ganti angka 300px dengan 100%px (ingat % akan otomatis menyesuaikan dengan Template blog, seperti yang saya pake pada postingan ini)
Saya sendiri kebetulan butuh menampilkan script panjang tapi tampilannya kurang enak dilihat dan meleati batas width atau lebar yang seharusnya. Maka kebetulan beberapa trik saya dapatkan ketika search di google. Nah, agar ilmunya tidak mubazir, saya akan bagikan trik ini ke pada sobat blogger.

Scroll Bar sangat berguna ketika sobat blogger ingin menampilkan sebuah script yang panjang (dan bisa jadi membosankan. tanpa perlu memenuhi page postingan blog. Fungsi ini tentunya sangat memudahkan blogger juga ketika menampilkan script dan melewati batas post space dan membuat tampilan halaman kurang enak dilihat.

Copy Paste Script HTML nya ke Mode HTML di Postingan Blog



<div style="background-color: black; border: 5px solid rgba(43,22,22,0.4); height: 100px; overflow: auto; padding: 10px; text-align: justify; width: 100%px;">TULISAN SAHABAT DISINI </div>


Note :
  • Ganti tulisan warna Merah dengan text atau kode yang anda inginkan
  • Ganti angka warna Biru sesuai selera, (height: tinggi, width: lebar) jika ingin agar scroll barnya menyesuaikan secara otomatis dengan lebar template blog Anda (ingat % akan otomatis menyesuaikan dengan Template blog, seperti yang saya pake pada postingan ini)
Style #3. Scroll Bar Post Dengan Fitur Horizontal dan Vertikal
Saya sendiri kebetulan butuh menampilkan script panjang tapi tampilannya kurang enak dilihat dan meleati batas width atau lebar yang seharusnya. Maka kebetulan beberapa trik saya dapatkan ketika search di google. Nah, agar ilmunya tidak mubazir, saya akan bagikan trik ini ke pada sobat blogger.

Scroll Bar sangat berguna ketika sobat blogger ingin menampilkan sebuah script yang panjang (dan bisa jadi membosankan. tanpa perlu memenuhi page postingan blog. Fungsi ini tentunya sangat memudahkan blogger juga ketika menampilkan script dan melewati batas post space dan membuat tampilan halaman kurang enak dilihat.


Saya sendiri kebetulan butuh menampilkan script panjang tapi tampilannya kurang enak dilihat dan meleati batas width atau lebar yang seharusnya. Maka kebetulan beberapa trik saya dapatkan ketika search di google. Nah, agar ilmunya tidak mubazir, saya akan bagikan trik ini ke pada sobat blogger.



Scroll Bar sangat berguna ketika sobat blogger ingin menampilkan sebuah script yang panjang (dan bisa jadi membosankan. tanpa perlu memenuhi page postingan blog. 

Copy Paste Script HTML nya ke Mode HTML di Postingan Blog


<!-- Codes by banguet.blogspot.com -->
<center><div style="text-align:left;width:150px;height:150px;overflow:scroll;padding:5px;">
WRITE YOUR TEXT HERE. 
</div>
</center>

Note :
  • Ganti tulisan warna Merah dengan text atau kode yang anda inginkan
  • Ganti angka warna Biru sesuai selera, (height: tinggi, width: lebar) jika ingin agar scroll barnya menyesuaikan secara otomatis dengan lebar template blog Anda.
Style #4. Scroll Bar Post Tanpa Border



Saya sendiri kebetulan butuh menampilkan script panjang tapi tampilannya kurang enak dilihat dan meleati batas width atau lebar yang seharusnya. Maka kebetulan beberapa trik saya dapatkan ketika search di google. Nah, agar ilmunya tidak mubazir, saya akan bagikan trik ini ke pada sobat blogger.

Scroll Bar sangat berguna ketika sobat blogger ingin menampilkan sebuah script yang panjang (dan bisa jadi membosankan. tanpa perlu memenuhi page postingan blog. Fungsi ini tentunya sangat memudahkan blogger juga ketika menampilkan script dan melewati batas post space dan membuat tampilan halaman kurang enak dilihat.

Copy Paste Script HTML nya ke Mode HTML di Postingan Blog


<!-- Codes by banguet.blogspot.com -->
<center>
<div style="text-align:left;width:250px;height:100%px;overflow:auto;padding:5px;">
Tulisan Anda Di Sini
</div>
</center>

Note :
  • Ganti tulisan warna Merah dengan text atau kode yang anda inginkan
  • Ganti angka warna Biru sesuai selera, (height: tinggi, width: lebar) ganti angka 100%px  dengan 300px agar lebarnya sesuai keinginan anda.
Style #3. Scroll Bar Post Dengan Fitur Horizontal dan Vertikal Dan Berwarna 



Saya sendiri kebetulan butuh menampilkan script panjang tapi tampilannya kurang enak dilihat dan meleati batas width atau lebar yang seharusnya. Maka kebetulan beberapa trik saya dapatkan ketika search di google. Nah, agar ilmunya tidak mubazir, saya akan bagikan trik ini ke pada sobat blogger.

Costumize postingan akan membuat pengunjung blog lebih bisa menghabiskan waktu berlama-lama di blog anda



Copy Paste Script HTML nya ke Mode HTML di Postingan Blog
<!-- Codes by  banguet.blogspot.com -->
<center>
<div style="text-align:left;width:300px;height:150px;overflow:scroll;padding:5px;background-color:#FCFADD;color:#714D03;border:4px double #DEBB07;">
MASUKKAN TULISAN ANDA DI SINI
</div>

Note :
  • Ganti tulisan warna Merah dengan text atau kode yang anda inginkan
  • Ganti angka warna Biru sesuai selera, (height: tinggi, width: lebar) ganti angka 300px   sesuai keinginan anda.
Cara memasukkan kodenya :

Step 1>> Login ke akun Blogger
Step 2>> Pilih Entry Baru
Step 3>> Klik Tombol HTML dan masukan kodenya dalam mode HTML selanjutnya tinggal kembali ke mode Compose
Fig. Cara masuk ke mode HTML Postingan
Fig. Cara masuk ke mode HTML Postingan
Demikian kumpulan cara dan jenis scroll bar untuk postingan blog anda, semoga postingan ini bermanfaat.




Previous Post
Next Post

0 komentar: