Menambah Icon pada Tulisan Navigasi Blogger

Sejak pertama kali kita memilki blog di blogger, blogkita sudah memilki navigasi halaman sederhana berupa tulisan older post (post lama), newer post (post terbaru), serta navigasi homepage (halaman depan). Namun, beberapa blogger merasa fitur yang telah disediakan ini tidak begitu menarik, lalu sebagai alternatif lainnya mereka menggunakan navigasi halaman yang lebih ekspresif yg mungkin berupa navigasi halaman Google, atau semisalnya. Namun di dalam postingan kali ini kita tidak akan membahas cara membuat navigasi halaman seperti itu, akan tetapi kita akan membahas "cara membuat navigasi halaman yg telah disediakan oleh pihak blogger menjadi lebih ekspresif dengan tambahan icon bikinan kita"

Dengan kata lain, kita tetap menggunakan navigasi halaman yangtelah disediakan oleh blogger, akan tetapi ada sedikit yang kitatambah/ubah sehingga kelihatan lebih menarik/ekspresif. Penasaran? Seperti ini lho contohnya

Atau kalau ingin melihat tampilan aslinya teman-teman bisamelihatnya di blog saya yang satunya (UPDATE: Telah Dihapus)

Bagi yang tertarik buat bikin yang seperti itu silahkan ikuti langkah2 berikut

Login ke blogger >> lalu klik Tata Letak >> Edit HTML dan jangan lupa centang kotak "expand widgt templt"

1. Menambah icon untuk "Newer Post/post terbaru"

Sebelum ditambah

Sesudah ditambah

Caranya silahkan cari kode <data:newerPageTitle/>, kalau sudah ketemu tambahkan icon bikinan anda dengan cara menggunakan kode embed gambar pada bagian sebelum kode tadi, sebagai contoh teman-teman bisa menggunakan kode saya: <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx4Iog5csvsiizKAxAHoZ-f96OJQQfAAg-uysBkzm96OKM4mv1aDLZB44wN41zMCVhSkzCxONWikZKXeEWFkgXklgqNdb1lFvgKv7KRRKWbX7trjbthrpikWdOuJnYbJ0oEhan72e7ZVU/'/>, sehingga nanti jadinya seperti berikut ini

Dah? Berarti ya sudah, selanjutnya....

2. Menambah icon untuk "Older Post/post tertua"

Sebelum

Setelah

Caranyo samo, silahkan ~~caro~~ cari kode <data:olderPageTitle/>, kalau dah ketemu letakkan icon milik teman setelahnya jangan lupa carameletakkannya harus menggunakan kode embed gambar, sbg contoh gunakan kode ini: <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXAFlvgdpsJi0l7yB9ex6m6RvopmR3d1qsZfhS8Q34LCKUFfVm7bWKq0qo-znpDsx997LdUE4oqracXvx-UDcuZ21IDdupXd6CUnojP4u7oA7Z4i5CV8X6mk_2nSkN-m9yI8AWm3GfZQk/'/>, maka jadinya nanti seperti berikut

Lalu yang terakhir

3. Menambah icon untuk "home page/ halaman depan"

Sebelum

Setelah

Caranya silahkan cari kode <data:homeMsg/>, nah di situ pasti ada dua kode yang sama, pilih yang atas bukan yang bawah. Hapus kode tersebut lalu ganti dengan kode embed gambar "homepage" miliknya teman-teman

Sebagai contoh, berikut adalah keadaan kode sebelum diubah

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

Setelah diubah apa jadinya? Jadinya seperti berikut

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-uUUnKQ9PE34tF27s8QKx45TwZMLQW4-Bv_UxA6aU_pXi1VUAp0Nm6uc2Zvz_ixpS3PSXwDpBZdXBIGl0E2jO-sc_3BlmztwLinrWZxZST6iMqXNxr4-XHBuWWLnWhst4GAXSrQNRMYY/' title='Home/Halaman Muka'/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>

kalau langkah-langkah di atas sudah selesai silahkan disimpan hasil kerjaan anda (klik simpan template). Mungkin teman-teman ada yang ingin mengganti tombol icon di atas, lalu bagaimana? bisakah?Bisa kok sob, caranya tinggal diganti aja setiap link gambar (warnabiru) dengan link gambar bikinannya teman-teman. Lalu yang paling harus diganti oleh teman-teman yaitu URL gambar homepage (poin 3), disesuaikan dengan link gambar yang teman-teman punyai.nah, bagaimana...gampangkan? kalau ada maslah bilang2 yo jngan dipendam, pertanyaan bisa ditinggalkan di kotak komen posting atau bisa juga kontak admin...

O ya, ada satu lagi...hampir kelupaan. Kalau teman-teman hanya ingin menampilkan icon/tombolnya saja tanpa harus ada tulisan seperti "older post", dll maka caranya gampang. Teman-teman tinggal menghapus kode <data:newerPageTitle/> untuk yg "newer" lalu untuk yg "older" kode yg hrus dihapus yaitu<data:olderPageTitle/>, untuk homepage seperti contoh pd poin 3 (maslahnya di sana kode MsG homepagenya dah saya hapus). Slamat mencoba...

Mudah-mudahan bermanfaat.
Keywords:Menambah ikon pada navigasi Blogger, how to add icon to blogger navigator

Untuk kemajuan Blog Ini Silahkan isi Kotak Komentarnya Ya.. (For blog development, please fill the following blog comment Pal

Share |