Sebelumnya saya pernah memposting mengenai cara membuat marquee atau teks berjalan untuk menghemat ruangan. Sebenarnya masih ada cara lain untuk melakukannya yaitu dengan cara membuat kotak Scrollbar.
Kotak ini bisa di scroll kekanan dan kebawah untuk menemukan teks lain yang tersembunyi sehingga bisa menghemat ruangan pada blog kita.
Untuk membuat kotak ini caranya sangat mudah:
1. Buka Blogger. Klik menu Design -> Page Elements
2. Klik Add a Gadget lalu klik HTML/Javascript

3. Masukkan kode yang dibawah ini:
<div style="overflow:auto; padding:5px; width:80px; height:80px; background-color: rgb(255, 255, 255); border:1px solid #ccc;">Tambahkan teks atau kode script disini</div>Jika Anda ingin menambahkan teks kedalam kotak scrollbar maka ganti tulisan yang dicetak tebal dengan teks yang ingin Anda tampilkan.
Sebagai contoh, saya memasukkan:
<div style="overflow:auto; padding:5px; width:80px; height:80px; background-color: rgb(255, 255, 255); border:1px solid #ccc;">Kotak scrollbar adalah sebuah kotak yang bisa digulung kekanan atau kebawah sehingga bisa menghemat ruangan pada blog</div>Maka hasilnya akan seperti ini:
Kotak scrollbar adalah sebuah kotak yang bisa digulung kekanan atau kebawah sehingga bisa menghemat ruangan pada blog
Jika Anda ingin menambahan gambar kedalam kotak scrollbar maka ganti tulisan yang dicetak tebal diatas dengan <img src="alamat url gambar Anda" />
Catatan:
Ganti teks biru yang dicetak tebal dengan alamat alamat gambar anda contoh https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYBVy9yKD5vsTTEBIBA6svfOJK2Lw0OkuzHHvfBldH68p92eXH1GRjClbPUniuK9ohW-yKdXKRf70M5lArKteDi4sENqgMECh73w4mIp5yXmCXT7-rJhrKar5_6__BDr-uDin4iWij3zKA/s1600-r/JON'S+BIRU2.png
Sebagai contoh saya memasukkan:
<div style="border: 1px solid rgb(204, 204, 204); padding: 5px; overflow: auto; width: 300px; height: 80px; background-color: rgb(255, 255, 255);"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYBVy9yKD5vsTTEBIBA6svfOJK2Lw0OkuzHHvfBldH68p92eXH1GRjClbPUniuK9ohW-yKdXKRf70M5lArKteDi4sENqgMECh73w4mIp5yXmCXT7-rJhrKar5_6__BDr-uDin4iWij3zKA/s1600-r/JON'S+BIRU2.png" /></div>
Maka hasilnya akan seperti ini:

4. Kalau sudah. Klik Save lalu klik View Blog untuk melihat hasil tampilannya
Selamat Mencoba..!! Artikel Terkait di Bawah posting
Tips N Triks
- Tips & Trik Jumper | Teknik Jumper Keypad Handphone
- Blackberry Software Solution By Kenny ic3
- Tips mempertahankan baterai laptop agar bertahan lama I Battery Care | Hausgame software center
- cara menggabungkan dan memotong video
- membuat poster animasi gokil abis dengan photobie
- Pengalaman membasmi virus shortcut, W32 Ramnit
- Perbaiki Safe Mode bermasalah dengan Safe Mode Fixer
- BlackBerry 8520 Curve usb solution
- Nokia E63 E71 E72 SMPS Jumper
- Hardware pack For Nokia X6 16GB Latest Software
- Nokia x6 16gb hardware solution
- Nokia X5 Hardwere Solution One Exe
- Nokia x5
- Nokia X6 32GB solution
- Nokia C1-00 All Hardware Latest Solution Pack
- Nokia X2 Soution
- x6 Nokia ALL UseFull Hardware Repair Solution Pack
- Nokia X3 all Hardware Tested Solution
- NOKIA x6 All Solution Here (Setup File v-4)
- Nokia X5 All Hardware Latest Solution
- Nokia X7-00 charging way
- Nokia E 71 Hardware Solution
- Nokia 1616 Display
- nokiaE7-00 power key way
- Nokia C,E,N,X series All hardware solution exe
Blogger
- Kamus Nama bagus
- Efek Box Gelap Terang Menggunakan Opacity Effect dan CSS3 Transition
- Merubah Lebar Template Blog
- Cara Membuat New Recent Comment dengan Scroll Down di Blogspot
- Cara Memasang Yahoo Messenger Di Blogger
- Cara membuat browser bergetar saat klik kanan
- Cara Membuat Sitemap di Blogspot
- Membuat Widget Agar Selalu Tetep Berada Di Kiri,Kanan,Dll
- Cara Pasang Buku Tamu Facebook di Blog
- Tips Cara Pasang Status / ikon YM (yahoo messenger) di blog/web/friendster !
- Mengganti Tulisan Newer Post Older Post Dengan Gambar
- Cara Membuat Vertical Sliding Info Panel With jQuery
- Memasang Radio Online atau MP3 di Blog
- SEXY BOOKMARKS V2 FOR BLOGGER
- Show Comment Bubble at Top Right of each Blogger Posts
- Automatic Read More with Thumbnail for Blogger
- Social Bookmarking Widget for Blogger with auto scrolling function
- CARA MEMBUAT EXPLORER D-TREE...
- Cara Pasang Tag Meta Robot Blogspot
- Cara Membuat Drop Caps Otomatis di Posting Blog
- Koleksi banner blog dofollow
- Cara mengecek kecepatan Blog
- Membuat Link Terbuka Pada Halaman Baru
- Memasang Feedjit Pada Blogger
- Membuat Gradient Effect dengan CSS
Kotak Scrollbar
0 komentar:
Posting Komentar