TUTORIAL TUKAR HOME, OLDER POST, NEWER POST KEPADA ICON

TUTORIAL TUKAR HOME, OLDER POST, NEWER POST KEPADA ICON yang lebih cantik.

Tutorial buat page navigation bergambar

Atas permintaan seseorang pengunjung setia silenceBlogz, sekali lagi saya buat tutorial untuk blog. kalau siang tadi saya membuat tutorial pasal TUTORIAL MEMBUAT PAGE NAVIGATION Kali ni masih lagi mengenai page navigation tetapi versi image atau gambar dan yang lebih tepat adalah ICON. Bagaimana page navigation menggunakan gambar ? Sila rujuk contoh dibawah:

Contoh page navigation menggunakan gambar

So..nampak tak? perkataan tu dah di tukarkan kepada gambar atau pun icon kan? bagaimana cara nak buat tu? Ikuti tutorial di bawah.

1. Login >> Dashboard >> Design >> Edit HTML >> Expand Widget Templates

Ctrl + F dan cari kod ini dibawah

2. Untuk tukar Older Post, sila cari kod DI BAWAH:

expr:title='data:olderPageTitle'><data:olderPageTitle/>

3. Gantikan kod yang berwarna MERAH diatas dengan kod DI BAWAH:

<img src='http://url-images-untuk-older-post.gif'/>

4. Ini untuk Newer Post, sila cari kod DI BAWAH:

expr:title='data:newerPageTitle'><data:newerPageTitle/>

5. Gantikan kod yang berwarna MERAH diatas dengan kod DI BAWAH:

<img src='http://url-images-untuk-newerPage.gif '/>

6. Untuk Home pula sila cari kod DI BAWAH:

expr:href='data:blog.homepageUrl'><data:homeMsg/>

7. Gantikan kod yang berwarna MERAH diatas dengan kod DI BAWAH:

<img src='http://url-images-untuk-Home.gif '/>

Bagaimana nak dapatkan URL untuk gambar atau pun icon? pandai-pandailah cari atau sila lah google dan bila terjumpa icon yang sesuai sila salin URL image/icon tersebut dan gantikan di tempat yang bersesuaian.. Contoh Home mesti url gambar yang melambangkan Home. Dan begitulah seterusnya.

Dah selesai sila preview.. jika tiada error silalah save !!.

Contoh jika anda tukar HOME sahaja KOD akan kelihatan seperti di bawah:

expr:title='data:olderPageTitle'><img src='http://url-images-untuk-Home.gif '/>

So dia akan kelihatan seperti ini :

NOTA: Tulisan yang berwarna merah adalah kod yg perlu di cari dan digantikan.Tulisan yang berwarna biru adalah URL images/icon yang perlu di gantikan dgn kod yang berwarna merah tersebut.

BERIKUT ADA DI LAPIRKAN BEBERAPA ICON HOME YG CUTE EHSAN DARI GOOGLE. RIGHT CLICK DAN COPY URL DIA.