Membuat menu Fixed pada blog

ok...!!!! Kiita ketemu lagi dengan tips dan trik dari karya anak kidoel. kali ini karya anak kidoel akan memberikan sedikit tips buat para bloger mungkin anda suka dan tertarik boleh anda memasang tutorial di bawah ini.....!!!



ok langsung saja kita kerjakan.......!!!!!!!

1. Log in ke blogger anda


2. Rancangan, edit html


3. Simpan kode berikut di atas kode ]]></b:skin> : 

#menulateral{

position:fixed; text-align:left;

margin-top:100px; margin-left:-28px;

}

#menulateral{

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;

}

#menulateral a img{

filter:alpha(Opacity=100);

}

#menulateral img{

margin-bottom: -5px;

}

.menulateral{

margin-bottom: -3px;

}

Kemudian cari kode :

<div id='content-wrapper'>

Jika sudah ditemukan simpan kode berikut di bawah kode tadi :

<div id='menulateral'>

<span>

<a href='Link tujuan' style='border:0;' title='Judul'><img alt='Judul gambar' class='menulateral'

src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5L8tq9LKzNHpjRmSW3-strpZjPorvHQkrvgIx4x3fkIexXWS3b7Q33kgFK7Y7UR2EVmh0Vc_i-20QHrQZM9o_DfPzCkQDdo-Br_2M9EK9onU25czJ2tNDNjyCzWjRKLUEZ5zl3kC1Z5M/s1600/menu-lateral-inicio.png'/></a>

<br/><a href='Link tujuan' style='border:0;' title='Judul'><img alt='Judul gambar'

src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLHV5x1mu9I8JAIDdzOpmupVmYZYe1zdfGQV2CLVvXBCnQ7YD-AN3UH12rFZsXNYC0MUV6IO0HKZjMRFszrtnsCPVTnZ1pTTbF5Ejj5ng_LjVr4ejVWRCImHn2OAzUrhC6it2h7GkUQB0/s1600/menu-lateral-archivo.png'/></a>

<br/><a href='Link tujuan' style='border:0;' title='Judul'><img alt='Judul gambar'

class='menulateral' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5N4fAncPcnK4z1qTzh2LpCq8YYFFgI1QaBL6OCqzir8hF62xCmZJaqYeXogxVEASeTQqAAGG3nxXDj28PshH06yMYwIgPoY3iOycUTcSfk3kmBDeQqn_LX8FYnys6GI8taw464zs82V8/s1600/menu-lateral-contacto.png'/></a>

<br/><a href='Link tujuan' style='border:0;' title='Judul'><img alt='Judul gambar' class='menulateral'

src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit3_Ek81_qkDUaxc8OD73z374tYnimKb2hmvn-ygEoShKuLtnh8RlGLn_lzQ3a_SVws3h7lyuMJsrbSlDb7owMIyw4UCt8bDjaV7bFFjJI8DY77YrivAGP9_I_cmAIr54nhwsnslffiac/s1600/menu-lateral-feed.png'/></a>

<br/><a href='Link tujuan' style='border:0;' title='Judul'><img alt='Judul gambar' class='menulateral'

src='http://i120.photobucket.com/albums/o190/jaloewig/jaloe/Menu%20Fixed/feed-icon-16x16b_BG_G.png'/></a>

<br/><a href='Link tujuan' style='border:0;' title='Judul'><img alt='Judul gambar' class='menulateral'

src='http://i120.photobucket.com/albums/o190/jaloewig/jaloe/Menu%20Fixed/flickr_icon_BG_G.png'/></a>

<br/><a href='Link tujuan' style='border:0;' title='Judul'><img alt='Judul gambar' class='menulateral'

src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTXToOVAIhdZAVJ13IBCB9nsszxBN6y_VKJCzBxp-vbHFirQOBQ-tC1DALfC6uJmjVHokcmBgpoBdWLyaej-W7CTweyzaCOYRnzyAZepjsVj-9vdcBbZHzrVklR7Va3YGsiO3h2Ww86E4/s1600/menu-lateral-arriba.png'/></a>

</span>

</div>

yang berwarna Link tujuan (Link yang dituju), Judul gambar (Deskripsi gambar) https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLHV5x1mu9I8JAIDdzOpmupVmYZYe1zdfGQV2CLVvXBCnQ7YD-AN3UH12rFZsXNYC0MUV6IO0HKZjMRFszrtnsCPVTnZ1pTTbF5Ejj5ng_LjVr4ejVWRCImHn2OAzUrhC6it2h7GkUQB0/s1600/menu-lateral-archivo.png' (Link gambar pada menu fixed)



silahkan ganti sesuai keinginan..



Simpan template. dan selesai........

Terima Kasih

Created By Syarief Hidayat



------------------------------------------------------------------------------------------

http://triksgratis.blogspot.com

Posted by Unknown, Published at 19:27 and have 0 komentar