Membuat Dan Memasang Widget Instagram Keren Di Blog

Bagi anda yang mempunyai blog yang banyak menampilkan foto dari instagram terutama untuk para photographer yang aktiv di blog kali ini mampu mencoba untuk menambahkan widget instagram feed. Bukan feed biasa, tetapi feed ini terlihat lebih menarik, unik dan keren. Saya telah membuatnya dengan menggunakan proyek sumber terbuka dari plug in Instafeed.js yang telah dibuat oleh Steven Schobert  lalu melakukan kostumisasi agar mampu dapat diterapkan di widget blogger atau memasangnya di halaman blog yang akan menampilkan foto dari galeri akun instagram anda.

Cara kerjanya sendiri cukup sederhana, bersih dan cepat. Saya menambahkan click event Sebelum dan Sesudah yang mampu diartikan pengunjung blog anda mampu melihat koleksi-koleksi foto yang ada di akun instagram anda dengan menekannya yang diiringi dengan menggunakan keyframe rule animasi CSS3 sehingga akan terlihat unik dan tidak membuat orang yang melihatnya merasa bosan.

Fitur lain yang mampu anda lakukan ialah anda mampu mengatur seberapa banyak foto yang ingin ditampilkan di widget ini, dengan hanya merubah angka 10 atau 100 dan ingin dimulai dari mana foto tersebut apakah dari angka 0 (foto yang gres diupload) atau dari angka 3 (foto ketiga sehabis angka 0). Selain itu widget ini akan menampilkan keterangan Like atau seberapa banyak jumlah orang yang menyukai foto dari koleksi galeri instagram anda yang juga saya tambahkan dengan animasi murni CSS3.

  DEMO

Catatan bahwa pengaruh animasi pada widget ini berjalan mulus di semua browser modern termasuk di perangkat Android dan iOS dan jikalau anda tidak melihat efeknya itu alasannya yaitu anda masih menggunakan browser versi jadul

< Sebelumnya

Selanjutnya >

---

Persiapan :

---

1) Agar widget ini mampu menampilkan foto dari galeri akun instagram anda makan anda perlu mengetahui User ID (bukan username) dan Access Token dari akun instagram anda. Caranya ialah pergi ke link dibawah kemudian masukkan username dan password anda maka balasannya akan keluar dari lightbox berwarna hijau menyerupai pada gambar dibawah ini. Get User ID and Access Token

2) Salin instruksi dibawah ini kemudian pastekan ke acara notepad.

Klik ganda untuk menyalin

 <style type="text/css"> #instafeed{padding:1px;width:255px;height:265px;border:1px solid #0b3e78;border-width:1px 1px 0;-webkit-box-shadow:0 -1px 0 #0b3e78 inset,0 1px 0 rgba(255,255,255,0.2) inset;-moz-box-shadow:0 -1px 0 #0b3e78 inset,0 1px 0 rgba(255,255,255,0.2) inset;box-shadow:0 -1px 0 #0b3e78 inset,0 1px 0 rgba(255,255,255,0.2) inset;-webkit-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0;background-color:#006386;border:solid 1px #122f45;-moz-border-radius-topleft:5px;-moz-border-radius-topright:5px;-moz-border-radius-bottomleft:5px;-moz-border-radius-bottomright:0;-webkit-border-top-left-radius:5px;-webkit-border-top-right-radius:5px;-webkit-border-bottom-left-radius:5px;-webkit-border-bottom-right-radius:0;border-top-left-radius:5px;border-top-right-radius:5px;border-bottom-left-radius:3px;border-bottom-right-radius:3px}#instafeed img{border:1px solid #000b45;padding:1px;width:220px;height:220px;-webkit-border-radius:1px;border-radius:3px;box-shadow:0 0 0 2px rgba(44,244,234,0.3)}.ulinkeun{border:1px solid #0b3e78;border-width:1px 1px 0;-webkit-box-shadow:0 -1px 0 #0b3e78 inset,0 1px 0 rgba(255,255,255,0.2) inset;-moz-box-shadow:0 -1px 0 #0b3e78 inset,0 1px 0 rgba(255,255,255,0.2) inset;box-shadow:0 -1px 0 #0b3e78 inset,0 1px 0 rgba(255,255,255,0.2) inset;-webkit-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0;background-color:#006386;text-align:left;width:258px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;border:solid 1px #0b3e78;-moz-border-radius-topleft:5px;-moz-border-radius-topright:5px;-moz-border-radius-bottomleft:5px;-moz-border-radius-bottomright:5px;-webkit-border-top-left-radius:5px;-webkit-border-top-right-radius:5px;-webkit-border-bottom-left-radius:5px;-webkit-border-bottom-right-radius:5px;border-top-left-radius:5px;border-top-right-radius:5px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.katuhu,.kenca{font-family:sans-serif;font-weight:bolder;color:#ededed;display:inline-block;margin:2px 16px;font-size:1em}.katuhu:hover,.kenca:hover{cursor:pointer;color:#d2d4d3}.katuhu:active,.kenca:active{position:relative;top:1px}.aing{float:right;display:block;color:#d4dbe3;font-weight:bolder;position:relative;padding-right:70px;padding-bottom:5px;padding-top:5px;font-size:1.4em}#instafeed img{animation-name:fadeIn;-webkit-animation-name:fadeIn;animation-duration:2s;-webkit-animation-duration:2s;animation-timing-function:ease-in-out;-webkit-animation-timing-function:ease-in-out;visibility:visible!important}@keyframes fadeIn{0%{transform:scale(0);opacity:.0}40%{transform:scale(1.1)}60%{transform:scale(0.9);opacity:1}80%{transform:scale(1);opacity:1}}@-webkit-keyframes fadeIn{0%{-webkit-transform:scale(0);opacity:.0}40%{-webkit-transform:scale(1.1)}60%{-webkit-transform:scale(0.9);opacity:1}80%{-webkit-transform:scale(1);opacity:1}}#instafeed a{background:#fff;padding:5px 5px 1px 5px;margin:10px;border:1px solid #0084b3;display:inline-block;border-radius:4px;position:relative}#instafeed .likes{border-radius:50%;background:rgba(222,89,135,0.8);font-family:'Arial',sans-serif;font-size:2em;position:absolute;color:#fff;right:5px;top:5px;left:5px;opacity:0;text-align:center;line-height:224px;text-shadow:0 1px rgba(0,0,0,0.5);-webkit-font-smoothing:antialiased;-webkit-transition:opacity 100ms ease;-moz-transition:opacity 100ms ease;-o-transition:opacity 100ms ease;-ms-transition:opacity 100ms ease;transition:opacity 100ms ease}#instafeed a:hover .likes{opacity:1;animation-name:pullDown;-webkit-animation-name:pullDown;animation-duration:1.1s;-webkit-animation-duration:1.1s;animation-timing-function:ease-out;-webkit-animation-timing-function:ease-out;transform-origin:50% 0;-ms-transform-origin:50% 0;-webkit-transform-origin:50% 0}@keyframes pullDown{0%{transform:scaleY(0.1)}40%{transform:scaleY(1.02)}60%{transform:scaleY(0.98)}80%{transform:scaleY(1.01)}100%{transform:scaleY(0.98)}80%{transform:scaleY(1.01)}100%{transform:scaleY(1)}}@-webkit-keyframes pullDown{0%{-webkit-transform:scaleY(0.1)}40%{-webkit-transform:scaleY(1.02)}60%{-webkit-transform:scaleY(0.98)}80%{-webkit-transform:scaleY(1.01)}100%{-webkit-transform:scaleY(0.98)}80%{-webkit-transform:scaleY(1.01)}100%{-webkit-transform:scaleY(1)}} </style> <div id="instafeed"></div> <div class="ulinkeun">   <div class="katuhu">&lt; Sebelumnya</div>   <div class="kenca">Selanjutnya &gt;</div> </div> <script type="text/javascript"> feed=new Instafeed({get:"user", userId:43220, accessToken:"432207021.467ede5", limit:10, template:'<a href="{{link}}" target="_blank"><img src="{{image}}" /><div class="likes">Suka &hearts; {{likes}}</div></a>',mock:true,custom:{images:[],currentImage:0,showImage:function(){var a,b;b=this.options.custom.images[this.options.custom.currentImage];a=this._makeTemplate(this.options.template,{model:b,id:b.id,link:b.link,image:b.images[this.options.resolution].url,caption:this._getObjectProperty(b,"caption.text"),likes:b.likes.count,comments:b.comments.count,location:this._getObjectProperty(b,"location.name")});$("#instafeed").html(a)}},success:function(a){this.options.custom.images=a.data;this.options.custom.showImage.call(this)}});feed.run();$(".kenca").click(function(){var a,b;b=feed.options.custom.currentImage;a=feed.options.custom.images.length;if(b<a-1){feed.options.custom.currentImage++;feed.options.custom.showImage.call(feed)}});$(".katuhu").click(function(){var a,b;b=feed.options.custom.currentImage;a=feed.options.custom.images.length;if(b>0){feed.options.custom.currentImage--;feed.options.custom.showImage.call(feed)}}); </script> 

Ganti userId: 43220, diatas dengan milik anda.
Ganti accessToken: '432207021.467ede5', dengan milik anda.
Ganti  limit: 10, dengan jumlah foto yang ingin ditampilkan

3) Disini anda membutuhkan jQuery versi tebaru ialah 1.10.2 untuk memanggil foto dan memasukkan Plug in Instafeedjs. caranya:
(a) Masuk ke akun blogger anda kemudian klik Template
(b) Klik Back up kemudian klik Edit HTML
(c) Tempatkan jQuery dibawah ini tepat dibawah tag penutup ]]></b:skin> (jika anda mempunyai versi dibawah 1.10.2 hapuslah versi tersebut agar tidak terjadi konflik)

Klik ganda untuk menyalin

 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' ></script> <script src='https://googledrive.com/host/0B0JRV7OFIijrMjBWcTRJOE1EWW8' ></script> 

5) Klik Simpan Template

---

Langkah-langkah penerapan :

---

1) Log in ke Dashboard blogger anda kemudian klik Tata Letak

2) Klik Tambah Gadget lalu pilih HTML/JavaScript

3) Salin instruksi yang ada di acara notepad kemudian Masukkan kedalam widget tersebut

4) Klik Simpan

Sekarang coba lihat salah satu halaman blog anda maka foto tampan dan manis dari galeri instagram anda sudah terpampang disana. Kudos & Happy Coding!

Sumber https://8tutorialandroid.blogspot.com/

Share this post