Beranda » » Cara membuat scroll box lebih berwarna

Cara membuat scroll box lebih berwarna

9
Bagi yang belum tau apa itu Scroll box , itu lhoo kotak berwarna yang ada di sebelah kanan blog saya . scroll box ini adalah sebuah kotak yang sungguh sangat menghemat tempat di blog , kenapa saya bilang begitu karena dengan scroll box ini kita tidak usah khawatir akan memakan tempat yang cukup banyak di blog , karena kan ada scroll nya jadi tinggal kita geser saja pakai mouse . nah pada kesempatan kali ini saya akan membagikan tutorial blog yaitu Cara membuat scroll box berwarna . rata-rata scroll blog yang terdapat di setiap blog tidak memiliki warna , nah bagi anda yang bosen dengan warna putih seperti itu saja , disni saya akan membagikan caranya agar scroll box tersebut menjadi lebih berwarna :) , berikut langkah-lamgkah nya :


1. login ke blogger.com
2. lalu pilih Rancangan
3. kemudian Tambah gadget dan pilih HTML/Java Script
4. copykan seluruh script di bawah ini kedalam java script tadi

<div style="border: 1px solid #aeb404;background:#f5f6ce; padding: 10px; overflow: auto; width:343px; height: 150px;">
<ul>
<li>
<a href='http://bagi-tips.blogspot.com/2011/07/cara-mengedit-template-blogger-menjadi.html'>Cara mengedit template blogger menjadi SEO friendly</a>
</li>
<li>
<a href='http://bagi-tips.blogspot.com/2011/07/pengertian-dari-pagerank-dan-serp.html'>Pengertian dari Pagerank dan SERP</a>
</li>
<li>
<a href='http://bagi-tips.blogspot.com/2011/07/tips-jitu-meningkatkan-pagerank-google.html'>Tips jitu meningkatkan pagerank google</a>
</li>
<li> <a href="http://bagi-tips.blogspot.com/2011/07/cara-mengoptimalkan-google-webmaster.html">Cara mengoptimalkan google webmaster tools</a>
</li>
<li>
<a href='http://bagi-tips.blogspot.com/2011/07/tips-menghindari-sanksi-dari-seo.html'>Tips menghindari sanksi dari SEO</a>
</li>
<li>
<a href='http://bagi-tips.blogspot.com/2011/07/5-teknik-terlarang-dalam-seo.html'>5 teknik terlarang dalam SEO</a>
</li>
<li>
<a href='http://bagi-tips.blogspot.com/2011/07/pengertian-dari-seo.html'>Pengertian dari SEO</a>
</li>
</ul>
 
</div>

Catatan :  
kode warna hitam adalah script yang digunakan untuk membuat scrol box.
kode warna biru adalah ketebalan garis luar dari scroll box
kode warna pink adalah kode warna html untuk ketebalan garis luar dan background warna dalam .
kode warna merah adalah contoh script dan tulisan  saya sendiri , ganti saja dengan tulisan anda sendiri

5. kemudian simpan , dan lihat hasil nya


Update !!

jika anda ingin mengganti warna background dengan gambar , ganti saja script yang paling atas dengan script di bawah ini :


<div style="border: 1px solid #aeb404; background:#fff url(http://1.bp.blogspot.com/_LKAawDdzKEo/TJ4MZwYCAxI/AAAAAAAAAd0/RBNRI4CrKMU/s1600/laut.jpg) repeat-y center; padding: 10px; overflow: auto; width:343px; height: 150px;">
*warna merah adalah URL gambar, silahkan anda ganti .

9 comments:

Error Shinobi said...

kalo dikasih gambar bisa nggak ya sob ... ???,

Egi Gusniawan Pradana said...

bisa sob :) , silahkan di cek di atas sudah saya update ^_^

Error Shinobi said...

ok sob... thank's ya... !!,

Egi Gusniawan Pradana said...

sama2 kawan :)

basri yudianto said...

wow keren sob... makasih infonya

Egi Gusniawan Pradana said...

@Basri yudianto : sama-sama sob :D

Aeldie said...

terima kasih soba, ane simpan dulu ilmunya sob, apa tahu berguna ntanti,,,,

Egi Gusniawan Pradana said...

a@aldie:silahkan kawan :)

Anonymous said...

Scroll box nya lebih berfariasi... mohon izin copas gan..
Salam kenal.. ditunggu kunjungan baliknya...

Post a Comment

Blog ini DoFollow ..