Mungkin bukan hal yang luar biasa untuk mengganti pager link blogger dengan icon. Bagi anda yang tertarik untuk mengganti teks itu, bisa membaca tulisan ini sampai tuntas. Pager link blogger adalah tulisan yang bisa anda temukan di bagian bawah posting homepage blog. Teks yang saya maksud adalah tulisan Posting Lama, Halaman Muka dan Posting Lebih Baru. Silahkan lihat [Demo Pager Link] dan gambarnya seperti ini :
Nah, tulisan yang saya tandai itulah yang akan diganti dengan icon. Barangkali anda sudah sering melihatnya bukan.
Mengganti Posting Lama, Posting Lebih Baru dengan Next dan Previous
- Login ke blogger dengan id anda
- Tuju ke menu Tata Letak
- Pada tab menu, pilih Edit HTML
- Backup template anda dengan mengklik Download Template Lengkap
- Centang kotak kecil Expand Template Widget
- Cari kode berikut :
<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>
<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> - Ganti tulisan <data:newerPageTitle/> dengan Next dan <data:olderPageTitle/> dengan Previous
- Sekarang klik tombol Simpan Template
- Selesai
Mengganti Pager Link Blogger Dengan Icon
Untuk mengganti teks Posting Lama dan Posting Lebih Baru dengan icon, anda harus sudah menyiapkan icon terlebih dahulu. Misalnya seperti icon di bawah ini.
Kalau sudah punya icon, silahkan dihosting (upload) dulu ke tempat penyimpanan gambar anda. Misalnya di tinypic.com, photobucket.com atau yang lainnya. Kemudian catat alamat URL penyimpanan icon tersebut. Misalnya untuk icon yang sudah saya siapkan, alamat URLnya seperti ini :
- Halaman Muka (Home)
http://i38.tinypic.com/28ko7za.jpg - Posting Lebih Baru (Newer Post)
http://i37.tinypic.com/2a6tcwo.jpg - Posting Lama (Older Post)
http://i33.tinypic.com/mr7dqs.jpg
Silahkan diganti kalau memang kurang cocok. Sesuaikan icon dengan warna dan desain template blog anda. Nah, alamat URL icon inilah yang akan digunakan untuk mengganti teks Halaman Muka, Posting Lebih Baru dan Posting Lama. Untuk mengerjakannya hampir sama seperti langkah di atas.
Pertama :
Ganti alamat icon menjadi seperti ini
<img alt='Next' border='0' src='http://i37.tinypic.com/2a6tcwo.jpg' title='Next'/>
<img alt='Previous' border='0' src='http://i33.tinypic.com/mr7dqs.jpg' title='Previous'/>
<img alt='Home' border='0' src='http://i38.tinypic.com/28ko7za.jpg' title='Home'/>
Kedua :
- Login ke blogger dengan id anda
- Tuju ke menu Tata Letak
- Pada tab menu, pilih Edit HTML
- Backup template anda dengan mengklik Download Template Lengkap
- Centang kotak kecil Expand Template Widget
- Cari kode berikut :
<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>
<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> - Perhatikan kode yang saya tebalkan berwarna hijau.
- Ganti tulisan <data:newerPageTitle/>, <data:olderPageTitle/> dan <data:homeMsg/> dengan alamat icon yang sudah disiapkan. Sehingga hasilnya menjadi seperti berikut :
<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’><img alt='Next' border='0' src='http://i37.tinypic.com/2a6tcwo.jpg' title='Next'/></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’><img alt='Previous' border='0' src='http://i33.tinypic.com/mr7dqs.jpg' title='Previous'/></a>
</span>
</b:if>
<b:if cond=’data:blog.homepageUrl != data:blog.url’>
<a class=’home-link’ expr:href=’data:blog.homepageUrl’><img alt='Home' border='0' src='http://i38.tinypic.com/28ko7za.jpg' title='Home'/></a>
<b:else/>
<b:if cond=’data:newerPageUrl’>
<a class=’home-link’ expr:href=’data:blog.homepageUrl’><data:homeMsg/></a>
</b:if>
</b:if> - Sekarang klik tombol Simpan Template
- Selesai
Oke, selamat mencoba dan semoga bermanfaat.
Related Post:
Trik Blogspot
- Menambahkan Image Pada Judul Posting
- Klik Label Tampil Hanya Judul Posting Update
- Klik Label Tampil Hanya Judul Posting
- Menambahkan Icon Pada Label Dan Link Sidebar
- Mengganti Tanggal Dengan Icon Kalender
- Menghilangkan Icon QuickEdit (Tang dan Obeng)
- Area Sidebar Dalam Kotak Terpisah
- Area Komentar Dalam Kotak Terpisah
- Area Posting Dalam Kotak Terpisah
- Background Warna Pada Teks Posting
- Modifikasi Pesan Pengantar Formulir Komentar
- Beda Tampilan Komentar Pemilik Blog
- Nomor Urut Komentar (Numbering Comment) Blogger
- Pasang Emoticon Di Atas Kotak Komentar
- Membuat Blockquote Dan Modifikasi Blockquote
- Masalah Pada Verifikasi Kotak Komentar
- Membuat Teks Berkedip Blink Text
- Membuat Horizontal Navigasi Blogger
- Avatar Profil Komentar Blogger Update
- Latar Belakang Teks Dengan Efek Stabilo
- Menggunakan Gambar Untuk Latar Belakang Blog
- Pasang Strip-Ad Seperti Navbar Blogger
- Menghilangkan Border Pada Image Posting
- Modifikasi Border Photo Profil Blogger
or 
or
0 comment:
Post a Comment