Skip to main content

sawsan 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://url6.org/iqb မှာ ကြည့်နိုင်ပါတယ်၊
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; position: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 ပြီးပါပီ။ အဆင်ပြေပါစေ..
လုပ်ကြည့်လို့ အဆင်မပြေရင် ပြောပါဗျာ..

Random Quote

—