 |
| Gambar ini akan diperbaharui |
Navigasi halaman Blogger terdiri dari Posting Lebih Baru, Posting Lama dan Beranda. Navigasi halaman ini jika kita cek di situs web Responsinator dengan lebar pixel yang lebih kecil, maka hasilnya akan bertumpuk seperti berikut (jika Anda menggunakan template responsif).
Oleh karena itu, pada kesempatan kali ini kita akan mencoba untuk mengedit navigasi halaman tersebut supaya terlihat rapih.
Berikut adalah langkah-langkah untuk mengedit navigasi halaman Blogger.
1. Unduh terlebih dahulu template blog Anda (opsional).
2. Pilih menu Template > Edit HTML lalu cari kode seperti berikut (untuk memudahkan pencarian kode tekan Ctrl + F).
<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<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/></a>
</span>
</b:if>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:if cond='data:mobileLinkUrl'>
<div class='blog-mobile-link'>
<a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
</div>
</b:if>
</div>
<div class='clear'/>
</b:includable>
3. Ganti semua kode di atas dengan kode di bawah ini lalu Simpan template (saya hanya mengganti tulisan Posting Lebih Baru dan Posting Lama dengan tanda panah, sedangkan untuk Beranda saya menggantinya menjadi sebuah kata (tidak memakai kode <data:homeMsg/>).
<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'>«</a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'>»</a>
</span>
</b:if>
<a class='home-link' expr:href='data:blog.homepageUrl'>Beranda</a>
<b:if cond='data:mobileLinkUrl'>
<div class='blog-mobile-link'>
<a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
</div>
</b:if>
</div>
<div class='clear'/>
</b:includable>
Setelah saya cek kembali di situs web Responsinator, maka hasilnya seperti berikut.
Catatan:
Kode warna merah mewakili Posting Lebih Baru, kode warna hijau mewakili Posting Lama dan kode warna biru mewakili Beranda.
Tidak ada komentar:
Posting Komentar