Wednesday, 22 May 2013

Cara Membuat Kotak Gulir / Scroll box pada Blog


Fungsi dari Kotak Gulir atau Scroll Box adalah untuk merapikan Blog, salah satunya seperti Widget atau Gadget yang banyak terdapat pada Blog bisa kita rapikan dan menghemat tempat.
Selain bisa di pasang pada Widget atau Gadget, Kotak Gulir atau Scroll Box juga bisa di pasang di Tulisan Posting atau Halaman.
Oke untuk Tutorial saat ini saya akan membuatnya pada Widget atau Gadget

Login Blog =>Klik Tata Letak =>Klik Tambahkan Gadget
Cari Gadget HTML/JavaScript, lalu masukan Kode Script di bawah ini

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

Keterangan
- ####### => Ganti dengan Kode Script, Tulisan atau Link Blog/Web
- width:100%px; => Lebar
- height:200px; => Tinggi
- solid #eee; => Warna garis batas
- border:1px =>Garis batas
- padding:10px; => Jarak Tulisan atau gadget dengan garis batas kiri


Contoh Penulisan Jika Hanya Judul Tulisan

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

jumadriansyah<br/>
ola ehen<br/>
Mardian<br />
<a href="http://jhoe-1987.blogspot.com/" target="_blank">jhoe-1987</a><br />
ayo<br />
ngeblog<br />
di blogger<br />
dan wordpress<br />

</div>
ditambahkan <br/> Supaya supaya Judul Tulisan tidak bersambunng seperti contoh diatas
untuk yang warna hijau contoh penulisan kode script jika ada Link Url nya
Warna kuning adalah Link URL
Warna Merah adalah Judul Link


Contoh Penulisan menggunakan Kode Script Gadget atau Widget

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

<!-- Start Backlink Code --><a target="_blank" href="http://www.backlink4u.net/" title="Free Automatic Backlink"><img border="0" width="80" alt="Free Automatic Backlink" src="http://www.backlink4u.net/images/backlink.gif" height="15"/></a><!-- End Backlink Code -->
<br/>

<!-- auto ping by http://www.auto-ping.com/ -->
<a href="http://www.auto-ping.com/pinger" target="_blank"><img src="http://www.auto-ping.com/iping.php?aut=EF14380489BD68920487F89D5739455201155A64B924A54A750E6D8DD2AD0BC1854A7AD421A02FC8C1" alt="Ping your blog, website, or RSS feed for Free" border="0" /></a>
<!-- auto ping by http://www.auto-ping.com/-->
<br/>

</div>

Kode Script tersebut bisa dikembangkan lagi dengan macromedia dreamweaver atau program lainya
Jangan Lupa kalo sudah pasang Kode Script nya, klik SIMPAN    Hehehehehe
Selamat mencoba

8 comments:

  1. mantap.yang sobat pakai ini template apa ?
    oya jangan lupa follow back ya

    ReplyDelete
  2. Makasih buat informasinya dari http://agentasdotcom.blogspot.com/

    ReplyDelete
  3. gan kalo bikin kotak kotak yang ada tulisan home,site map,tv internet,gimana caranya ya,soalnya soalnya tampilan saya jadul bawaan dari bloggernya??
    mohon email ke edipurwanto765@gmail.com
    terima kasih gan

    ReplyDelete
  4. terima kasih, bagi kalian pembaca komik silakan kunjungi my site www.bacakomikdevilball.blogspot.com

    ReplyDelete