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

Saya buat hanya coba-coba saja untuk membuat ini dengan CSS3 yang sedikit saya ketahui. Nh sekarang kita langsung ke cara membuat Menu tsb, tapi sebelumnya Di menu edit Html Download Template Lengkap terlebih dahulu untuk antisipasi bila terjadi kesalahan. Kita mulai dengan cara-cara dibawah ini:

1. Login blogger
2. Rancangan, Edit Html
3. Download Template Lengkap
4. Centang menu Expand Template Widgets
5. Cari kode ]]></b:skin> dan simpan CSS berikut diatasnya :

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

6. Jika sudah sekarang Cari kode seperti dibawah ini (Untuk Posting Lama) :


<span id='blog-pager-older-link'><br /> <br /> <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><br /> <br /> </span>

• CTRL+F untuk mempermudah pencarian

Ganti kode tersebut dengan kode:


<div class='lama'><br /> <span id='blog-pager-older-link'><br /> <br /> <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><br /> <br /> </span><br /> <br /> </div>
7. Jika sudah sekarang Cari kode seperti dibawah ini (Untuk Posting Baru) :


<span id='blog-pager-newer-link'><br /> <br /> <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><br /> <br /> </span>


Ganit kode tersebut dengan kode:

<div class='baru'><br /> <span id='blog-pager-newer-link'><br /> <br /> <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><br /> <br /> </span><br /> <br /> </div>


8. Simpan Template dan Lihat hasilnya, Kurang lebihnya bisa sobat kembangkan sesuai keinginan.

Bila tak bisa di copas klik di bawah ini

Sumber