Elegance

Sabtu, 18 Oktober 2014 - 0 Says

Hy Hy ... T^T Oky ... Berhubung Vannesa request ,jadi bikin postingan deh :v Oke ,langsung aja yak Q v Q //

Letakan kode ini di HTML/JavaScript atau di Sidebarmu

<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:#fff;

width:20px;

text-decoration:none;

border:1px dashed #BBBBBB;

border-radius:33px;

color:#555;

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://i.imgur.com/idEbA.png);padding:5px;border:3px solid #F2F4F2;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:#F2F4F2;

width:20px;

text-decoration:none;

border:3px solid #fff;

color:#fff;

box-shadow:1px 1px 3px #eee;

border-radius:33px;

display:inline-block;

text-align:center;

font:16px calibri;

}

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:#ccc; padding:5px;border:3px solid #F2F4F2;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>

Ubah kode tadi sesukamu, tapi jangan di hapus, kamu ganti Url background sama kode warnanya saja.

Credit : Ka Salsa

Posting Komentar

Thanks For Read My Post Q v Q // ......
Please Appreciate My Work ^ v ^ And Dont Forget Follow My Blog

Thanks Before

About

It's Me

Hello ! My name Mullia Zahra Tiffany Putri. Can call me Zahra, Im 14 Years Old at 9th grade. Like This Blog ?Just Follow This Blog. Please don't ever dare open page source and copy any content of this blog.

Ma Bestie

Tagboard

Ask Me ?

Archive

Memory

Membuat Comment Form

Secret Box

Want to open ?

D A Y S

Open the box please.
D = Ma Status
A = Blog Status
Y = Ma Banner
S = Search box

Credits

Helping Me

Sabtu, 18 Oktober 2014 - 0 Says

Navigate Able Box Like Mine #1

Hy Hy ... T^T Oky ... Berhubung Vannesa request ,jadi bikin postingan deh :v Oke ,langsung aja yak Q v Q //

Letakan kode ini di HTML/JavaScript atau di Sidebarmu

<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:#fff;

width:20px;

text-decoration:none;

border:1px dashed #BBBBBB;

border-radius:33px;

color:#555;

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://i.imgur.com/idEbA.png);padding:5px;border:3px solid #F2F4F2;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:#F2F4F2;

width:20px;

text-decoration:none;

border:3px solid #fff;

color:#fff;

box-shadow:1px 1px 3px #eee;

border-radius:33px;

display:inline-block;

text-align:center;

font:16px calibri;

}

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:#ccc; padding:5px;border:3px solid #F2F4F2;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>