Menu pada Sidebar.

Assalamualaikum,

Heloo semua. Sorry cuz da lama tak hupdat tutorial. Atie busy cikit kebelakangan nie. Tutorial kali nie sebenarnya da ramai yang request. Tutorial nie camane nak buat Menu cam Atie tuh. Yang kat Sidebar tuh. Nampak tak? Bagus kalau nampak. HEHE. Tutorial ini nak bagi blog kita nampak kemas. Menu cam nie ada dua jenis. Iaitu kalau sentuh guna cursor menu tersebut, satu bergerak ke kiri atau kanan cam menu belog AtieTutorial nie. Satu lagi akan rotate macam belog AtieOv nie. Jom mula ;

• Nampak tak icon seperti dibawah ini?Bagus. Klik anak panah sebelah icon 'Go to post list'. Klik 'Layout'.

• Korang pergi ke Sidebar dan Klik 'Add a Gadget'.

• Korang boleh la klik 'HTML/ JavaScript'.

• Boleh copy segala macam HTML kat ruangan 'Content' tuh.

Satu : Menu bergerak ke kiri atau kanan.

• Copy code dibawah ini di ruangan 'Content'.

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */

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

.sidebarmenu ul{

width:230;

text align:center;

list-style-type: none;

}

.sidebarmenu ul li{

position: relative;

}

/* Top level menu links style */

.sidebarmenu ul li a{

display: block;

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

color: black;

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: #99FF66;

height: 100; /*background of tabs (default state)*/}

.sidebarmenu ul li a:visited{

color: white;}

.sidebarmenu ul li a:hover{

background-color: #99FF66;

-webkit-transition-duration: 1.0s;

border-left:100px solid #99FF66;

-moz-border-radius: 35px;

border-radius: 35px;}

/* 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="http://[LINK].blogspot.com/">HOME</a></li>

<li><a href="http://[LINK]">TUTORIAL's</a></li>

<li><a href="http://[LINK]">REQUEST</a></li>

</ul>

</div><br /><br />

Merah : Korang boleh tukar warna kesukaan anda. Klik [SINI]
Hijau : Kelajuan kalau korang sentuh dengan cursor. Korang boleh ubah. Lagi kecil angka tuh, lagi laju.
Biru : Korang boleh tukar border mengikut kesukaan anda. Korang boleh klik [SINI].
Kuning : Tukar mengikut menu apa yang anda ingin buat.
Pink : Link menu tersebut. Kalau korang klik pada Menu tersebut, ia akan keluar pada link yang korang telah tetapkan.

Dua : Menu bergerak secara rotate.

• Copy code dibawah ini di ruangan 'Content'.

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */

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

.sidebarmenu ul{

width:230;

text align:center;

list-style-type: none;

}

.sidebarmenu ul li{

position: relative;

}

/* Top level menu links style */

.sidebarmenu ul li a{

display: block;

overflow: none; /*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: #000000; 

text-shadow: 2px 2px 3px #819FF7;

height: 100; /*background of tabs (default state)*/}

.sidebarmenu ul li a:visited{

color: white;}

.sidebarmenu ul li a:hover{

-webkit-transition-duration:1s;

-webkit-transform: skew(5deg,-5deg);

-moz-transform: rotate(2deg);

-webkit-transform: rotate(2deg);

background-color: #819FF7;

text-shadow: 2px 2px 3px #999999;

-moz-border-radius: 35px;

border-radius: 35px;

color: black;}

/* 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="http://[LINK].blogspot.com/">HOME</a></li>

<li><a href="http://[LINK]">TUTORIAL's</a></li>

<li><a href="http://[LINK]">REQUEST</a></li>

</ul>

</div>

Merah : Dua merah colour sebelum korang sentuh. Dua merah bawah tuh colour selepas korang sentuh (hover). Korang boleh tukar warna kesukaan anda. Klik [SINI]

Hijau : Kelajuan kalau korang sentuh dengan cursor. Korang boleh ubah. Lagi kecil angka tuh, lagi laju.
Oren : Berapa darjah yang anda ingin kan apabila disentuh. (rotate)
Biru : Korang boleh tukar border mengikut kesukaan anda. Korang boleh klik [SINI].
Kuning : Tukar mengikut menu apa yang anda ingin buat.
Pink : Link menu tersebut. Kalau korang klik pada Menu tersebut, ia akan keluar pada link yang korang telah tetapkan.

*Rasa ayat atie macam tunggang langgang jea. Harap-harap korang paham.

Takpaham? Boleh komen dichatbox. Terima Kasih.

---

Selamat Mencuba dan Terima Kasih Sudi Men-Follow Tutorial yang tidak seberapa.
Sedekahkan satu 'LIKE' Ya.

---