Saturday, June 25, 2011

Tutorial: Hide shoutmix

Bismillahirrahmanirrahim..
Assalamualaikum
♥ Hello silent reader ! ♥

ieyza buat tuto diatas permintaan cik pika mokka and juga sufiana.
sory baru dapat wat tuto nie. bz la. hee..

ok. mula-mula pergi kat

dashboard > design > add gadget > html/javascript

copy code kat bawah and paste kan..





<style type='text/css'>
    a.linkopacity img {
    filter:alpha(opacity=50);
    -moz-opacity: 0.5;F
    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:50px;right:-0px;'>
    <a href="javascript:void(0);"onclick="showHideAT()"/><img class="expando" width="120" height="150"src="URLBUTTON" alt="PUSH" title="shout here!"/></a>
    </div>

<style type="text/css">
#at{
position:fixed;
right:450px;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:100px;
width:50px;
float:left;
cursor:pointer;
background:url();
}
.atcontent{
float:left;
border:px solid ;
background:url()  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 showHideAT(){
var at = document.getElementById("at");
var w = at.offsetWidth;
at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
at.opened = !at.opened;
}
function moveAT(x0, xf){
var at = document.getElementById("at");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
at.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
}
</script>
<div id="at">
<div class="attab" onclick="showHideAT()"> </div>
<div class="atcontent">
<div align="center">
<div style="background:url() no-repeat;">
<div style="background:url(URLBACKGROUND) no-repeat;padding-right:25px;padding-left:10px;padding-top:100px;padding-bottom:40px;">

CODE SHOUTMIX

</div>
</div>
</div>
<br />
<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><a href="http://wanhazel.blogspot.com/"><div style="color: #FFFFFF;">
<span ></span></div></a></a></div>
</div></div>

<script type="text/javascript">
var at = document.getElementById("at");
at.style.top = (-200-at.offsetWidth).toString() + "px";
</script>


OK..tapi lum ciap agy..hee
URLBUTTON tu korang gantikan dengan url untuk button untuk orang klik
then kuar la shoutmix tue. macam ieyza pic ieyza yg ada tulis shoutmix  tue.
URL BACKGROUND gantikan dengan code yang mana2 korang suka untuk
 dijadikan background korang..
CODE SHOUTMIX gantikan dengan code shoutmix korang k..

kat bawah nie. ada beberapa url untuk background..

















1.http://3.bp.blogspot.com/-jePKqO6gKTU/TVUdgjs0DAI/AAAAAAAAB9E/7RVTQc32Qx4/s1600/cboxqs7.gif
2.http://1.bp.blogspot.com/-loLYnFEY0f0/TVUdiq0UXhI/AAAAAAAAB9I/bSnQEnZrWnk/s1600/cb1tn8.gif
3.http://4.bp.blogspot.com/-yQkyX_Rg2vM/TVUdl5noeuI/AAAAAAAAB9Q/_xh8aapY_44/s1600/stroberi.gif
4.http://4.bp.blogspot.com/-JMkqnONP0Xw/TVUduM3AflI/AAAAAAAAB9Y/Vsc1I-PEd7A/s1600/48f452f7be38d.gif
5.http://4.bp.blogspot.com/-87LJW8Cdc38/TVUek0j93uI/AAAAAAAAB-o/ValT6FRZsgM/s1600/4978679104666.gif
6.http://4.bp.blogspot.com/-0ZuP_0tEtrE/TVUeDbQFDnI/AAAAAAAAB9g/560C2Jk0a_I/s1600/48f3f9aa4bef8.gif
7.http://1.bp.blogspot.com/-ekv4DKoVOQo/TVUeFt8n7pI/AAAAAAAAB9s/p1-xU_MqvPo/s1600/48f419e550585.gif
8.http://3.bp.blogspot.com/-Y6EAt04CfN0/TVUeSEMJ30I/AAAAAAAAB-Y/EcE2QGwmgDM/s1600/1218455869.gif
9.http://3.bp.blogspot.com/-4wNFSCZEoBk/TVXrOwJorlI/AAAAAAAAB-4/foniqQuFUZk/s1600/497460d013b3b.gif


 saiz shoutmix mestilah diubah mengikut kesesuaian width n height background tersebut.
kalau ieyza shoutmix ieyza ubah contoh:

 width="150" height="250" frameborder="100" 
 
credit to: Rinda and Wan Hazel 
Photobucket


11 000 kuceng marie:

M Fizan said...

rajin buat tutorial ..thanks :)

ieyza afieyna said...

@M Fizan

hehe.. sje je.. ad mase tu yg buat .. :D WC..

Pesona Algebra said...

berguna ni :)

ieyza afieyna said...

@Pesona Algebra

hehe.. thanx ^^

pika said...

still xdpt buat . huhu . anyway , thanks for the tutorial . nak cube buat lagi ;')

ieyza afieyna said...

@pika

la yeke.. cuba slow2 ke.. t confirm jadi. hee ;)

IeNa kPop lOvErXz ^^ said...

Ieyza , saiyaa na caopy yunk no 3 tuhh . Tapy , ade life traffic feed pulaa . Susaa na copy .

ieyza afieyna said...

@IeNa kPop lOvErXz ^^

ieyza dah kecik kn dah.. ;)

IeNa kPop lOvErXz ^^ said...

Akaq , asal saiyaa punye shoutmix ta masuk dalm url background yunk akaq bagy tuhh ?

ieyza afieyna said...

@IeNa kPop lOvErXz ^^

cmne ? x fham la. hee..

IeNa kPop lOvErXz ^^ said...

Macam mane na adjust padding nie ?