Cara Membuat Halaman Foto Instagram di Blog dengan Mudah

SEPERTI biasa, saya sering melakukan blogwalking ke situs-situs yang saya anggap besar. Berharap menemukan ide baru, eh ketemu dengan tutorial membuat halaman galeri foto instagram langsung di blog. Keren banget, yak?

Cara Membuat Halaman Foto Instagram di Blog dengan Mudah

Bagi saya sih cukup unik karena gak semua orang bisa melakukan ini. Apalagi pembuatan galeri foto instagram di blog ini menggunakan static page (halaman statis blog) dengan efek CSS3 yang kurang saya pahami.

Cara Mendapatkan User ID dan Access Token


Panduan pertama yang wajib diselesaikan adalah mendapatkan user ID, akses token dan penentuan limit foto yang menampilkan seberapa banyak yang akan ditampilkan.

  1. Masuk ke website resmi instagram Get User ID & Access Token ini untuk mendapatkan user ID dan akses token
  2. Masukkan username dan password akun instagram Anda
  3. Silahkan klik enter dan selanjutnya Anda akan melihat user ID dan akses token Anda tampak seperti gambar dibawah ini:

Cara Membuat Halaman Foto Instagram di Blog dengan Mudah

Nah, itu dia user ID dan akses token milik pribadi Anda. Pastikan bahwa Anda telah menyalin kedua kode tersebut di tempat tertentu, misalnya seperti notepad. Oke, sampai disini sudah selesai.

Cara Membuat Halaman Foto Instagram di Blog


#1. MEMBUAT HALAMAN STATIS (STATIC PAGE) KOSONG

Pertama, buat terlebih dahulu halaman statis (HTML, bukan compose). Pastikan bahwa halaman ini kosong dan disimpan dengan judul yang menurut Anda unik, misalnya memasangkan judul dengan nama judul My Instagram.

Pastikan bahwa Anda menyalin URL laman statis dari laman tersebut, misalnya http://tipsseokiller.blogspot.co.id/p/my-instagram.html. URL ini akan dibutuhkan pada tahap dibawah atau selanjutnya.

#2. PENAMBAHAN KODE CSS DAN JQUERY

Penambahan kode seperti CSS dan Jquery:

1. Masuk ke template blogger HTML > lakukan backup terlebih dahulu
2. Cari kode ]]></b:skin>
3. Copy dan Paste kode dibawah ini tepat diatas kode ]]></b:skin>

#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;
}

4. Cari kode </head>
5. Salin dan pastekan jQuery dibawah tepat diatas kode </head>

<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: Kode User ID,
resolution: 'low_resolution' ,
accessToken: 'Kode Access Token',
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>

Catatan: Limit adalah batas foto yang ditampilkan seberapa banyak, kode user ID adalah nomor ID instagram milik Anda, dan Kode Access Token adalah nomor token instagram Anda.

6. Selanjutnya adalah mencari tag <body>
7. Copy dan paste tag kondisional dibawah dibawah kode <body>

<b:if cond='data:blog.url != &quot;Masukkan-URL-Halaman-Statis-Langkah-Nomor-Satu-Diatas-Tadi-Kesini&quot;'>

8. Mencari kode penutup </body>
9. Copy dan paste kode dibawah tepat diatas kode </body>

<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>

10. Simpan semua proses yang sudah Anda kerjakan. Silahkan buka halaman statis yang tadi Anda buat dengan judul My Instagram. Proses sudah berakhir.

Fitur Galeri Foto Instagram di Blog


Ada beberapa keuntungan yang bisa Anda peroleh apabila mencoba cara ini, salah satunya adalah pengunjung bisa melihat foto instagram yang baru saja Anda upload di akun instagram pribadi Anda. Diantara lainnya adalah:


  • Akses pembukaan static page yang menampilkan galeri foto instagram tergolong cepat
  • Tampilan sangat keren, bahkan cenderung simple, minimalis dan tentunya sudah sangat moderen
  • Sebuah keunikan khusus yang tidak dimiliki oleh banyak website lainnya


Good luck & happy blogging!

Source: http://www.heyriad.com/2014/03/membuat-halaman-khusus-foto-instagram.html

0 Response to "Cara Membuat Halaman Foto Instagram di Blog dengan Mudah"

Post a Comment

Berkomentarlah dengan baik dan benar, komentar spam tidak akan dipublikasikan. Harap baca semua atau keseluruhan artikel. Gunakan anonymous jika tidak punya akun google untuk berkomentar. Centang OK pada NOTIFY ME agar komentar balasan masuk ke email Anda.