Menambahkan Instagram Button pada Blog

Hai Sahabat Blogger... masih ingin membuat tampilan blog semakin menarik ???
Ok kali ini saya akan bagikan cara membuat Instagram Button di Blog , mungkin masih ada yang bingung apa itu Instagram Button ??? yang dimaksud dengan Instagram button itu yang ini loh O.o ( Lihat gambar dibawah )

 


Nah sudah tau kan yang namanya Instagram Button itu apa ?? Jika anda ingin menambahkan Instagram Button ke dalam blog anda , silahkan ikuti langkah-langkah berikut ...

1. Masuk ke Akun Blogger Anda
2. Pilih Tata Letak > Tambah Gadget > HTML/JavaScript
3. Copy code di bawah dan paste ke dalam Html/Java Script



<style type='text/css'>

a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}
a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
</style>
<div style='display:scroll; position:fixed; top:140px; left:-12px;'> <style>.ig-b- { display: inline-block; }
.ig-b- img { visibility: hidden; }
.ig-b-:hover { background-position: 0 -60px; } .ig-b-:active { background-position: 0 -120px; }
.ig-b-48 { width: 48px; height: 48px; background: url(//badges.instagram.com/static/images/ig-badge-sprite-48.png) no-repeat 0 0; }
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
.ig-b-48 { background-image: url(//badges.instagram.com/static/images/ig-badge-sprite-48@2x.png); background-size: 60px 178px; } }</style>
<a href="http://instagram.com/Sakinah_Lisda?ref=badge" class="ig-b- ig-b-48"><img src="//badges.instagram.com/static/images/ig-badge-48.png" alt="Instagram" /></a>

</div>

4. Ganti teks Sakinah_Lisda  dengan ID Instagram Anda
5. Simpan , kemudian refresh tampilan blog anda, Selamat mencoba :)


Credit By <a href="http://bicarafarah.blogspot.com/p/blog-tutorial_1005.html">Cik Nurfarah</a>

20 comments:

  1. hai... salam kenal sakinah :)
    makasih ya ilmunya, udah aku coba dan alhamdulillah berhasil :))

    ReplyDelete
    Replies
    1. Alhamdulillah,, salam kenal juga ;) silahkan coba tutorial lainnya yaa ...

      Delete
  2. thank you atas tutorialnya berhasil, tapi koq misah misah yaaa sm button yg lain , ada saran???

    ReplyDelete
    Replies
    1. Itu kan cuma tutorial untuk menambahkan instagram button nya sist,, kalo mau nambahin button facebook, twitter atau yang lainnya, ganti aja alamat Intagram dengan alamat yang dimaksud kan, serta ganti icon nya juga,,

      terimakasih telah berkunjung ke blog saya :)

      Delete
  3. makasih tutorialnya y sakinah.
    :)

    ReplyDelete
  4. This comment has been removed by the author.

    ReplyDelete
  5. Makasih tutorial nya..Salam kenal juga...:)

    ReplyDelete
  6. wah makasih infonya sangat bermanfaat hehe :):):)

    ReplyDelete
  7. Ditarohnya dimana sih neng ? , gua bingung sendiri sumveh , cobasih liat blog gue supergreget,blogspot.com

    ReplyDelete
  8. Jangan Lupa Kunjungi http://persewaanlaptopsurabaya.blogspot.com/

    ReplyDelete
  9. aku masih nggak bisa nih...bingung...

    ReplyDelete
  10. Blognya feminim bangetttsssss................

    ReplyDelete
  11. Cara Membuat Widget Instagram Di Blog http://go.idcheat.com/1lasiH5

    ReplyDelete
  12. makasih bos sudah bikin artiek yang bagus

    ReplyDelete
  13. makasih bos sudah bikin artiek yang bagus

    ReplyDelete
  14. blognya rame icon2..agak pusing saya bacanya.... btw makasih infonya..saya akan coba

    ReplyDelete
  15. KALAU UNTUK FB DAN TWITTER guna yang sama ke code ni?

    ReplyDelete