Home » » buat widget rata tengah dengan scrool

buat widget rata tengah dengan scrool

Written By made oka jaya diputra on Sunday, January 22, 2012 | 6:51 AM

Memasang widget/gadget di sidebar merupakan hal yang biasa dilakukan para blogger. Selain dapat mempercantik tampilan blog, widget tersebut juga bermanfaat baik bagi pengunjung maupun pemilik blog itu sendiri. Widget-widget itu berisikan informasi-informasi mengenai blog tersebut sesuai dengan kegunaannya masing-masing.


Bila widget-widget yang dipasang di sidebar cukup banyak dapat membuat sesak ruangan di sidebar. Salah satu solusi untuk menghemat tempat di sidebar adalah dengan memasang widget-widget tesebut ke dalam scroll box. Lalu, bagaimana caranya agar posisi widget-widget tersebut di scroll box menjadi rata tengah sehingga terlihat rapi dan sedap dipandang mata?

Nah, berikut ini akan dijelaskan cara membuat posisi widget menjadi rata tengah di scroll box. Seperti dibahas pada posting terdahulu bahwa untuk membuat scroll box di sidebar, diperlukan script seperti di bawah ini.

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

ISI/ELEMEN KOTAK

</div>

Agar posisi widget menjadi rata tengah, maka script-nya akan terlihat seperti di bawah ini.

<div style="overflow:auto; width:100%px; height:200px; padding:10px; border:1px solid #999999;">
<center>
<script widget 1><br />
<script widget 2><br />
<script widget 3><br />
<script widget 4><br />
<script widget 5><br />
</center>
</div>

    Ganti script widget dengan script widget yang akan dipasang.
    width:100%px; menunjukkan lebar dari kotak yang diinginkan. Ganti sesuai dengan kebutuhan Anda, misalnya 200px atau 300px. Agar lebih mudah menyesuaikan dengan lebar sidebar tentukan saja nilainya dengan 100%px.
    height:200px; menunjukkan tinggi kotak, dapat diubah sesuai keinginan Anda.


Sebagai contoh:
Misalnya, saya mempunyai beberapa script widget yang akan dipasang di scroll box, yaitu:


    <a href="http://bloggers.com/asrul507" rel="dofollow" ><img src="http://bloggers.com/u/108651/p/img_01.png" title="Asrul Nur Rahim - Find me on Bloggers.com" alt="Asrul Nur Rahim - Find me on Bloggers.com" /></a>

    <a href="http://www.ontoplist.com/" target="_blank" title="Online Marketing"><img src="http://www.ontoplist.com/images/ontoplist32.png" alt="Online Marketing" border="0" /></a>

    <a href="http://www.w3-directory.com/vote-w3-directory.php?id_site_vote=25040" target="_blank"><img src="http://www.w3-directory.com/images/logo-w3-world-wide-web-directory.gif" width="125" height="35" border="0" alt="W3 Directory - the World Wide Web Directory" /></a>

    <noscript><a href="http://www.w3-directory.com/directory-Personal-web-sites-Blogs.php">Personal web sites / Blogs directory</a> <a href="http://www.w3-directory.com/directory-Indonesia.php">Indonesia directory</a></noscript>

    <a href="http://indonesia-blogger.com"><img src="http://www.indonesia-blogger.com/img/indonesia-blogger.jpg" border="1"/></a><a href="http://blog-indonesia.com"><img src="http://blog-indonesia.com/image/19.gif" border="0" alt="blog-indonesia.com"/></a>

    <a href="http://jigsaw.w3.org/css-validator/check/referer"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!" /></a>

    <a href="http://www.getrank.org" target="_blank"><img src="http://www.getrank.org/prbutton/pagerank-display.php?s=59" title="Pagerank" alt="PageRank Checker" border="0px" /></a>

    <a href="http://feedvalidator.org/check.cgi?url=http%3A//kamu-klik.blogspot.com/feeds/posts/default"><img src="http://feedvalidator.org/images/valid-atom.png" alt="[Valid Atom 1.0]" title="Validate my Atom 1.0 feed" /></a>

Sekarang kita akan masukkan script-script di atas ke script untuk membuat scroll box, maka script-nya menjadi seperti di bawah ini.

<div style="overflow:auto; width:100%px; height:200px; padding:10px; border:1px solid #999999;">
<center>
<a href="http://bloggers.com/asrul507" rel="dofollow" ><img src="http://bloggers.com/u/108651/p/img_01.png" title="Asrul Nur Rahim - Find me on Bloggers.com" alt="Asrul Nur Rahim - Find me on Bloggers.com" /></a><br/>
<a href="http://www.ontoplist.com/" target="_blank" title="Online Marketing"><img src="http://www.ontoplist.com/images/ontoplist32.png" alt="Online Marketing" border="0" /></a><br/>
<a href="http://www.w3-directory.com/vote-w3-directory.php?id_site_vote=25040" target="_blank"><img src="http://www.w3-directory.com/images/logo-w3-world-wide-web-directory.gif" width="125" height="35" border="0" alt="W3 Directory - the World Wide Web Directory" /></a><br/>
<noscript><a href="http://www.w3-directory.com/directory-Personal-web-sites-Blogs.php">Personal web sites / Blogs directory</a> <a href="http://www.w3-directory.com/directory-Indonesia.php">Indonesia directory</a></noscript><br/>
<a href="http://indonesia-blogger.com"><img src="http://www.indonesia-blogger.com/img/indonesia-blogger.jpg" border="1"/></a><br/>
<a href="http://blog-indonesia.com"><img src="http://blog-indonesia.com/image/19.gif" border="0" alt="blog-indonesia.com"/></a><br/>
<a href="http://jigsaw.w3.org/css-validator/check/referer"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!" /></a><br/>
<a href="http://www.getrank.org" target="_blank"><img src="http://www.getrank.org/prbutton/pagerank-display.php?s=59" title="Pagerank" alt="PageRank Checker" border="0px" /></a><br/>
<a href="http://feedvalidator.org/check.cgi?url=http%3A//kamu-klik.blogspot.com/feeds/posts/default"><img src="http://feedvalidator.org/images/valid-atom.png" alt="[Valid Atom 1.0]" title="Validate my Atom 1.0 feed" /></a><br/>
</center>
</div>

Bila diletakkan di sidebar, maka hasilnya akan tampak seperti di bawah ini.

 




Asrul Nur Rahim - Find me on Bloggers.com

Online Marketing

W3 Directory - the World Wide Web Directory




blog-indonesia.com

Valid CSS!

PageRank Checker

[Valid Atom 1.0]


Untuk memasang scroll box di sidebar, berikut ini langkah-langkahnya:

  • Masuk ke akun Blogger
  • Klik Rancangan > Elemen Laman > Tambah Gadget.
  • Kemudian pilih HTML/JavaScript.
  • Berikan judul dan isi kolom Konten dengan script scroll box.
  • Klik tombol SIMPAN.
  • Atur posisi widget ke tempat yang diinginkan.
  • Klik tombol SIMPAN
Okelah demikian cara-cara tersebut yang saya tahu.. selamat mencoba dan semoga berhasil :)




Share this article :

2 comments:

  1. Terima kasih atas artikelnya.
    o iya selama saya jelajah mencari ilmu dengan blogwalking, menurut saya anda memiliki kelebihan tersendiri dari situs-situs lain dan jujur potensi anda juga sangat bagus, banyak juga ilmu yang saya pelajari disini jika ada waktu saya akan berkunjung lagi.

    ditunggu kunjungan baliknya :D

    u follow me, i follow u

    #Semoga sehat selalu :D

    ReplyDelete

 
Support : Your Link | Your Link | Your Link
Copyright © 2013. bli blogen - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger