Link Home Menjadi Tombol / Gambar

Pada edisi yang lalu (ky majalah masakan aj) kita pernah mencoba mengganti link 'Read More' menjadi button / tombol / gambar / ap aj lah!. Sodara bisa baca disini. Sekarang kita akan mencoba mengganti link 'Home' / 'Halaman Muka' pada blog menjadi gambar/button.

Jika kita sedang membaca suatu artikel, biasanya pada bagian bawah ada link 'Home' atau 'Halaman Muka', yang berfungsi sebagai link untuk kembali ke halaman depan blog sodara.

Biasanya, link itu berupa tulisan 'Home' atau 'Halaman Muka' (klo CPU sodara masih normal c,hehehe9)

Nah, ada baiknya agar link tersebut diganti dengan gambar/tombol (supaya keren n beda aza..) seperti yang Ayas sudah terapin di blog ini.

Gimana caranya? Yuukk kita coba bareng.............


Pertama, adalah kewajiban sodara untuk membackup template sodara, untuk menghindari terjadinya kesalahan, dan masih bisa dikembalikan ke template semula.

Siapkan gambar untuk mengganti link tersebut, misalnya gambar kaya begindang :



Centang pada check box 'Expand Template Widget'

Cari kode seperti ini :

<b:if cond='data:blog.homepageUrl != data:blog.url'>

Klo dah ketemu, sodara bisa lihat ada rentetan kode yang membingungkan seperti ini :

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>

Kode berwarna merah adalah yang harus diperhatikan.

SISIPKAN KODE GAMBAR diantara kode berwarna merah diatas, lalu HILANGKAN/HAPUS kode <data:homeMsg/>


Sebagai contoh, punya Ayas jadi ky gini :

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><img src="http://i435.photobucket.com/albums/qq72/indonesialover/master/home-buttoncopy.png" /></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>

Kode berwarna ijo itu adalah kode gambar Ayas.

Nah, klo dah, simpen template sodara.

Trus coba deh preview deh... Gimana jadi kan? Keren kan? Hal serupa juga bisa diberlakukan pada link 'Posting Lebih Baru' ato 'Posting lebih Lama'. Tapi, cari sendiri j y... cz Ayas dah ngantuk.. coba2 sendiri j..

GAMPANG KOK!!!