follower & shoutbox macam blog gary?

4 comments

ada orang tanya, camana nak buat shoutbox
& follower macam aq punya....

okeh2...camne...

1. shoutbox :

kebanyakan shoutbox blog orang aq tengok, x berapa menjadi dia punya fungsi show hide...

apa kata korang cuba kod kat sini :


aq guna kod kat situ untuk blog awek aq pun jadi...korang try la...

ada apa2 x paham, tanya kat sini okeh?

2. follower

aq tengok tutorial indon...hihihi... kat sini :


tapi dia x ajar cara nak customize benda tuh... so aq kongsi sket kat sini..

<style type="text/css">
#fl{
position:fixed;
left:150px;
z-index:+1000;
}
* html #fl{position:relative;}
.flcontent{
float:left;
border:2px solid #676767;
background:url(http://lh3.ggpht.com/_yF0--u7KSSI/TKIlkEJwkEI/AAAAAAAAAtg/uFf3eLsXlyg/fire2.gif)#000000 repeat-x bottom center scroll;
-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">


Kode Widget Follow Disini


<div style="text-align: right;">
<a href="javascript:showHideFL()">
[Tutup]
</a></div>
<font size="2"><a href="http://www.berbagidisini.com/2010/10/memasang-widget-follow-showhide.html"target=_blank"><div style="color: #444444;">
<span >By enda fiVers</span></div></a></font>
</div>
</div>
<script type="text/javascript">
var fl = document.getElementById("fl");
fl.style.bottom = (-100-fl.offsetWidth).toString() + "px";
</script>


okeh, kod di atas ne korang boleh jumpa di blog tu kan?

kod kat atas tuh adalah kod untuk kotak follower yang bakal show & hide...

yang highlight kuning tu, untuk background... yang ada api2 tu... tukar la...
cari url gambar yang korang nak jadikan background, pastu gantikan la ngan line yang
highlight kuning tuh...macam background aq, aq dah tukar ke warna oren..

yang warna ungu tuh, perkataan 'By enda fiVers' akan muncul di bawah kotak follower korang.. perkataan tu di link kan kepada blog http://berbagidisini.com tuh...ala..tempat korang dapat kod tu la.. maknanya dia nak promote blog dia la...kalau rasa2 baik ati, biar je benda tu..aq tukar... kalau korang perasan, kat bawah kotak follower aq ada tulis 'jom follow gaary!! hihi...'.. kalau korang tekan perkataan tuh, korang akan dibawa terus ke blog aq gak..hihihi... perkataan 'By enda fiVers' tu aq tukar ngan 'jom follow gary!! hihi..' pastu 'http://www.berbagidisini.com/2010/10/memasang-widget-follow-showhide.html' aq tukar ngan url blog aq...paham??? 
yang warna merah tu, muncul kat bawah kotak follower korang.. kalau orang klik ne, box follower korang akan hide balik la... kalau kat box follower aq, aq tukar ke 'tutup yer'..hehe..okeh??

okeh2....penat menaip... kod kedua pulak macam ni :


<a href="javascript:showHideFL()"/><img border="0" src="http://lh6.ggpht.com/_yF0--u7KSSI/TN6RD4JoCmI/AAAAAAAABG0/bkYV2RML-qk/Follow-.png" alt="Fivers" title="Klik untuk membuka kotak Follow" style="display:scroll;position: fixed; top:150px;right:0px;cursor:pointer;style=" opacity:1;filter:alpha(opacity="100)"" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" ;" height="130px" width="40px" /></a>


okeh, kod kat atas ni untuk butang follow yang orang kena klik kalau orang nak follow korang..

untuk yang biru, cuba korang sentuh butang follow aq tuh dengan mouse korang... akan kluar perkataan 'nak follow?..klik kat sini la...'.. korang boleh tukar ke ayat feveret korang okeh?

yang merah tuh, url gmbar butang follow tuh...tukar la ke url gambar yang korang nak...okeh??

yang warna ungu tuh, 'right:0px' tuh menunjukkan dia akan muncul kat sebelah kanan.. tukar ke 'left:0px' untuk letak butang follow tu ke sebelah kiri..

yang warna kuning tuh, jarak butang follow tu dari top blog korang.. kurangkan nilai '150px' tu untuk letak dia ke atas sket, atau lebihkan nilai tu untuk letak dia ke bawah..korang adjust2 la... 

yang warna kelabu tuh, adjust ke saiz gambar button korang tuh... pandai2 la adjust yer...

dah!!!! adeh...sumpah aq tabek kat saper2 yang buat blog tutorial... penat siot!!! ada apa2 x paham, jangan segan2 tanya ye.. aq tolong la apa yang aq dapat... kalau x dapat tolong, apa ble buat..hihihi...


Next PostCatatan Terbaru Previous PostCatatan Lama Laman utama

4 ulasan

  1. hihihi...gary paham kalau zacky x paham.. gary x berbakat buat tutorial ni... hihihi... tapi apa ble buat.. blog indon tuh x bagi cara camana nak customize.. gary ada ilmu sket2, try share la..hihi..peace!!

    BalasPadam
  2. dah cuba buat tapi tak jadi laaa..atoiii fenin sudaaa..tolonggggg

    BalasPadam
  3. bahagian mana x jadi ne? shoutbox? follower?

    BalasPadam

nak tanya soalan tapi takder akaun blogger dan lain-lain? boleh tanya soalan kat fanpage Blog Gary!!™ :)