Mengatur Tampilan Foto Flickr di Blog

Di sidebar bagian bawah di blog ini, Anda bisa melihat foto-foto yang saya simpan di Flickr. Bagaimana saya menampilkannya? Akan saya paparkan di bawah ini. Siapa tahu Anda tertarik :).

Kode

Yang harus Anda lakukan pertama kali adalah mendapatkan kode skrip yang akan Anda tempel di sidebar (atau di mana pun di bagian blog Anda). Setelah lima langkah (pilih HTML badge di langkah pertama), Anda akan mendapat kode yang… emh… semrawut. Tapi buat saya, yang penting hanyalah bagian ini:

<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=5&display=random&size=s&layout=x&source=user&user=88958761%40N00"></script>

Bagian lain saya buang.

Ada beberapa parameter yang bisa Anda ubah. Saya memilih 6 untuk count karena saya ingin ada 6 foto yang tampil. Kemudian display akan saya pilih random untuk menampilkan 6 foto secara acak. Bagian size saya pilih s untuk menampilkan thumbnail, dan layout saya pilih x agar saya bisa mengatur sendiri tampilan foto. 88958761%40N00 adalah ID saya di Flickr. Anda dapat mengecek ID Anda di idGettr.

Kode XHTML

Saya salin-tempel kode di atas, dan mengurungnya dalam tag div. Anda boleh juga mengubah karakter & menjadi & agar valid dengan aturan XHTML. Punya saya jadi seperti ini:

<div class="flickr">
    <script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=6&amp;display=random&amp;size=s&amp;layout=x&amp;source=user&amp;user=88958761%40N00"></script>
</div>

Kode CSS

Tambahkan kelas flickr di file CSS.

.flickr img { width: 74px; height: 74px; margin: 5px 10px 5px 0; padding: 5px; background: #E1F2FA; float: left; }
.flickr a img { border: 1px dashed #97C9E2; }
.flickr a:hover img  { border: 1px dashed #97C9E2; background: #D2EDF9; }

Dengan kode CSS di atas, saya perbesar ukuran foto (default 64×64) menjadi 74px. Supaya rata kiri, saya berikan float: left;. Foto saya beri bingkai selebar 5px dengan padding: 5px; dan warna #E1F2FA. Ketika mouse ‘tetikus’ digerakkan di atasnya warna bingkai menjadi #D2EDF9.

Begitu kira-kira. Anda bisa mencoba mengubah kode-kode di atas sehingga tampilan foto Flickr Anda sesuai dengan keinginan Anda.