Memasang button atau icon di atas layout blog dengan mudah

Untuk makluman anda, apa sahaja button ataupun icon sebenarnya boleh di letakkan pada mana-mana bahagian, di atas layout blog kita. Ianya seperti kita melekatkan button atau icon itu di atas paparan blog.

Jika anda lihat pada bahagian bawah header blog ini, terdapat button dan icon seperti home, aubout me,e mail dan RSS feed. Selain daripada button dan icon itu, anda sebenarnya boleh meletakkan apa sahaja button ataupun icon yang dirasakan sesuai untuk di pasang di bawah header atau di mana sahaja du atas layout blog anda.

Caranya sangat mudah dan ringkas. Anda hanya perlu menggunakan kod HTML yang di tunjukkan di bawah dan edit pada bahagian yang telah di bold.

Sebagai contoh, anda boleh menggunakan URL button-buton di bawah sebagai percubaan pada blog anda sendiri.


URL icon = http://3.bp.blogspot.com/__hqk0jmhlcE/SyU33FK7yDI/AAAAAAAAACg/VDMmDuhWkRA/s200/home2.png


URL icon = http://2.bp.blogspot.com/__hqk0jmhlcE/SyU3gTORrzI/AAAAAAAAACY/NwtAtcKGb-I/s200/home1.png


URL icon = http://4.bp.blogspot.com/__hqk0jmhlcE/SyU2dneKlHI/AAAAAAAAACA/zH54uUgC318/s200/home.png


p/s: Sila Save script template terlebih dahulu.

Langkah 1

Salin kod HTML yang berwarna biru di bawah dan paste pada notepad. Kemudian gantikan:

1. URL pada teks 'Masukkan URL'.
2. URL icon pada teks 'Masukkan URL Icon'.
3. 'Title' mengikut citarasa anda.
3. Saiz icon dengan mengubah angka 'Height' dan 'Width'.
4. Kedudukan atau kordinat di atas layout blog dengan mengubah angka pada 'top' dan 'right'. (Di ubah selepas meletak kod pada script template dan Preview)
5. 'Top' dan 'right' juga boleh di ubah. Anda boleh menggantikan 'top' kepada 'bottom' jika ingin meletakkan icon di bahagian bawah dan 'left' kepada 'right' jika ingin meletakkan icon itu di sebelah kanan.

Kod HTML:

<a style="display:scroll;position:absolute;top:130px;left:160px;" href="http://Masukkan URL" title="Home">
<img width="48" src="Masukkan URL Icon" height="48"/></a>


Langkah 2

Log in blog => Dashboard => Layout => Edit HTML. Seterusnya tick pada Expand Widget Tempaltes.

Langkah 3

Dengan menggunakan keyboard, tekan Ctrl+ F dan taipkan </body>. Seterusnya tekan Enter.

Langkah 4

Salin kod yang telah siap di edit pada notepad tadi (rujuk langkah1) dan paste kod tersebut di atas atau sebelum kod </body>. Seterusnya klik Preview.

Ubah kedudukan atau kordinat dengan edit angka pada 'top' dan 'right' sehingga anda betul-betul telah meletakkan icon itu sesuai pada tempatnya. Jika saiz icon tidak sesuai, anda boleh mengubah angka pada 'width' dan 'height'.

Setiap kali angka-angka tersebut di ubah, hendaklah di Preview sahaja. (Semasa proses ini, jangan klik Save)

Akhir sekali, jika anda telah berpuas hati dengan hasilnya, klik saja Save<.


p/s: Anda boleh menambah icon lain URL lain dengan mengulangi langkah-langkah diatas


{ 32 comments.. read them below or add one }

MrsNor MrsNor 11:43 AM
dah try tp bila tengok icon home dok kat tengah2 gambar header bukan atas gambar header..camner nak letakkan button icon tu atas gambar header bukan dlm/tengah gambar header... (faham ker pertanyan akan ni ..heheh)
Nescafe ais Nescafe ais 11:55 AM
@MrsNor

Fahamkan langkah 4 betul-betul
Nescafe ais Nescafe ais 11:55 AM
@Hazzy Ishak

Cuba, jangan tak cuba. Bukan kena bayar pun.
MrsNor MrsNor 12:20 PM
yess dah dapat...tq,,,
kalau nak buat atas tu katakan link lain pun sama ker konsep nya??

dok godek godek reply komen lak ni..harap2 berjaya..
Nescafe ais Nescafe ais 12:25 PM
@MrsNor

Ye. sama saja. Ulang step-step kat atas tu.
Yang pasal threaded komen tu, selamat mencuba. Kena faham betul-betul. Kalau tak, memang error jadinya.
sukiminna sukiminna 2:06 PM
aku suka ikon yang last tu..aku suka ikon yang nampak smooth..

aku rasa macam blog aku serabut la.macam dah banyak sangat aku godek.adeh
Nescafe ais Nescafe ais 2:10 PM
@sukiminna

Hehe. Alang-alang dah berat, biar berat terus.

cari ikon best-best kat sini.

dryicons.com
sukiminna sukiminna 2:20 PM
@7520467030714037383.0

thanks..cari free font best kat sini lak..hehe
www.urbanfonts.com
Mi vida Mi vida 8:20 PM
salam..ade icon lain x selain icon home tu...x best la kalau letak icon home je..huhu..nk jugak icon about me, emel, dll...hehehe..blh?
Mi vida Mi vida 9:49 AM
salam..ana dh jd pelawat tegar blog ni..hahaha

soalan lagi,cmne nk jadikan icon2 yg kita letak tu open in new tab?
Nescafe ais Nescafe ais 2:56 PM
@kinsyakrn

ye. Sama-sama
Nescafe ais Nescafe ais 2:56 PM
@Mi vida

Cari kat sini

dryicons.com
Nescafe ais Nescafe ais 2:59 PM
@Mi vida

Kena edit URL nya.Kena tambah target="_blank" dekat hujung URL tu.

Contoh:

http://URL_bolg.blogspot.com"target="_blank"
Mi vida Mi vida 6:22 PM
dh letak,tp error la kluar..dia x jadi
Nescafe ais Nescafe ais 6:42 PM
@Mi vida

Cuba ikut contoh bawah ni. Kena trail and error juga bro. Bukan sekali buat terus jadi.

<a style="display:scroll;position:absolute;top:130px;left:160px;" href="http://Masukkan URL.blogspot.com"target="_blank" title="Home">
<img width="48" src="Masukkan URL Icon" height="48"/></a>
Mi vida Mi vida 7:44 PM
huhu..dah bnyk kali try n error..sama jugak..dia kuar ayat ni :

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: Element type "a" must be followed by either attribute specifications, ">" or "/>".

xpela lau x blh jugak...nk wak gane..
Nescafe ais Nescafe ais 8:01 PM
@Mi vida

Boleh bro. Cuba jarakkan sikit target=_blank tu.

Try lagi sekali guna kod bawah ni

<a style="display:scroll;position:absolute;top:130px;left:160px;" href="http://Masukkan URL.blogspot.com" target="_blank" title="Home">
<img width="48" src="Masukkan URL Icon" height="48"/></a>
norain kamaruzaman norain kamaruzaman 9:34 PM
thanks a lot!! akhirnya i blh wat background blog guna design sndiri.. thanks ya!!
Mi vida Mi vida 9:35 PM
Alhamdulillah..syukron banget ya bro..dh boleh..tq..tq..tq..cayalahhh
Nescafe ais Nescafe ais 10:49 PM
@norain kamaruzaman

Iya. Sama-sama
Nescafe ais Nescafe ais 10:50 PM
@Mi vida

Iya. Sam-sama sih. Mampir lagi kesini ya kang
Armyrule Armyrule 7:01 PM
mcm mna plak nak buat cam kat blog ni buat...kat tepi kiri kanan tu...button home ngan back to top..yg ni sy berminat sebab simple
aien_Raz aien_Raz 11:18 PM
nk cuba.. tp.. cam complicted jer..hehe.. maybe next time.. thanx.. (^^,)
*~ eLiEnZ 87 ~* *~ eLiEnZ 87 ~* 10:51 PM
salam, sy berminat dengan icon no2, nak minta semua koleksi icon2 tu boleh? saya dah cari, tak jumpa2 pun...
*~ eLiEnZ 87 ~* *~ eLiEnZ 87 ~* 10:54 PM
yey! da jumpe icon yang cantik itoo!!
thnksss!!
PKG Langkap PKG Langkap 3:43 PM
thanks awk..menjadi tips awk tu...
kaheran80 kaheran80 12:16 PM
tq bro...menjadi tips awak
mohd farid mohd farid 5:41 AM
ayoyo..sshnya bginner ni..xpaham la..huhu
Shukor Shukor 2:26 AM
thnk utk tips nie.jdi, sgt mudah.pasni ble sy try wat link button lain plak :)
helena's helena's 3:55 PM
saya nak tanye..kalau saya nak buat home dan macam-macam segala lagi..dia sambung camane?katakan saya nak buat sebelah home tu about me.kat mana nak letak html tu?heehe paham tak?