Minggu, 02 Januari 2011

Cara buat Kotak Scrollbar Pada Posting Blog-Tutorial

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/AVvXsEgSpQjWxf9JWIa6lPDzxAeTOb-39QRUN1_XXQbwvSSoqu8XW6hQ1X_-6sP1i8wlytrnFxtwOekiL-lozJOoomTqNxVWT9yGDR8t6KClIGHehynz3Ty5OYtPGZ-9cM8H78XAf1rg85YzCVhY/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>

 


Selamat Mencuba!!?

0 comments:

Posting Komentar

Twitter Delicious Facebook Digg Stumbleupon Favorites More