Modifikasi Blog Pager Melayang Diatas atau Dibawah

Modifikasi Blog Pager Melayang Diatas atau Dibawah - Pada umumnya secara default blog pager berada dibawah post footer dengan bertuliskan posting lebih baru, beranda dan posting lebih lama, text yang tampil pada blog pager bisa kita ubah dengan gambar atau dengan text (kalimat lain), yaitu dengan masuk pada elemen blog pager seperti yang akan kita lakukan ini, dengan modifikasi blog pager dengan text melayang diatas atau dibawah halaman.

Sebelum menambahkan style css untuk menampilkan blog pager melayang diatas atau dibawah seperti tampilan breadcrumb melayang diatas atau dibawah, kita modifikasi dulu teks kalimat yang akan tampil pada blog pager, masuk pada menu Edit Template dan centang Expand Widget Template dan temukan element blog pager seperti dibawah ini:

dengan patokan <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 + &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>

Ganti <data:newerPageTitle/>, <data:olderPageTitle/> dan <data:homeMsg/> dengan teks seperti Link Baru, Link Lama dan Home Page, selain berupa text biasa, bisa juga menggunakan text (karakter) berupa Icon Simbol HTML, sehingga menjadi 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'>&#9668;</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'>&#9658;</a>
      </span>
    </b:if>

    <a class='home-link' expr:href='data:blog.homepageUrl'>NAME YOUR SITE</a>
</div>

Keterangan blog pager sudah diganti dengan karakter berupa teks, selanjutnya membuat css untuk membentuk tampilan blog pager dan menjadikan melayang diatas.

CSS

#blog-pager {
  position: fixed;
  z-index: 1;
  top: -17px;
  left: 0;
  width: 100%;
  padding: 5px 0 0 10px;
  background: rgba(0, 0, 0, 0.5);
  border-bottom: 2px solid #eee;
  text-align:left;
  box-shadow:0px 0px 3px rgba(0, 0, 0, 0.5);
}
#blog-pager-older-link, #blog-pager-newer-link {
  float: right;
  display: block;
}
#blog-pager-older-link a, #blog-pager-newer-link a, .home-link a {
  font: normal 30px "Times New Roman", Times, serif;
  line-height: 1;
  margin-right: 10px;
  color: #adadad;
  display: block;
  text-shadow: -1px -1px 1px #eee, 1px 1px 1px #333;
  }
#blog-pager-older-link a:hover, #blog-pager-newer-link a:hover, .home-link a:hover {
  text-shadow: 1px 1px 0px #ccc, -1px -1px 0px #666;color: #ccc;
}

letakan css tersebut dibawah <b:skin><![CDATA[ atau diatas ]]></b:skin> pada template.

dengan css diatas home link tidak mengikuti style css seperti blog pager newer link dan blog pager older link, supaya style nya sama kita tda class home-link, sehingga menjadi seperti ini:

HTML

<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'>&#9668;</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'>&#9658;</a>
      </span>
    </b:if>

    <span class='home-link'>
    <a exf=s#039;data:blog.homepageUrl'>NAME YOUR SITE</a>
</span>

</div>

Save template

hasilnya kurang lebih seperti tampilan gambar diatas.

★★✩★★

selain ditempatkan diatas halaman blog, blog pager bisa juga ditempatkan pagian bawah halaman dengan merubah sebagian nilai properti css diatas menjadi seperti ini:

#blog-pager {
  position: fixed;
  z-index: 1;
  bottom: -17px;
  left: 0;
  width: 100%;
  padding: 5px 0 0 10px;
  background: rgba(0, 0, 0, 0.5);
  border-top: 2pd #eee;
  text-align:left;
  box-shadow:0px 0px 3px rgba(0, 0, 0, 0.5);
}

/*sisanya sama*/

• Demo

Pada demo sedikit berbeda peletakan link homepage-nya, hanya menggambarkan tampilannya seperti itu.

Semoga bermanfaat.