Senin, 19 September 2011

Cara Membuat Scroll Widget

Share:

Cara membuat scroll widget, cara membuat kotak scroll di blog, cara membuat kolom scroll di blog lagi lagi hal ini saya paparkan ditujukan untuk merapikan tampilan widget blog. membuat kolom scroll ini berfungsi untuk menghemat ruang/tempat dalam blog. yang seperti kita ketahui jika kita bertukar link, pasti membutuhkan ruang yang lumayan, jika kita bertukar link dengan 100 teman blogger, bayangkan jika 100 link menggunakan fitur link default blogger akan seperti apa tampilannya?, pasti tampilannya daftar linknya akan panjang sekali dan membuat tampilan blog menjadi kurang enak untuk dipandang. dengan membuat kolom/kotak scroll ini sangat membantu dalam menghemat ruang widget blog sobat. beberapa saat yang lalu saya melihat pesan di cbox saya yang isinya mengajukan pertanyaan bagaimana cara membuat scroll widget yang terdapat dibagian bawah ini, lebih tepatnya widget friend blogs seperti yang tertera dalam gambar diatas. untuk itu saya menjawab pertanyaan tersebut dan memaparkannya dalam artikel agar dapat lebih bermanfaat bagi khalayak. dan berikut adalah pertanyaan dari sobat keluarga madinah.
Pada postingan sebelumnya saya juga pernah membahas bagaimana cara membuat menu tab view dan cara pasang navigasi breadcrumb di blog, yang semuanya berfungsi untuk memperindah tampilan blog dan membuat tampilan blog lebih rapi.
Bagaimana cara membuat scroll widget ini?mari kita simak tutorialnya.

Cara membuat kolom/kotak scroll widget untuk link list :
  • Masuk ke account blog sobat
  • Klik rancangan
  • Lalu klik add widget dan pilih html/javascript
  • Copy kode dibawah ini dan sesuaikan dengan keperluan sobat
<div style="overflow:auto;background:#ffffff;width:280px;height:200px;padding:10px;border:1px solid #CCCCCC">
<ul>
<li><a href="URL Blog">Judul Blog</a></li>
<li><a href="URL Blog">Judul Blog</a></li>
<li><a href="URL Blog">Judul Blog</a></li>
<li><a href="URL Blog">Judul Blog</a></li>
<li><a href="URL Blog">Judul Blog</a></li>
<li><a href="URL Blog">Judul Blog</a></li>
<li><a href="URL Blog">Judul Blog</a></li>
<li><a href="URL Blog">Judul Blog</a></li>
<li><a href="URL Blog">Judul Blog</a></li>
<li><a href="URL Blog">Judul Blog</a></li>
<li><a href="URL Blog">Judul Blog</a></li>
<li><a href="URL Blog">Judul Blog</a></li>
<li><a href="URL Blog">Judul Blog</a></li>
<li><a href="URL Blog">Judul Blog</a></li>
<li><a href="URL Blog">Judul Blog</a></li>
<li><a href="URL Blog">Judul Blog</a></li>
<li><a href="URL Blog">Judul Blog</a></li>
<li><a href="URL Blog">Judul Blog</a></li>
<li><a href="URL Blog">Judul Blog</a></li>
<li><a href="URL Blog">Judul Blog</a></li>
</ul>
Cara Buat Widget Ini, <b><a href="http://asrizalwahdanwilsa.blogspot.com/2010/09/cara-membuat-scroll-widget.html">Klik Disini</a></b>
</div>
  • Jika sudah selesai, klik simpan dan lihat hasilnya
Keterangan :
Ubah URL blog dan judul blog dengan URL dan judul blog yang dituju
Kode yang berwarna merah adalah kode background (daftar kode warna : disini)
Kode yang berwarna hijau adalah lebar kolom scroll
Kode yang berwarna orange adalah tinggi kolom scroll
Kode yang berwarna biru adalah besarnya border dan warna border

Membuat kolom/kotak scroll widget untuk widget tertentu (contoh widget feedjit) :
  • Masuk ke account blog sobat
  • Klik rancangan
  • Lalu klik add widget dan pilih html/javascript
  • Copy kode dibawah ini dan sesuaikan dengan keperluan sobat
<div style="overflow:auto;background:#ffffff;width:280px;height:200px;padding:10px;border:1px solid #CCCCCC">
KODE FEEDJIT DISINI
</div>
  • Jika sudah selesai, klik simpan dan lihat hasilnya
Keterangan :
Kode yang berwarna merah adalah kode background (daftar kode warna : disini)
Kode yang berwarna hijau adalah lebar kolom scroll
Kode yang berwarna orange adalah tinggi kolom scroll
Kode yang berwarna biru adalah besarnya border dan warna border

0 komentar:

Posting Komentar

Terima Kasih Atas Kunjungannya..!!
Silahkan tinggalkan komentar Anda apabila ada yang perlu disampaikan,
dan kalo ada link yang rusak segara laporkan di kotak komentar ini..!!

"Komentarlah dengan kata-kata yang sopan"

Twitter Delicious Facebook Digg Stumbleupon Favorites More