Bikin Widget Flickr From Yahoo! Keren Di Blogger/Blogspot

Hello Rekan² ^_^
Aye Mo Bikin Tulisan Banyak Lagi Nich ^_^
Pada Mo Baca Gak...??? Mauuuuu.....
Ok. Thanks Kalo Pada Mo Baca ^_^ "Narsize Mode On"

YupzZz...
Selamat Pagi Menjelang Shubuh Rekan²Qoe Yang Terhormat ^_^
S'moga Masih Tetep Semangat Walau Mata Udah 5 Watt ^_^

Kalo Lagi Itu Rekan² Udah Pada Bikin Forum Pake Blogger/Blogspot,
Trus Bikin Web + Blog + Forum + FB + Twitter Update Games Baru Setiap Hari Secara Otomatis,
Trus Bikin Dan Maenin Quiz Parampaa Di Blogger/Blogspot,
Trus Mengubah Background Halaman Web/Blog Menggunakan jQuery,
Trus Nyoba 5 Tampilan Baru Yang Keren Dari Blogger,
Trus Udah Memahami Dan Mendamaikan Peperangan Script jQuery,
Trus... Trus... Trus... ^_^ "Kaya Tukang Parkir Aja"

Nah... Sekarang Bikin Widget Flickr From Yahoo! Keren Di Blogger/Blogspot Yuk!!! Yuuukkk... ^_^

Widget Ini Sebenernya Dulu Pernah Aye Pake Di Blog Aye,
Coz Waktu Itu Aye Lagi Demen²nya Sama Dunia Photography,
Biar Dibilang Photographer Professional,
So... Aye Update Dech Semua Hasil Jepretan Aye Ke Flickr ^_^
Tapi Karena Memang Kagak Ada Bakat Jadi Photograper,
Coz Semua Hasil Jepretan-Nya Biasa² Aja =(
Secara Gak Langsung, Mulai Dech Aye Jarang Ngupdate Flickr Lagi =(
So... Dengan Berat Hati Akhirnya Nich Widget Aye Bumi Hanguskan Dari Blog Aye =(

Tapi Lagi, Setelah Dipikir-pikir...
Sayang Banget Ya Kalo Nich Widget Diilangin Gitu Aja,
Sapa Tau Aja Ada Yang Mo Make Nich Widget,
Buat Yang Memang Bener² Mo Naro Hasil Karyanya Di Flickr "Amiin" ^_^

Ok. Cukup PanCe-Nya,
Buat Rekan² Yang Mo Coba Bikin,
"Never Try, Never Know"
± Ini Menu Masaknya... ^_^

Pertamax,
Silahkan Lihat Demo-Nya Dulu, Biar Jangan Ada Dusta Diantara Qta ^_^
(Click Image)


Keduax,
Yakin Mo Melanjutkan...??? ^_^
Silahkan Login Ke Blogger/Blogspot Rekan²,
Trus Pilih Tab Design/Rancangan » Edit HTML

Ketiax,
Cari

Code:

]]>

Kesempax,
Masukan Code Di bawah Ini, Di Atas Code Pada Langkah Ketiax Tadi,

Code:

/* AssaDesign Flickr from Yahoo! Widget */
.flickr a img{margin-right:1px;width:55px;height:55px;border:4px solid transparent;margin:-4px -3px -4px -4px;-webkit-transition:-webkit-transform .1s ease-in;}.flickr a:hover img{border:4px solid #fff;-webkit-box-shadow:0px 1px 3px #83B8D3;-moz-box-shadow:0px 1px 3px #83B8D3;position:relative;-webkit-transform:rotate(10deg) scale(1.15);-moz-transform:rotate(10deg) scale(1.15);}.flickr{padding:4px 0 30px 0;}

Kelimax,
Save Template/Simpan Template

Ok. CSS Buat Widgetnya Udah Siap,
Sekarang Tinggal Pemasangan Script-Nya.

Lanjutgan...
BTW, Kok Jadi Kaskuser Gini Ya!!! >.<
Ok. Dech Balik Ke Normal Aja ^_^

Keenam,
Pilih Tab Design/Rancangan Lagi,
Trus Add a Gadget/Tambah Gadget,
Trus Pilih HTML/JavaScript,

Ketu7uh,
Masukan Code Di Bawah Ini, Di Dalem Kotak Content/Konten

Code:

!!!CAUTION 1!!!
Jangan DiSave Dulu,
Ganti Code User Flickr-Nya...

Code:

37703000@N05

Pake Code User Flickr Rekan²,
Kalo Bingung Gimana Nyari Code-Nya, Pegangan ^_^ PizZz...
Pake Situs Ini Buat Nyari Code User Flickr-Nya,
Caranya...
Ganti tulisan "username" Dengan Nama Username Flickr Rekan²
Contoh:

Code:

http://www.flickr.com/photos/username/

Diganti Dengan

Code:

http://www.flickr.com/photos/assadotcom/

Trus Click Find, Nanti Dapet Hasilnya

Code:

id: 37703000@N05

Ok. Kalo Code User Flickr-Nya Udah Dapet,
Sekarang Ganti Code User Flickr Yang Ada Di Dalem Kotak Content/Konten Tadi.

!!!CAUTION 2!!!
Untuk Ngatur Jumlah Tampilannya,
Ganti Angka "9" Sesuai Selera Rekan².

Code:

count=9

!!!CAUTION 3!!!
Untuk Mengubah Tampilannya (Vertikal Dan Horizontal)
Ganti Huruf "h" Dengan Huruf "x".

Code:

layout=h

!!!CAUTION 4!!!
Untuk Mengubah Ukuran Widget + Gambarnya,
Silahkan Mainkan CSS-Nya...

Code:

/* AssaDesign Flickr from Yahoo! Widget */
.flickr a img{margin-right:1px;width:55px;height:55px;border:4px solid transparent;margin:-4px -3px -4px -4px;-webkit-transition:-webkit-transform .1s ease-in;}.flickr a:hover img{border:4px solid #fff;-webkit-box-shadow:0px 1px 3px #83B8D3;-moz-box-shadow:0px 1px 3px #83B8D3;position:relative;-webkit-transform:rotate(10deg) scale(1.15);-moz-transform:rotate(10deg) scale(1.15);}.flickr{padding:4px 0 30px 0;}

Kelapan,
Save Widget-Nya 'N Lihat Hasil-Nya ^_^

Catetan:
Saat Tulisan Banyak Ini Dibikin,
Widget Ini Compatible Sama Browser Firefox 5.0, Google Chrome 13.0.767.1 Beta 'N Safari 5.0.5,
Untuk Opera 11.11 'N Internet Explorer 8/9 Widget Ini Gak Compatible. "CMIIW"

S'moga Berkenan 'N S'moga Bermanfaat.

Regard,
assadotcom