Cara merubah tampilan blog pager dengan efek hover di blog

Unknown

4 Jun 2013

1 Komentar

Tampilan blog pager adalah berupa teks posting lebih lama, beranda dan posting lebih baru. Kita bisa merubah tampilan blog pager kita dengan menambahkan gambar (image) supaya tampilannya lebih cantik dan menarik. Anda bisa melihat tampilan blog pager saya setelah dimodifikasi (dibawah). Kita modifikasi dulu teks / kalimat yang akan tampil pada blog pager...

Langkah-langkah:

• Masuk ke akun Blogger anda ->  Klik Drop Down Menu
• Kemudian pilih -> Template -> Backup template anda terlebih dahulu -> Edit HTML

• Cari dan temukan element blog pager pada template
• Cari tag/kode  <b:includable id='nextprev'> tekan  CTRL+F  untuk memudahkan pencarian

<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:

<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>

Pada Script diatas belum terdapat link gambar, anda bisa mengganti url gambar sesuai dengan keinginan anda

link gambar dibawah ini adalah link gambar yang ada pada blog pager blog saya:

Older-link: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZmWr8Jut3FnDkY-9ta397lkKKR4Oe7YARUPB0A5_12R2BPVpRGrykRpzMh_PdroERJ3569StYtyEABWJ3ZtjIWB0OW75_6FLBS6vjCdnONyp75feWHz3eqS20yc3Zh4FTVv6TyR0C3fg/s1600/panahkanan.png
Newer-Link: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBw5JMGzmcdJfZPjd68w8JvPOp_DbAWHHEmnlaiFTnd-Rii9K46b-P9k2R-pCH0P_Y5qzzgzZAVxxoqKYrXYPuImnh5cHlpQeMgBDq2XIsk70Rlll1m4UkLQ8agZ_GXFxOaUI5cN_Os3Y/s1600/panahkiri.png
Home-page Link: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhszO0UIVYFntW3GbsTfDW7xAhuo1PJMcBiPAfUngbPR5CTVc_sSzoQXdqv-V4iCPgESbqtaIaJ55_hbeOomsi21_6jEhoPyaPdMqXw_JVXdhMwRTIp-Q21WNLnAech24-69jA-RhocQ00/s1600/home.png

Menambahkan CSS pada blog pager

Untuk memberikan efek hover pada blog pager silahkan tambahkan kode CSS berikut dibawah ini:

.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);
}

• Cari tag/kode ]]></b:skin> kopi dan Pastekan kode CSS di atas, tepat diatas tag  ]]></b:skin> 
• Simpan template... 

Semoga bermanfa'at...