07 March 2010
Membuat Side Fixed Menu
hak milik
Sue
Assalaualaikum , Msue ingin berkongsi ngan korang bagaimana hendak membuat 'Side Fixed Menu' di sidebar korang
1. Login ke Blogspot .
2. Klik Layout - Edit HTML(Tandakan pada kotak Expand widget)
3. Cari kod di bawah(Gunakan Ctrl + F untuk memudahkan korang mencari)
]]></b:skin>
4. Pastekan kod di bawah di atas kod tersebut .
#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; }
5. Cari kod di bawah ini pula .
<div id='content-wrapper'>
6. Pastekan kod di bawah ini di bawah kod tersebut
<div id='menulateral'>
<span>
<a href='http://msueroomz.blogspot.com/' style='border:0;' title='Home'><img alt='Home' class='menulateral' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYvGnRo2wb-3TnSnA6bTqpbamllbuGERF1MGWElq7Dj-NHbZXpp8r1CVy_kfJdliujZiWzyVWyO19LF0Fy9fRUq-C7iTVeO4Gyzaa97h0cOMv2AjkRQzg9je7g2yQCYUVDuIcvmE2sYlQ/s1600/menu-lateral-inicio.png'/></a>
<br/><a href='http://msueromz.blogspot.com/search/label/?max-results=999' style='border:0;' title='Show All Posts'><img alt='Archivo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX_Rn87QBOJVIiVEB5hySt040S1jJuKRsQO63lF2J-xjO068THDGLuPikHkpyeXJZQl-9xE-VlyT5d3Nn4Mx4QYqSCPGdFYosByM8MNwhyLNY8tSu71eCRZJ9RwWtzzDD1jPmBWuUGuQ4/s1600/menu-lateral-archivo.png'/></a>
<br/><a href='mailto:EMAILKORANG@yahoo.com' style='border:0;' title='Subscribe By Email'><img alt='Subscribe By Email' class='menulateral' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy4tI1RtHr4S99QzIXdSPVbeFOblWEC_1wQthN2Kg6CdolrdHBYLGUXFCIUk2np2SXIa4OEZ8_KrMO57sbTPqmdISWPNwCOJxUnUlEIH-4FhkfenUNYUi1XxbhzX3zsLHUxh3K41UMJgQ/s1600/menu-lateral-contacto.png'/></a>
<br/><a href='http://msueroomz.blogspot.com/feeds/posts/default' rel='alternate' style='border:0;' title='Subscribe a post Feed' type='application/rss+xml'><img alt='Suscribe a post Feed' class='menulateral' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFYFVIboRGMKRGR5DinDKnGiGIjPjz-oPTBu_QKkJaCsOYSjiBvssxoitzQYK6XD9FloZR79NJYA-s3WDs2DIiUeWEyKo0UldPNxP_pMO3CU7xO-dQRj6ykB1Tljnj8NYXdoB6yb0CK3s/s1600/menu-lateral-feed.png'/></a>
<br/><a href='http://msueroomz.blogspot.com/feeds/comments/default' style='border:0;' title='Subscribe 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='#header' style='border:0;' title='Back to top'><img alt='Back to top"' class='menulateral' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEics0mNsnZvUE9o6ASuoEFf_z3vpHH6RiEl3HCpZ3xB_3NGFK4ojGQupB4uejtJBHwswDiRLuavoNGzFfm0bY1qMHjzoIHG-ZPMe-6mvE60isP1SVUiaDjjiMJvOetiW3wUXUMDfeD6Prw/s1600/menu-lateral-arriba.png'/></a>
</span>
</div>
7. Preview dan Save template jika tiada error
Note: Pada highlight merah mungkin perlu diganti mengikut kesesuaian sidebar korang ,
pada highlight biru pula korang gantikan ngan yang bersesuaian
Via - ShamZone
1. Login ke Blogspot .
2. Klik Layout - Edit HTML(Tandakan pada kotak Expand widget)
3. Cari kod di bawah(Gunakan Ctrl + F untuk memudahkan korang mencari)
]]></b:skin>
4. Pastekan kod di bawah di atas kod tersebut .
#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; }
5. Cari kod di bawah ini pula .
<div id='content-wrapper'>
6. Pastekan kod di bawah ini di bawah kod tersebut
<div id='menulateral'>
<span>
<a href='http://msueroomz.blogspot.com/' style='border:0;' title='Home'><img alt='Home' class='menulateral' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYvGnRo2wb-3TnSnA6bTqpbamllbuGERF1MGWElq7Dj-NHbZXpp8r1CVy_kfJdliujZiWzyVWyO19LF0Fy9fRUq-C7iTVeO4Gyzaa97h0cOMv2AjkRQzg9je7g2yQCYUVDuIcvmE2sYlQ/s1600/menu-lateral-inicio.png'/></a>
<br/><a href='http://msueromz.blogspot.com/search/label/?max-results=999' style='border:0;' title='Show All Posts'><img alt='Archivo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX_Rn87QBOJVIiVEB5hySt040S1jJuKRsQO63lF2J-xjO068THDGLuPikHkpyeXJZQl-9xE-VlyT5d3Nn4Mx4QYqSCPGdFYosByM8MNwhyLNY8tSu71eCRZJ9RwWtzzDD1jPmBWuUGuQ4/s1600/menu-lateral-archivo.png'/></a>
<br/><a href='mailto:EMAILKORANG@yahoo.com' style='border:0;' title='Subscribe By Email'><img alt='Subscribe By Email' class='menulateral' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy4tI1RtHr4S99QzIXdSPVbeFOblWEC_1wQthN2Kg6CdolrdHBYLGUXFCIUk2np2SXIa4OEZ8_KrMO57sbTPqmdISWPNwCOJxUnUlEIH-4FhkfenUNYUi1XxbhzX3zsLHUxh3K41UMJgQ/s1600/menu-lateral-contacto.png'/></a>
<br/><a href='http://msueroomz.blogspot.com/feeds/posts/default' rel='alternate' style='border:0;' title='Subscribe a post Feed' type='application/rss+xml'><img alt='Suscribe a post Feed' class='menulateral' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFYFVIboRGMKRGR5DinDKnGiGIjPjz-oPTBu_QKkJaCsOYSjiBvssxoitzQYK6XD9FloZR79NJYA-s3WDs2DIiUeWEyKo0UldPNxP_pMO3CU7xO-dQRj6ykB1Tljnj8NYXdoB6yb0CK3s/s1600/menu-lateral-feed.png'/></a>
<br/><a href='http://msueroomz.blogspot.com/feeds/comments/default' style='border:0;' title='Subscribe 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='#header' style='border:0;' title='Back to top'><img alt='Back to top"' class='menulateral' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEics0mNsnZvUE9o6ASuoEFf_z3vpHH6RiEl3HCpZ3xB_3NGFK4ojGQupB4uejtJBHwswDiRLuavoNGzFfm0bY1qMHjzoIHG-ZPMe-6mvE60isP1SVUiaDjjiMJvOetiW3wUXUMDfeD6Prw/s1600/menu-lateral-arriba.png'/></a>
</span>
</div>
7. Preview dan Save template jika tiada error
Note: Pada highlight merah mungkin perlu diganti mengikut kesesuaian sidebar korang ,
pada highlight biru pula korang gantikan ngan yang bersesuaian
Via - ShamZone
Tinggalkan Komen Anda Disini