- ဒီတစ္ခါေတာ့ ဘေလာ့ဂါမွာ 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/AVvXsEjfWl-Z5wWUUvMP7Wil1rAtTusQ74O2dKnJzP5o-K1kNBtM0dr6rZXi3bN7A8IvBev2hL2W60ZP_1VRsXDfn71_DkmTNZY4X8z_N_9QGAVj7ve1bvMWiaQyWRbnUUaFZ7fu9uK4gsiFRbI/s1600/home.png); } ul#navigation .about a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnR4ljNgD1jCen3PUbz-hfxR4HF27XA7Z3wvtAvYcUXEU1HNzeFSQWNB_HsZs3_xyhs1-poINJI1n0GpH2dxFneWQhYZYC85sMPCpONevC0RtY3v6Bx7kSy1ZtSVU2DCrznyf5VZ41Mpk/s1600/idcard.png); } ul#navigation .search a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3JJQ8_qKf03xHOxQ0YElp45GgWvCSaA5jJTblbZx6Mc8KSSM0TChEAI9ptItcPXMcmGuPSGGccnjLcLwNNRFsVSu_dXhPblNiVco-gRCOnXvaooeRcQookljVnlMKnf6QoH9JsrgWfTE/s1600/search.png); } ul#navigation .podcasts a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL2N1OiR1rIeCSkdPJtt2gi4yQN3rZJK6xM3l89uogzEugc6eDtniG8Rr2LVpHYGCxDDFqSJkbUNXUBrngRe9LKRb_5uatq5Ciob6OMfGTxXebdemBAmUs9qs8A5iYnbztcPNGqP4XkSo/s1600/ipod.png); } ul#navigation .rssfeed a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB7GnHiEWFJAp5AsaR_hxMIR1MlQXWg_RcwxYB0rn1rvrMvmar7nifyC9DglMtq2RWLCabCgcTwJaPXgC9NjvzSI-xL7pjToPbFCVAf4lvv2CNmUXGvoepU-LDVdXzWnIlL_VGpoAGSc8/s1600/rss.png); } ul#navigation .photos a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_ruzSBAtdgWK5jqWDw3UyKG_Q2cI075iM9RfUuCU3Z_tz4Fgkddow8Y34M5GhU9a0V4FuR8RbrCBdyat_N0UXNJByaZNux02avWEptkTvBAlK-pLBmcpQG8V97rpJ4tZpLlz9Hh7ZNfk/s1600/camera.png); } ul#navigation .contact a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzke-SRyvRINqZ8PDmvNKLeeiiJ1WUlIm3uW1kikW47kGgDDs-keDWmLl9pySbyh9WOx0a5NxfcKlILOENowNy4TaOIczWxdZUUo_oVmEAwWz25SvSP0XZAtxXvdvhKmsE7V4iMR-lnvY/s1600/mail.png); }
ဖတ္ေပးပါကုဒ္ထဲမွာအနီေရာင္စာသားႏွင့္ေရးထားတားေတြကေတာ့ ပံုေတြရဲ႕ URL ျဖစ္ပါတယ္ မိမိ အသံုး ျပဳလိုေသာ ပံု၏ URL ႏွင့္ အထိုးႏိုင္ပါတယ္ ခင္ဗ်ုာ။
- ေနာက္တစ္ဆင့္ ထပ္လုပ္ရမွာ ျဖစ္ပါတယ္..။
- ေနာက္ခါ [Ctrl+F] ေစာေစာ က ရွာသလိုမ်ိဳးပဲ
<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
No comments:
Post a Comment