Membuat Fixed Menu

Mungkin kalian semua masih pada bingung apa yang dimaksud dengan Fixed menu. Fixed menu adalah widget yang setiap kita tarik scroll ke bawah atau ke atas widget ini akan ikut turun naik juga.Dari pada kalian pada bingung mending langsung aja kalian coba yah tutorialnya dan jangan lupa backup templatenya dulu.

1. Sign in Blogger

2. Layout

3. Edit HTML


4. Jangan lupa berikan tanda centang pada Expand Widget Templates

5. Cari kode ini :

]]></b:skin>

6. Tambahkan kode ini diatasnya :

#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; }

7. Kemudian cari kode ini :

<div id='content-wrapper'>

8. Tambahkan kode ini dibawahnya :

<div id='menulateral'>
<span>
<a href='http://klinik-tutorial.blogspot.com/' style='border:0;' title='Home'><img alt='Home' class='menulateral'
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWAfyynvdt6zx0Vvl_9-3RkORQ9HnJPnofPf_M6BGB751OB75x4PL3SfDQ-0Gk_gswg2oN1yIo5EHNBZkN4bmzMU27Kd0aCww9DSvJ1DIi44fm-g81g6qSQktEjl49v9yCoaZDdI2S4kE/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/AVvXsEj03CU0K-e8QYu4Ynem_puUgjTaZ-HGK18yP6uRyWyoPNp1w5QODAd3qSICmvOurZ_BApc2y6fdP9KhbhZKws_aXvPaD7dS_czy2iyzMptRf7UqlYqTbdh-ln4r8gIXh-sWZOxdLQzGfMA/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/AVvXsEgEHdtqYLuFxzmI13RNyvecozAB94s_6_5jrdy7EXEQdvfn46ePtgl2w9_h69wtjdDkRZaKIcRNwuwkX_jle6UkqRnbS95Q4wOLR_YG1wqW5XOkyTJt0g5YUoGI9y6ixmxEBbu0e8bfrPw/s1600/menu-lateral-contacto.png'/></a>
<br/><a href='http://klinik-tutorial.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/AVvXsEifn2H3J7byGg6i1-_gWhJ8eRCTPuZQ0A_JuwccrzmkofedVek-mSpRUhrRgdoMBE3gjpic-uRqu-vQgaQF2RqTHiuuMULwGVZS0r8HuEc_DjocSZuQ4pchVSlzHkkpCAVq-b82sWn2aHM/s1600/menu-lateral-feed.png'/></a>
<br/><a href='http://klinik-tutorial.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/AVvXsEgk9GOFt7QyAkoB5izt6IVagCLWzChW0xvvIm85GaIcpp0K7QwnvuJK9jaqE2m8US-Z_cELuRdj3BpHEXJhDbxf9-s_spqMNAJGp7VbWS9pfM9tE6cHBCnw0MUxEGVSpFTPfBrI2kV1N0g/s1600/menu-lateral-arriba.png'/></a>
</span>
</div>

9. Agar tidak berdempetan dengan template coba kalian cari kode ini :

margin-top:100px;

margin-left:-28px;

ganti margin-left dengan -40px atau jika masih tidak bisa kalian kurangi saja trus dan jangan smpai bderdempetan.

catatan : Ganti tulisan berwarna merah diatas dengan alamat blog kalian.

Artikel Yang Berhubungan :