Page Navigation (Navigasi Halaman) merupakan fitur bawaan blog yang berfungsi untuk pindah ke halaman sebelumnya, berikutnya, atau ke beranda. Di dalam template bawaan, biasanya fitur ini bertuliskan Older Post, Newer Post, dan Home. Tentu saja hal ini kurang menarik, baik dari segi tampilan, maupun dari segi bahasa.
Dari segi tampilan, kelihatan sekali bahwa template yang kita gunakan sudah mainstream atau sama dengan yang dipakai blogger kebanyakan. Jadi tidak ada ciri khas yang bisa diingat dari blog kita.
Sedangkan dari segi bahasa, navigasi halaman ini menggunakan bahasa Inggris. Memang, bahasa Inggris adalah bahasa International. Tapi alangkah lebih bagus lagi, jika postingan kita berbahasa Indonesia, navigasinya juga berbahasa Indonesia. Sehingga lebih serasi dan mudah dimengerti.
Oleh sebab itu, agar tampilannya lebih menarik, saya akan membagikan tutorial cara mengganti tulisan di Page Navigation dengan Icon/Gambar atau Tulisan sesuai keinginan.
✔ Mengganti Tulisan Page Navigation dengan Tulisan Lain
2. Pilih Template/Tema
3. Backup/Cadangkan template sebelum di edit untuk menghindari kesalahan saat proses pengeditan.
4. Klik Edit HTML
5. Cari kode di bawah ini dengan menggunakan Ctrl+F
expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
Keterangan: Posting Lebih Baru(Previous)
expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
Keterangan: Posting lama(Next)
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
Keterangan: Beranda(Home)
6. Ganti tulisan yang saya tandai dengan warna kuning sesuai kreatifitas masing-masing. Misalnya seperti beritkut.
expr:title='data:newerPageTitle'>Artikel Baru</a>7. Selanjutnya tekan Preview untuk melihat perubahannya.
expr:title='data:olderPageTitle'>Artikel Lama</a>
<a class='home-link' expr:href='data:blog.homepageUrl'>Beranda</a>
8. Jika sudah sesuai klik Save Template/ Simpan Tema
Jika kamu kurang puas dengan tampilan yang tadi, ada alternatif lain yang bisa kamu coba, yaitu menggantinya dengan Icon/Gambar. Simak tutorialnya berikut ini.
Caranya hampir sama dengan tutorial di atas. Bedanya cuma terletak pada langkah ke 6, kamu tidak mengganti tulisan yang kuning dengan tulisan lain. Tapi menggantinya dengan URL Icon/Gambar yang telah saya sediakan.
Berikut 3 jenis Icon/Gambar yang bisa dipilih:
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHK1ZAbNXTWpj-fkeLxkePCOWuPjjw4_2o23OPNh8-mhbmRtHJuf8Dh2GlBFTHyi79ZQEvoCTrElZFePiCJJBcvG9foZt5y7x2xUq-3PQ0HC3WecP0jBI68IRnqqwpWZP95bQHPjOplQf-/s128/28.png'/>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_jGWx4gvH9TsJ04SVn3vteZpzJabjYhJIEVNIal3qQDVUwXxjjeLCHVr4sQqD56Wy9i65XTpGOM9GGd82rqbFjT3PooCVF1YhRmP5SVDoE0DL0U0512RG3GdC0fcPpcPPBq-6bO7U-HKA/s128/22.png'/>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhELg2tGaI0TYYVZ9S2xXU5qVIZG7eZX5wALckFSCTm-RqKCLxyb89ShJDDrcqq8LREJs62HI-6a8QwTdjjWExbmujScLUO_6oJKZdRevEbcgt-9mn75PLmzOsJQoccxge8HVfAsKJWoab2/s128/23.png'/>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTWRrOlC8xypN80ELVt3U7CP1dLVh82gNv8KrrGRrSSCgxx3xh_Q-Ck_E3JTSuPD1HTat4HyVfH7V5yZrIHQHhV0UsP30z_BIXWTH12gl-bi-oIXL4bugSYO-8gQXcw3Ek-XTjMR9Ro8aR/s128/blue_arrow_up.png'/>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBI81ZSfHncvhuegQl9Og4Xo5vmLfiXWHy_fKreBRuRUZrNK45GbjfG3muz7u57_CGv8K4PC7E92EfOfT9qBGfh5bAX8U9FBNP5cPIEpM_fjFSZVjJe8g3ERRmLk_B7-GkOdiEsg13KazS/s128/computer.png'/>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLuB5XNrib6wODSRuj591ovHoNwaBmLGEnQSlW_GiKwpVjRJReWdStjdMb2P5OkvPfbXRvEdfpxwM-_MeiWFYJl19KZjt1b55Tx_BrVjYdsY4VKTtD1oCE-SRJK77bJB31tXikJCTEhtNR/s128/blue_arrow_down.png'/>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwcHnQ4j6Eizygmme1HSz_ks8kUvcFblCBDjBa-pEHHjFFeP4BaWqc6RP9kNp8_Sld_iwFvgeCOwhczMf2tje30Ks7eN_a_JpT2Uz9sa-1qIlqZB7AIlE-LssBINHx05opx37fd3aYSXcZ/s128/Copy%20of%20next.png'/>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCjySOj7rsCSBqUAXa-NnCFwtoiXTHJH-BOXQZF_53lkAJthqhvucemYUqiYGOjf6FsNN0WUuJzE6EkCUEV7DhIHM32-Pg3nf93fgwluTJhZXwCUVhLNH4W0S8eWAqpTu0AqS4CntxQmD5/s128/Home.png'/>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLqs7OyBsgvi5R8NHJUZSnrx8ee7k-kE6Q9Q9MegGY4I2r5EWttl6lqUjJFLr2uZvEedaNNOm3W0nnquOeFiCGRfBi9PRAFMIIMcXgHo6y56_H-ThGdacWpYew75Gk7Vpb5V9GhgprpNxD/s128/next.png'/>
Jadi hasilnya seperti ini:
expr:title='data:newerPageTitle'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwcHnQ4j6Eizygmme1HSz_ks8kUvcFblCBDjBa-pEHHjFFeP4BaWqc6RP9kNp8_Sld_iwFvgeCOwhczMf2tje30Ks7eN_a_JpT2Uz9sa-1qIlqZB7AIlE-LssBINHx05opx37fd3aYSXcZ/s128/Copy%20of%20next.png'/></a>
expr:title='data:olderPageTitle'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLqs7OyBsgvi5R8NHJUZSnrx8ee7k-kE6Q9Q9MegGY4I2r5EWttl6lqUjJFLr2uZvEedaNNOm3W0nnquOeFiCGRfBi9PRAFMIIMcXgHo6y56_H-ThGdacWpYew75Gk7Vpb5V9GhgprpNxD/s128/next.png'/></a>
<a class='home-link' expr:href='data:blog.homepageUrl'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCjySOj7rsCSBqUAXa-NnCFwtoiXTHJH-BOXQZF_53lkAJthqhvucemYUqiYGOjf6FsNN0WUuJzE6EkCUEV7DhIHM32-Pg3nf93fgwluTJhZXwCUVhLNH4W0S8eWAqpTu0AqS4CntxQmD5/s128/Home.png'/></a>
Apakah hanya bisa menggunakan icon/gambar di atas saja?
Tentu saja tidak, kamu saya berikan 3 icon/gambar saja supaya kamu lebih kreatif lagi dalam mendesain template blog kamu. Jadi sebenarnya kamu bisa menggunakan icon/gambar yang bisa diperoleh darimana saja, baik itu dari Google maupun karya kamu sendiri.
Syaratnya:
1. Icon/gambar berekstensi .PNG
2. Dianjurkan yang memiliki background transparan.
Ada banyak cara untuk mendapatkan URL gambar, tapi yang lebih aman dan ringan saat dipakai adalah dengan menghosting gambar langsung dari postingan blog..
Caranya:
1. Login ke akun blogger
2. Pilih menu Pages/Halaman
3. Klik New Page
4. Upload gambar dengan menekan icon Insert Image
5. Jika sudah terupload, klik HTML
6. Block tulisan dari http sampai .png
7. Copy teks dengan menekan Ctrl+C
8. Lalu masukkan URL yang sudah di copy ke sini
<img src='URL gambar kamu'/></a>9. Selanjutnya lakukan hal yang sama ke icon/gambar berikutnya. Kan ada icon untuk Older Post, Home, dan Newer Post.
10. Kalau sudah, tinggal sisipkan ke template blog yang sudah saya beri tanda kuning tadi.
11. Lalu Save Template/Simpan Tema.
12. O,ya page tempat kamu upload gambar tadi boleh kamu hapus. Karena tidak diperlukan lagi.
Hasilnya
