Friday, March 15, 2013

Tutorial 140: Instagram Button di Blog.

Assalamualaikum, dah lama sangat tak buat tutorial untuk korang kan???


Ok, kali ni mau ajar korang sebab dah lebih 10 permintaan so tunaikan je lah??

Try tengok kat tepi blog aku ada button Instagram macam ni :


Kalau nak buat floating macam ni korang ikut step ni ye (rasa janggal sebab dah lama tak ajar tutorial)



1. Sign in blogger > Design > Add Gadget > Html/JavaScript

2. 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/puteri_nurfarah?ref=badge" class="ig-b- ig-b-48"><img src="//badges.instagram.com/static/images/ig-badge-48.png" alt="Instagram" /></a>





</div>


3. Tukar puteri_nurfarah kepada ID Instagram korang.

4. Kalau korang tak nak floating dan nak letak button je. Copy je code biru dalam sidebar korang.


5. Kalau nak letak banyak-banyak button macam aku punya. Rujuk tutorial ini ye. Tambah sebelum code  </div>


macam code di bawah:

<a class='linkopacity' href='http://www.facebook.com/fara.idola' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='facebook'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiE61zsfWbYsVm1eR6A0ka-O-z2piTK-kAaf67l5Wz0wyJAw0pZSNQM-dnjLSdA3ruAHsqnS6qO8hauizovMPcNfpTpy6PR_bvlX5vWP7JmQKntr6JXiwCL0dperX4tFGd0GpTVpdxuFA/s1600/facebook1.png" /></a><br />

<a class='linkopacity' href='http://twitter.com/#!/fara_idola' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='twitter'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTuNJNHNG8Og9FENpEAdPRIuWDU7PDLuOwIDhz4nStP4hZlRHcOG91wvTeH2Wk6T_3vVPdx7rEwnl_CHhIDpDDzpbWKCRH48saYJ7XnpaPiyuLRkVVp2_pZOl0hlt3oKGfSPw-0C3J-YY/s1600/twett.png" /></a><br />

<a class='linkopacity' href='http://bicarafarah.blogspot.com/' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='go to dashboard'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7JI0b7oPwiQmiRSxPUVfDnaPwW55rssaV_8pg1ej8Pz9wrho_nFbetc4z9WOO2MbkOD4zzEU6DDypGWo2n8tYyQXz6p2UrRzuR924FNUCVsF0DhZG6McSmSU5fT2So7QK7ggbLpU6V2Y/s1600/blogger_64x64.png" /></a><br />


#tukar code biru kepada ID korang. Hope rujuk TUTORIAL INI. (untuk lebih faham)


6. Try buat slow-slow, insyaallah jadikkk punya.

7. Lepas tu bolehlah SAVE.

Tak faham tanya..kalau I tak busy I jawabkan..kalau tak u olls study sendiri. Banyak tutorial I bagi. Kena peka ye :) 







SHARE:

19 comments

  1. tq fer de tutorial!!! nnt nak buat lahhhh..hehe

    ReplyDelete
  2. yesss akhirnya dapat juga belalang float button insta nie..thanz cik farah..da puas godek2 tuto before nie :) tq...

    ReplyDelete
  3. Salam akk, sy try buat utk instagram ni jd memang jd. tp kan, dia tak sama bentuk mcm icon twitter sy. mcm mne nk buat ek ? Hope akk boleh tolong sy :( . Thank you very much akk

    ReplyDelete
  4. salam , maaf yerk mengganggu . mcm mana nak buat button fb , twitter , instagram mcm awak punya tuu yerk ? saya buat tak menjadi , hrp sudi bgitau cara2 nye . emailkan kat email nie yerk --> nfmmn2811@yahoo.com

    thanks :)

    ReplyDelete
  5. salam , maaf yerk mengganggu . mcm mana nak buat button fb , twitter , instagram mcm awak punya tuu yerk ? saya buat tak menjadi , hrp sudi bgitau cara2 nye . emailkan kat email nie yerk --> nfmmn2811@yahoo.com

    thanks :)

    ReplyDelete
  6. tQ sis.. tapikan kita buat button tu dia punya arrangement x selari dengan button fb and twitter.. cane nk buat bg selari? hehe

    *ayat skema :p

    ReplyDelete
  7. Thanks for the tutorial. Really help me :D

    ReplyDelete
  8. salam.. kenapa saya xjumpa pon perkataan HTML/JAVA SCRIPT??

    nak cari kat mne ?
    dalam DESIGN>add gadget> then??

    xjumpa...
    ap perlu saya lakukan

    ReplyDelete
  9. thankssss sangat for this tutorial. sukaaa haha :D

    ReplyDelete
  10. thanksss sangat for this tutorial. :D sukaaa haha

    ReplyDelete
  11. tq for this tutorial..untuk org yg tak baper reti mcm kkmia ni,,memg ok sangatlah tips ni..tq farah

    ReplyDelete
  12. Assalamualaikum. Asal terlalu ke tepi sebelah kiri sangat eh button ig I? Hehehe. Ni hah sis > http://penatanpanama.blogspot.my/

    ReplyDelete
  13. tq dik atas tutorial ni..masih cuba memahami kod2 blog

    ReplyDelete

-Assalamualaikum, sila tinggalkan komen anda.
-Kalau suka tekan LIKE.
-Insyaallah komen anda akan dilayan :)

Jangan lupa LIKE! dan SHARE!

Terima kasih :)

Blogger Copyright © 2019. All Rights Reserved by BLOG CIK NURFARAH