Menambah Icon pada Tulisan Navigasi Blogger

Sejak pertama kali kita memilki blog di blogger, blog kita 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 yang telah disediakan oleh blogger, akan tetapi ada sedikit yang kita tambah/ubah sehingga kelihatan lebih menarik/ekspresif. Penasaran? Seperti ini lho contohnya



Atau kalau ingin melihat tampilan aslinya teman-teman bisa melihatnya 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/AVvXsEiMSWmYD3Oyx4GESuwgq04AlJ3hIx0TMGiMkkEr01U_SBvjS0IAfcDQHXSoitSRwK1Em2aZz70-aazj4bFQyvin5pohd-1nJz2w6-8dHw2YxqSzOr4apYojr5TKrKLHVBib06APG-mpEiM/'/>, sehingga nanti jadinya seperti berikut ini

<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMSWmYD3Oyx4GESuwgq04AlJ3hIx0TMGiMkkEr01U_SBvjS0IAfcDQHXSoitSRwK1Em2aZz70-aazj4bFQyvin5pohd-1nJz2w6-8dHw2YxqSzOr4apYojr5TKrKLHVBib06APG-mpEiM/'/><data:newerPageTitle/></a>

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 cara meletakkannya harus menggunakan kode embed gambar, sbg contoh gunakan kode ini: <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYuhQMoaR7SzNXkEQeOOvwUGEf_y_cy83-vs5gwB65mlsuX9Hh_tyT-kwuq6Npiu6a4wMAuoK04MMj6kllArfIVe5vEw97z9OBjOzhcpEpc6OXPwbiKR4IE7EXKzLMEd0aGIzONejJzV8/'/>, maka jadinya nanti seperti berikut

<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYuhQMoaR7SzNXkEQeOOvwUGEf_y_cy83-vs5gwB65mlsuX9Hh_tyT-kwuq6Npiu6a4wMAuoK04MMj6kllArfIVe5vEw97z9OBjOzhcpEpc6OXPwbiKR4IE7EXKzLMEd0aGIzONejJzV8/'/></a>

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/AVvXsEgfWOosoziO2FOKbdzJnaDyBCK42eEJuZ5KHV1VrRg6zeiJZjGvWOuB75vzKj0uMKse1yUXSoL5TLSuaiEuPY1sVResXh57fEA4CLFjA_XXFNzFQMK7a49-hBeoKXONpZ8Rx9_gw-lKl2E/' 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 (warna biru) dengan link gambar bikinannya teman-teman. Lalu yang paling harus diganti oleh teman-teman yaitu URL gambar homepage (poin 3), karena kalau teman-teman menggunakan URL gambar tersebut, maka nanti tampilannya akan seperti icon homepage pada blog-oret.blogspot.com (blog saya yg satunya lagi - UPDATE: Telah Dihapus). 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...





Semoga Bermanfaat []