Dock style footer navigation for wordpress
ဒီလိုဗ်ာ wordpress theme အတြက္ header navigation ကို ျပင္ေရးပီးေတာ့ footer navigation ကို ျပင္ေရးဖို႔ စဥ္းစားေတာ့ သုံးထားတဲ့ theme က header nav လို footer မွာ navigation style က မပါဘူး သာမန္ link ညႊန္းထားတာေလးပဲပါတယ္။
ျပင္မယ္ဆိုရင္ style.css မွာ footer အတြက္ ေရးရဦးမယ္၊ ၿပီးေတာ့ footer.php မွာ ထပ္ေရးရမွာ..
footer မွာသုံးခ်င္တာကေတာ့ link တို႔ page တို႔ကို ခ်ိတ္ဆက္ညႊန္းဆိုဖို႔ပါပဲ။
ရိုးရိုးရွင္းရွင္း link ခ်ိတ္ဆက္တဲ့ ပုံစံေရးလိုက္ရင္ေတာ့ ရတယ္၊ ဒါေပသိ footer မွာ ဒီဇိုင္းဆန္းဆန္းသုံးခ်င္ေတာ့ စဥ္းစားလိုက္တာ၊
က်ေနာ့ ကြန္ပ်ဳတာမွာ သုံးေနတဲ့ object dock ရဲ့ style ကို webpage ထဲမွာ သုံးခ်င္စိတ္ေပၚလာတယ္၊ ေတြ႕ခ်င္ေတာ့ က်ေနာ္သုံးေနတဲ့ hosting ထဲက cpanel ထဲမွာ သုံးထားတာေတြ႕ရတယ္။
ဒါနဲ႔ source ကေန coding ဖတ္ၾကည့္ပီး က်ေနာ့ဆိုဒ္အပိုတစ္ခုမွာ စမ္းၾကည့္တာ အဆင္ေျပသြားတယ္။
အရင္ဆုံး dock style နဲ႔ footer မွာ လုပ္ထားတဲ့ ပုံစံေလးကို ၾကည့္မယ္ဆိုရင္
http://sawsan.phpfogapp.com မွာ ၾကည့္နိုင္ပါတယ္၊
freehostingcloud ရဲ့ cpanel ထဲမွာ လုပ္ထားတဲ့ပုံစံကိုၾကည့္ပီး code ေတြကို ဖတ္ၾကည့္ရင္း dock style အတြက္ သုံးထားတဲ့ code ေတြကို အခုလို ခြဲထုတ္လိုက္ပါတယ္..
အခု က်ေနာ္တို႔က wordpress footer အတြက္သုံးမွာဆိုေတာ့ footer.php ထဲက footer အတြက္ လက္ရွိသုံးထားတဲ့ code ေနရာမွာ လဲထည့္ေပးရမွာ
က်ေနာ့ သုံးတဲ့ theme မွာေတာ့
ၿပီးရင္ header.php ထဲကို ခဏသြားေအာင္..
အဲ့ထဲမွာ <body> အစား <body onload="bodyonload();"> ဆိုၿပီး လဲထည့္ေပးရမွာ၊ လဲမထည့္ပဲ ဒီအတိုင္း သပ္သပ္ထည့္ရင္လည္း ရေတာ့ ရပါတယ္၊ ၿပီးေတာ့ က်ေနာ္တို႔ js ေလးေတြ နည္းနည္း သုံးရမယ္..
အခုသုံးမယ့္ js ေတြကိုေတာ့ </body> ရဲ့ အေပၚမွာ ထည့္ရင္ရပါတယ္။ ဒီ js ေတြကို အရင္အလုပ္လုပ္ေစခ်င္ရင္ေတာ့ header ထဲမွာ ထည့္သုံးပါ။ အရင္ဆုံး universal.js နဲ႔ dock.js ဒီဖိုင္ေလးေတြကို down ၿပီး hosting တစ္ခုခုမွာ upload လုပ္၊ ရလာတဲ့ url ကို
ေနာက္ဆုံးအေနနဲ႔ style.css ထဲမွာ သက္မွတ္ေပးဖို႔ပဲ က်န္ေတာ့တယ္။
လုပ္ၾကည့္လို႔ အဆင္မေျပရင္ ေျပာပါဗ်ာ..
ဒီ blog က ေရးပီးတာေတာ့ ၾကာပီ၊ unicode နဲ႔ ဘေလာ့ကုိေရးထားေတာ့ ဧဒင္မွာ တင္ေပးဖုိ႔က zawgyi ေျပာင္းမွာျဖစ္မယ္၊ zawgyi converter ကလည္း စက္ထဲမွာထည့္ထားပီး ဘယ္နားေရာက္ေနမွန္းမသိတာနဲ႔ နည္းနည္းေတာ့ ၾကာသြားပါတယ္၊
code : http://sawsan23.tk
ျပင္မယ္ဆိုရင္ style.css မွာ footer အတြက္ ေရးရဦးမယ္၊ ၿပီးေတာ့ footer.php မွာ ထပ္ေရးရမွာ..
footer မွာသုံးခ်င္တာကေတာ့ link တို႔ page တို႔ကို ခ်ိတ္ဆက္ညႊန္းဆိုဖို႔ပါပဲ။
ရိုးရိုးရွင္းရွင္း link ခ်ိတ္ဆက္တဲ့ ပုံစံေရးလိုက္ရင္ေတာ့ ရတယ္၊ ဒါေပသိ footer မွာ ဒီဇိုင္းဆန္းဆန္းသုံးခ်င္ေတာ့ စဥ္းစားလိုက္တာ၊
က်ေနာ့ ကြန္ပ်ဳတာမွာ သုံးေနတဲ့ object dock ရဲ့ style ကို webpage ထဲမွာ သုံးခ်င္စိတ္ေပၚလာတယ္၊ ေတြ႕ခ်င္ေတာ့ က်ေနာ္သုံးေနတဲ့ hosting ထဲက cpanel ထဲမွာ သုံးထားတာေတြ႕ရတယ္။
ဒါနဲ႔ source ကေန coding ဖတ္ၾကည့္ပီး က်ေနာ့ဆိုဒ္အပိုတစ္ခုမွာ စမ္းၾကည့္တာ အဆင္ေျပသြားတယ္။
အရင္ဆုံး dock style နဲ႔ footer မွာ လုပ္ထားတဲ့ ပုံစံေလးကို ၾကည့္မယ္ဆိုရင္
http://sawsan.phpfogapp.com မွာ ၾကည့္နိုင္ပါတယ္၊
freehostingcloud ရဲ့ cpanel ထဲမွာ လုပ္ထားတဲ့ပုံစံကိုၾကည့္ပီး code ေတြကို ဖတ္ၾကည့္ရင္း dock style အတြက္ သုံးထားတဲ့ code ေတြကို အခုလို ခြဲထုတ္လိုက္ပါတယ္..
<ul style="height: 58px; width: 360px;" id="dock" class="dock"> <li><a target="_blank" href="Link URL"> <img style="left: 0px; top: 17px; width: 40px; height: 40px;" src="Image Link URL" alt="" tooltip="Some thing"></a></li> <li><a target="_blank" href="Link URL"> <img style="left: 39px; top: 17px; width: 40px; height: 40px;" src="Image Link URL" alt="" tooltip="Some thing"></a></li> <li><a target="_blank" href="Link URL"> <img style="left: 79px; top: 17px; width: 40px; height: 40px;" src="Image Link URL" alt="" tooltip="Some thing"></a></li> <li><a target="_blank" href="Link URL"> <img style="left: 119px; top: 17px; width: 40px; height: 40px;" src="Image Link URL" alt="" 0px; height: 40px;" src="Image Link URL" alt="" tooltip="Some thing"></a></li> <li><a target="_blank" href="Link URL"> <img style="left: 159px; top: 17px; width: 40px; height: 40px;" src="Image Link URL" alt="" tooltip="Some thing"></a></li> <li><a target="_blank" href="Link URL"> <img style="left: 199px; top: 17px; width: 40px; height: 40px;" src="Image Link URL" alt="" tooltip="Some thing"></a></li> <li><a target="_blank" href="Link URL"> <img style="left: 239px; top: 17px; width: 40px; height: 40px;" src="Image Link URL" alt="" tooltip="Some thing"></a></li> <li><a target="_blank" href="Link URL"> <img style="left: 279px; top: 17px; width: 40px; height: 40px;" src="Image Link URL" alt="" tooltip="Some thing"></a></li> <li><a target="_blank" href="Link URL"> <img style="left: 319px; top: 17px; width: 40px; height: 40px;" src="Image Link URL" alt="" tooltip="Some thing"></a></li> <li><a target="_blank" href="Link URL"> <img style="left: 359px; top: 17px; width: 40px; height: 40px;" src="Image Link URL" alt="" tooltip="Some thing"></a></li> </ul>link ညႊန္းခ်င္တဲ့ ေနရာေတြနဲ႔ image ပုံစံေတြအတြက္ အခုလိုေရးထားတယ္။ အေပၚက code ေတြထဲက Link URL ဆိုတဲ့ေနရာမွာ ကိုယ္ညႊန္းခ်င္တဲ့ link ကိုထည့္ေပးရမွာ၊ Image Link URL ဆိုတဲ့ေနရာမွာ ညႊန္းတဲ့ link နဲ႔ သင့္ေတာ္သည့္ image တစ္ခုခုရဲ့ url ထည့္ေပးရမွာ၊ Some thing ဆိုတဲ့ေနရာမွာ ညႊန္းဆိုတဲ့ link နဲ႔ သက္ဆိုင္တဲ့ စာသားတစ္ခုခုေပါ့၊
အခု က်ေနာ္တို႔က wordpress footer အတြက္သုံးမွာဆိုေတာ့ footer.php ထဲက footer အတြက္ လက္ရွိသုံးထားတဲ့ code ေနရာမွာ လဲထည့္ေပးရမွာ
က်ေနာ့ သုံးတဲ့ theme မွာေတာ့
<div id="footer"> ဒီေနရာမွာထည့္လိုက္တယ္ </div>image link ေတြမွာ abbration ပုံစံထည့္ခ်င္တယ္၊ dock style ကို အတန္းလိုက္သုံးခ်င္တယ္ဆိုရင္ေတာ့ အေပၚက code ေတြေနာက္မွာ
<span id="dock_titler" style="visibility:hidden; xg-p:absolute; top:0px; left:0px; border:1px solid #ccc; border-radius: 3px; background-color:#f5f5f5; padding: 0px; width:auto; white-space:nowrap;"> </span>ဒီ code ေလးေတြ ထည့္သုံးေပါ့..
ၿပီးရင္ header.php ထဲကို ခဏသြားေအာင္..
အဲ့ထဲမွာ <body> အစား <body onload="bodyonload();"> ဆိုၿပီး လဲထည့္ေပးရမွာ၊ လဲမထည့္ပဲ ဒီအတိုင္း သပ္သပ္ထည့္ရင္လည္း ရေတာ့ ရပါတယ္၊ ၿပီးေတာ့ က်ေနာ္တို႔ js ေလးေတြ နည္းနည္း သုံးရမယ္..
အခုသုံးမယ့္ js ေတြကိုေတာ့ </body> ရဲ့ အေပၚမွာ ထည့္ရင္ရပါတယ္။ ဒီ js ေတြကို အရင္အလုပ္လုပ္ေစခ်င္ရင္ေတာ့ header ထဲမွာ ထည့္သုံးပါ။ အရင္ဆုံး universal.js နဲ႔ dock.js ဒီဖိုင္ေလးေတြကို down ၿပီး hosting တစ္ခုခုမွာ upload လုပ္၊ ရလာတဲ့ url ကို
<script language="javascript" src="universal.js URL ကုိ ဒီမွာထည့္" type="text/javascript"></script> <script language="javascript" src="dock.js URL ကုိ ဒီမွာထည့္" type="text/javascript"></script>အခုလိုေလး လုပ္ပီးေတာ့ အဲ့ဒီ js link ၂ ခုေနာက္မွာ ဒီ js code ေလးေတြကို ထပ္ထည့္ေပးလိုက္ပါဦး..
<script language="javascript" type="text/javascript">
<!-- // --><![CDATA[function bodyonload()
{if(aefonload != ''){eval(aefonload);}}; // ]]></script>
<script language="javascript" type="text/javascript">
<!-- // -->
<![CDATA[
softdock = new dock();
softdock.min = 40;
softdock.max = 60;
addonload('softdock.init();');
function search_box(blur){
if(blur == 0){ // Focusing!
if($("q").value == "Search"){
$("q").value = "";
}
}
if(blur == 1){ // Blurring!
if($("q").value == ""){
$("q").value = "Search";
}
}
};
function checksearchform(){
if($("q").value == ""){
return false;
}else{
return true;
}
};
// ]]></script>ဒါဆိုရင္ေတာ့ အေတာ္ၿပီးသြားပါပီ။ေနာက္ဆုံးအေနနဲ႔ style.css ထဲမွာ သက္မွတ္ေပးဖို႔ပဲ က်န္ေတာ့တယ္။
/* DOCK */.dock{
list-style:none;
position:relative;
margin:0px auto;
}
.dock li, .dock a {
display:inline;
}
.dock img{
display:block;
border:none;
width:0px;
height:0px;
position:absolute;
top:auto;
left:auto;
}
/* END DOCK */ဒီ css ေတြကို style.css မွာ ထည့္ေပးလိုက္ရင္ေတာ့ Dock style footer navigation ၿပီးပါပီ။ အဆင္ေျပပါေစ..လုပ္ၾကည့္လို႔ အဆင္မေျပရင္ ေျပာပါဗ်ာ..
ဒီ blog က ေရးပီးတာေတာ့ ၾကာပီ၊ unicode နဲ႔ ဘေလာ့ကုိေရးထားေတာ့ ဧဒင္မွာ တင္ေပးဖုိ႔က zawgyi ေျပာင္းမွာျဖစ္မယ္၊ zawgyi converter ကလည္း စက္ထဲမွာထည့္ထားပီး ဘယ္နားေရာက္ေနမွန္းမသိတာနဲ႔ နည္းနည္းေတာ့ ၾကာသြားပါတယ္၊
code : http://sawsan23.tk
Views: 355
Tags: နည္းပညာ
