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
bagian bawah blog iniBagi 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"
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/AVvXsEh0bowSwE5AQNojB28NRZ4yipc3aR7L2rFBxCPq7V2MbcyKYib6EVPImzUKshf9_U1NscFG2f3NaASHmAr2K2y2dm1x8qR-UUIafMH9jxMpDiTSy8fxstXfu6ZfZeJzpn9qxCrsJOya9UE/'/>, sehingga nanti jadinya seperti berikut ini
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0bowSwE5AQNojB28NRZ4yipc3aR7L2rFBxCPq7V2MbcyKYib6EVPImzUKshf9_U1NscFG2f3NaASHmAr2K2y2dm1x8qR-UUIafMH9jxMpDiTSy8fxstXfu6ZfZeJzpn9qxCrsJOya9UE/'/><data:newerPageTitle/></a>
Dah? Berarti ya sudah, selanjutnya....
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/AVvXsEhKL-qEaqQXNo0RS7kNRuarr5lNrXbFM1yrXiZJFLxfEuzYGfaGXkMKdPmAomr_jXphZOcUdx7t0SK6dYqDQhH-DvBjDQw6puHe3D2KXzpowlim9egkPPmdROijhd-k9KNfq1NE9w3VaC0/'/>, maka jadinya nanti seperti berikut
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKL-qEaqQXNo0RS7kNRuarr5lNrXbFM1yrXiZJFLxfEuzYGfaGXkMKdPmAomr_jXphZOcUdx7t0SK6dYqDQhH-DvBjDQw6puHe3D2KXzpowlim9egkPPmdROijhd-k9KNfq1NE9w3VaC0/'/></a>
Lalu yang terakhir
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/AVvXsEgM8DZ7Tczvmz7Kh1zGd6YghfFGL8YucVErgIgyRs57ta9jtv1MzmEvjGmuGY6d6W80CRCYt3CCJWiwge33_0aZGcLBi6lfgxb-XIpMTeHhLIToj1_tx7q0Pjm0Ei2Nl8Y1l9-4Ib7Mclc/' 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 ini. 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 []
Ada yang belum punya foto buat dipasang sebagai foto profil? Jangan khawatir, sekarang sudah ada layanan online untuk membuat avatar secara online, jadi apa salahnya kalau teman-teman memanfaatkan layanan gratis yang satu ini?! Bagusnya layanan yang satu ini yaitu selain gratis, proses pembuatannya sangat mudah dah itu hanya membutuhkan waktu yang relatif singkat. Dan satu lagi yang mungkin menjadi salah satu alasan saya untuk mensharing masalah ini yaitu, kita bisa membuat avatar yang menyerupai muka atau gaya kita, menarik bukan?
