Apr 19, 2011

Tuto Float Icon and hide followers


Assalammualaikum~ 

Ok, nak buat tuto. Tau tak yg floating ikon dekat tepi blog tu? Selalunya org selalu buat ikon facebook kat situ kan~ Ikon social network mcm Myspace, Facebook, Tumblr n mcm2 lagi. n ade yg buat tab...




Ok, ni fiqah nak ajar la..



Copy paste la kod ni.


<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;'>

<a class='linkopacity' href='URL LINK' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='TAJUK'><img border="0" src="URL IKON COMEL" /></a><br />

<a class='linkopacity' href='URL LINK' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='TAJUK'><img border="0" src="URL IKON COMEL" /></a><br />

</div>


URL LINK url link ape2 la, link fb ke blog ke
TAJUK tajuk dia la, tutorial ke, facebook ke...
URL IKON COMEL url ikon yg comel2 la, nak buat sendiri kat photoshop ek :p 


Kalau nak tambah lagi ape2 tambah je kod ni kat atas kod </div&g


<a class='linkopacity' href='URL LINK' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='TAJUK'><img border="0" src="URL IKON COMEL" /></a><br />


Tuto floating follower Box 




Copy paste la kod ni.




<style type="text/css">
#fl{
position:fixed;
left:150px;
z-index:+1000;
}
* html #fl{position:relative;}
.flcontent{
float:left;
border:3px dashed #BCA9F5;
-moz-border-radius: 25px 10px / 10px 25px;border-radius: 25px 10px / 10px 25px;
background:#FFFFFF;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideFL(){
var fl = document.getElementById("fl");
var w = fl.offsetWidth;
fl.opened ? moveFL(0, -100-w) : moveFL(20-w, 0);
fl.opened = !fl.opened;
}
function moveFL(x0, xf){
var fl = document.getElementById("fl");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
fl.style.bottom = x.toString() + "px";
if(x0!=xf){setTimeout("moveFL("+x+", "+xf+")", 10);}
}
</script>
<div id="fl">
<div class="fltab" onclick="showHideFL()"> </div>
<div class="flcontent">


KOD FOLLOWERS BOX


<div style="text-align: right;">
<a href="javascript:showHideFL()">
[Close]
</a></div>
</div>
</div>
<script type="text/javascript">
var fl = document.getElementById("fl");
fl.style.bottom = (-100-fl.offsetWidth).toString() + "px";
</script>




<a href="javascript:showHideFL()"/><img border="0" src="URL IKON FOLLOW" alt="" title="Follow" style="display:scroll;position: fixed; top:40px;right:10px; filter:alpha(opacity="100)&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" ;" height="130px" width="90px" /></a>



Yg "URL Image untuk follow" tu url ikon korng le :) cari le kat sini ^_^ b then, yg pink kaler tu kod followers box korng tu ok :) Nak cari kat mane? kat sini hah :) Korng tekan yg fist tu. Yg Google Freind Connect




Ok. Tekan le yg Add member gadget ok :3 lepas tu,.... nanti kluar ni an~


Yg Step 1 tu adjust le size follower box korng k :) x yah sentuh pape pun boleee :) yg step 2 tu suka hati korng le nk hias followers box korng~ Nk tukar warna ke ape ke :) klau warne yg korng ingin kan x dek kat situ just pi le kat sini ok :) lpas tu le kan,... yg bwh dia step 3 tu, korng tekan le generate kod ok :) nanti akan kluar le kod follower box korng, n copy le n pastekan kod tu.



No comments: