Saturday, 24 March 2012

TUTORIAL: Sidebar Background

Hi There  ^ ^
Happy weekend ya. hehe

Hari ni mau buat tutorial letak background di sidebar. Tutor ni di request oleh Darwish
Tahu takk macam mana bentuk sidebar ni ? oke mari tengok bawah ni ;


Oke sekarang sudah tau kan.. be'minat mau buat? hehe mari ikut tutor di bawah ni..

Step 1: 
Design > Edit Html > Tick Expand Widget Templates

Step 2:
Tekan F3 dan cari ,
Pengguna Template Designer : h2 {
Pengguna Template Denim : .sidebar h2 {


Step3:
Copy kod di bawah ni:
border-radius:5px;
border-bottom: 2px dashed #ffffff;
border-top: 2px dashed #ffffff;
border-right: 2px double #ffffff;
border-left: 2px double #ffffff;
padding: 10px;
background-color: #ffffff;
text-align: center;

** Merah - warna background sidebar. 
** Pink - Warna border.

Step 3:
Paste di bawah h2 {

Step 4:
Preview dahulu kalau tiada error boleh save :)

SELAMAT MENCUBA   ^ ^


Tuesday, 13 March 2012

TUTORIAL: Buat slide Float untuk shoutbox

Hi There  ^ ^

Tutor kali ni macam mana cara mau buat shoutbox kamu jadi slide float.
 Maksud nya kalau tekan jaa di shotbox tu dia akan slide. Mau try ?? HEHE 
Oke, mari ikut step di bawah ni.


Step 1:
Design > Add a Gadget > HTML/Java Script

Step 2:
Kamu copy kod di bawah ni dan paste kan di ruangan tadi tu.

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:350px
width:140p
float:left;
cursor:pointer;
background:url('GAMBAR SHOUTMIX ') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #00000;
background:#F5F5F5;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 150-w) : moveGB(170-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">
CODE SHOUTMIX 
<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (140-gb.offsetWidth).toString() + "px";
</script>


* Merah : Letak Url gambar untuk slide float.
* Biru: Paste kod shoutmix/FBOX  kamu. 

Step 3:
Tekan SAVE !

SELAMAT MENCUBA!

TUTORIAL: Scroll box di ruangan komen

Hi There  ^ ^


Hari ni saya buat tutorial ja lah. So, tutorial kali ni macam mana mau letak scroll 
box di ruangan komen. Tau takk? mesti tau punya kan. Maaf tidak dapat bagi contoh bergambar.
Scroll box ni sesuai di letakkan di blog kamu supaya nampak lebih kemas lagi! 

Mari Try sekarang  ^ ^

Step 1:
Design > Edit HTML > Tick Expand Widget template

Step 2:
Tekan F3 atau Ctrl+F dan cari kod ni :
<div class='comments' id='comments'>

Step 3:
Jumpa? sekarang Padam kod tu dan gantikan dengan kod di bawah ni:
<div class='comments' id='comments' style='overflow:auto; width:ancho; height:400px;'> 

*Merah: Boleh tukar Height tu mengikut kesesuaian

Step 4:
Tekan Preview dulu, kalau tiada error boleh SAVE !


SELAMAT MENCUBA ! 
Letak komen

Saturday, 10 March 2012

TUTORIAL: Letak main-background

Hi there  ^ ^

Hari mula da cuti sekolah.. YEAY!!! happy neyy.. haha Tapi nanti-nanti tu mesti bosan akan datang  melanda diri ku ~ hahai

Hari ni saya yang sangat terlebiihh sudah rajin mau share tutorial dengan kamu. Harap-harap menjadi lah tutor kali ni. Tau ka apa tu main background ? Oke, sebelum tu tutor ni khas untuk pengguna TEMPLATE DESIGNER [Picture Window] saja. Tidak tau lah kalau menjadi ka tidak bagi template yang lain. Berusaha Tukar-tukar ja lah kod yea. HEHE

Bagi yang tidak tau main background tu apa, lihat gambar di bawah ni:

klik untuk lebih jelas

Sebelum ni kalau Picture Window punya main background tu Transparent ja kan? so, kalau mau letak background mari ikut step di bawah ni. 


Step 1:
Design > Edit HTML

Step 2:
Tekan F3 dan cari kod di bawah ni:
<Variable name="main.background"

Step 3:
ada kod macam ni kan?

  <Variable name="main.background" description="Main Background" type="background"
       default="transparent url(http://www.blogblog.com/1kt/transparent/white80.png) repeat scroll top left" value="transparent url(http://www.blogblog.com/1kt/transparent/white80.png) repeat scroll top left"/>
   <Variable name="main.padding.sides" description="Main Padding Sides" type="length" default="20px" value="20px"/>

Kamu tukar url tu dengan background pilihan kamu.

Step 4:
Tekan preview dulu, kalau tiada error boleh SAVE !

SELAMAT MENCUBA
Harap tutor ni dapat membantu.  Letak komen sikitt :P




TUTORIAL: Border di luar blog

Hi There  ^ ^

Siapa yang berminat mau buat tutorial ni, mari ikut step di bawah.. senang jee ^ ^

Step 1:
Design > Edit HTML

Step 2:
Tekan F3 dan cari kod di bawah ni:
.content-inner {

Step 3:
Copy kod di bawah ni dan paste kan dibawah kod yang kamu cari tadi.
border: 3px solid #000000;

Merah : ketebalan border
Biru: Boleh tukar samada : solid / dashed / dotted . (pilih ja salah satu :)
Purple: Tukar warna 

Step 4:
Tekan preview dulu, kalau tiada error boleh save :)

SELAMAT MENCUBA :)
Letak komen sikitt :P

Sunday, 4 March 2012

Cikgu Add-Maths saya cakap...

Hi there ^ ^
How are you? Fine? hehe

Yesterday kelas saya ada Ujian Add Maths.. Soalan susah tahap kritikal juga lah kalau bagi siapa- siapa yang tidak study. Hihi Susah# ! Ujian bab satu saja sebenarnya. Bab Function. Hehe Saya jawab saja dengan penuh yakin masa tu. Betul atau salah lain cerita. Yang penting JAWAB semua soalan : Teacher biology saya cakap. Haha

Masa kelas Add Maths tadi.. Cikgu cakap :



Haha.. begitu lah cikgu cakap tadi. Hmm.. kalau perempuan yang menari POM-POM oke lah kan, biasa juga tengok. Tapi cuba kalau lelaki.. Pernah? haha

Pom-pom girl + Pom-pom Boy = Pom-pom(Girl+Boy)
                       x  =  Funny :P