Instagram merupakan media umum yang sangat menarik di sini Anda sanggup membagikan foto, video dan story Anda sehingga instagram menjadi sosial media yang paling banyak diminati di beberapa tahun belakangan ini.
Banyak fitur-fitur gres dari Instagram yang sangat menarik, sehingga menciptakan penggunanya lebih merasa nyaman dan asik saat memakai sosial media yang satu ini.
Sebagai seorang blogger saya menemukan satu hal yang menarik ialah kini kita sanggup menambahkan widget galeri foto ke blogger.
Dengan begitu kita sanggup menampilkan foto-foto yang ada di instagram ke blog atau website Anda.
Apabila website atau blog kita mempunyai trafik yang cukup banyak tentu hal ini sanggup menambah jumlah followers instagram Anda.
Apalagi kalau foto atau video yang Anda bagikan sangat berkaitan dengan website atau blog milik Anda, ini akan menjadi nilai konkret untuk blog dan akun instagram Anda.
Baca juga: 4 Cara Menghapus Akun Instagram Permanen dan Sementara
Selain untuk menambah jumlah followers, dengan memasang widget instagram ini di blog Anda juga sanggup menambah jumlah like pada foto Anda atau jumlah views pada video yang Anda bagikan di instagram.
Jika Anda tertarik ingin menampilkan foto-foto dan video Anda yang ada di instagram ke blog atau website silahkan ikuti langkah-langkahnya di bawah ini.
Apabila blog Anda sudah memakai Font Awesome sebelumnya maka Anda sanggup pribadi ke tahap selanjutnya.
1. Masuk ke Blogger
2. Lalu klik Tema > Edit HTML
3. Tambahkan arahan css ini, kemudian simpan di atas arahan
Banyak fitur-fitur gres dari Instagram yang sangat menarik, sehingga menciptakan penggunanya lebih merasa nyaman dan asik saat memakai sosial media yang satu ini.
Sebagai seorang blogger saya menemukan satu hal yang menarik ialah kini kita sanggup menambahkan widget galeri foto ke blogger.
Dengan begitu kita sanggup menampilkan foto-foto yang ada di instagram ke blog atau website Anda.
Apabila website atau blog kita mempunyai trafik yang cukup banyak tentu hal ini sanggup menambah jumlah followers instagram Anda.
Apalagi kalau foto atau video yang Anda bagikan sangat berkaitan dengan website atau blog milik Anda, ini akan menjadi nilai konkret untuk blog dan akun instagram Anda.
Baca juga: 4 Cara Menghapus Akun Instagram Permanen dan Sementara
Selain untuk menambah jumlah followers, dengan memasang widget instagram ini di blog Anda juga sanggup menambah jumlah like pada foto Anda atau jumlah views pada video yang Anda bagikan di instagram.
Jika Anda tertarik ingin menampilkan foto-foto dan video Anda yang ada di instagram ke blog atau website silahkan ikuti langkah-langkahnya di bawah ini.
Cara Memasang Widget Instagram di Blog
Sebelum memasang widget instagram di blog, pastikan blog Anda sudah memakai fitur Font Awesome. Jika belum, silahkan tambahkan arahan ini di atas arahan</head><script type='text/javascript'> //<![CDATA[ //CSS Ready function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) } loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"); //]]> </script>Apabila blog Anda sudah memakai Font Awesome sebelumnya maka Anda sanggup pribadi ke tahap selanjutnya.
1. Masuk ke Blogger
2. Lalu klik Tema > Edit HTML
3. Tambahkan arahan css ini, kemudian simpan di atas arahan
</head><style type='text/css'> /* Instagram Widget */ .instagram-widget{height:100%;background:#ccc;overflow:hidden;min-height:250px;transition:all .3s ease} .instagram-widget .widget{margin-bottom:0!important} #insta .title{background:#4776e6;padding:20px;text-align:center;color:#fff;font-size:18px;display:inline-block;position:absolute;border-radius:20pc;top:100px;left:43%;z-index:1} .instagram-logo{display:inline-block;width:50px;height:50px;line-height:50px;border-radius:50%;text-align:center;color:#fff;left:50%;position:absolute;margin-left:-26px;z-index:1;font-size:30px;margin-top:100px;background:#fff;background:linear-gradient(15deg,#ffb13d,#dd277b,#4d5ed4);box-shadow:0 5px 15px rgba(0,0,0,0.15)} body.boxed-layout .instagram-logo{margin-top:72px} ul.il-instagram-lite{padding:0;margin:0} li.il-item{float:left;list-style:none;padding:0;width:16.6666666%;height:250px;overflow:hidden;position:relative;font-size:14px} body.boxed-layout li.il-item{height:200px} body.boxed-layout .instagram-widget{min-height:200px} li.il-item:before{content:"";font-family:Fontawesome;display:block;position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.1)} li.il-item img{height:100%;width:100%;overflow:hidden;object-fit:cover;transition:all .3s ease} .il-photo__meta{position:absolute;bottom:-65px;text-align:center;left:0;right:0;padding:20px;transition:all .3s ease;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.34),rgba(0,0,0,0.55),rgba(0,0,0,0.68))} .il-photo__likes{width:43%;color:#fff;float:left;text-align:right} .il-photo__comments{width:43%;color:#fff;float:right;text-align:left} li.il-item:hover .il-photo__meta{bottom:0;transition:all .3s ease} .il-photo__meta a{color:#fff} .il-photo__likes:before{content:"\f08a";font-family:Fontawesome;margin-right:5px} .il-photo__comments:before{content:"\f0e5";font-family:Fontawesome;margin-right:5px} @media screen and (max-width: 768px) { li.il-item{float:left;list-style:none;padding:0;width:50%;height:150px} .instagram-widget{background:#fff;overflow:hidden;height:100%} .instagram-logo{margin-top:200px}} </style>4. Kemudian tambahkan arahan javascript ini di atas arahan
</body><script type='text/javascript'> //<![CDATA[ // Instagram Widget !function(t){t.fn.instagramLite=function(e){if(!this.length)return this;plugin=this,plugin.defaults={accessToken:null,limit:null,list:!0,videos:!1,urls:!1,captions:!1,date:!1,likes:!1,comments_count:!1,error:function(){},success:function(){}};var i=t.extend({},plugin.defaults,e),s=t(this),a=function(t){for(var e=t.split(" "),i="",s=0;s<e.length;s++){var a;if("@"==e[s][0])a='<a href="http://twitter.com/'+e[s].replace("@","").toLowerCase()+'" target="_blank">'+e[s]+"</a>";else if("#"==e[s][0]){a='<a href="http://twitter.com/hashtag/'+e[s].replace("#","").toLowerCase()+'" target="_blank">'+e[s]+"</a>"}else a=e[s];i+=a+" "}return i};!function(){if(i.accessToken){var e="https://api.instagram.com/v1/users/self/media/recent/?access_token="+i.accessToken+"&count="+i.limit;t.ajax({type:"GET",url:e,dataType:"jsonp",success:function(t){200===t.meta.code&&t.data.length?(function(t){for(var e=0;e<t.length;e++){var o,n,l=t[e];if("image"===l.type||!i.videos){if(o='<img class="il-photo__img" src="'+l.images.standard_resolution.url+'" alt="Instagram merupakan media umum yang sangat menarik di sini Anda sanggup membagikan foto Cara Memasang Widget Galeri Foto Instagram di Blog" data-filter="'+l.filter+'" />',i.urls&&(o='<a href="'+l.link+'" target="_blank">'+o+"</a>"),(i.captions||i.date||i.likes||i.comments_count)&&(o+='<a href="'+l.link+'" target="_blank"><div class="il-photo__meta">'),i.captions&&l.caption&&(o+='<div class="il-photo__caption" data-caption-id="'+l.caption.id+'">'+a(l.caption.text)+"</div></a>"),i.date){var r=new Date(1e3*l.created_time),c=r.getDate(),d=r.getMonth()+1,u=r.getFullYear();r.getHours(),r.getMinutes(),r.getSeconds(),o+='<div class="il-photo__date">'+(r=d+"/"+c+"/"+u)+"</div>"}i.likes&&(o+='<div class="il-photo__likes">'+l.likes.count+"</div>"),i.comments_count&&l.comments&&(o+='<div class="il-photo__comments">'+l.comments.count+"</div>"),(i.captions||i.date||i.likes||i.comments_count)&&(o+="</div>")}"video"===l.type&&i.videos&&l.videos&&(l.videos.standard_resolution?n=l.videos.standard_resolution.url:l.videos.low_resolution?n=l.videos.low_resolution.url:l.videos.low_bandwidth&&(n=l.videos.low_bandwidth.url),o='<video poster="'+l.images.standard_resolution.url+'" controls>',o+='<source src="'+n+'" type="video/mp4;"></source>',o+="</video>"),i.list&&o&&(o='<li class="il-item" data-instagram-id="'+l.id+'">'+o+"</li>"),""!==o&&s.append(o)}}(t.data),i.success.call(this)):i.error.call(this)},error:function(){i.error.call(this)}})}}()}}(jQuery); // Activate Instagram $(function(){$(".il-instagram-lite").instagramLite({accessToken:instaCode,urls:!0,limit:6,captions:!1,likes:!0,comments_count:!0,success:function(){console.log("The request was successful!")},error:function(e,s){console.log("There was an error with the request")}})}); //]]> </script>5. Lalu tambahkan arahan markup ini dan simpan dibagian tag
<body> hingga </body> Anda sanggup menambahkannnya di atas arahan footer atau di bawah arahan footer<div class='instagram-widget'> <b:section class='insta' id='insta' maxwidgets='1' showaddelement='no'> <b:widget id='HTML120' locked='true' title='Instagram Widget' type='HTML' version='1'> <b:widget-settings> <b:widget-setting name='content'>6285364919.1677ed0.45cfb2a51eb94c0bae00b42fe30fffff</b:widget-setting> </b:widget-settings> <b:includable id='main'> <div class='widget-content'> <script type='text/javascript'> var instaCode = '<data:content/>' ; </script> </div> </b:includable> </b:widget> <b:widget id='HTML121' locked='true' title='hide Instagram Widget' type='HTML' version='1'> <b:widget-settings> <b:widget-setting name='content'/> </b:widget-settings> <b:includable id='main'> <b:if cond='data:content == "hide"'> <style> .instagram-widget { display: none; } </style> </b:if> </b:includable> </b:widget> </b:section> <ul class='il-instagram-lite'/> <span class='instagram-logo'> <i aria-hidden='true' class='fa fa-instagram'/> </span> </div>6. Silahkan ganti arahan jalan masuk token di atas dengan memakai arahan milik Anda
7. Jika sudah klik Simpan tema
Cara Menadapatkan Akses Token Akun Instagram
Untuk menadapatkan arahan jalan masuk token akun Instagram, silahkan login ke Facebook dan Instagram pada browser yang Anda gunakan.Setelah itu buka situs berikut ini:
http://instagram.pixelunion.net/
Kemudian klik Generate Access Token
Jika muncul pesan ibarat gambar di bawah ini, silahkan klik Authorize.
Silahkan salin arahan token milik Anda dan gunakan untuk mambahkan widget instagram di blog Anda.
Kesimpulan
Sekarang Anda sanggup menampilkan foto maupun video yang Anda posting di instagram ke dalam blog atau website Anda dengan memakai cara ini.Menambahkan atau memasang widget instagram di blog sanggup menambah jumlah followers dan like pada akun instagram Anda.
Itulah artikel mengenai cara memasang widget galeri foto instagram di blog, selamat mencoba. Semoga bermanfaat.
Sumber https://www.caramanual.com/
Cara Menadapatkan Akses Token Akun Instagram
Untuk menadapatkan arahan jalan masuk token akun Instagram, silahkan login ke Facebook dan Instagram pada browser yang Anda gunakan.Setelah itu buka situs berikut ini:
http://instagram.pixelunion.net/
Kemudian klik Generate Access Token
Jika muncul pesan ibarat gambar di bawah ini, silahkan klik Authorize.
Silahkan salin arahan token milik Anda dan gunakan untuk mambahkan widget instagram di blog Anda.
Kesimpulan
Sekarang Anda sanggup menampilkan foto maupun video yang Anda posting di instagram ke dalam blog atau website Anda dengan memakai cara ini.Menambahkan atau memasang widget instagram di blog sanggup menambah jumlah followers dan like pada akun instagram Anda.
Itulah artikel mengenai cara memasang widget galeri foto instagram di blog, selamat mencoba. Semoga bermanfaat.
Sumber https://www.caramanual.com/
Related Posts
- Cara Menciptakan Web Push Notifications Di BloggerWeb push notifications merupakan pesan atau notifikasi pop-up yang muncul pada layar desktop maupun smartphone Anda dikala membuka halaman website at ...
- Cara Mengubah Tampilan Gres Gmail Baru-baru ini Google telah melaksanakan banyak pembaruan pada beberapa produk yang mereka miliki menyerupai Webmaster Tool dan juga Gmail. Meskip ...
- Cara Live Streaming Youtube Di Pc Dengan Obs StudioYouTube merupakan media yang paling banyak dipakai oleh orang lain untuk mengupload aneka macam jenis video seperti, vlog, game, tutorial, musik, dan ...
- Cara Menghapus Akun Facebook PermanenApakah Anda khawatir dengan privasi online ihwal diri Anda di Facebook? atau hanya bosan dengan pembaruan status dari teman-teman sekolah Anda dulu y ...
- Cara Menciptakan Turn On / Off Lights Video Di BlogSering kita jumpai di beberapa blog atau website yang membahas perihal video menyerupai anime, film barat, drama korea, video streaming dan sejenisny ...
- Cara Memasang Lib Dan Host Ke System Pubg Anti Banned Root Only All Device Tutorial pasang file lib mod - Hallo sahabat berjumpa lagi dengan aku admin infoandrocodax yang akan membagikan tutorial, tips, trik dan juga ...
