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 = https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjJ2Ok8NGMWy77MWf5lzv5zQwk-3zWQHYjzpmmhyphenhyphen7fyR1Y7VQcwcMWjAhC08AGtMrcHuXC9rNqg9T9fzK1CqFJ4DEm4vv7sbhH0vm9QWHlIdps11x6cVtmF72MtMtmE6OgrvYPGwYGoks_/s200/home2.png


URL icon = https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4a9EqwzgLXeL2aDwfb3wBChb6wbZ5yvrUrbOK7pSSRq5poNYSZwrVt-CNoooL2Hq8_E3Pup82HYShR5hL-ynLWs_uwDe4RoVBbklGV3Pvh3cG4LKh-LfdayCf_fyUiC7xaO23lGcjasO2/s200/home1.png


URL icon = https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNINLmmnaG3lH9gmumg9pApY4QbD4Lup67lJiFcGgvgrTtIfAQvwd0zLZhd6JP8zwB73aPHMdVyFbEhpPdSLFTn2xtY2_f2hRsEPQ0tnTZ-lzSz3lTNkZcC2liG18dd4_Whdw99jZ9FqU1/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