Selasa, 18 Mei 2010

Menu bar tanpa hack template


Ini adalah cara yang ringkas untuk meletak menu bar melintang pada blog.Kebanyakkan menu bar diletakkan dengan kita perlu mengubahsuai pada template dengan meletakkan kod padanya.Tapi untuk menu bar ini cukup meletakkannya pada add gadget.

Daripada paparan blog anda klik pada customize - Page Elements - Add a gadget - HTML/JAVASCRIPT



| <a href= "http://namabloganda.blogspot.com/pagename">label </a> | 

kod ini adalah sebagai mana cara anda masuk masukkan link pada blog.Tanda garis menegak yang ada
pada link tu terletak sekali dengan butang pada butang backslash(\) pada keyboard.
Tujuan nya adalah untuk meletak pembahagi antara ruang seperti: HOME | CONTACT |

setelah meletak kod tadi,jangan lupa save terlebih dahulu.selepas itu seret dan letakkan dibawah header

Cara diatas cuma teks sahaja dan tidak nampak macam butang navigasi.untuk lebih menarik sedikit kita boleh gunakan dalam bentuk table.Cara membuat table ini ada saya terangkan dalam entri sebelum ini.
contohnya seperti dibawah ini.


masukkan kod ini:

<table border="1" style="width: 300px;"><tbody>
<tr bgcolor="#e0f8e0">
<td align="center" ><a href="URL 1">tab 1</a></td>
<td align="center"><a href="URL 2">tab 2</a></td>
<td align="center"><a href="URL 3">tab 3</a></td>
 (boleh ditambah dibawah ini jika ada lagi link hendak dimasukkan)
</tr></tbody></table>

bg color #e0f8e0 adalah kod warna boleh tukar mengikut kehendak anda dan kod boleh disemak disini.
width:300px adalah lebar column--tukarkan mengikut kesesuaian anda.
URL 1 hingga  URL 3--masukkan url anda
tab1 hingga tab 3 teks yang akan dipaparkan pada jadual.

Selamat mencuba.

Senin, 17 Mei 2010

membuat 'auto hide' Navbar

Terdapat cara lain untuk menghilang Navbar pada blog anda selain dari menghilangkan terus.Kita juga boleh membuat Navbar tersebut menjadi Auto Hide (muncul bila diletakkan pointer  pada nya).Cara ini tidak menyalahi peraturan Blogger kerana masih terdapat navbar lagi.Jika anda berminat dengan navbar ini ikuti langkah berikut.

1.Klik pada  Dashboard,dan pilih Edit HTML.
2.Kemudian carilah kod  berikut   body {
 

body {
font: 100% Arial, Helvetica;
background: #000000;
color: #333;
}

3.Letakkan Kod berikut di atas kod tadi.

#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}

#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}



menjadi seperti ini:


#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}

#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

body {
font: 100% Arial, Helvetica;
background: #000000;
color: #333;
}


4.Kemudian klik save template

5.Lihat blog anda kembali untuk melihat tampilannya.

Sabtu, 15 Mei 2010

Cara pasang Auto Read more

Jika anda sedang mencari bagaimana untuk meletakkan  read more pada blog anda,disini saya akan tunjukan cara baru membuat Read More.Perkataan Read more atau baca seterusnya  adalah biasa terdapat pada mana blog dan web.Tapi kali ini agak berbeza dengan yang terdahulu kerana sistem auto Read More kali ini,kita tidak perlu lagi menulis kod sebelum posting seperti <div class="fullpost">  dan sebahagian lagi setelah <div class="fullpost"> kerana dengan sistem auto read more ini semua posting kita akan terpotong dengan sendirinya. Selain itu juga sekiranya terdapat gambar dalam posting,ia terpapar dalam bentuk thumbnail pada halaman hadapan secara Automatik,tanpa perlu menukar apa apa setting lagi.
dibawah ini adalah contoh paparan Auto read more ini: 


Sekiranya anda ingin memasang Auto Readmore Versi terbaru ini.Ikutilah langkah langkah dibawah ini:

Nota : Jika anda pernah memasang read more sebelum ini ,anda perlu kembalikan ia seperti asal.Caranya ialah dengan Klik menu Layout dan pilih Edit HTML.Tandakan pada Expand Template Widget.Setelah itu delete kod read more lama anda yang berwarna hijau seperti dibawah ini :



<div class='post-header-line-1'/>
<div class='post-body'>

<b:if cond='data:blog.pageType == "item"'>

<style>.fullpost{display:inline;}</style>

<p><data:post.body/></p>

<b:else/>

<style>.fullpost{display:none;}</style>

<p><data:post.body/></p>

<a expr:href='data:post.url'>Readmore</a>

</b:if>

<div style='clear: both;'/>


Seterusnya ikuti langkah berikut:

1. Setelah anda login ke blogger, seterusnya masuk kemenu Layout dan pilih Edit HTML. Klik pada kotak"expand widget template" dan cari kod  </head>.

2. Copy dan paste kod  dibawah ini tepat di atas kod </head> yang anda cari tadi.



<script type='text/javascript'>

var thumbnail_mode = "float";
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;

</script>


<script type='text/javascript'>

//<![CDATA[

/******************************************

Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks

********************************************/

function removeHtmlTag(strx,chop){

if(strx.indexOf("<")!=-1)

{

var s = strx.split("<");

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

if(s[i].indexOf(">")!=-1){

s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);

}

}

strx = s.join("");

}

chop = (chop < strx.length-1) ? chop : strx.length-2;

while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;

strx = strx.substring(0,chop-1);

return strx+'...';

}

function createSummaryAndThumb(pID){

var div = document.getElementById(pID);

var imgtag = "";

var img = div.getElementsByTagName("img");

var summ = summary_noimg;

if(img.length>=1) {

imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';

summ = summary_img;
}


var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';

div.innerHTML = summary;

}

//]]>

</script>
3. kemudian  anda cari kod <data:post.body/>. bila anda jumpa kod tersebut. gantikan,  kod <data:post.body/>  dengan kod dibawah ini.


<b:if cond='data:blog.pageType != "item"'>

<div expr:id='"summary" + data:post.id'><data:post.body/></div>

<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>

<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE- <data:post.title/></a></span>

</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>


4.Kemudian klik save
5. Selesai.


Nota: : Kod yang mempuyai cetak tebal(bold) dan berwarna hijau, pada  kod  diatas mempunyai maksud seperti berikut.


var thumbnail_mode = "float";  (menunujukkan posisi gambar thumbnail  pada  kedudukan di sebelah kiri.

summary_noimg = 250; (menunjukkan   berapa banyak huruf yang akan dipaparkan dalam posting anda tanpa gambar)gantikan mengikut  keinginan anda)

summary_img = 250; (menunjukkan   berapa banyak huruf yang akan dipaparkan dalam posting anda yangtanpa terdapat gambar)   gantikan mengikut  keinginan anda)

img_thumb_height = 120; (ukuran tinggi gambar yang akan dipaparkan)
img_thumb_width = 120; (ukuran lebar gambar yang akan dipaparkan)
READ MORE = gantikan dengan perkataan seperti baca seterus nya,baca lagi,seterunya dll.

Untuk menukar perkataan read more kepada ikon dan menghilangkan tajuk posting disebelahnya rujuk pada artikel disini

Jumat, 14 Mei 2010

Tulisan dengan latar belakang imej

Kali ini saya menunjukkan cara membuat tulisan berlatar belakangkan gambar atau imej.Cara nya amat mudah sekali,untuk itu ikuti langkah dibawah ini.

1.Buka imej yang dikehendakki,klik menu file dan pilh open
2.Salin imej tersebut tekan butang Ctrl + J,muncul layer background copy
3.Kemudiah pilih ikon type tool(atau tekan butang T)
4.Taipkan perkataan yang dikehendakki,sebelum itu pilih jenis tulisan dan saiz font pada menu bar diatas.
buat tulisan
5.Sesudah menaip klik dan seret bingkai yang ada pada sekeliling teks untuk membesarkan tulisan tersebut
6.Kemudian tekan butang enter.
7.Klik dan seret layer background copy dan letakkan diatas layer teks.

bingkai

8.Pada panel layers pilih  layer background copy dan teks  dengan menekan butang Shift

clipping mask

9.Letak kursor pada garisan diantara kedua layer,  Tekan butang Alt untuk buat clipping mask(muncul simbol bulat) dan klik pada sempadan dua layer tersebut(atau  guna (Alt+Ctrl+G)

layer

10.Klik pada simbol mata disebelah layer background

tulisan dengan latar belakang imej
ok dah siap pun tulisan berlatar belakang imej.Selamat mencuba

Masaalah komputer selalu restart

Salah satu masaalah atau kerosakan yang selalu berlaku pada sebuah komputer adalah keadaan dimana komputer selalu restart dengan sendiri. Dalam kes  komputer selalu restart ini tentu saja sangat membosankan terutama apabila kita sedang membuat  kerja, tiba-tiba komputer restart sendiri dan kita tidak sempat menyimpan dokumen tersebut. Mengikut  pengalaman saya ada  beberapa sebab  yang membuat komputer sering restart sendiri, diantaranya adalah:

1.RAM (memori) yang rosak

RAM yang rosak juga boleh menyebabkan komputer restart dengan sendirinya.Cuba gunakan memori yang lain untuk menguji samada ram itu rosak.Sekiranya ada dua ram cuba tanggalkan salah satu untuk melihat yang mana rosak(tukar ganti untuk melihat yang mana bermasaalah..Jarang berlaku  kedua dua nya rosak secara serentak.

2. Masaalah processor panas 
 
Salah satu sebab komputer jadi hang dan restart sendiri adalah disebabkan processor yang panas.Untuk memeriksa masaalah kepanasan pada pada processor,terdapat beberapa cara yang boleh dilakukan:  

  • melihat keadaan suhu processor melalui paparan pada  hardware monitor di BIOS
  • gunakan software bagi monitor kepanasan seperti Core Temp

  • dengan membuka casing CPU dan meraba sendiri temperatur pada bagian Pendingin (Cooler) Processor. 
Punca yang menyebabkan kepanasan pada Processor:
  • Kipas pada processor (fan) tidak berfungsi.
  • Sirip pada Pendingin Processor tersumbat dengan debu,selalu berlaku bila menggunakan komputer ditempat yang berdebu.Habuk habuk yang melekat mestilah dibersihkan.
  • Perhatikan juga mungkin kipas pada power supply tidak berputar.
3. Power Supply yang bermasaalah

Kemungkinan power supply membekalkan kuasa yang tidak mencukupi.Cuba gunakan power supply lain yang diketahui berfungsi dengan baik.Power supply dengan kuasa minima 500 watt adalah perlu bagi kegunaan pada komputer sekarang.

4. Kad  Grafik rosak

Kemungkinan kad grafik yang rosak.Biasanya kad grafik yang rosak cepat panas pada bahagian sirip pendinginnya .Cuba periksa kad tersebut.

5. Disebabkan bad sector pada Hardisk
 

Sekiranya terdapat bad sector pada hard disk akan menyebabkan ia menjadi hang atau muncul skrin biru.penyelenggaraan berkala seperti scan disk dan defragmenter perlu di lakukan bagi mengelakkan perkara ini berlaku.Komputer juga hendak lah di tutup dengan menggunakan fungsi shut down.

 

Senin, 10 Mei 2010

Objek terkeluar dari gambar

Wah objek terkeluar dari gambar!!.Bunyi tajuknya boleh tahan juga(psst..tak tau nak letak title apa yang sesuai sebenarnya)Apa sebenarnya yang dimaksudkan?.Untuk itu cuba lihat gambar dibawah ini.

Tentunya korang dah biasa tenguk gambar water lilies ni.Ada kat dalam folder My documents---sample pictures ...Ini lah yang saya maksudkan objek terkeluar dari gambar.
objek terkeluar

Untuk tutorial ini  saya akan gunakan imej dibawah.Korang boleh copy jer imej ni atau gunakan gambar lain.

1.Mula mula open imej yang dikehendakki.Klik menu file dan pilih open atau double klik pada paparan kosong pada adobe photoshop untuk membukanya.


2.copy imej tadi.Tekan butang Ctrl+J dan background copy akan muncul.
3.klik pada ikon create new layer atau tekan Shift+Ctrl+N untuk masukkan satu layer baru.Jika palet layer seperti dibawah tidak muncul tekan butang F7
insert new layer

   
4.Masukkan layer masuk pada layer tadi,tekan ikon add layer mask.
5.klik pada kotak sebelah kiri pada layer 2.gunakan Rectangular Marquee Tools,klik dan seret pada imej untuk membuat garisan  pada gambar.Tinggalkan bahagian hujung bagi menampakkkan bahagian yang akan dibuat nampak terkeluar dari imej

baut bingkai pada gambarimej terkeluar

6.Tekan butang Ctrl+Backspace untuk mengisi kotak tadi kepada warna putih.
7.Tekan butang Alt dan buat lagi selection bagi membentuk bingkai untuk gambar
8.Pilih menu select pilih inverse,tekan butang delete dan bingkai telah terhasil.Tekan butang Ctrl+D untuk
  deselect selection tadi.klik pada ikon mata pada layer background untuk melihat bahagian yang telah
  dipotong.

9.Kemudian pilih layer 1,gunakan polygonal lasso tool atau magnetic lassso tools dan buat selection dibahagian luar bingkai tadi(bahagian ini kita kan buang) kemudian tekan butang delete apabila selesai membuat selection.
imej


10.Klik pada ikon mata pada layer background untuk  melihat bahagian yang telah dipotong.tekan butang CTRL +D untuk deselect.
11.Klik pada layer mask(kotak sebelah kanan pada layer 2).Setkan foreground kepada warna putih.Gunakan berus untuk membuang bahagian bingkai yang melindungi imej .
cara buat bingkai pada foto

12.Pilih layer 1 semula.Klik ikon add layer style dan pilih drop shadow untuk letak bayang pada bahagian yang dipotong.laraskan opacity dan distance kepada nilai yang sesuai.
 layer
bayang pada gambar
 
13.Pilih layer 1  dan layer mask tadi(tekan Shift),klik kanan pilih merge layers(gabung ketiga tiga layer).
14.klik menu edit--->transform ---> Rotate 90 CW.kemudian pilih menu Menu filter---distort----shear dan klik pada graf untuk bentuk gambar melengkung.Kemudian klik ok.
imej melengkung

15.Kemudian klik menu edit---- Transform ------ Rotate 90 CCW untuk tegakkan semula gambar.
16.Klik pada bingkai yang muncul dan seret untuk meletakkan imej supaya muat pada paparan.

motor saya

Hasilnya:
motor rempit

Minggu, 09 Mei 2010

Membaiki imej yang kelabu

Nota:Untuk tutorial ini saya menggunakan adobe photoshop CS 2
Kali ini saya hendak tunjukkan bagaimana hendak membetulkan imej yang kelabu seperti pada gambar dibawah.Gambar pemandangan diwaktu matahari hendak terbenam memang cantik kalau kita ambil.Tapi sayang warnanya kelabu.Sepatutnya nampak agak kemerah merahan.Nampak macam ada kabus. 
baiki imej kelabu


  • Mula mula buka imej yang anda simpan.Klik Menu file dan pilih open.
  • kemudian browse tempat simpan fail,jika dah jumpa pilih open.
  • Kemudian klik menu Image,Adjusment dan pilih shadow/highlight.
  • Imej serta merta menjadi terang.
imej terang
  • Laraskan Amount pada pada Shadows 50% dan highlights kepada 85% dan .kemudian klik pada kotak show more options. 
  • Kemudian pada color corrections laraskan sehimgga 100%.Pelarasan ini ikut sedap mata kita   memandang. Mungkin korang mempunyai citarasa yang lain.Cuma laraskan setting yang ada disini.
  • Seterusnya jika hendak membuat pelarasan atau mengubah warna .Klik menu image,kemudian pilih Hue/Saturation.Kemudian laraskan pada Hue untuk menampakan  lagi warnanya.
Hasilnya:

buat pelarasan warna


Selamat mencuba.