[Tutorial] Cara Membuat Dan Memasang Tombol Feed Instagram Di Blog
Penerbit: ( Seo Techman )

[Tutorial] Cara Membuat Dan Memasang Tombol Feed Instagram Di Blog

Halo sobat blogger..

Untuk tutorial yang akan kami berikan kali ini adalah, membuat instagram feed. Tombol feed ini bisa sobat pasang di blog maupun di website.
Mungkin tutorial ini tergolong sangat mudah untuk para mastah-mastah koding. Namun bagi saya ini lumayan rumit, kenapa rumit? Karena saya sendiri seorang pemula (newbie), jadi ya begitulah..

Tutorial Cara Membuat Dan Masang Tombol Feed Instagram Di Blog

Siapa sih yang tidak tahu dengan sosial media yang sangat terkenal diseluruh dunia ini. Hampir semua kalangan memilih untuk memasang istagram di ponsel mereka. Banyak juga kegunaan nya, bukan hanya untuk sekedar sharing, posting, akan tetapi bisa untuk beriklan dan lain sebagai nya.


Live Demo

Oke mungkin kita langsung saja masuk ke tahap cara membuatnya. Untuk pemasangan di blog sobat, sobat langsung saja ke menu tema lalu, klik edit html. Setelah itu sobat copas css berikut ini:



@import url('http://livein.website/fontme/fontme.css');

body {
  font-family: 'Inter', sans-serif;
  justify-content: center;
  align-items: center;
  background: #000;
  display: flex;
  height: 100vh;
  padding: 0;
  margin: 0;
}

.button {
  transition: all .2s ease-in-out;
  -webkit-appearance: none;
  letter-spacing: -0.5px;
  text-decoration: none;
  border-radius: 100px;
  font-family: inherit;
  align-items: center;
  position: relative;
  padding: 18px 42px;
  font-weight: 500;
  text-align: left;
  background: #06f;
  appearance: none;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  outline: none;
  border: none;
  color: #fff;
}

.button-icon {
  margin-right: 16px;
  height: 30px;
  width: 30px;
  top: 0;
}

.button-text {
  flex-direction: column;
  font-size: 16px;
  display: flex;
}

.button-numbers {
  margin-top: 4px;
  font-size: 12px;
  opacity: 0.6;
}

.button:hover { transform: translateY(-2px); }
.button:active { transform: translateY(0); }

.button:before {
  animation: pulse 2s ease infinite;
  border-radius: 100px;
  position: absolute;
  background: #06f;
  content: "";
  z-index: -1;
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { opacity: 0.2; }
  100% { transform: scale(1.2, 1.4); opacity: 0; }
}

.background {
  pointer-events: none;
  overflow: hidden;
  position: fixed;
  height: 100vh;
  opacity: 0.2;
  border: none;
  z-index: -1;
  width: 100%;
  left: 0;
  top: 0;
}

Jika sudah, sobat copas lagi html di bawah ini dan letakan di mana saja (bebas, sesuai keinginan masing-masing).



<a href="https://www.instagram.com/virm90" target="_blank" class="button">
  <img class="button-icon" src="https://tr.af/images/icon-insta.svg" alt="instagram">
  <span class="button-text">
    @virm90
    <span class="button-numbers">
      <span id="button-count"></span>
      followers
    </span> 
  </span>
</a>

Sudah? Lanjut ke langkah terakhir yaitu, copas kode javascript berikut:



$(function(){
  $.get('https://api.instagram.com/v1/users/self/?access_token=27019167.1677ed0.27958a214ce141dfaaf18ddb103e33e7',
        function(data) {
    $("#button-count").html((kFormatter(data.data.counts.followed_by)));
  }
       )
  function kFormatter(num) {
    return Math.abs(num) > 999 ? Math.sign(num)*((Math.abs(num)/1000).toFixed(1)) + 'k' : Math.sign(num)*Math.abs(num)
  }

});

Nah silahkan langsung saja sobat simpan dan lihat hasil nya seperti apa.


Mungkin saya rasa cukup sekian saja untuk postingan kami pada hari ini, semoga bermanfaat untuk sobat semua. Apabila menurut sobat tutorial ini berguna, silahkan di share ke teman-teman lain nya.


Load comments

0 Response to "[Tutorial] Cara Membuat Dan Memasang Tombol Feed Instagram Di Blog"

Post a Comment