Membuat Navigasi Halaman (Blog Pager) Melayang

Sunday, October 7, 2012

Banyak cara memodifikasi tampilan blog, salah satu yang bisa diterapkan dalam blog Anda adalah penerapan blog pager atau navigasi halaman pada blog. Seperti yang akan dibahas kali ini, ada dua penerapan dalam blog kita. Tergantung pilihan Anda yang menentukan tampilan menarik atau tidak, berikut kode CSS yang bisa diterapkan :

Melayang Diatas

#navigationpager-top{position:fixed;z-index:1000;top:0;left:0;width:100%;height:24px;padding:5px 0 5px;background:#000;border-bottom:2px solid #999;text-align:left;-webkit-box-shadow:0 0 7px #000;-moz-box-shadow:0 0 7px #000;box-shadow:0 0 7px #000}
a .top-icon-home{background:transparent url(http://1.bp.blogspot.com/-WWh5YQJeXNI/TmMx8MUXfDI/AAAAAAAAAz0/JW5cUjwzMeg/s1600/Home2.gif) no-repeat left bottom;width:24px;height:24px;border:none!important;float:left;margin-left:15px;opacity:0.7;filter:alpha(opacity=70)}
.float-left{float:left;width:100px;margin-left:13px}
.float-right{float:right;width:100px;margin-right:10px;margin-top:5px;font-weight:bold;font:$headerfont}
.float-left span{display:block;float:left;margin-left:2px}
a .top-icon-left{background:transparent url(http://3.bp.blogspot.com/-7d2gsBxHw_0/TmMxp8lSpVI/AAAAAAAAAzk/bbvChtbeJIk/s1600/Arrow2%2BLeft.gif) no-repeat left bottom;width:24px;height:24px;border:none!important;opacity:0.7;filter:alpha(opacity=70)}
a .top-icon-right{background:transparent url(http://3.bp.blogspot.com/-udYjYLBXw4A/TmMxqOchFLI/AAAAAAAAAzs/JFOr359xcw0/s1600/Arrow2%2BRight.gif) no-repeat left bottom;width:24px;height:24px;border:none!important;opacity:0.7;filter:alpha(opacity=70)}
a .top-icon-home:hover,a .top-icon-left:hover,a .top-icon-right:hover{opacity:1;filter:alpha(opacity=100)}
#blog-pager{display:none!important}

Demo ⇒ Atas

Melayang Dibawah

#navigation-page{position:fixed;z-index:1000;bottom:0;left:0;width:100%;height:24px;padding:5px 0 5px;background:#000;border-top:2px solid #999;text-align:left;-webkit-box-shadow:0 0 7px #000;-moz-box-shadow:0 0 7px #000;box-shadow:0 0 7px #000;margin-bottom:5px}
a .home-icon{background:transparent url(http://1.bp.blogspot.com/-WWh5YQJeXNI/TmMx8MUXfDI/AAAAAAAAAz0/JW5cUjwzMeg/s1600/Home2.gif) no-repeat left bottom;width:24px;height:24px;border:none!important;float:left;margin-left:15px;opacity:0.7;filter:alpha(opacity=70)}
.navigation-right{float:right;width:100px;margin-right:13px}
.navigation-right span{display:block;float:right;margin-right:2px}
a .left-icon{background:transparent url(http://3.bp.blogspot.com/-7d2gsBxHw_0/TmMxp8lSpVI/AAAAAAAAAzk/bbvChtbeJIk/s1600/Arrow2%2BLeft.gif) no-repeat left top;width:24px;height:24px;border:none!important;opacity:0.7;filter:alpha(opacity=70)}
a .right-icon{background:transparent url(http://3.bp.blogspot.com/-udYjYLBXw4A/TmMxqOchFLI/AAAAAAAAAzs/JFOr359xcw0/s1600/Arrow2%2BRight.gif) no-repeat left bottom;width:24px;height:24px;border:none!important;opacity:0.7;filter:alpha(opacity=70)}
a .home-icon:hover,a .left-icon:hover,a .right-icon:hover{opacity:1;filter:alpha(opacity=100)}
#blog-pager{display:none!important}

Demo ⇒ Bawah (belum)

Setelah Anda telah memilih kode CSS diatas, saatnya anda menerapkannya pada HTML (centang Expand Widget Templates) pada editing template blogger Anda dan cari kode <a expr:name='data:post.id'/>

Jika sudah ketemu dengan kode tersebut lalu copy paste kode berikut persis diatas <a expr:name='data:post.id'/>

HTML Atas

<div class='navigationpager-top' id='navigationpager-top'>
 <a expr:href='data:blog.homepageUrl'><div class='top-icon-home'/></a>
 <div class='float-left'>
  <b:if cond='data:olderPageUrl'>
   <a expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' title='Halaman Sebelumnya'><span class='top-icon-left'/></a>
  </b:if>
  <b:if cond='data:newerPageUrl'>
   <a expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' title='Halaman Selanjutnya'><span class='top-icon-right'/></a>
  </b:if>
 </div>
</div>

HTML Bawah

<div class='navigation-page' id='navigation-page'>
 <a expr:href='data:blog.homepageUrl'><div class='home-icon'/></a>
 <div class='navigation-right'>
  <b:if cond='data:olderPageUrl'>
   <a expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' title='Halaman Sebelumnya'><span class='left-icon'/></a>
  </b:if>
  <b:if cond='data:newerPageUrl'>
   <a expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' title='Halaman Selanjutnya'><span class='right-icon'/></a>
  </b:if>
 </div>
</div>

Pasang Iklan Anda di Sini

Pasang Iklan Anda di Sini