Lazada Malaysia

Saturday, December 1, 2012

Home » » Tutorial : Navigate-able Box For Sidebar

Tutorial : Navigate-able Box For Sidebar



Assalamualaikum. Hye, I'm Solehah.
Thanks for visit my blog.
Click the number, please.
Click 1 / 2 / 3 / 4.

Korang nampak kotak 1 2 3 4 di bahagian About Me di atas kanan sidebar blog ni? Ha, itu namanya Navigate-able Box. Kotak ni cuma untuk SIDEBAR SAHAJA tau! Sesiapa yang nak tutorial ni untuk menjimatkan ruang di sidebar blog korang tu, boleh ikut tutorial ini ye. Kalau tak nak, tak mengapa. Kalau nak, selamat mencuba.

Cara-caranya ialah :

1. Copy kod di bawah terlebih dahulu.

<style>
.adv2 ul{background:url(http://i.imgur.com/LsUfp.png);padding:5px;border:1px dashed #DDDDDD;text-align:center;width:250px;color:#555}

.adv2 p{padding:5px;text-align:left;width:250px;color:#555;}

a.tablo{-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
cursor:pointer;background:#ff3399;
width:20px;
text-decoration:none;
border:1px dashed #BBBBBB;
border-radius:33px;
color:#ffffff;
display:inline-block;
text-align:center;
}

a.tablo:hover{background:#ccc;color:#fff;}

 </style>
<div id="adv2" class="adv2">
<center><style>
.babo{background:url(http://www.snazzyspace.com/defaultimages/ff007f_pink.gif);padding:5px;border:3px solid #FF3399;text-align:center;width:250px;color:#555}

a.tablo{
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
cursor:pointer;background:#FF3399;
width:22px;
text-decoration:none;
border:3px solid #ff3399;
color:#ffffff;
box-shadow:1px 1px 3px #eee;
border-radius:33px;
display:inline-block;
text-align:center;
font:22px georgia;
}

a.tablo:hover{background:#F7E8DE;color:#fff;}

#wnsb img{max-width:245px;}
 </style>
<div class="babo">
<a class="tablo" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('1').innerHTML" >1</a>
<a class="tablo" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('2').innerHTML" >2</a>
<a class="tablo" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('3').innerHTML" >3</a>
<a class="tablo" onclick="document.getElementById('wnsb').innerHTML=document.getElementById('4').innerHTML" >4</a> </div>

<div id="wnsb" style="width:250px;color:#ff3399; padding:5px;border:3px solid #FF3399;border-top:none;font:11px arial; letter-spacing:1px;">

Navigate around. Replace this with anything/your own words.
</div>

<div id="1" style="display: none;">
This navigation no.1 , remove this and replace with anything you want to be here.
</div>

<div id="2" style="display: none;">
You can also put cbox codes here. Just anything without messing the codes.
</div>

<div id="3" style="display: none;">
The third page
</div>

<div id="4" style="display: none;">
This forth page

</div>
</center>


2. Kemudian, paste kod tadi di http://htmledit.squarefree.com/. Edit kod tu ikut citarasa korang.
Panduan :

Menukar backgound header kotak


Menukar warna sidebar header kotak


Menukar warna bulatan 


Menukar warna sidebar bulatan


Menukar tulisan dan warna tulisan 


Masukkan kod widget yang ingin dimasukkan


*Kod warna boleh dapatkan di SINI.

3. Copy kod yang selesai diedit tu.

4. Buka blog > Layout > Add a Gadget > HTML/JavaScript > Paste kod > SAVE.

5. Preview blog terlebih dahulu, kemudian baru Save!

p/s : Sejujurnya, kod untuk tutorial ni memang susah. Akhirnya, siap juga tutorial ni. Kalau ada yang tak paham tu, jangan malu-malu untuk bertanya. Krdit to Wana.

8 sweet comments:

RIZZNA said...

Wah, membaca tutorial d tghari..kongsi ìlmu

Miss N™ said...

errkk..pusing nur tgk koding2 ni..hihihi

Arni Nazira said...

Wahh . Dah lame cari tutor niyh . Tak cuba lagi . Tapi harap manjadi lahh . Sebab teringin sangat .

Si Matatajam said...

Nice sharing solehah

Wanieys a.k.a IbuQalief said...

tima kasih kongsi tuto ni solehah :-)

Mrs Velentine said...

MV kalau bab2 ni mmg ko

lelamaisara said...

pandai solehah kalu bab2 mcm ni kan...syabas....

dieyna said...

Bagus bagus.. xlokek ilmu di dada...