STUDIANA: Juli 2012

Jumat, 27 Juli 2012

Tutorial cara buat vertical menu versi Azhafizah.com

Lama x singgah kat blog http://www.azhafizah.com/,sekali singgah ternampak pulak vertical menu yang menarik tertarik dan juga da boom..

Jadi apa lagi..terus aku tengok la page source.. hehe,, jangan marah eek owner blog.. dah mmg hobi tgk page source blog rakan2 hehehe...

Oleh sebab aku ambil dari page source sihatimerahjambu aku namakan vertical menu ni versi Azhafizah.com

dalam petak kuning pada gambar di atas tu la dia vertical menu yang aku maksudkan tu..

dalam entri ni aku sertakan jugak live demo dan cara2 edit yang simple

Live Demo anda boleh lihat pada tepi sebelah kiri tu..

cara pasang pada blog senang ja

Mula2 pergi ke desbot---design---add gadget---pilih html/javascript... kemudian masukkan code di bawah

#list8 { }

#list8 ul { list-style:none;}

#list8 ul li {font:Georgia Serif, arial, serif; font-size:15px;margin:1px;text-align:right; }

#list8 ul li a { display:block; width:90px;height:33px; background-color:#8e7c5a; border-right:10px solid #f03484; padding:6px;

text-decoration:none; color:#ffffff; }

#list8 ul li a:hover { -moz-transform:rotate(-5deg); -moz-box-shadow:10px 10px 20px #000000;

-webkit-transform:rotate(-5deg); -webkit-box-shadow:10px 10px 20px #000000;

transform:rotate(-5deg); box-shadow:10px 10px 20px #000000;border-color:#8e7c5a;background-color:#f03484;}

</style>

<ul>

</ul>

</div>

untuk menukar warna background dan warna border menu tu., cuma perlu tukar code warna yang aku kasi kaler maler tu...

untuk menggantikan kaler tulisan tukar code warna yang kaler merah tu..

jika menu anda lebih atau kurang dari code yang diberi cuma perlu kurangkan atau tambahkan code

<li><a href='URL'>Nama Url</a></li>

pada code di atas tu ada 5 menu..

jika hendak dikurangkan menu tu delete 2 code <li><a href='URL'>Nama Url</a></li>

contoh

<li><a href='URL'>Nama Url</a></li>
<li><a href='URL'>Nama Url</a></li>
<li><a href='URL'>Nama Url</a></li>

jika hendak tambah menu tu tambah code <li><a href='URL'>Nama Url</a></li>

contoh

<li><a href='URL'>Nama Url</a></li>
<li><a href='URL'>Nama Url</a></li>
<li><a href='URL'>Nama Url</a></li>
<li><a href='URL'>Nama Url</a></li>
<li><a href='URL'>Nama Url</a></li>
<li><a href='URL'>Nama Url</a></li>
<li><a href='URL'>Nama Url</a></li>

untuk mengubah ketinggian menu tu ubah code tinggi yang berwarna pink tu.. ubah ikut kesesuaian yang anda rasa sesuai,,,..

di bawah ni contoh penggunaan code tu..

Bermacam2 lagi efek yang boleh ditambah tapi kena la blajar css dulu.. rajin2 la godek2 entri code tutorial tu.. hehehe..

Nanti aku buat lagi vertical menu yang lain kalau lapang... lalala

Sekian

Sekian...

Tutorial cara simpan widget dalam button sidebar

Tutorial ni atas request Misz_eyza

Sorry sebab lambat sangat buat tutorial.. lapy rosak sekarang ni..huhu.. jd dah jarang on9.. hehehe.. ni pun guna pc kawan,,,

Tutorial ni simple dan senang saja..
Misz eyza nak simpan widget dalam button pada sidebar.. bila tekan button tu baru widget tu keluar,, trik ni best juga sebab dapat mengurangkan berat loading blog..

Live demo,,

<div style="margin-top: 2px; margin-bottom: 2px" align="center"><div style="margin-bottom: 2px;" class="bigfont"><input style="margin: 0px; padding: 5px; " value="Click To Open" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Sembunyikan'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'TUTUP'; }" type="button"/><br /> </div><div style="margin: 0px; padding: 5px;" class="alt2"><div style="display: none;"><br /><center>

code widget/javascript

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

Untuk menggantikan tajuk butang tersebut.. gantikan tulisan yang di highlight Click To Open

Masukkan code widget pada tulisan code widget/javascript(gantikan tulisan tu dengan code widget)

Senangkan.. hehehe

Sabtu, 14 Juli 2012

Cara membuat cursor sendiri

Sesetengah blog yang anda lawati mempunyai kursor yang unik dan menarik. Ada yang membuat kursor dengan tulisan nama sendiri dan ada yang meletakkan gambar sebagai kursor.Mungkin anda ingin membuatnya ,jadi tutorial ini akan menerangkan cara cara untuk membuat kursor anda sendiri.

Untuk tutorial ini saya menggunakan perisian AdobePhotoshop CS5.
1.Pada menu file pilih new dan masukkan setting seperti berikut

Width 80pixels,height 45 pixels,resolution 75pixels dan background content transparent
Klik ok setelah memasukkannya.

2.Kemudian kita akan masukkan anak panah untuk kursor ini,pada toolbar pilih rectangle tool (ikon kotakdisebelah bawah ikon panah)dan ambil custom shape dari senarai yang terpapar

3.Gunakan move tool dantandakan(tick)pada show transform control untuk memutarkan anak panah .Kotak yang muncul membolehkan anda membesar,memutar dan mengubah kedudukan.

4.pilih text tool ,jenis tulisan,warna dan taipkan teks yang anda inginkan

5.Simpan kursor yang telah dihasilkan

Ambil menu file pilih save as masukkan nama fail pada file name dan pilih format png (boleh juga format gif) pada format dan klik save.

Ok dah siap pun cursor text anda.

Cara nak letak gambar sebagai kursor

1.Anda perlu sediakan imej yang hendak diletakkan sebagai kursor.Jika imej besar perlulah dipotong terlebih dahulu

memotong imej dengan photoshop:

2.Masukkan imej>>klik open>>pilih imej yang diperlukan
Pilih crop tool,kemudianklik an seretkekotakpadabahagian yang hendakdipotong.Tekan enter

3. Jika sudah berpuashati.Simpan imej anda dengan format jpeg.

4.Seterusnya ikut pada langkah 2 diatas(memasukkan anak panah)
masukkan imej yang telah anda crop..

5.File pilih>> open dan browse imej tadi.Gunakan move tool,klik dan seret ke sebelah kursor yang telah dibuat

Untuk ubah saiz pastikan show transform controls diaktifkan.kemudian save imej dalam format png atau gif.

Cara meletakkan cursor pada blog

Imej yang telah siap perlu diupload pada web site yang menyediakan kemudahan upload imej seperti imageshack atau tinypic bagi mendapatkan dapatkan url untuk imej.Setelah selesai upload dan dapatkan url tadi.

Kemudian masuk ke design>>template>edit html

cari kod </head>

dan letakkan kod seperti dibawah sebelum kod </head>:

Masukkan url imej yang anda upload dan gantikan pada bahagian teks berwarna oren.

Kemudian save.