Membuat Halaman Khusus Foto Instagram Di Blog
Setelah saya sukses bikin widget khusus untuk foto instagram dengan memakai instafeed.js yang memperlihatkan foto dengan memakai dampak CSS3, maka kali ini saya akan menerangkan cara bikin halaman khusus untuk foto galeri di blog dari akun instagram anda. Keuntungan dari halaman ini yakni hadirin blog anda sanggup menyaksikan secara langsung foto yang gres saja anda upload tanpa loading yang lama dengan kata lain halaman ini akan menampung foto anda lebih singkat dari pada melihatnya langsung di situs dari instagram. Tampilannya sendiri sungguh lembut, minimalis, terbaru dan tentunya disini saya juga memakai dampak murni CSS3.
2) Masuk ke Editor HTML Template (lakukan back up) lalu cari code
3) Cari tag
Baca secara perlahan panduan dibawah untuk mengenali cara memperoleh user ID dan Access Token dari akun instagram anda.
Cara Membuat Widget Instagram Keren Di Blogger
4) Cari tag
5) Cari tag penutup
Sekarang, anda sudah membuat dan memperlihatkan foto-foto atau gambar di blog langsung dari akun instagram anda dengan performa yang minimalis dan keren yang mau memperlihatkan seluruh foto anda dan bikin hadirin kian menggemari blog anda.
Credits and Kudos : Instafeed.js
Sumber https://henponterbaru.blogspot.com/
Langkah-langkah Membuat Halaman Khusus Foto Galeri Instagram DiBlog
1) Buat suatu halaman kosong dengan mode HTML lalu publikasikan dan salin URL halaman tersebut
]]></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> 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 panduan dibawah untuk mengenali cara memperoleh 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 != "Masukkan-URL-Halaman-dari-langkah-1-kesini"'> 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 memperlihatkan foto-foto atau gambar di blog langsung dari akun instagram anda dengan performa yang minimalis dan keren yang mau memperlihatkan seluruh foto anda dan bikin hadirin kian menggemari blog anda.
Credits and Kudos : Instafeed.js
Komentar
Posting Komentar