Membuat Halaman Khusus Foto Instagram Di Blog - Hallo sahabat TIPS TUTORIAL ANDROID, Pada Artikel yang anda baca kali ini dengan judul Membuat Halaman Khusus Foto Instagram Di Blog, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Blogger, Artikel Instagram, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Membuat Halaman Khusus Foto Instagram Di Blog
link : Membuat Halaman Khusus Foto Instagram Di Blog

Membuat Halaman Khusus Foto Instagram Di Blog

Setelah saya berhasil menciptakan widget khusus untuk foto instagram dengan memakai instafeed.js yang menampilkan foto dengan memakai pengaruh CSS3, maka kali ini saya akan menjelaskan cara menciptakan halaman khusus untuk foto galeri di blog dari akun instagram anda. Keuntungan dari halaman ini yakni pengunjung blog anda sanggup melihat secara pribadi foto yang gres saja anda upload tanpa loading yang usang dengan kata lain halaman ini akan memuat foto anda lebih cepat dari pada melihatnya pribadi di situs dari instagram. Tampilannya sendiri sangat lembut, minimalis, modern dan tentu saja disini saya juga memakai pengaruh murni CSS3.

Lihat Demo

Langkah-langkah Membuat Halaman Khusus Foto Galeri Instagram DiBlog

1) Buat sebuah halaman kosong dengan mode HTML kemudian publikasikan dan salin URL halaman tersebut

2) Masuk ke Editor HTML Template (lakukan back up) kemudian cari code ]]></b:skin> dan tempatkan code dibawah ini diatasnya

 /* Instagram page blogger design by Riad Supriadin  ---------------------------------------------------------------- */ #hr-insta {   background-color: #EAEAEA;   position: relative;   text-align: center;   top: 0;   right: 0;   bottom: 0;   left: 0;   margin: 0;   padding: 0;   text-decoration: none;   list-style: none;   box-sizing: border-box;   moz-box-sizing: border-box;   vertical-align: middle; }  #hr-insta header {   width: auto;   height: 70px;   background: no-repeat top center  #517FA4;   font-family: 'Lily Script One', cursive;   line-height: 50px;   text-shadow: 9px 8px 0px rgba(0, 0, 0, 0.15); } #hr-insta header {   font-size: 2em;   color: #ffffff; } #container {   text-align: center; }  #group {   margin: 25px 50px; }  #instafeed img {   opacity: .9;   border-radius: 2%;   width: 49%;   box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.15) inset;   border-color: rgba(0, 0, 0, 0.2);   border: 4px solid white;   animation-name: fadeIn;   -webkit-animation-name: fadeIn;   animation-duration: 1.5s;   -webkit-animation-duration: 1.5s;   animation-timing-function: ease-in-out;   -webkit-animation-timing-function: ease-in-out;   visibility: visible !important; }  @keyframes fadeIn {   0% {     transform: scale(0);     opacity: 0.0;   }    60% {     transform: scale(1.1);   }    80% {     transform: scale(0.9);     opacity: 1;   }    100% {     transform: scale(1);     opacity: 1;   }; }  @-webkit-keyframes fadeIn {   0% {     -webkit-transform: scale(0);     opacity: 0.0;   }    60% {     -webkit-transform: scale(1.1);   }    80% {     -webkit-transform: scale(0.9);     opacity: 1;   }    100% {     -webkit-transform: scale(1);     opacity: 1;   }; }  #likes {   text-decoration: none;   color: #E5066E;   font-family: 'arial';   font-size: 2em; }  #instafeed img:hover {   opacity: 1; } 
 

3) Cari tag </head> kemudian salin dan pastekan jQuery dibawah ini sempurna di atasnya.

 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/> <script src='https://googledrive.com/host/0B0JRV7OFIijrMjBWcTRJOE1EWW8'/> <script> //<![CDATA[     var userFeed = new Instafeed({         limit: 10,         get: 'user',         userId: BERUPA-ANGKA,         resolution: 'low_resolution' ,         accessToken: 'BERUPA-ANGKA',       template: '<div id="group"><a href="{{link}}"><img src="{{image}}"/></a><br/><span id="likes"><i class="fa fa-heart"></i> {{likes}} </span></div>'     });     userFeed.run(); //]]> </script> 
 

Baca secara perlahan tutorial dibawah untuk mengetahui cara mendapat user ID dan Access Token dari akun instagram anda.
Cara Membuat Widget Instagram Keren Di Blogger
4) Cari tag <body> kemudian salin dan pastekan tag kondisional ini dibawahnya

 <b:if cond='data:blog.url != &quot;Masukkan-URL-Halaman-dari-langkah-1-kesini&quot;'> 
 

5) Cari tag epilog </body> kemudian tempatkan code dibawah ini sempurna di atasnya.

 <b:else/> <link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/> <link href='http://fonts.googleapis.com/css?family=Lily+Script+One' rel='stylesheet' type='text/css'/> <div id='hr-insta'> <header><h1>My Instagram Photo Gallery</h1></header> <div id='container'> <div id='instafeed'/></div> </div> </b:if> 
 

Sekarang, anda sudah membuat dan menampilkan foto-foto atau gambar di blog pribadi dari akun instagram anda dengan tampilan yang minimalis dan keren yang akan menampilkan seluruh foto anda dan menciptakan pengunjung semakin menyukai blog anda.

Credits and Kudos : Instafeed.js

Demikianlah Artikel Membuat Halaman Khusus Foto Instagram Di Blog

Sekianlah artikel Membuat Halaman Khusus Foto Instagram Di Blog kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Membuat Halaman Khusus Foto Instagram Di Blog dengan alamat link https://tipstutorial-android.blogspot.com/2020/03/membuat-halaman-khusus-foto-instagram.html

Share this post