Mengganti Tulisan Older Posts, Newer Posts, Home Dengan Gambar Icon

Ada banyak cara yang bisa dilakukan oleh seorang blogger untuk mendesain tampilan blog-nya, mulai dari desain Header, kotak Posting, Sidebar, Footer ataupun elemen lainnya. Hal tersebut biasanya dilakukan untuk sekedar memberikan penampakan halaman blog yang berbeda daripada umumnya. Seperti juga yang akan kita ulas diposting ini, yaitu bagaimana mengganti objek tulisan Older Posts, Newer Posts dan Home dengan gambar berupa icon kecil agar terlihat lebih menarik serta (mungkin) bisa menambah minat pembaca untuk melakukan klik. Untuk situs blog, objek yang dimaksud tersebut pada umumnya terletak dibagian bawah kotak Posting atau sebelum kotak Footer dan berfungsi sebagai link navigasi untuk menuju kehalaman yang ditunjuk. Pada blog ini bisa kalian lihat penampakannya dibawah kotak komentar posting.

Secara default setelan template blogspot, ke-tiga objek tersebut memanglah ditampilkan dalam wujud teks biasa. Namun kita bisa mudah mengganti ke-tiganya dengan tampilan icon gambar. Bagaimana melakukan itu caranya bisa kalian ikuti panduan berikut ini :

1. Login di Blogspot
2. Pada halaman dashbor blog, pilih setelan "Template" lalu pilih "Edit HTML".

Untuk berjaga-jaga jika ada kesalahan nantinya, saran saya lakukan backup template terlebih dulu sebelum merubahnya. Panduannya bisa kamu baca diposting "Dua Cara Backup Template Blogspot"

3. Temukan kode seperti ini:

    <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 + &quot;_blog-pager-newer-link&quot;' 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 + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>
    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

Keterangan:
<data:newerPageTitle/> = menyatakan Newer Posts (Posting lebih baru)
<data:olderPageTitle/> = menyatakan Older Posts (Posting lebih lama)
<data:homeMsg/> = menyatakan Home (Beranda/Halaman depan)

4. Ganti ke-tiga kode tersebut dengan URL gambar yang sudah di upload sebelumnya. Contoh penulisan kode-nya menjadi seperti ini :

<a class=’home-link’ expr:href=’data:blog.homepageUrl’><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOX0X6YcWF26uMAgHtE-iGRmPW9qQY0K6jOD-rlujXw12tCQwBmjCoPCTgYBYEettfv1kjPFTbLKaoe1Ylq-C3wGMgv7c5vePOWP_gh1pXYwjxmd2iFOKSyP2__0o4h4DopeGGTmhyphenhyphenxCVJ/s1600/Home-icon.png"/></a>

Koinfigurasi:
Warna merah adalah URL dari gambar, silahkan ganti sesuai dengan URL gambar kamu masing-masing. 

Untuk memudahkan prakteknya, kamu bisa menggunakan gambar icon dibawah ini. Klik kanan pada masing-masing gambar lalu pilih "Copy Image Location" untuk menyalin alamat URL-nya.

Atau

Atau

5. Jika sudah langkah terakhir tinggal "Simpan Template"

Lebih banyak pilihan gambar icon, bisa kamu download di situs-situs penyedia icon gratis seperti misalnya di IconsPedia.com, IconArchive.com, FindIcons.com, DryIcons.com, dan lainnya.

Selamat mencoba.

Ceritakan ini di :

Facebook Google+ Twitter Digg

Tentang Penulis :

Ansory Esce
Dia bukanlah seseorang yang memiliki segudang ilmu untuk bisa diceritakan. Bukan juga seorang Blogger profesional yang bisa menggurui kalian tentang ilmu Blogging atau tentang ilmu Internet lainnya. Dia hanyalah seorang Blogger "alakadarnya" yang memiliki keterbatasan pengetahuan. Menulis di Blog ia lakukan sekedar untuk mengenal banyak teman baru serta sebagai media untuk belajar dan saling berbagi. Selengkapnya..
Berteman dengannya di: Facebook | Twitter | Google+