Didats Triadi

Switch to Bahasa IndonesiaAs you may know, Flickr is one of the site that provide your photos to store. If you see the top part of this weblog, you’ll see my photos directly link to flickr. On this tutorial, we will discuss how to make the thumbnail look more interesting.

Register your self

Flickr was an independent site, until Yahoo has bought in 2005. This mean you can use your Yahoo account to login at Flickr. Don’t forget to login before you continue this tutorial.

Create a badge

Click this page http://flickr.com/badge_new.gne

On that page, you will see there is 2 choices, HTML or Flash badge. To follow this tutorial, you have to choose HTML Badge, so we can give a style. If you use Flash badge, we cannot edit the code. Click the next button to continue.

Choose which photos you’d like to display.

Step 2 is, you will choose the photos. You can display your photos and other photos too. If you only want to display your photos, you can directly click the next button in the bottom area.

Set the layout options.

There is 5 questions at that page. Choose NO for the first question, SQUARE for fourth question, and NONE for the last question. The rest is up to you.

Choose colors for your badge.

Since we want to create the layout and background by our self, we don’t need the color or background from flickr. So, you can tick NO BACKGROUND and NO BORDER.

Get the code

This is the last step to get the code from flickr. You will get the weird code from flickr. Most of the code is rubbish. We only need the javascript part to put in our blog. See the weird code below:

<!-- Start of Flickr Badge -->
<style type="text/css">
/*
Images are wrapped in divs classed "flickr_badge_image" with ids
"flickr_badge_imageX" where "X" is an integer specifying ordinal position. Below are some styles to get you started!
*/

#flickr_badge_uber_wrapper {text-align:center; width:150px;}
#flickr_badge_wrapper {padding:10px 0 10px 0;}
.flickr_badge_image {margin:0 10px 10px 10px;}
.flickr_badge_image img {border: 1px solid black !important;}
#flickr_badge_source {text-align:left; margin:0 10px 0 10px;}
#flickr_badge_icon {float:left; margin-right:5px;}
#flickr_www {display:block; padding:0 10px 0 10px !important; font: 11px Arial,
Helvetica, Sans serif !important; color:#3993ff !important;}
#flickr_badge_uber_wrapper a:hover,
#flickr_badge_uber_wrapper a:link,
#flickr_badge_uber_wrapper a:active,
#flickr_badge_uber_wrapper a:visited {text-decoration:none !important; background:inherit
!important;color:#3993ff;}
#flickr_badge_wrapper {}
#flickr_badge_source {padding:0 !important; font: 11px Arial, Helvetica, Sans
serif !important; color:#666666 !important;}
</style>
<div id=”flickr_badge_uber_wrapper”><a href=”http://www.flickr.com”
id=”flickr_www”>www.<strong style=”color:#3993ff”>flick<span
style=”color:#ff1c92″>r</span></strong>.com</a><div
id=”flickr_badge_wrapper”>
<script type=”text/javascript” src=”http://www.flickr.com/badge_code_v2.gne?count=3&display=latest&size=s&layout=x&source=user&user=30227699%40N00″></script>
</div></div>
<!– End of Flickr Badge –>

Designing

I have made 5 backgrounds that we can use it. You have to remember before create the background, which is the dimension of thumbnail. The default value is 75 pixel. You can use Macromedia Fireworks, or other application that similar like Adobe Photoshop to made it.

The javascript

As i mentioned above, we only need the javascript part from the code that flickr gave to us. And this is the code from the javascript. Each thumbnail will be wrap by div structure that have a class flickr_badge_image

<div class=”flickr_badge_image” id=”flickr_badge_image1″>
<a href=”http://www.flickr.com/photos/didats/250546038/”>
<img src=”http://static.flickr.com/113/250546038_bb793f0505_s.jpg”
alt=”A photo on Flickr” title=”Flamengo” height=”75″
width=”75″>
</a>
</div>

From the picture, i will explain each step. You can find the my explanation below.

Step 1, didn’t give a style yet

For your information, if there is a div (the red line) on a page, the width of that div will expand until 100%. You can see the illustration at the picture above.

Step 2, we give a float property on the div

After we put float:left, the div will be match with the image (the gray box). Same condition if we put float:right on the div.

Step 3, make it center

At the picture above, there is a red text and gray text. The red text is for div, and the gray text is for the image.

First, we give a padding to div, so there will be a space in the div.
Second, we put position relative to the image, so we can move the image to match the div box. We can put left property and top property. Remember, we can also put minus value to match.

Step 4, yes! we did it!

Aha! the thumbnail ready to put on your blog now.

You can see the result and copy paste the css property into your blog’s stylesheet. Background 1, Background 2, Background 3, Background 4, Background 5.

This tutorial is not finish yet, we will continue later…. :D Feel free to give me a correction.

Switch to EnglishSeperti yang mungkin kita tahu, Flickr adalah salah satu situs layanan penyimpan foto. Jika anda melihat bagian atas situs ini, ada 3 buah photo yang langsung terhubung ke flickr. Nah, yang akan kita bahas di sini adalah bagaimana mempercantik tampilan foto-foto tersebut di blog kita.

Daftarkan diri anda

Flickr yang tadinya adalah situs independen, akhirnya diakuisisi oleh Yahoo pada tahun 2005. Itu berarti, untuk anda yang sudah mempunyai account Yahoo, bisa langsung login dengan user account Yahoo.

Buat Badge

Klik halaman http://flickr.com/badge_new.gne

Pada halaman tersebut, anda dihadapkan pada 2 pilihan. HTML badge atau Flash badge. Nah, untuk terus mengikuti tutorial ini, anda harus memilih HTML Badge untuk bisa kita manipulasi. Jika anda menggunakan Flash Badge, kita tidak akan bisa mengeditnya. Jika sudah, klik tombol next di bagian bawah.

Choose which photos you’d like to display.

Step 2 is, you will choose the photos. Selain menampilkan foto-foto yang ada di account Flickr kita, ternyata bisa juga untuk menampilkan foto lain. Jika tidak ada perubahan, maka klik next di bagian bawah.

Set the layout options.

Ada 5 pertanyaan yang diajukan pada halaman ini. Pilih NO untuk pertanyaan pertama, pilih SQUARE untuk pertanyaan keempat, dan pilih NONE untuk pertanyaan terakhir. Pertanyaan lain, terserah anda. Jika sudah, klik next di bagian bawah.

Choose colors for your badge.

Pada bagian ini, tick bagian NO BACKGROUND dan NO BORDER, kemudian klik next di bagian bawah. Kita memang tidak perlu bagian ini, karena nantinya kita sendiri yang akan menentukan tampilan dan layoutnya.

Get the code

Inilah langkah terakhir. Anda akan mendapatkan kurang lebih kode-kode aneh yang mungkin saja bisa merusak mata anda. Padahal, dari kode-kode yang kita dapat, rata-rata adalah sampah!

<!-- Start of Flickr Badge -->
<style type="text/css">
/*
Images are wrapped in divs classed "flickr_badge_image" with ids
"flickr_badge_imageX" where "X" is an integer specifying ordinal position. Below are some styles to get you started!
*/

#flickr_badge_uber_wrapper {text-align:center; width:150px;}
#flickr_badge_wrapper {padding:10px 0 10px 0;}
.flickr_badge_image {margin:0 10px 10px 10px;}
.flickr_badge_image img {border: 1px solid black !important;}
#flickr_badge_source {text-align:left; margin:0 10px 0 10px;}
#flickr_badge_icon {float:left; margin-right:5px;}
#flickr_www {display:block; padding:0 10px 0 10px !important; font: 11px Arial,
Helvetica, Sans serif !important; color:#3993ff !important;}
#flickr_badge_uber_wrapper a:hover,
#flickr_badge_uber_wrapper a:link,
#flickr_badge_uber_wrapper a:active,
#flickr_badge_uber_wrapper a:visited {text-decoration:none !important; background:inherit
!important;color:#3993ff;}
#flickr_badge_wrapper {}
#flickr_badge_source {padding:0 !important; font: 11px Arial, Helvetica, Sans
serif !important; color:#666666 !important;}
</style>
<div id=”flickr_badge_uber_wrapper”><a href=”http://www.flickr.com”
id=”flickr_www”>www.<strong style=”color:#3993ff”>flick<span
style=”color:#ff1c92″>r</span></strong>.com</a><div
id=”flickr_badge_wrapper”>
<script type=”text/javascript” src=”http://www.flickr.com/badge_code_v2.gne?count=3&display=latest&size=s&layout=x&source=user&user=30227699%40N00″></script>
</div></div>
<!– End of Flickr Badge –>

Dari kode-kode di atas, yang kita butuhkan hanya bagian script javascript saja. Mulai dari kode . Yang lain? hapus saja! kita tidak membutuhkannya.

Designing background

Di bawah ini ada beberapa alternatif background yang sudah aku buat. Untuk membuatnya, kita harus ingat, bahwa ukuran thumbnail foto sebesar 75 piksel berbentuk kotak. Tools yang aku gunakan adalah Macromedia Fireworks. Tidak menutup kemungkinan bisa juga di buat di program sejenis lain.

Kode yang tersusun dari halaman javascript adalah seperti di bawah. Tiap foto berada di dalam sebuah div yang mempunyai class flickr_badge_image.

<div class=”flickr_badge_image” id=”flickr_badge_image1″>
<a href=”http://www.flickr.com/photos/didats/250546038/”>
<img src=”http://static.flickr.com/113/250546038_bb793f0505_s.jpg”
alt=”A photo on Flickr” title=”Flamengo” height=”75″
width=”75″>
</a>
</div>

Terus bagaimana?

Ini bagian yang agak sulit untuk seorang pemula sepertiku. Heheh… *PLAK*

Dari gambar di atas, aku akan mencoba menjelaskan tiap langkahnya.

langkah 1, belum ada style

Sekedar informasi, jika ada sebuah div (yang bergaris merah) di sebuah halaman, lebar div tersebut akan tergantung dari area yang ada. Lihat ilustrasinya pada gambar

langkah 2, kita beri nilai float

Setelah kita beri kata kunci float:left, div akan mencocokkan diri dengan lebar image (kotak abu-abu). Sama seperti float:right. Hanya berbeda posisi saja.

langkah 3, taruh di tengah

Pada illustrasi di atas, ada tulisan berwarna merah dan berwarna abu-abu. Yang berwarna merah untuk div, dan yang berwarna abu-abu untuk image.

Pertama, kita beri div nilai padding. Jadi, akan ada ruang kosong di antar kotak dan image.
Kedua, kita taruh position:relative pada image. Jadi, kita bisa menggerakkan posisi image agar cocok dengan kotak div. Anda juga bisa memberikan nilai negatif jika memang dirasa perlu.

langkah 4, jadi!

Nah, sekarang foto-foto itu siap kita taruh di blog.

Anda bisa melihat langsung untuk tiap background pada file-file yang sudah aku buat. Background 1, Background 2, Background 3, Background 4, Background 5.

Tutorial ini masih belum selesai, karena masih ada beberapa hal yang akan kita bahas.

Duh! capek nulis 2 bahasa gini!