Side Fixed Menu di Blogger

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/AVvXsEhGMWTmO1IUTPKtT7l8Kkv7fglDcJfgsn7y6Ju9JTYrtrO6Npfe6dY36NXJHBBbo4T6MJ-CCTrShGnEvCRmUr7QY6ha82U5LVm58iaTCDhjJI_BAEKlXp2WxscLaUNgQFnHqjpXyfU-o1g/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/AVvXsEhXzvjpOuddN7o9UC-tYjsutYhFIRpdbyGUCU-C6ezPulwJgbIOobgg1_X5FE3PW-yd617lZdhqLKyTju72Aj4AGkIoJ739KE60TweeTZBP8H21LAhDHWhEagP_k2n5SH8Atetm9yZQ0R8/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/AVvXsEiQPr-eMQZmufojkuE_YMz-r5yLs3Kn__2GlS12hlJifqeSoMBuARmFUlhLZ6hyphenhyphen-0zAc4_VDRy5-I-otFbAgu44yQkwqRaJ2IawVaLmAzUXbTYz9yT5ejXyFmHYVcRU81W9s3nEtVwHGbI/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/AVvXsEhnr7obrVBLvxbwF5EM7czz55S28aSmPFufAXA-apyUEZ2PlyDCO8OwLVukNVSkc7Na7sFQcn7RQ8aFPO9mdl0B1BYL2YxH0jPe9IIZ9A4ucp5WD3DhJKtvY6Q7N9OZtTQzqyVc1IOxuEI/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/AVvXsEjdD4yjntdEFUvHUclGiwF4u5SbkMrqSGZTJZrpjMS1S6fp-YsAQcPkb7EUYVuGo_UWfz1YIhZcRsC3DsigJbjuFcSkjJQv1WR6w6uP-i3UVQXl9q4qu93F1r0l0crMrcrRxt776Kd2lcg/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.

View Web : blogandweb.com

del.icio.us tags: Belajar blogs, new blogger