Membuat Slide out pada navigasi Posting lama dan Posting baru

Bingung juga ngasih judul dari postingan saya kali ini, tapi untuk jelasnya Tutorial menu kali ini adalah membuat menu Fixed Slide Out yang saya terapkan pada Navigasi untuk Posting Lama dan Baru yang biasanya ada pada bagian bawah artikel, saya buat menjadi menu Fixed dengan efek slide out, yang saya sudah coba pada blog saya sendiri bisa dilihat di sebelah kanan atau kiri blog saya.
 
  • Log In Ke blogger anda
  • Masuk ke rancangan, lalu ke edit html.
  • Kemudian cari kode

/********************************
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 */
    }

  • Jika sudah kemudian cari kode dibawah ini (untuk posting lama)
<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>

  • Kemudian ganti kode di atas dengan kode berikut :
<div class='lama'>
      <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'>Prev</a>
      </span>
      </div>


  • Kemudian cari lagi kode dibawah ini
<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>

  • Kemudian ganti kode diatas dengan kode berikut :
<div class='baru'>
      <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'>Next&gt;</a>
      </span>
      </div>

setelah simpan template, semoga berhasil ya kawan.

Share it to your friends..!

Share to Facebook Share this post on twitter Bookmark Delicious Digg This Stumbleupon Reddit Yahoo Bookmark Furl-Diigo Google Bookmark Technorati Newsvine Tips Triks Blogger, Tutorial SEO, Info

1 komentar:

  1. Keren juga kalau pakai slide out ini sob! THANKS :)

Post a Comment

 
Ridho Technology © 2012 | Template by Ridho Technology