Sesungguhnya Islam itu teramat cantik, tidak mungkin mengetepikan kecantikan seni fotografi yang istimewa, yang mampu menyentuh jiwa dengan 'cahaya islam' yang hakiki - Peter Sanders


Follow Us @soratemplates

Tuesday, September 27, 2011

Tutorial: Cara buat hide credit box




Tutorial ni direquest oleh adik Eeda Latif yang comel itu. Sesape yang nak wat gak silekanlah amek. Aiman tak kesah! (Cume kalau dah copy tu silelah bagi kredit ye! :koreks:*Wink*Wink*)

Step #1: Gi kat Design>Add Page Element>HTML
Step #2: Copy code di bawah ni dan pastekan dalam no. 1

<style type="text/css">
#gb{
position:fixed;
top:150px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:150px;
width:30px;
float:right;
cursor:pointer;
background:url('url gambar kredit') no-repeat;
}
.gbcontent{
float:right;
border:2px solid #666666;
background:#F5F5F5;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.left = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<b><span class="Apple-style-span" style="color: #e06666;">KREDIT</span></b></div>
<div class="separator" style="clear: both; text-align: center;">
babydoll.nu</div>
<div style="text-align: center;">
bloggercandy.blogspot.com</div>
<div style="text-align: center;">
nama/url blog yg nak dikreditkan</div>
<div style="text-align: center;">
nama/url blog yg nak dikreditkan</div>
<div style="text-align: center;">
nama/url blog yg nak dikreditkan</div>
<div style="text-align: center;">
nama/url blog yg nak dikreditkan</div>
<div style="text-align: center;">
nama/url blog yg nak dikreditkan</div>
<div class="separator" style="clear: both; text-align: center;">
nama/url blog yg nak dikreditkan</div>
<div class="separator" style="clear: both; text-align: center;">

<div style="text-align:center">
<a href="javascript:showHideGB()">
[tutup sini]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.left = (30-gb.offsetWidth).toString() + "px";
</script></div>

Step #3: Save & preview!

:pandaGeli_04:Notes: Sume yang bold tu korang boleh tukar mengikut rasa nak manis ke masin ke okeh!


Sorila ye Eeda kalau lambat sangat menunggu tutorial ni. Maklumlah baru first taim nak wat tutor, nak pasang coding pun terkial-kial haha! :mHihi: Anyway harap Eeda puas hati!


3 comments:

  1. wahhh..bgs nie tp kegunaan tuk ape yer kak?hehehe...sengal kan?

    ReplyDelete
  2. Hehe... Oshin, ni kalau kite taknak semakkan sidebar kite ngan credit box tu. So ade option untuk bagi dia hide kat tepi so bile org klik dia baru dia bukak.

    ReplyDelete

Terima kasih sebab komen! Saaaaayang korang!

Follow Me at flickr! .