Kumpulan Trick Blog TErbaru

About

New Trick hayalah blog kecil yang mencoba untuk memberikan dan menyajikan trick dan tips tentang blog
Sabtu, 14 Mei 2016

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

Membuat & Memasang Widget Flickr di Blog

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 sobat memiliki beberapa koleksi foto atau gambar yang sangat unik atau gambar-gambar yang sobat sendiri atau yang biasa disebut gambar selfie dan ingin agar gambar-gambar tersebut dipajang didalam blog sobat, 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, sobat harus menyimpan gambar kedalam Flickr

Selanjutnya untuk membuat dan memasang widget Flickr di blog, silahkan ikuti tahapan berikut ini:
  • Login ke akun Blogger sobat
  • 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&amp;display=latest&amp;size=s&amp;layout=x&amp;source=user&amp;user=123835061@N06">
    </script>
    </div>
    123835061@N06 ganti dengan kode user sobat di Flickr
  • Simpan
  • Lihat hasilnya di blog sobat

Baca juga Cara memasang widget di blog

DEMO


Bagaimana tertarik untuk Membuat & Memasang Widget Flickr di Blog ini?




Klik untuk melihat kode: :) =( :s :D :-D ^:D ^o^ 7:( :Q :p T_T @@, :-a :W *fck* x@

TOP