Membuat Menu Widget Scroll di Blog

Salam blogger pada posting kali ini saya akan membarikan cara membuat widget scroll untuk menghemat tempat dan sekaligus mempercantik blog teman-teman.

Widget ini selain menghemat tempat juga mempermudah pengunjung blog memilih artikel yang ingin di baca. Sangat bermanfaat jika kita pasang di blog kita agar pengunjung blog tidak mencari artikel lain di web lain dan supaya pengunjung betah membaca artikel di blog kita.

Ok lasung ke TKP kita mulai dari lahkah pertama sebagai berikut :

1. Login ke akun Blogger Sobat

2. Klik menu "Layout"

3. Klik pada "Page Element"

4. Klik "Add a Gadget " Kemudian pilih atau klik HTML/Javascript".

5. Copy Paste Script yang ada di bawah ini :

<div
style='overflow:auto;width:250px;height:250px;padding:10px;border:1px solid #eee'><ul>
LINK LIST ANDA DISINI
</ul></div>

6. Edit kodenya dulu, Kode yang berwarna biru adalah alamat URL yang ingin teman-tema masukan dan yang warna merah judul tampilan di widget silah diganti sesuai menu yang akan di masukkan. lihat kode yang temen mau ganti di bawah ini :

<div 
style='overflow:auto;width:250px;height:250px;padding:10px;border:1px solid #eee'><ul><li><ahref='http://sodiycxacun.blogspot.com/2010/04/pasang-icon-emotions-upin-dan-ipin-di.html'>Pasang icon emotions upin & ipin</a></li>
<li><a href='http://sodiycxacun.blogspot.com/2010/04/pasang-widget-recent-posts-atau-posting.html'>Pasang Widget Recent Posts Atau Posting Terbaru Di Blog</a></li>  
<li><a href='http://sodiycxacun.blogspot.com/2010/02/cara-membuat-posting-diblog.html'>Cara membuat Posting Blog</a></li>
<li><a href='http://sodiycxacun.blogspot.com/2009/11/belajar-buat-blo-lewat-blogger.html'>Cara membuat Blog</a></li>  
<li><a href='http://sodiycxacun.blogspot.com/2010/04/membuat-read-more.html'>Cara membuat read more</a></li>  
</ul></div>

Untuk menambah list tinggal copy paste kode yang sama,dan tinggal edit saja. Sebagai cotoh di kodenya di bawah ini

<li><a href='http://sodiycxacun.blogspot.com/2010/04/membuat-read-more.html'>Cara membuat read more</a></li>

Contoh hasilnya seperti di bawah ini :

• Pasang icon emotions upin & ipin
• Pasang Widget Recent Posts Atau Posting Terbaru Di Blog
• Cara membuat Posting Blog
• Cara membuat Blog
• Cara membuat read more

Keterangan Kode yang bewarna pink :

overflow:auto;
Kode ini agar tercipta scrolling atau penggulung halaman apabila isi dari halaman tersebut sudah melampaui batas tinggi atau lebar yang telah di tentukan.

width:300px;
Adalah lebar bidang yang di inginkan, dalam hal ini adalah sebesar 300 pixel, nilai ini tentunya di sesuaikan dengan keinginan atau di sesuaikan dengan lebar sidebar yang ada. namun, agar selalu sesuai dengan sidebar maka sebaiknya memakai nilai 100% (width:100%).

height:200px;
Adalah tinggi bidang yang di inginkan, nilai ini bisa di ubah sesuai keinginan, misal jadi 250px atau nilai yang lainnya.

padding:10px;
Adalah kode pembuat jarak agar tulisan yang ada dalam halaman tersebut tidak menabrak dinding halaman, nilai ini tentu saja bisa di ubah sesuai keinginan. misal : padding:5px;

border:1px solid #eee
Agar bidang tersebut terlihat ada kotaknya, jika anda tidak menginginkan ada terlihat kotaknya, maka tinggal di hapus saja.

Selesai.....jangan lupa klik Save
selamat mencoba semoga bermanfaat.. jangan lupa comment ya untuk motifasi saya.
Terimakasih sudah berkunjung sapai ketemu di tutorial berikutnya.,.,.,.,.,