CSS: Membuat & Memasang Widget Flickr di Blog

Membuat & Memasang Widget Flickr di Blog adalah tutorial lama yang kadang digunakan untuk menampilkan beberapa gambar dalam satu tempat dan biasanya ditempatkan pada sidebar. Dari beberapa cara membuat & memasang widget flickr yang saya temukan, rata-rata mereka menggunakan tool generator untuk menampilkan widget flickr tersebut kedalam blog. Padahal selain menggunakan tool generator, kita cukup menggunakan kode CSS untuk membuat widget flickr dan memasangnya kedalam blog seperti yang akan saya bagikan pada artikel ini

Apa Tujuan Memasang Widget Flickr di Blog?
Flickr merupakan sebuah situs yang digunakan untuk menyimpan gambar atau foto dan berbagi gambar atau foto tersebut sesuai keinginan pengguna. Jadi, jika Anda memiliki beberapa koleksi foto atau gambar yang sangat unik atau gambar-gambar yang Anda sendiri atau yang biasa disebut gambar selfie dan ingin agar gambar-gambar tersebut dipajang didalam blog Anda, maka salah satu cara adalah dengan menempatkan gambar tersebut pada tempat khusus yaitu dibagian sidebar atau dibagian yang lain yang mudah dilihat oleh orang lain dan sebelum menampilkan gambar-gambar tersebut, hal pertama yang harus dilakukan adalah menyimpan gambar-gambar tersebut kedalam Flickr. Ingat, sebelum membuat & memasang widget flickr di blog, Anda harus menyimpan gambar kedalam Flickr

Selanjutnya untuk membuat dan memasang widget Flickr di blog, silahkan ikuti tahapan berikut ini:

Login ke akun Blogger Anda
Pilih blog yang ingin dipasang widget flickr
Klik menu Template >> Edit HTML

Cari kode ]]></b:skin> dan salin kode css berikut sebelum ]]></b:skin>

.flickr {
width:250px /* sesuaikan lebar kolom */
}

.flickr_badge_image {
float:left;
height:60px;
margin:5px;
width:65px
}

.flickr_badge_image a {
display:block
}

.flickr_badge_image a img {
display: block;
width: 100%;
height: auto;
}

Simpan template
Klik menu Tata letak >> Tambahkan Gadget >> HTML/JavaScript dan salin kode berikut kedalam kolom
<div class="flickr">
<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=9&display=latest&size=s&layout=x&source=user&user=123835061@N06">
</script>
</div>
123835061@N06 ganti dengan kode user Anda di Flickr
Simpan
Lihat hasilnya di blog Anda