Kamis, 31 Januari 2013

Cara Membuat Kotak Scroll


Kali ini Saya akan membahas cara membuat kotak scroll, dan cara ini digunakan untuk menghemat ruangan dalam blog Sobat, sekalian juga membuat tampilan menjadi lebih bagus. Kotak ini dapat kita isi dengan daftar dari postingan atau daftar dari link para sobat ataupun daftar dari yang lainnya.

Untuk itu silahkan ikuti langkah langkah berikut ini :
  • Masuk ke Blog Sobat
  • Pilih Tata Letak → Tambah Gadget → Pilih HTML/JavaScript
  • Paste script di bawah ke dalam kotak

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

<a href="http://suryachandragobel.blogspot.com/2012/04/cara-membuat-recent-comments.html">Cara Membuat Recent Comments</a> <br />
<br />
<a href="http://suryachandragobel.blogspot.com/2012/06/gambar-yang-mengecoh-mata.html">Gambar Yang Mengecoh Mata</a> <br />
<br />
<a href="http://suryachandragobel.blogspot.com/2012/05/cara-membuat-kotak-scroll-marquee.html">Membuat kotak scroll</a> <br />
<br />
<a href="http://suryachandragobel.blogspot.com/2012/06/cara-membuat-kode-warna-dengan-widget_16.html">Cara membuat kode warna dengan widget</a><br />
<br />
<a href="http://suryachandragobel.blogspot.com/2012/06/cara-menghilangkan-tulisan-diberdayakan.html">Cara menghilangkan tulisan diberdayakan oleh blogger</a> <br />
<br />
<a href="http://suryachandragobel.blogspot.com/2012/06/layar-monitor-terbalik.html">Layar Monitor Terbalik</a><br />
<br />
<a href="http://suryachandragobel.blogspot.com/2012/04/free-download-game-worm-3d-full-version.html">Free Download Game Worm 3D (Full Version)</a> <br />
<br />
<a href="http://suryachandragobel.blogspot.com/2012/05/cara-cepat-membuat-blog-terdeteksi.html">Cara Cepat Membuat Blog Terdeteksi Mesin Pencari Google</a><br />
<br />
<a href="http://suryachandragobel.blogspot.com/2012/06/kode-html-karakter-khusus-ascii.html">Kode HTML Karakter Khusus ASCII</a><br />
<br />
<a href="http://suryachandragobel.blogspot.com/2012/06/cara-membuat-readmore-otomatis.html">Cara Membuat Readmore Otomatis</a><br />
<br />
<a href="http://suryachandragobel.blogspot.com/2012/06/cara-membuat-permalink-di-blog.html">Cara Membuat Permalink Di blog</a>

</div>


  • Maka Akan Terlihat Jadinya Seperti di bawah Ini ↓



  • Silahkan ganti script yang berwarna biru dengan Link URL milik Sobat
  • Simpan dan lihat hasilnya

Membuat Kotak Marquee :

Kotak blog roll ini berbeda dengan kotak yg di atas, karena kotak yang ini isinya berjalan otomatis dari bawah ke atas. Link atau isi di dalam kotak ini akan bergerak vertikal atau horizontal.

Berikut cara membuatnya :
  • Letakkan code berikut ini ke dalam element Sobat
  • Tata Letak → Tambah Gadget → HTML /Javascript

<div style="background: transparent; overflow:auto; width:100%px; height:200px; padding:10px; border:1px solid #999999;">
<MARQUEE align="center" direction="up" height="100" scrollamount= "2" onmouseover='this.stop()' onmouseout='this.start()' width="95%" >

<a href="http://suryachandragobel.blogspot.com/2012/04/cara-membuat-recent-comments.html">Cara Membuat Recent Comments</a> <br />
<br />
<a href="http://suryachandragobel.blogspot.com/2012/06/gambar-yang-mengecoh-mata.html">Gambar Yang Mengecoh Mata</a> <br />
<br />
<a href="http://suryachandragobel.blogspot.com/2012/05/cara-membuat-kotak-scroll-marquee.html">Membuat kotak scroll</a> <br />
<br />
<a href="http://suryachandragobel.blogspot.com/2012/06/cara-membuat-kode-warna-dengan-widget_16.html">Cara membuat kode warna dengan widget</a><br />
<br />
<a href="http://suryachandragobel.blogspot.com/2012/06/cara-menghilangkan-tulisan-diberdayakan.html">Cara menghilangkan tulisan diberdayakan oleh blogger</a> <br />
<br />
<a href="http://suryachandragobel.blogspot.com/2012/06/layar-monitor-terbalik.html">Layar Monitor Terbalik</a><br />
<br />
<a href="http://suryachandragobel.blogspot.com/2012/04/free-download-game-worm-3d-full-version.html">Free Download Game Worm 3D (Full Version)</a> <br />
<br />
<a href="http://suryachandragobel.blogspot.com/2012/05/cara-cepat-membuat-blog-terdeteksi.html">Cara Cepat Membuat Blog Terdeteksi Mesin Pencari Google</a><br />
<br />
<a href="http://suryachandragobel.blogspot.com/2012/06/kode-html-karakter-khusus-ascii.html">Kode HTML Karakter Khusus ASCII</a><br />
<br />
<a href="http://suryachandragobel.blogspot.com/2012/06/cara-membuat-readmore-otomatis.html">Cara Membuat Readmore Otomatis</a><br />
<br />
<a href="http://suryachandragobel.blogspot.com/2012/06/cara-membuat-permalink-di-blog.html">Cara Membuat Permalink Di blog</a>


</marquee>
</div>


  • Maka Akan Terlihat Seperti di bawah Ini ↓




Keterangan :
  • Tambahkan code berwarna merah sesudah tulisan div style seperti di atas dan tutup dengan tulisan berwarna orange sebelum code </div> seperti di atas.
  • Kode "up" itu menunjukan arah pergerakan, Sobat bisa menggantinya dengan down, left, right.
  • Angka "100" menunjukkan tinggi dari marquee yang berjalan, semakin banyak angkanya maka semakin tinggi pula marquee berjalannya.
  • Jika sobat tidak ingin memakai garis/border sobat tinggal hapus code <div style="background: transparent; overflow:auto; width:100%px; height:200px; padding:10px; border:1px solid #999999;">
  • Sehingga hanya ada tulisan saja yang berjalan ke atas.

Selamat Mencoba !
Diposting oleh di
Label:

1 komentar:

Langganan: Posting Komentar (Atom)