Rabu, 14 Mei 2014

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 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&amp;display=latest&amp;size=s&amp;layout=x&amp;source=user&amp;user=123835061@N06">
    </script>
    </div>
    123835061@N06 ganti dengan kode user Anda di Flickr
  • Simpan
  • Lihat hasilnya di blog Anda

Baca juga Cara memasang widget di blog

DEMO


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

CSS: Membuat & Memasang Widget Flickr di Blog Rating: 4.5 Diposkan Oleh: ana sriwahyuni

15 komentar:

  1. bisa dicoba kodenya nih

    BalasHapus
  2. kira kira kalau saya pasang flickr valid html5 ngga dan pengaruh ngga sama loding blognya ya?

    BalasHapus
    Balasan
    1. kalau untuk valid html5 atau css3 atau pun responsive, saya kira itu hanyalah kondisional saja mas
      kalau untuk loading blog, saya kira tidak ada pengaruhnya mas, contoh langsung bisa dilihat pada demo artikel blog ini :)

      Hapus
  3. apa gak brpengaruh sama loadingnya mbak? ..

    BalasHapus
  4. klo CSS mending di kompres dulu gan biat gk lemot
    Cerita Dewasa

    BalasHapus
  5. Makasih mbak informasi nya,saya coba dulu mbak.

    BalasHapus
    Balasan
    1. sliahkan mas di coba dulu, dan terimakasih kembali ya :)

      Hapus
  6. keren mbak, izin nyobain :D
    boleh ? :D

    BalasHapus
    Balasan
    1. boleh banget mas Edo, silahkan :)

      Hapus
  7. takut bikin loadingnya jadi berat mba, maklum koneksi sy kembang kempis :)

    BalasHapus

Demi kenyamanan bersama, tidak boleh memasang link dalam bentuk apapun, komentar yang berisi link tidak akan diterbitkan
Terimakasih

Direktori

direktori weblogger
Direktori WeBlog Indonesia