Cara Membuat Menu Fixed Slide

Jika kita ingin menambah aksesories navigasi menu fixed ( yang tidak bisa melakukan scrolling mouse pada halaman web , namun hanya menekan tombol gambar panah ke atas maka ia akan kembali ke atas halaman blog kita seperti yang terlihat pada gambar samping atau seperti terpasang pada blog ini demo..
kode hack ini saya dapatkan di blogandweb.com. kamu boleh langsung mengikuti caranya dengan mengklik web tersebut, atau mengikuti di blog ini hasil dari terjemahan-nya.



1. cari kode penutup CSS ini.

]] > </b:skin >

2. Setelah ketemu masukan di atasnya kode ini.

#menulateral{
position:fixed; text-align:left;
/*Si la ubicación del menú no es la adecuada modifica los valores siguiente: */
margin-top:100px; margin-left:-28px; }
* html #menulateral{ /*para IE*/
position:absolute; }
#menulateral a img{
opacity:1; -moz-opacity:1;
filter:alpha(Opacity=100); }
#menulateral a:hover img{
opacity:0.8; -moz-opacity:0.8;
filter:alpha(Opacity=80);
position:relative;top:0px;left:2px; }
* html #menulateral a img{
filter:alpha(Opacity=100); }
#menulateral img{
margin-bottom: -5px; }
* html .menulateral{
margin-bottom: -3px; }

3. Setelah itu baru kita cari kode berikut ini.

<div id='content-wrapper' >

Terkadang kode ini berbeda-beda sesuai template yang kita miliki.tetapi kalau menemukannya, sekarang kita masukan di bawah-nya kode berikut ini.

<div id='menulateral' >
<span >
<a href='http://TUBLOG.blogspot.com/' style='border:0;'
title='Home' > <img alt='Home' class='menulateral'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH4AR9PpNdoAIKaHbz88QmQIylbvhO4j3bAUDHLMKGj8-JRVZvRIlFWwVhNX2D-QI6mb53mrI8UvoHv1GtwLLYjwsrW0qKA1wBt0rI-puqoVHh2-pWa1mFGdmRqwqtXGYeDjMtZba_X7U/s1600/menu-lateral-inicio.png'/ > </a >
<br/ > <a
href='#BlogArchive1' style='border:0;' title='Archivo' > <img
alt='Archivo'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi11CE1YIabdVBFymdQ58SVhcF1ra-e2VpPfQgmxGnlGxTUHKpoBqj6BRq8VigEqcH_C25mviODHFyvzZIsox37Vg5Bz50FOCGItEP6UG2eeSsMVQgx07bXhxWfy_HvVCsLVkhFS_f3S-Y/s1600/menu-lateral-archivo.png'/ > </a >
<br/ > <a
href='mailto:TU-MAIL@servidor.com' style='border:0;' title='Contact
me' > <img alt='Contact me'
class='menulateral'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEictQbcs-JqaKW73GnHSKwqeejlx2DQyP5v85-98Zi0o6FRYsNi0DDWE1dR-m0kQfC36jMcax5TnzOirrTEBGh0QoxX3eBB9715kXgr3wamm3nUatdif26IFju4gBR-qIGIYv6ysUUMYDY/s1600/menu-lateral-contacto.png'/ > </a >
<br/ > <a
href='http://TUBLOG.blogspot.com/feeds/posts/default' style='border:0;'
title='Suscribete a post
Feed' > <img alt='Suscribete a post Feed' class='menulateral'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvR0gJydTStFBNMvC0jugu4MgfOu_71pHWyO35XniREjIhYbWB1SFi8Szc37ZW2BG-L3H3eCOLHvYSYAH9WfgsdYK8QMg6KjvmOJ2zaQyW1lfdQrJ98qRBeZEcKKHjA9kgrg8lDhVbz0E/s1600/menu-lateral-feed.png'/ > </a >
<br/ > <a
href='http://TUBLOG.blogspot.com/feeds/comments/default'
style='border:0;' title='Suscribete a comment
Feed' > <img alt='Suscribete a comment Feed' class='menulateral'
src='http://i120.photobucket.com/albums/o190/jaloewig/jaloe/Menu%20Fixed/feed-icon-16x16b_BG_G.png'/ > </a >
<br/ > <a
href='#' style='border:0;' title='My Album' > <img alt='My Album'
class='menulateral'
src='http://i120.photobucket.com/albums/o190/jaloewig/jaloe/Menu%20Fixed/flickr_icon_BG_G.png'/ > </a >
<br/ > <a
href='#' style='border:0;' title='Arriba' > <img alt='Arriba"'
class='menulateral'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_brx0cNZmu_clCygbPkKMypHfAcuVmQ0LrVMZIiSWYFOCMCaTqCndcB4tWigLsP1cMykIf0HkudWRB5pSde86QxfaiaWsvkZhci8eUTI2_goHV-Miq5jSdHp5t7xr5f4v-WUItRvABSg/s1600/menu-lateral-arriba.png'/ > </a >
</span >
</div >

4. Ganti Http://tublog.blogspot.com dengan blog kita, dan mailto:Tu-Mail@servidor.com dengan alamat Email kita, juga http://TUBLOG.blogspot.com/feeds/posts/default, http://TUBLOG.blogspot.com/feeds/comments/default dengan alamat Feed kita. dan My album dengan alamat penyimpanan koleksi photo kita di web Flickr.
Nb : Karena saya coba menerapkan Navigasi Fixed Menu ini kedalam template minima , maka agar tidak berdempetan dengan body postinganya, saya merubah margin-left di kode ini.

/*Si la ubicación del menú no es la adecuada modifica los valores siguiente: */
margin-top:100px;
margin-left:-28px;

margin-left-nya menjadi -40px;
Sangat bijaksana sekali bila ingin mencoba, selalu backup dulu template aslinya.

---

SEMOGA POSTINGAN SAYA DI ATAS DAPAT MEMBANTU ANDA ^_^ PERINGATAN:KALO ANDA INGIN MEN-COPY POSTINGAN DI ATAS HARAP SERTAI ALAMAT WEB ABS

---