Dalam tutorial blogspot kali ini saya akan mengulas bagaimana menampilkan flickr random photo ke blog khususnya dengan Blogger /Blogspot . Untuk beberapa orang pasti sudah mengetahui bagaimana cara menampilkan flickr random photo pada blog dan sekarang saya ingin menampilkan hal yang lain yaitu menampilkan random photo dengan jumlah tertentu dengan border pada tiap-tiap image/gambar. Mode ini cocok untuk template dengan background keren dan menginginkan flickr photo randomnya memiliki background transparan. Oke, langkah-langkahnya kita mulai :- Hal yang paling tidak boleh ditinggalkan, yaitu sign in ke flickr Anda. Apabila Anda tidak memiliki atau belum memiliki account pada flickr maka anda cukup sign in menggunakan yahoo!ID anda karena flickr dan yahoo berada pada satu payung perusahaan.
- Setelah Anda sign in maka Anda akan disuguhi homepage dari flickr tersebut. Nah, disini perhatikan pada tag atau headline yang bertuliskan Upload Photo. Jika Anda newbie alias 'anyaran' maka upload dulu foto yang akan ditampilkan namun jika Anda sudah punya maka perhatikan baik-baik pada paragraf dibawah Tag Upload tersebut. Anda akan menemukan sebuah link dengan tulisan Tools, klik link tersebut.
- Pada page ini perhatikan pada sidebarnya dan temukan tagline display filckr photos on your blog. setelah Andatemukan, lihat pada paragraf dibawahnya dan klik pada build a badge.
- Kemudian ketegangan dimulai, disinilah kita akan memulai pengesetan atau settingan untuk Flickr Random Photo. Dipage ini akan diberikan pilihan apakah output flickr random photo kita akan berbentuk HTML atau Flash. Nah, disini saya sarankan untuk memilih pada opsi HTML saja karena agar support dengan pengeditan yang akan kita lakukan. klik next ...
- Selanjutnya opsi berikutnya adalah menentukan foto yang akan ditampilkan, yaitu foto kita semua, foto menurut tags/label foto ataukah foto dari semua orang yang ada pada database flickr. Nah, akan lebih asyik jika foto kita semua saja, bukan di sortir menurut tags atau bahkan foto orang lain. Oleh karena itu pilih opsi Your Photo All. Klik Next ...
- Nah, pada halaman ini settingan ditujukan ke Icon dan Nama terkenal kita, saya sarankan pilih opsi No karena jika kita melakukan pengeditan maka hal ini pasti juga tidak akan terpakai.
- Oke, Perjalanan masih panjang. Kemudian berapa foto yang akan kita tampilkan. how many photo would you like to show? untuk opsi ini pilih saja sesuka hati. Bagaimana jika kita akan menampilkan 6 foto sekaligus, sedangkan disitu tidak ada opsi 6. Untuk hal ini akan dibahas di bawah yang membahas tentang penginputan ke blog.
- Berikutnya Opsi penayangan yaitu recent ato random. Untuk recent maka yang akan ditampilkan hanya foto terbaru dan terakhir diupload saja sedangkan untuk random adalah semua foto kita ditampilkan dan akan berbeda-beda ketika kita me-refresh browser kita. itu opsi terserah anda ingin memilih yang mana, namun disini saya memakai setting random.
- Kemudian, which size? disini saya memakai ukuran s atau square. Kenapa? karena ukuran tersebut lebih fleksibel jika kita ingin memasukkan kode flickr nanti pada sidebar.
- Lalu, Which orientation? yaitu kita menginginkan bentuk yang bagaimana? mau horisontal atau vertikal, nah sedangkan pada kali ini saya memilih memakai none karena kita akan mengedit bentuknya mengikuti alur yaitu zigzag, dari kiri ke kanan dan bawahnya dari kiri ke kanan lagi dan seterusnya...seperti alur ketika kita membaca...
- Setelah itu, pewarnaan...skip, lewati aja..karena kita hanya akan bermain dengan css pada saat pengeditan kodenya saja jadi biarkan seperti itu. next to get the code ...
- Nah, setelah itu kita akan disuguhkan sebuah kode yang panjang dan melelahkan. Kira-kira terlihat seperti ini :
<style type="text/css"->
#flickr_badge_source_txt {
padding:0; font: 11px Arial, Helvetica, Sans serif; color:#666666;}
...
#flickr_badge_source {
padding:0 !important; font: 11px Arial, Helvetica, Sans serif !important;
color:#666666 !important;}
</style>
<table id="flickr_badge_uber_wrapper" cellpadding="0" cellspacing="10" border="0">
<tr><td>
...
<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?
&count=3&display=random&size=s&layout=x&
source=user&user=XXXXXXXXX">
</script>
...
</table>
</td></tr></table>
<!-- End of Flickr Badge -->
nah, kode ini begitu kaku jika dieksekusi pada blog maka kita perlu mengoperasinya sedikit dan mengambil yang dibutuhkan saja...
Oke, Kode yang akan kita ambil dari kode yang bhuanyak itu hanyalah kode javascriptnya saja. Kode nya terlihat seperti ini :
<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne? &count=3&display=random&size=s&layout=x& source=user&user=XXXXXXXXX"> </script>
- count=3 adalah jumlah foto yang akan ditampilkan.
- display=random adalah penayangan foto secara random.
- size=s adalah ukuran foto, s berarti small.
- layout=x adalah tampilan editable.
- source=user adalah pengambilan foto dari user.
- user=XXXXXXXXXXXX adalah user ID berupa angka dan karakter huruf.
#flickr img{
margin: 3px;
padding: 5px;
border: 1px solid #CCCCCC;
text-align: center;
float: left;!important
}
#flickr{
margin-bottom: 20px;
padding-bottom: 20px;
height: 270px; (optional!)
}
maka akan terlihat seperti ini:
...
#flickr img{
margin: 3px;
padding: 5px;
border: 1px solid #CCCCCC;
text-align: center;
float: left;!important
}
#flickr{
margin-bottom: 20px;
padding-bottom: 20px;
height: 270px; (optional! atur sendiri)
}
]]</b:skin>
jika sudah terkopikan maka save template dan preview blog .
selamat mencoba!
Anda baru saja membaca artikel yang berkategori Tutorial Blogspot
dengan judul Menampilkan Random Photo di Blogspot. Anda bisa bookmark halaman ini dengan URL http://lint4ng4yu.blogspot.com/2008/08/menampilkan-random-photo-di-blogspot.html. Terima kasih!
Ditulis oleh:
Lintang Ayu -
Belum ada komentar untuk "Menampilkan Random Photo di Blogspot"
Posting Komentar