Tue, 09 Jun 2009 - 04:18:50 WIB
Membuat Widget-Box Minimalis
Posted by : administrator
Category: Web Tools - Views: 595
Kenapa ada kata Minimalis? Ya! Dari beberapa Site dan Blog yang pernah dan sering saya kunjungi, banyak yang menampilkan banner dari website lain sebagai rujukan, ataupun ad-banner yang menampilkan promo ini dan promo itu. (Hehehe, sama seperti banner yang ada di left-sidebar site ini). Seringkali banner-banner itu memakan tempat karena deretannya yang sangat panjang. Hingga terkadang kita masih harus scrolling jika ingin melihat bagian footer dari page yang kita kunjungi, saking banyaknya banner yang ditampilkan.
Nah, kali ini saya ingin berbagi, tentang bagaimana cara meminimalkan deretan banner yang ada di Site atau Blog. Bukan dengan menghilangkan banner-banner itu tentunya. Tapi kita tempatkan dalam satu kotak yang sering disebut dengan Widget. Entahlah, penyebutan ini benar atau tidak karena secara keyword, tools ini memang namanya Widget. Bahkan sangat populer dengan sebutan Widget Blogroll atau Widget-Box. Ah, mari kita lanjutkan.... (kok jadi kayak kampanye ya?)
Coba perhatikan left-sidebar dari Site ini. Disana saya meletakkan 2 macam Widget-Box. Yang pertama untuk menempatkan banner-banner dari beberapa orang yang mensupport saya dalam pembuatan Site ini, dan yang kedua saya gunakan untuk menempatkan nama-nama teman saya. Nantinya, Anda bisa sesuaikan sendiri berapa besaran lebar dan panjang kotak Widget yang ingin Anda buat. Yang diperlukan untuk membuat Widget-Box ini hanya tag HTML biasa yang menggunakan "kotak" yang diberi overflow, yang akan berfungsi dengan adanya pembatasan pada Width / lebar dan Height / tinggi.
Yuk kita mulai.....
Tag HTML dari masing-masing model Widget-Box diatas adalah sebagai berikut:
Widget-Box 1:
<div style="border: 1px solid rgb(153, 153, 153); overflow: auto; width: 150px; height: 200px; text-align: center; background: #FFFFFF;">
<a href="http://URL-SITE-or-BLOG1" target="_blank"><img src="http://URL-of-IMAGE1" border="0"></a><br>
<a href="http://URL-SITE-or-BLOG2" target="_blank"><img src="http://URL-of-IMAGE2" border="0"></a><br>
</div>
Widget-Box 2:
<div style="border: 0px; overflow: auto; width: 150px; height: 200px; text-align: center; background: #FFFFFF;">
<a href="http://URL-SITE-or-BLOG1" target="_blank"><img src="http://URL-of-IMAGE1" border="0"></a><br>
<a href="http://URL-SITE-or-BLOG2" target="_blank"><img src="http://URL-of-IMAGE2" border="0"></a><br>
</div>
Anda bisa menyesuaikan Width dan Height nya dengan space yang Anda sediakan pada Site atau Blog Anda. Begitu juga dengan warna background nya. Anda dapat mengganti warna sesuai dengan warna yang ada pada Site atau Blog Anda. Satu lagi yang bisa Anda rubah, yaitu text-align nya. Oke..... Selamat mencoba.
- Browsers PNG icon pack
- Free PNG Iconpack
- Marquee Link in Javascript
- Time, Date and Internet Time in Javascript
• Home
• Cookery Recipes
• Designs
• Journal
• Marketing 2.0
• Miscellaneous
• Photoshop Tutorials
• Tips and Tricks
• Web Tools
- cheap lion king tickets
Nugget Ayam Rasa Semur - thedoart
Logo Ulang Tahun DeBlogger - wedding invitations
Gong Xi Fa Chai - Dissertation Writing Services
Photoshop Tutorial: Under Spot Light - portugal world cup jerseys
Gong Xi Fa Chai - Dissertation Writing Services
Gong Xi Fa Chai
Crestock Photo Search
MayasariDotNet