Tutorial : Cute Sidebar

 

Assalamualaikum .

Hihi , maybe tak pernah dengar kan ? Tapi , I tried to make it . Lalalala ~ , Senang je . Copy , paste , tukar . So ,  ikut betul2 step dia . Bye .

Before that , this is Cute Sidebar . // Takde ah cute mane . Sy yang cute sebenarnya . :p

1 ) Design - Add A Gadget - Html/Javascript

IMAGE .

// Yang ni , upload dulu image  . Ape2 je , yang dah edit ,

belum edit . Tp,  pastikan kecik eh .Jangan besar sangat . 

Nanti , over weight .hihi

Paste code ni : 

<center><a href="URL GAMBAR ANDA" target="_blank"><img src="http://i1102.photobucket.com/albums/g451/AuniComel/index.png" alt="Photobucket" border="0" /></a>

NOTE . 

// Ha, yang ni pulak ,  cerita je apeape .

Nama , umur , Likes ,Hates . Tp, jangan panjang sangat.

Nak cerita banyak2 , buat dekat entry . Okay ? :3

" Hello ! I'm the daugther of

K and K , Auni .

Love trying new things.

Welcome ! You can ask me

here :) "

NAVIGATION TAB  - Kak lettha - 

// Yang ni pulak untuk yang ada banyak pages .

I mean , tutorial  , about me , freebies apa semua tu . Kumpulkan dekat sini je 

Nampak cool ~ Lol . 

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */

/*URL: http://www.dynamicdrive.com/style/ */

.sidebarmenu ul{

width:160px;

text align:center;

list-style-type: none;

font: normal 13px Century gothic;

}

.sidebarmenu ul li{

position: relative;

}

/* Top level menu links style */

.sidebarmenu ul li a{

display: block;

overflow: auto; /*force hasLayout in IE7 */

color: white;

text-align:center;

text-decoration: none;

padding: 0px;

}

.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{

background-color: #D8D8D8; /*background of tabs (default state)*/}

.sidebarmenu ul li a:visited{

color: white;}

.sidebarmenu ul li a:hover{

background-color: #C38EC7;}

/* Holly Hack for IE \*/

* html .sidebarmenu ul li { float: left; height: 1%; }

* html .sidebarmenu ul li a { height: 1%; }

/* End */

</style>

<script type="text/javascript">

//Nested Side Bar Menu (Mar 20th, 09)

//By Dynamic Drive: http://www.dynamicdrive.com/style/

var menuids=["sidebarmenu1"] //Enter id(s) of each Side Bar Menu's main UL, separated by commas

function initsidebarmenu(){

for (var i=0; i<menuids.length; i++){

var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")

for (var t=0; t<ultags.length; t++){

ultags[t].parentNode.getElementsByTagName("a")[0].className+=" subfolderstyle"

if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu

ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item

else //else if this is a sub level submenu (ul)

ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it

ultags[t].parentNode.onmouseover=function(){

this.getElementsByTagName("ul")[0].style.display="block"

}

ultags[t].parentNode.onmouseout=function(){

this.getElementsByTagName("ul")[0].style.display="none"

}

}

for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars

ultags[t].style.visibility="visible"

ultags[t].style.display="none"

}

}

}

if (window.addEventListener)

window.addEventListener("load", initsidebarmenu, false)

else if (window.attachEvent)

window.attachEvent("onload", initsidebarmenu)

</script>

<div class="sidebarmenu">

<ul id="sidebarmenu1">

<li><a href="URL">HOME</a></li>

<li><a href="URL">PUTERI AUNI</a></li>

<li><a href="URL">TUTORIALS</a></li>

<li><a href="URL">CREDITS</a></li>

</ul>

</div></center>

<style type="text/css"></style>

<script type="text/javascript"><br />//Nested Side Bar Menu (Mar 20th, 09)<br />//By Dynamic Drive: http://www.dynamicdrive.com/style/<br />var menuids=["sidebarmenu1"] //Enter id(s) of each Side Bar Menu's main UL, separated by commas<br />function initsidebarmenu(){<br />for (var i=0; i<menuids.length; ultags="document.getElementById(menuids[i]).getElementsByTagName(" t="0;" id="=" left="ultags[t].parentNode.offsetWidth+" left="ultags[t-1].getElementsByTagName(" onmouseover="function(){" display="block" onmouseout="function(){" display="none" t="ultags.length-1;">-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars<br />ultags[t].style.visibility="visible"<br />ultags[t].style.display="none"<br />}<br />}<br />}<br />if (window.addEventListener)<br />window.addEventListener("load", initsidebarmenu, false)<br />else if (window.attachEvent)<br />window.attachEvent("onload", initsidebarmenu)<br /></script>

<div class="sidebarmenu">

<ul id="sidebarmenu1">

</ul>

</div>

Notes (!) : 

// Yang 160 , width dia . Ikut kepada

width blog korang lah . Kalau width blog korang 250 . 

Buat 230 . Kecikkan sikit . Jangan sama besar , tak lawa :3

// Yang #D8D8D8 , background navigation tab korang  sebelum 

mouse dihalakan .

// Yang  #C38EC7  , background navigation tab korang

selepas mouse dihalakan . # Jangan pulak

korang cari tikus letak situ . hihi

// Yang URL , tukar kepada URL korang .

E.g : http://sayacantik.blogspot.com/tutorial.html 

# Copy betul2 URl ni ehh .

// Yang  diboldkan+digariskan  , tukar kepada

nama yang korang nak . E.g , yang tutorial tu ,

Stuff . 

Faham tak ? Okay  , jom teruskan lagi .

SHOUTBOX 

Paste code Shoutbox korang .

<center>
<!-- Begin ShoutMix - http://www.shoutmix.com --><iframe title="puteriauni123" src="http://www.shoutmix.com/?puteriauni123" frameborder="0" height="200" scrolling="auto" width="100%">&amp;amp;amp;amp;amp;lt;a href="http://www.shoutmix.com/?puteriauni123"&amp;amp;amp;amp;amp;gt;View shoutbox&amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;gt;</iframe>
<a href="http://www.shoutmix.com/" title="Get your own free shoutbox chat widget at ShoutMix!"></a>
<!-- End ShoutMix --></center>

Tu je  . Hope korang faham . 

Assalamualaikum .