Bagi anda yang memiliki blog yang banyak memperlihatkan foto dari instagram utamanya untuk para photographer yang aktiv di blog kali ini sanggup menjajal untuk menyertakan widget instagram feed. Bukan feed biasa, tetapi feed ini terlihat lebih menarik, unik dan keren. Saya sudah menjadikannya dengan memakai proyek sumber terbuka dari plug in Instafeed.js yang sudah dibikin oleh Steven Schobert lalu melaksanakan kostumisasi agar sanggup dapat dipraktekkan di widget blogger atau memasangnya di halaman blog yang mau memperlihatkan foto dari galeri akun instagram anda.
Cara kerjanya sendiri cukup sederhana, bersih dan cepat. Saya menyertakan click event Sebelum dan Sesudah yang sanggup diartikan hadirin blog anda sanggup menyaksikan koleksi-koleksi foto yang ada di akun instagram anda dengan menekannya yang diiringi dengan memakai keyframe rule animasi CSS3 sehingga akan terlihat unik dan tidak bikin orang yang melihatnya merasa bosan.
Fitur lain yang sanggup anda kerjakan merupakan anda sanggup mengendalikan seberapa banyak foto yang ingin ditampilkan di widget ini, dengan cuma mengganti 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 memperlihatkan keterangan Like atau seberapa banyak jumlah orang yang menggemari foto dari koleksi galeri instagram anda yang juga saya tambahkan dengan animasi murni CSS3.
Persiapan :
1) Agar widget ini sanggup memperlihatkan foto dari galeri akun instagram anda makan anda perlu mengenali User ID (bukan username) dan Access Token dari akun instagram anda. Caranya merupakan pergi ke link dibawah kemudian masukkan username dan password anda maka risikonya akan keluar dari lightbox berwarna hijau menyerupai pada gambar dibawah ini. Get User ID and Access Token
2) Salin aba-aba dibawah ini kemudian pastekan ke kesibukan notepad.
Ganti accessToken: '432207021.467ede5', dengan milik anda.
Ganti limit: 10, dengan jumlah foto yang ingin ditampilkan
3) Disini anda memerlukan jQuery model tebaru merupakan 1.10.2 untuk mengundang 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
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 aba-aba yang ada di kesibukan notepad kemudian Masukkan kedalam widget tersebut
4) Klik Simpan
Sekarang coba lihat salah satu halaman blog anda maka foto ganteng dan bagus dari galeri instagram anda sudah terpampang disana. Kudos & Happy Coding!
Sumber https://henponterbaru.blogspot.com
Cara kerjanya sendiri cukup sederhana, bersih dan cepat. Saya menyertakan click event Sebelum dan Sesudah yang sanggup diartikan hadirin blog anda sanggup menyaksikan koleksi-koleksi foto yang ada di akun instagram anda dengan menekannya yang diiringi dengan memakai keyframe rule animasi CSS3 sehingga akan terlihat unik dan tidak bikin orang yang melihatnya merasa bosan.
Fitur lain yang sanggup anda kerjakan merupakan anda sanggup mengendalikan seberapa banyak foto yang ingin ditampilkan di widget ini, dengan cuma mengganti 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 memperlihatkan keterangan Like atau seberapa banyak jumlah orang yang menggemari foto dari koleksi galeri instagram anda yang juga saya tambahkan dengan animasi murni CSS3.
DEMO
Catatan bahwa pengaruh animasi pada widget ini berlangsung mulus di semua browser terbaru tergolong di perangkat Android dan iOS dan jikalau anda tidak menyaksikan efeknya itu alasannya yakni anda masih memakai browser model jadul
< Sebelumnya
Selanjutnya >
Persiapan :
1) Agar widget ini sanggup memperlihatkan foto dari galeri akun instagram anda makan anda perlu mengenali User ID (bukan username) dan Access Token dari akun instagram anda. Caranya merupakan pergi ke link dibawah kemudian masukkan username dan password anda maka risikonya akan keluar dari lightbox berwarna hijau menyerupai pada gambar dibawah ini. Get User ID and Access Token
2) Salin aba-aba dibawah ini kemudian pastekan ke kesibukan 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">< Sebelumnya</div> <div class="kenca">Selanjutnya ></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 ♥ {{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 memerlukan jQuery model tebaru merupakan 1.10.2 untuk mengundang 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 memiliki model dibawah 1.10.2 hapuslah model 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 aba-aba yang ada di kesibukan notepad kemudian Masukkan kedalam widget tersebut
4) Klik Simpan
Sekarang coba lihat salah satu halaman blog anda maka foto ganteng dan bagus dari galeri instagram anda sudah terpampang disana. Kudos & Happy Coding!
