search-button
» » » Membuat Halaman Khusus Foto Instagram Di Blog

Mar 30, 2014

Membuat Halaman Khusus Foto Instagram Di Blog

    ,
Advertisements
Advertisements
Setelah saya berhasil membuat widget khusus untuk foto instagram dengan menggunakan instafeed.js yang menampilkan foto dengan menggunakan efek CSS3, maka kali ini saya akan menjelaskan cara membuat halaman khusus untuk foto galeri di blog dari akun instagram anda. Keuntungan dari halaman ini yaitu pengunjung blog anda dapat melihat secara langsung foto yang baru saja anda upload tanpa loading yang lama dengan kata lain halaman ini akan memuat foto anda lebih cepat dari pada melihatnya langsung di situs dari instagram. Tampilannya sendiri sangat lembut, minimalis, modern dan tentu saja disini saya juga menggunakan efek murni CSS3.
Cara Membuat Halaman Khusus Foto Instagram DI Blogg

Lihat Demo

Langkah-langkah Membuat Halaman Khusus Foto Galeri Instagram DiBlog

1) Buat sebuah halaman kosong dengan mode HTML lalu publikasikan dan salin URL halaman tersebut
How to make instagram page on blogger
2) Masuk ke Editor HTML Template (lakukan back up) lalu cari code ]]></b:skin> dan tempatkan code dibawah ini diatasnya
/* Instagram page blogger design by Riad Supriadin HeyRiad.com
---------------------------------------------------------------- */
#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> lalu salin dan pastekan jQuery dibawah ini tepat 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 mendapatkan user ID dan Access Token dari akun instagram anda.
Cara Membuat Widget Instagram Keren Di Blogger
4) Cari tag <body> lalu 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 penutup </body> lalu tempatkan code dibawah ini tepat 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 langsung dari akun instagram anda dengan tampilan yang minimalis dan keren yang akan menampilkan seluruh foto anda dan membuat pengunjung semakin menyukai blog anda.

Credits and Kudos : Instafeed.js
Share :

Komentar