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:

blog tutorial