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
Memasang button atau icon di atas layout blog dengan mudah

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)

@MrsNor

Fahamkan langkah 4 betul-betul

@Hazzy Ishak

Cuba, jangan tak cuba. Bukan kena bayar pun.

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..

@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.

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

@sukiminna

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

cari ikon best-best kat sini.

dryicons.com

@7520467030714037383.0

thanks..cari free font best kat sini lak..hehe
www.urbanfonts.com

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?

salam..ana dh jd pelawat tegar blog ni..hahaha

soalan lagi,cmne nk jadikan icon2 yg kita letak tu open in new tab?

@kinsyakrn

ye. Sama-sama

@Mi vida

Cari kat sini

dryicons.com

@Mi vida

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

Contoh:

http://URL_bolg.blogspot.com"target="_blank"

dh letak,tp error la kluar..dia x jadi

@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>

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..

@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>

thanks a lot!! akhirnya i blh wat background blog guna design sndiri.. thanks ya!!

Alhamdulillah..syukron banget ya bro..dh boleh..tq..tq..tq..cayalahhh

@norain kamaruzaman

Iya. Sama-sama

@Mi vida

Iya. Sam-sama sih. Mampir lagi kesini ya kang

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

nk cuba.. tp.. cam complicted jer..hehe.. maybe next time.. thanx.. (^^,)

salam, sy berminat dengan icon no2, nak minta semua koleksi icon2 tu boleh? saya dah cari, tak jumpa2 pun...

yey! da jumpe icon yang cantik itoo!!
thnksss!!

thanks awk..menjadi tips awk tu...

tq bro...menjadi tips awak

ayoyo..sshnya bginner ni..xpaham la..huhu

thnk utk tips nie.jdi, sgt mudah.pasni ble sy try wat link button lain plak :)

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?