Tutorial vertical menu tab

Assalamualaikum , kebelakangan ni ramai yang request tuto , macam mana nak buat ini dan itu . Tape2 Lily akan buat slow2 ya ! Kali ni tuto direquest oleh Nabila . Jom kita belajar sama2 camne nak buat vertical menu tab ? Apa benda tu ? Dekat bawah ni hah ada :

Step 1

Dashboard --> Layout --> Add a gadget --> Html/javascript

Step 2

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */

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

.sidebarmenu ul{

width:250;

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: #C6C6C6; /*background of tabs (default state)*/}

.sidebarmenu ul li a:visited{

color: white;}

.sidebarmenu ul li a:hover{

background-color: #000000;}

/* 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="LINK">HOME</a></li>

<li><a href="LINK">ABOUT ME</a></li>

<li><a href="LINK">TUTOTIAL</a></li>

<li><a href="LINK">TAGBOARD</a></li>

</ul>

</div></center></center>

copy dan paste ke dalam html/javascript

merah : width sidebar korang , ikut keselesaan masing2
Biru : warna tab sebelum cursor sentuh
Purple : warna tab hover semasa cursor menyentuh
Hijau : Link bila kita tekan tab tu
Kuning : Perkataan yang nak ditulis


Kalau nak tukar warna boleh pergi ke laman ni >> SINI <<


dah siap ? Tekan save ! senang kan ? Meh cuba2 kalau nak siap kasi tahu tau ! 

Tutorial Membuat Header Transparent

Assalamualaikum semua,

Hari ni Lily berbesar hatinya ingin membuat satu tutorial yang mungkin ramai bloggers nak tahu iaitu membuat heder transparent ! tapi kalau dah tahu tu tutup mata jelah k. Lily buat ni bukannya ada request dari sesiapa pun cuma saja2 . Nak berkongsi ilmu apa salahnya kan. So, let get start ! >__<

Lily nak ajar ni menggunakan Adobe Photoshop CS3 . sesiapa yang belum mempunyai  Adobe Photoshop CS3 bolehlah download di >>SINI<< . Maaflah jika ada sesiapa yang menggunakan Adobe Photoshop CS5 , ianya hampir kurang sama je , so just take a look okay ~! Lily nak buat simple je ni, kalau nak yang lebih advance, boleh rujuk Lily secara personal atau bagi komen lepas ni . Jom kita belajar dulu !!

Kita pergi step by step okay ?

STEP 1

Buka Photoshop --> Pergi ke File --> Tekan New

Ok, lepas tu weight dan height tu, ikut citarasa korang sendiri ya ! Jangan baiki yang lain, pastikan background contents tu korang pilih transparent ya ~! And then tekan OK

Ia akan keluar macam ni nanti :

STEP 2

Tekan huruf T untuk buat tittle ye. Tulislah apapun sebagai contoh :

Aish, tak habis lagi . Kalau nak tukar warna font tu bolehlah tukar di bahagian color2 warna warni tu okey . And then untuk tambahkan gambar dalam header kita , nak buat camne ehk ? Jom kita tengok step seterusnya .

STEP 3

Tekan File --> Tekan Open --> Pilih gambar yang sesuai

Korang boleh tengok dibawah sebagai contoh , nanti akan keluar macam ni .

Ok bagus, so nak buat camne pulak lepas ni. Cara nak hilangkan background putih pada hello kitty tu supaya tak nampak cacat header ni, tengok gambar dibawah :

Klik gambar untuk larger image

Kita tekan Quick Selection Tool dan lepas tu ambil bahagian hello kitty je.

  ===>

Finish ? bagus ....

STEP 4

Seretkan gambar Hello Kitty tadi kedalam header . Seret ya !

Nanti akan jadi macam ni . Lawa tak ? err simple je ? tape lha. Ni cuma tutorial . Korang buat nanti pasti lebih cantik kan . 

STEP 5

Nak save ? Jangan tekan save as .... huh tengok betul2 ya.

Tekan File ---> Tekan Save for Web & Devices

Pastikan jadi camni ok, lepas tu pastikan korang pilih GIF ya , kalau tak, bukan transparent la. Lepas tu jangan segan2 tekan SAVE !

PERHATIAN

Sesiapa yang telah menggunakan tutorial ni, pandai2 la komen ya. Tak ya lah buat tak tahu je. Penat2 orang buat tuto ... haha n lagi satu kalau nak buat tuto credit Lily tau . Credit blog ni. Jangan jadi copycat ! N jangan nak curi2 pulak gambar2 tu. Buat sendiri la. Orang dah watermark tu . Tape2 , Lily tak makan orang la... huhu

Tutorial memasang favicon

Assalamualaikum ,
kali ni takde cerita panjang2 , malas nak mengarut dah ... nak cepat ni ! lily ada keje pulak ni , nak siapkan request dari kak lisa. Macam mana nak letak favicon ? Apa itu favicon ? Tengok blog Lily , dekat tepi url tu ada gambar Conan kan ? Hah , itulah favicon ! so, camne nak tukar favicon blogger ke favicon comel2 tu ? meh sini nak ajar !

Step 1
Pergi ke edit html >> tick expand widget templates dan tekan ctrl+f cari perkataan  

]]></b:skin>

Step 2
Dah jumpa ? sekarang copy code dibawah ni dan paste dibawah code diatas . Faham ?

<link href='URL IMAGE' rel='shortcut icon' type='image/x-icon'/>
<link href='URL IMAGE'/>

Selesai ? Tak lagi , gantikan url favicon korang yang comel lotte tu ke url favicon anda! Ni ada freebies favicon skit , silalah ambil ya !

http://i892.photobucket.com/albums/ac125/maliihah_coolz/pic010demoji_19402678decoojp.gif

http://i892.photobucket.com/albums/ac125/maliihah_coolz/pic019demoji_16165941decoojp.gif

http://i892.photobucket.com/albums/ac125/maliihah_coolz/24.gif

http://i892.photobucket.com/albums/ac125/maliihah_coolz/15.gif

http://i892.photobucket.com/albums/ac125/maliihah_coolz/pic019demoji_17714269decoojp.gif

Dah siap ? Boleh preview dulu , kalau tak ada apa2 boleh save !
credit : Baby doll