Monday, April 30, 2012

Tutorial Cara Centerkan Sidebar


Assalamualaikum wbt kalian :)

Ramai yang bertanyakan macam mana Ieyza mengubah kedudukan tulisan di sidebar ke bahagian tengah. So, dengan adanya tutorial ini Ieyza akan tolong korang untuk menjadikan blog kelihatan lebih cantik dan kemas.

1. Dashboard --> Design --> Edit html

2. korang cari code nie

h2 {

3. kalau dah jumpa korang copy code bawah ney pulak dan pastekan dibawah h2 {

text-align:center;

4. Dah siap...Preview dulu sebelum save okay?

Tutorial Cara Centerkan Post Title


Semua orang tahu bahawa Tajuk post sesebuah entri merupakan antara salah satu punca kejayaan sesebuah blog itu. Jadi, untuk itu, kita perlu memastikan kedudukan Post title tersebut terletak pada posisi yang betul.

Jom ketahui cara-caranya :

1. Dashboard --> Design --> Edit html

2. Cari code nie, tekan F3 

h3.post-title {

3. dah jumpa? pastu korang copy pulak code bawah ney dan pastekan di bawah h3.post-title { 

text-align:center;

4. Preview dulu sebelum save okey!!


Tutorial Cara Center kan Header

Header amat penting bagi menampakkan lagi personaliti korang. Dah kalau header korang senget ke tepi tu, jadinya tak menarik lah kan? So, marilah kita centerkannya.


1) Dashboard > Design > Edit HTML > Tick Expand Widget Templates.
2) Tekan F3, search for this code :


/* Content

3) Copy code nie dan pastekan DI ATAS code yang korang cari tu :


.Header img {margin-$startSide: auto; margin-$endside: auto;}


4) Preview dulu, kalau masih tak center, cari code #header { dan korang adjustlah WIDTH sampai center. Try and error dear. Kebiasaannya, width #header {  akan sama dengan width #content-wrapper { .


Do it like this picture, just change the number until it become center.


5) Preview sekali lagi, then save je lah. Kan dah siap. hihi



Tutorial : Cara Sorokkan Chatbox

Assalamualaikum semua :)

Bagi mereka yang belum ada chatbox tu, sila klik disini :)

1.  Dashboard > Page element > Add gadget > HTML/javascript

2.  copy code di bawah ini.


<style type="text/css">
#gb{
 position:fixed;
top:100px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
 width:30px;
float:left;
cursor:pointer;
background:url('http://i525.photobucket.com/albums/cc335/honey_sapphire_photos/tabs.png') no-repeat;
}
 .gbcontent{
 float:left;
 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.right = x.toString() + "px";
 if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
 }
 </script>
 <div id="gb">
 <div class="gbtab" onclick="showHideGB()"> </div>
 <div class="gbcontent">


COPY DAN PASTE CODE CHATBOX DISINI


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


3.  then tekan save and preview. Okey tak??


biru : gantikan dengan url icon shoutbox yang korang minat
merah : masukkan kod chatbox korang 

Thursday, April 26, 2012

Tutorial Cara Letak Online Users


Assalamualaikum wbt :)

Ingin mengetahui berapakah jumlah sebenar pengintip atau pembaca secara senyap di blog korang?

Nahhh, korang Sign In Di sini dan, ikut je step nye.


Dah habis?  Copy Code nya.


  1. Dashbord > Design > Add a gadget > HTML/Javascript.
  2. Pastekan di ruangan tu ya!




Siap! mudah kan?


Selamat Mencubaa!

Tutorial Cara Buat Effect Salji dalam blog

Assalamualaikum dan hai :)

Adakah anda menggemari suasana dingin serta menginginkan suasana tersebut di blog anda? Ya, tidak salah lagi. 

Hari nie, Ieyza akan ajarkan korang macam mana nak buat effect salji kat dalam blog korang. 

Ikut step ini :

1.Dashboard > Design > Add a Gadget > HTML/JavaScript

2.Then , Copy code bawah ni and paste dibhgian HTML/JavaScript


<script>

//Here you can add your own picture for snow. Just change the url
var snowsrc="http://i13.servimg.com/u/f13/11/52/70/02/snowba10.png"
//how many snowflakes there will be (currently 12)
var no =40;
//How fast will the snow disappear (0 is never)
var hidesnowtime = 0;
//The height the snow will reach before it disappears ("windowheight" or "pageheight")
var snowdistance = "pageheight";
///////////////////////////////End of Settings///////////////////////////////////
var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&&!document.all) ? 1 : 0;

function iecompattest()
{
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

var dx, xp, yp;
var am, stx, sty;
var i, doc_width = 800, doc_height = 600;

if (ns6up)
{
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
else
if (ie4up)
{
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}

dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();

for (i = 0; i < no; ++ i)
{
dx[i] = 0;
xp[i] = Math.random()*(doc_width-50);
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
if (ie4up||ns6up)
{
if (i == 0)
{
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://rftactical.darkbb.com/index.htm\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/div>");
}
else
{
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");
}
}
}

function snowIE_NS6()
{
doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")? iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
for (i = 0; i < no; ++ i)
{
yp[i] += sty[i];
if (yp[i] > doc_height-50)
{
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
}
dx[i] += stx[i];
document.getElementById("dot"+i).style.top=yp[i]+"px";
document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";
}
snowtimer=setTimeout("snowIE_NS6()", 10);
}

function hidesnow()
{
if (window.snowtimer) clearTimeout(snowtimer)
for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
}


if (ie4up||ns6up)
{
snowIE_NS6();
if (hidesnowtime>0)
setTimeout("hidesnow()", hidesnowtime*1000)
}
</script>


3. Preview dulu, Kalau jadi, tekan Save

Tutorial Cara Buat Kotak Wishlist

Assalamualaikum semua :)


Okey, mungkin ada dikalangan kalian korang yang tak tahu apa itu wishlist. Nahhh, sekarang Ieyza tujnjukkan apa itu Wishlist BOX. Sila lah tengok gambar kat bawah nie :




Jom tinjau macam mana nak buat KOTAK WISHLIST!


Dashboard > Design > Page Element > Add Gadget > HTML/Javascript


Copy and paste kan code dibawah dalam HTML/Javascript :



 <form name=myform>
    <input type="checkbox" name="mybox" value="Wishlist 1" checked/>Wishlist<br />
    <input type="checkbox" name="mybox" value="Wishlist 2" checked/>Wishlist<br />
    <input type="checkbox" name="mybox" value="Wishlist 3" disabled/>Wishlist<br />
    <input type="checkbox" name="mybox" value="Wishlist 4" checked/>Wishlist<br />
    <input type="checkbox" name="mybox" value="Wishlist 5" disabled/>Wishlist<br />
    </form>



Tukarkan perkataan yang diboldkan sahaja kepada CHECKED atau DISABLED dan perkataan WISHLIST YANG BERGARIS kepada benda yang korang nak capai. 


Itu sahaja simple kan. =)