Cara membuat Slide navigasi Next Prev Posting di Blog

Masih di Ber-BagiGans share Cara membuat Slide navigasi Next Prev Posting di blog cekidot

Silahkan sobat Copy Paste script di bawah ini di Edit HTML jangan lupa centang Expand Template Widget kemudian tekan Ctrl+f dan paste script ]]></b:skin> jika sudah ketemu silahkan copy paste script di bawah ini simpan sebelum script ]]></b:skin> di blog sobat

/********************************
CSS Slide Out Posting lama/baru *
********************************/
.lama a {
    color: #000;
    position:fixed;
    top:50%;
    right:-50px;
    height: 23px; width: 100px;
    color: #fff; text-shadow: 1px 1px 0px #999;
    background: #aaa; background-color: rgba(116,116,116,0.36);
    -moz-border-radius-topleft:7px;
    -moz-border-radius-bottomleft:15px;
    padding: 3px 3px;
    text-decoration: none;
    -moz-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in;
    -webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in;
    }
.lama a:hover {
    color: #ffffff; /* background saat hover */
    right:-1px;
    background: #fff;
    }

.baru a {
    color: #000; position:fixed;
    top:50%; left:-50px;
    height: 23px; width: 100px;
    color: #fff; text-shadow: 1px 1px 0px #999;
    background: #aaa;
    background-color: rgba(116,116,116,0.36);
    -moz-border-radius-topright:7px;
    -moz-border-radius-bottomright:15px;
    padding: 3px 3px; text-decoration: none;
    -moz-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    -webkit-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
    }
.baru a:hover {
    color: #ffffff;
    left:-1px ; background: #fff; /* background saat hover */
    }

Update

/********************************
CSS Slide Out Posting lama/baru *
********************************/
.lama a {
color: #transparent;
position:fixed;
top:50%;
right:10px;
height: autopx; width: autopx;
color: #transparent; text-shadow: 1px 1px 0px #transparent;
background: #transparent; background-color: #transparent;opacity:0.5; filter:alpha(opacity=40); this.style.opacity=6; border-radius:8px;
}
.lama a:hover{opacity:100; filter:alpha(opacity=40); this.style.opacity=1;}
.baru a {
color: #transparent; position:fixed;
top:50%; left:10px;
height: autopx; width: autopx;
color: #transparent; text-shadow: 1px 1px 0px #transparent;
background: #transparent;
background-color: #transparent;background-color: #transparent;opacity:0.5; filter:alpha(opacity=40); this.style.opacity=6; border-radius:8px;
}
.baru a:hover{opacity:100; filter:alpha(opacity=40); this.style.opacity=1;}

Kemudian silahkan sobat cari kode di bawah ini

<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>

jika sudah ketemu silahkan sobat ganti dengan script di bawah ini

<div class='lama'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'>Prev</a>
      </span>
      </div>

Update

<div class='lama'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><img src='http://i1187.photobucket.com/albums/z389/RICKY_ALDIYANSYAH/nextbutton.png'/></a>
</span>
</div>

satu langkah lagi sobat , silahkan cari kembali script di bawah ini

<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>

jika sudah ketemu silahkan ganti script di atas dengan script di bawah ini

<div class='baru'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'>Next></a>
      </span>
      </div>

Update

<div class='baru'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><img src='http://i1187.photobucket.com/albums/z389/RICKY_ALDIYANSYAH/backbutton.png'/></a>
</span>
</div>

Simpan dan lihat hasilnya semoga bermanfaat

Sumber: http://variasiblogger.blogspot.com/2012/01/cara-membuat-slide-navigasi-next-prev.html#ixzz1v2odMdTq

Ber-BagiGans™