နမူနာ အေနနဲ႔
- ဒီတစ္ခါေတာ့ ဘေလာ့ဂါမွာ 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/AVvXsEimmmNNjxSucMn6LwIPknaMz6YwbqjTz-dzIZnVLajYVfodoVyJu8AVzJ8O4UcqBr_I-0CrAPxmxwHWzi2oZ1bvN8pBQE2WjMGN6q_w-2TIuE-kKQ5rZP44w8x3jtkH8K96QS1IZEPmRh0/s1600/home.png); } ul#navigation .about a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3333XO3_Zl_ySdNsA_wTANotSFl5pp1O5m2W6leTnAVI9cANgNNeK_06TwF-WBLM4maKfj4CKMk0_cnC5ZG6dNWOY2tcb5rB-XVu_7_OFlcfpd2nnz3rf9bju0PTIhuh1SDo6Y-j1cuU/s1600/idcard.png); } ul#navigation .search a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6TamCtjFy0Aw6A1-TRVN-huTzLmSfTAgNwYNs-NnjK40-TZZNy5B-cNCVPg9SB7TbPeWA3q4rishoU3mO5DKijUiGRqmYDWttgHUTdkh_HTHuHTW2XlZLGEJTZJM09cjoSnfQUbZ9c6A/s1600/search.png); } ul#navigation .podcasts a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUopvMh4PwLX_CZtvRDEJ2DhFGpZ3wQICpKsirgLL823g-wHje9HSvxcUPapoXJB-5Xm4ngg3Y63HaPI-J1-Fp7gZTnSoALRX__iO28Wi9Lb4SHtLMDWL56_jEmNhFv1ghOZNYGxwb7dw/s1600/ipod.png); } ul#navigation .rssfeed a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitzdoS2IwbcwQVAEv9vdxcEZUDaaWi6kdsrCzGplPcOQyANOgbxANS6LwgxQcL9wuYTJ6b7rXOby9Su0sZ9CGpurXj_EyPDR9yHFN7YW7Ot58yX8T-E9sIw_f4I9HG5oKj_77Of7cS1Vs/s1600/rss.png); } ul#navigation .photos a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWyjl66bpJAugiVvbS2YfwydwW7pw1G3hQ0pL9WO4kGJbFvqBNnd87k3oPHOLQL6YFBpKfeHIgD4y35yxn51Wuow2pqXhCQOH3_bwJnrQwctEJij1650pMrTiiax1dY6pO0HUARWBLS28/s1600/camera.png); } ul#navigation .contact a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEj_TH3rIhQ_464nWxGXZ1JCoLswpv0zOqZ7zat3TbA71AT8V_myfotqy44PqjzoGn7aDqNU9Bjy5WKx7fzyUuXtlDq2EZ5C5bwVxqQsbeliZwI1NXHP4kj9lLucpgPr4IoBTHS9pZAj0/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
ဒါေလးကို ဖတ္ေပးပါဒီဘေလာ့ေလးသည္ ဘူးေရမ်က္ရြာ (wall.fm) ဆိုဒ္ေလးမွ တည္ေထာင္ထားပါသည္ ဘာေၾကာင့္လဲဆိုေတာ့ wall.fm ဆိုဒ္မ်ား free မရေတာ့လွ်င္ ယၡဳဘေလာ့တြင္ ဆက္လက္မွ်ေဝသြားႏိုင္ရန္ စီစဥ္ထားျခင္းျဖစ္ပါသည္
No comments:
Post a Comment
ပံုတင္ရန္[im]...[/im]
scrolling effect [ma]....[/ma]
စာလံုးအရြယ္ [si="2"]...[/si]
အေရာင္ [co="red"]...[/co]
အလယ္မွာထား [ce]...[/ce]
scrolling effect ညာဘက္ [ma+]...[/ma+]
ေဘာက္ [box]...[/box]
အမွတ္ [mark]...[/mark] ;
ေနာက္ခံ effect [card="blue"]...[/card]
ပံု fix size [im#]...[/im]
Link ထည့္ရန္ 〈a href="ေဖာ္ျပလိုေသာ Link"〉more..〈/a>
Note: Only a member of this blog may post a comment.