Cara membuat scrollbar didalam posting ada berbagai macam caranya
diantaranya sebagai berikut :
cara 1.
<div style="overflow: auto;background-color:#C7DFB5; margin: 0px auto; padding: 5px; height: 200px;width: 94%;text-align: left;">
HTML, URL, TEXT, SCRIPT DSB </div>
HTML, URL, TEXT, SCRIPT DSB </div>
cara 2.
Untuk warna biru dapat kawan-kawan ganti sesuai keinginannya, silakan ganti dengan text, url dan lain nya yang ingin ada dalam tampilan scrollbox tersebut, kode diatas dapat di copas ke dalam posting blog, atau side bar anda".
Untuk Tinggi lebar kotak dapat diatur di Width dan Height
untuk cara kedua rows dan cols bisa kamu rubah sesuai keinginan kamu.
Cara yang lain
Kotak ini bisa di scroll kekanan dan kebawah untuk menemukan teks lain yang tersembunyi sehingga boleh menjimatkan ruang 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:
Maka hasilnya akan seperti ini:
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 http://lh4.ggpht.com/_15FopxVONSo/SSlTogZcU-I/AAAAAAAAA18/EqRgvye_cNU/herman%20blog%20headline%20v6.gif
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/AVvXsEiiedK59eyhbbThHOjeZpgbj4_NWPoeLv8b_t4VERPVPfzgm5CLxBNmzrFJP5l6Fpfpy9btJWcIyvgvnzNP-iGewZH49pHUJxYitVomk6p_OW4aPKECTyqLQfc7-FxJj9HlRkKtaeGxzASH/s320/cuti-cuti+cinta.jpg" /></div>
Maka hasilnya akan seperti ini
4. Kalau sudah. Klik Save lalu klik View Blog untuk melihat hasil tampilannya
Kode Terbaru Cara Auto
Tukar tulisan warna merah dengan tulisan anda
<div style="border: 1px inset rgb(108, 122, 125); margin-left: 20px; margin-right: 70px; padding-left: 30px; padding-right: 30px;">
<span class="fullpost"><blockquote>Letak tulisan anda disini Letak tulisan anda disini Letak tulisan anda disini Letak tulisan anda disini </blockquote>
</span></div>
Cara yang lain
Kotak ini bisa di scroll kekanan dan kebawah untuk menemukan teks lain yang tersembunyi sehingga boleh menjimatkan ruang 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;">Kotak scrollbar adalah sebuah kotak yang boleh digulung kekanan atau kebawah sehingga bisa menjimatkan ruang 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 http://lh4.ggpht.com/_15FopxVONSo/SSlTogZcU-I/AAAAAAAAA18/EqRgvye_cNU/herman%20blog%20headline%20v6.gif
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/AVvXsEiiedK59eyhbbThHOjeZpgbj4_NWPoeLv8b_t4VERPVPfzgm5CLxBNmzrFJP5l6Fpfpy9btJWcIyvgvnzNP-iGewZH49pHUJxYitVomk6p_OW4aPKECTyqLQfc7-FxJj9HlRkKtaeGxzASH/s320/cuti-cuti+cinta.jpg" /></div>
Maka hasilnya akan seperti ini
4. Kalau sudah. Klik Save lalu klik View Blog untuk melihat hasil tampilannya
Kode Terbaru Cara Auto
Tukar tulisan warna merah dengan tulisan anda
<div style="border: 1px inset rgb(108, 122, 125); margin-left: 20px; margin-right: 70px; padding-left: 30px; padding-right: 30px;">
<span class="fullpost"><blockquote>Letak tulisan anda disini Letak tulisan anda disini Letak tulisan anda disini Letak tulisan anda disini </blockquote>
</span></div>
5.
- Log in ke blogger sobat
- Masuk ke Postingan
- Entri baru
- Selanjutnya sobat buat postingan lalu masukan kode-kode dibawah ini sesuai yang sobat butuhkan
Kode Pertama
<div style="overflow:auto; padding:5px; width:200px; height:80px; background-color: rgb(255, 255, 255); border:1px solid #ccc;">src="http://www.ripway.com/azrut91/azrut91.blogspot.com-green-star.js"
type="text/javascript"></script></div>
Jika sobat masukan script diatas maka hasilnya akan seperti tampilan dibawah ini
src="http://www.ripway.com/azrut91/azrut91.blogspot.com-green-star.js"
type="text/javascript"></script>
type="text/javascript"></script>
Kode Kedua
<div style="overflow:auto; padding:5px; width:80px; height:80px; background-color: rgb(255, 255, 255); border:1px solid #ccc;">Masukan Script Disini</div>
Jika sobat masukan script diatas maka hasilnya akan seperti dibawah ini
Masukan Script Disini
Kode Ke-3 adalah jika sobat ingin memasukan gambar pada kotak scroll, Kodenya seperti dibawah ini
<div style="border: 1px solid rgb(204, 204, 204); padding: 5px; overflow: auto; width: 200px; height: 80px; background-color: rgb(255, 255, 255);"><img src="http://farm5.static.flickr.com/4110/5017095648_cb1385b630_s.jpg" /></div>
Maka Hasilnya akan seperti tampilan dibawah ini
Catatan:
Untuk Kode Pertama Sobat Ganti http://www.ripway.com/azrut91/azrut91.blogspot.com-green-star.js dengan tulisan / script sobat
Untuk Kode Kedua sobat ganti Masukan Script Disini dengan kode script / tulisan sobat
Untuk kode Ketiga sobat ganti http://farm5.static.flickr.com/4110/5017095648_cb1385b630_s.jpg dengan URL image sobat yang akan dimasukan ke dalam kotak scroll
Sumber
0 komentar:
:a: :b: :c: :d: :e: :f: :g:
:h: :i: :j: :k: :l: :m: :n: :o: :p: :q: :r: :s: :t: :u: :v: :w: :x: :z: :aa: :ab: :ac: :ad: :ae: :af: :ag: :ah: :ai: :aj:
Posting Komentar
Berikan Kritik dan Saran Anda