Mengganti Blog Pager Dengan Gambar Plus CSS

Mengganti Blog Pager Dengan Gambar Plus CSS - Tampilan blog pager berupa teks posting lebih lama, beranda dan posting lebih baru bisa kita ganti dengan gambar, penggantian kalimat tersebut tidak ubahnya seperti kita mengganti blog pager dengan teks-teks lainnya atau menggunakan karakter simbol HTML seperti pada Blog Pager Melayang.

Karena kita mengganti blog pager dengan gambar, kita pergunakan tag img untuk link source gambar yang akan dipergunakan. Untuk melihat HTML blog pager sebelum mengalami penggantian dengan gambar, HTML tersebut seperti ini:

<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 + &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>
</div>

Gantilah kode <data:newerPageTitle/>, <data:olderPageTitle/> dan <data:homeMsg/> dengan link gambar yang sudah kalian upload menjadi seperti ini:

HTML

<div class='blog-pager' id='blog-pager'>
    <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'><img alt='Next' src='url gambar'/></a>
      </span>
    </b:if>

<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'><img alt='Next' src='url gambar'/></a>
      </span>
    </b:if>

 <a class='home-link' expr:href='data:blog.homepageUrl'><img alt='Next' src='url gambar'/></a>

</div>

Dengan begitu blog pager sudah mengalami perubahan tampilan dengan menggunakan gambar yang kalian tentukan, itu sudah cukup dan blog pager akan bekerja sesuai fungsinya sebagai navigasi next-prev.

Pada Script diatas belum terdapat link gambar, karena mungkin kalian mempunyai gambar untuk blog pager yang lebih baik, jika belum mempunyai gambar blog pager bisa menggunakan link gambar dibawah ini untuk dipergunakan, gambarnya seperti pada contoh blog pager gambar diatas.

Older-link: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjay194G6MeyiuJfMh6_nUIrfcYuSKFUgY2kXEA41NroanCZ_jllYcR3Ng7jCA_bCT1lko_6Ga49vB0cOFkny_b7YG4_d6gnG5wKHptGtBgs0JrL3tN6MCXDvMDQagAe7nBo9Wjm5yFaLc/s1600/panahkanan.png
Newer-Link: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFmnZEm9__R9bHSzJ6R17Jlve6Lg2xE4AqUJz1UjO3CUz9XN0avsPMJIUxL2Vm6mHJ-yMgv9QsT7MWtcsw38lOd2u6vgJ7Hu6tj-dXnFLUdZC6SqF24ZXTiQkNljjVQd1m0ICjSZNmgOA/s1600/panahkiri.png
Home-page Link: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLeu-uYm5OPYTxEpuj86melQMfxTEbVKbibxzinD7MEZ5Gxw_C9gdq8Ok_40rjTtTkB7gFyRZGJ1uOeFOtVm2OuyYfoSP_uKawbItrW84G7PC6USwfZkSBs69o6n2hvinRmy0N6HjMllk/s1600/home.png

Menambahkan CSS Blog Pager

Untuk memperbaiki tampilan blog pager kita bisa tambahkan css untuk memeberikan efek terhadap gambar, dalam hal ini pemberian efek hover berupa Opcity, Scale (ukuran) dan Box-Shadow. Letakan CSS dibawah ini diatas ]]></b:skin> pada template.

CSS

.blog-pager {
  padding:25px;
}
.blog-pager img {
  opacity:0.3;
  ransition:all 1.2s ease-out; 
  -o-transition:all 1.2s ease-out; 
  -moz-transition:all 1.2s ease-out; 
  -webkit-transition:all 1.2s ease-out; 
}
.blog-pager img:hover {
  opacity:1;
  border-radius:100px;
  transform:scale(1.5);
  -o-transform:scale(1.5);
  -moz-transform:scale(1.5);
  -webkit-transform:scale(1.5);
  box-shadow: 0 0 15px rgba(0,0,0,0.5);
}

Save template.

Untuk tampilan blog pager lebih menarik dan sesuai dengan yang diharapkan , bisa memodifikasi blog pager pada bagian CSS-nya.

Semoga bermanfaat.