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="http://2.bp.blogspot.com/-f1sKOT1c_h8/TVlbK4xSmHI/AAAAAAAAA4o/3rzgi6U3wY8/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="http://4.bp.blogspot.com/-5LGPlA8BA1c/TVlbLhdXTKI/AAAAAAAAA4s/OfSrYe5BeRk/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="http://1.bp.blogspot.com/-o_3gU2EWC5U/TVlbMc7Y0-I/AAAAAAAAA4w/Bhg2IbZh7Ac/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 :) 







18 Sila Komen "Tutorial 140: Instagram Button di Blog."

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

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

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

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

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

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

Thanks for the tutorial. Really help me :D

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

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

xjumpa...
ap perlu saya lakukan

thankssss sangat for this tutorial. sukaaa haha :D

thanksss sangat for this tutorial. :D sukaaa haha

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

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

-Assalamualaikum, sila tinggalkan komen anda.
-Kalau suka tekan LIKE.
-Insyaallah komen anda akan dilayan :)
Pesanan:
Anda tidak dibenarkan sama sekali mengambil/menyalin/menyimpan/print screen mana-mana kandungan blog ini kecuali atas keizinan tuan punya blog. Tuan punya blog tidak teragak-agak untuk mengambil tindakan undang-undang jika hak persendirian ini dilanggar.

Pendapat penulis tidak semestinya kekal.
Cik Nurfarah

Related Posts Plugin for WordPress, Blogger...
Back To Top