Blogger မွာ Slide Out Menu လွလွေလးထည့္ၾကမယ္ ~ itfree4u

Blogger Template မွာ ေတာ္ေတာ္ မ်ားမ်ား ေတာ့ မူလပါတဲ့ Menu ေလးေတြပါပါတယ္။ လန္းလဲ လန္းပါတယ္။ တကယ္လို႔ မ်ား မူရင္းပါျပီးသား Menu ကို မၾကိဳက္လို႔ ပဲျဖစ္ျဖစ္ ထပ္ျပီးေတာ့ Menu အသစ္ေလး ထည့္ခ်င္လို႔ ပဲ ျဖစ္ျဖစ္ အခု Menu ေလးက အဆင္ေျပေစမယ္လို႔ ေမွ်ာ္လင့္ပါတယ္။ ဘာလို႔ လဲ ဆိုေတာ့ ဒီ Mouse Hover Slide Out Menu ေလးက Template မွာ ေနရာ သိပ္မယူတာေၾကာင့္ ျဖစ္ပါတယ္..။ ထည့္ခ်င္တဲ့ သူငယ္ခ်င္မ်ား ေအာက္ေျပာျပထားတဲ့ နည္းလမ္းေလးအတိုင္း လုပ္ၾကည့္လိုက္ပါ...။

နမူနာ အေနနဲ႔ ဒီမွာ သြားေရာက္ ၾကည့္ႏိုင္ပါတယ္။

ဒီတစ္ခါေတာ့ ဘေလာ့ဂါမွာ Slide out Menu အလန္းစားေလး ထည့္ၾကည့္မယ္ဗ်ာ။ မိမိ ဘေလာ့ေလးကို အလန္းစားျပင္ဆင္လိုသူမ်ား အတြက္ေတာ့ အၾကိဳက္ေတြမယ္လို႔ ေမွ်ာ္လင့္ပါတယ္ ခင္ဗ်ာ...။

စလုက္ၾကည္ၾကရေအာင္ဗ်ာ...။
ပထမဆံုး အေနနဲ႔ ေတာ့ မိမိ template ေလးကို back လုပ္ထားလိုက္ပါ..။ တစ္ခုခု လႊဲမွားသြားရင္ မိမိ template ကို အရင္အတိုင္း ျပန္ထည့္ႏိုင္ေအာင္ေပါ့ေနာ္.။
အရင္ဆံုး Template>> Edit HTML ကို သြားလိုက္ပါ..။ ျပီးရင္ေတာ့ [Ctrl+F] ကီးကို ႏိႈက္ျပီး ]]></b:skin> ကိုရွာလုက္ပါ။ ေတြျပီဆိုင္ရင္ေတာ့ ေအာက္မွာ ေပးထားတဲ့ ကုဒ္ေတြကို ]]></b:skin> ၏ အေပၚက ထည့္ေပးလိုက္ပါ။
တစ္ခုေလာက္ က်ေနာ္တို႔ မွတ္ထားရမွာက Blogger မွာ css ကုဒ္ေတြကို ]]></b:skin> ၏ အေပၚတြင္ ထည့္ေပးရျပီး script ကို ေတာ့ </head> အေပၚမွာ ထည့္ရတယ္ဆိုတာေလးကို မွတ္ထား ေစလို႔ပါတယ္ခင္ဗ်ာ။

ul#navigation { position: fixed; margin: 0px; padding: 0px; top: 10px; left: 0px; list-style: none; z-index:9999; } ul#navigation li { width: 100px; } ul#navigation li a { display: block; margin-left: -2px; width: 100px; height: 70px; background-color:#CFCFCF; background-repeat:no-repeat; background-position:center center; border:1px solid #AFAFAF; -moz-border-radius:0px 10px 10px 0px; -webkit-border-bottom-right-radius: 10px; -webkit-border-top-right-radius: 10px; -khtml-border-bottom-right-radius: 10px; -khtml-border-top-right-radius: 10px; /*-moz-box-shadow: 0px 4px 3px #000; -webkit-box-shadow: 0px 4px 3px #000; */ opacity: 0.6; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60); } ul#navigation .home a{ background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEoKVub74Ks-SJCE9hygMk9S9jwGvA1yO0wyZa310Eecz0LVOtdA7myDIT0y-bEZ0v7TZkaUlQyLrsMRt41MSPqzxj-taLOuEUokpIS5SRQdDBgSTsFbGN27uNTsnrr0kELyC_xE5U_TM/s1600/home.png); } ul#navigation .about a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiset_ic3t9FQ4fwqaimVyld-VwX9_0hUTDH7qxDxkGKeoFBhipOiRhxfiN-qOaZp7sO_B-bd0WH7dRZRBzp5HgmIuROcPOcxrNlfV4ks7tQtcRQNCEpdEFnVyTD7N87B4_mOjp_YVpfUk/s1600/idcard.png); } ul#navigation .search a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0MfjpYilKYM2n4Ak_TjP3Tk678tyaTJcUsGFEzYUbZ_N5Cd5TgnsIh1Itv3G-6yxVWAf3aZkDkLFMbQBK8IJP8yUWNsFhk-blziP9hU7i8cIwIILvnPjegb3PcHp0MKpfrOSCMSeKdQw/s1600/search.png); } ul#navigation .podcasts a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkLNG_xRK0aavoJW9WKbBIpR6yXtdvW_gceOSAQnOPAMHQOUV-mJZBLdUY6B30MUHymcQqz0LG3m2GnhShaMiikbrR0yFSa_0vfBwiqxQ_S5cDN5mLjycE2Mum-okR2Q5_nyxHjkvvb9s/s1600/ipod.png); } ul#navigation .rssfeed a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8M-y-uktXv-RQvXPw1v43edxJ2TPfrxG1sqlICk_3noHKcSZNkUH4p5oNmp8rNx_NEUW1zhm9IOoT7RWbed9zJgmUV33o8eYerB8DCN1IpjzTH8iccPPqDWxT5aNyQz1MyAlHm4swdu0/s1600/rss.png); } ul#navigation .photos a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggrDxaR1Zdic025hjoCwwQFQf7OriLMdqTnmIzB9D6kCcAtXLnAO8GHOVzUOFBz8txVvnv3ocy7VxLlk6mBijr66rArag4AZHUMLeLjF2yYKdn5aTAfQOvS61I8Yo89bFpOp0mVLD3j9U/s1600/camera.png); } ul#navigation .contact a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxMPh9S9V9bMUCeoK14doIYcUZkGOOM1YMQO-1IKrxS-4ho7nwkzEjf8pxC9HBcErepmu6f7YdhQ5bj70ekTAhx1WwRcp2kYA3UmDEvc6OrACwF9pWCaZlatNQ2S9zMIZvFAakA-_4Vns/s1600/mail.png); }

ဖတ္ေပးပါကုဒ္ထဲမွာအနီေရာင္စာသားႏွင့္ေရးထားတားေတြကေတာ့ ပံုေတြရဲ႕ URL ျဖစ္ပါတယ္ မိမိ အသံုး ျပဳလိုေသာ ပံု၏ URL ႏွင့္ အထိုးႏိုင္ပါတယ္ ခင္ဗ်ုာ။

ေနာက္တစ္ဆင့္ ထပ္လုပ္ရမွာ ျဖစ္ပါတယ္..။

ေနာက္ခါ [Ctrl+F] ေစာေစာ က ရွာသလိုမ်ိဳးပဲ

</head>
<body>
ကို ရွာလိုက္ပါ။ ေတြျပီ ဆိုရင္ေတာ့ ေအာက္မွာ ေပးထားတဲ့ ကုဒ္ကို </head>ႏွင့္ <body> အေပၚက ထည့္ေပးလိုက္ပါ။

<script type="text/javascript">

            $(function() {

                $('#navigation a').stop().animate({'marginLeft':'-85px'},1000);

                $('#navigation > li').hover(

                    function () {

                        $('a',$(this)).stop().animate({'marginLeft':'-2px'},200);

                    },

                    function () {

                        $('a',$(this)).stop().animate({'marginLeft':'-85px'},200);

                    }

                );

            });

        </script>

</head>

<body>

<p style="display:none;"> Navigation Menu by<a href="http://www.latesthack.com">Latest Hack</a></p>

<ul id="navigation">

            <li class="home"><a href="ဒီမွာ Link ထည့္ပါ" title="Home"></a></li>

            <li class="about"><a href="ဒီမွာ Link ထည့္ပါ" title="About"></a></li>

            <li class="search"><a href="ဒီမွာ Link ထည့္ပါ" title="Search"></a></li>

            <li class="photos"><a href="ဒီမွာ Link ထည့္ပါ" title="Photos"></a></li>

            <li class="rssfeed"><a href="ဒီမွာ Link ထည့္ပါ" title="Rss Feed"></a></li>

            <li class="podcasts"><a href="ဒီမွာ Link ထည့္ပါ" title="Podcasts"></a></li>

            <li class="contact"><a href="ဒီမွာ Link ထည့္ပါ" title="Contact"></a></li>

        </ul>

အေပၚက title="..........."> ဆိုတဲ့ ေနရာမွာေတာ့ Link အေၾကာင္းအရာ နာမည္ေလးကို ထည့္ေပးႏိုင္ပါတယ္ခင္ဗ်ာ.. ဥပမာ>>[<li class="home"><a href="http://4wadi.blogspot.com/" title="ဘူးေရမ်က္ရြာ"></a></li>] ဒီလိုေလး ေျပာင္းေရးႏိုင္ပါတယ္။

အားလံုး Links ေတြ ပံုေတြကို စိတ္ၾကိဳက္ ျပင္ဆင္ႏိုင္ပါတယ္ခင္ဗ်ာ..။ အားလံုး အဆင္ေျပၾကမယ္လို႔ ေမွ်ာ္လင့္ပါတယ္။ အဆင္ေျပတာ ရွိရင္ ေကာ့မက္ေလး ေရးထားခဲ့ေပးပါ ခင္ဗ်ာ။ :=d

ဒါေလးကို ဖတ္ေပးပါဒီဘေလာ့ေလးသည္ ဘူးေရမ်က္ရြာ (wall.fm) ဆိုဒ္ေလးမွ တည္ေထာင္ထားပါသည္ ဘာေၾကာင့္လဲဆိုေတာ့ wall.fm ဆိုဒ္မ်ား free မရေတာ့လွ်င္ ယၡဳဘေလာ့တြင္ ဆက္လက္မွ်ေဝသြားႏိုင္ရန္ စီစဥ္ထားျခင္းျဖစ္ပါသည္