Blog မှာ Tooltip လေးတွေ ထည့်နည်း

Blog ရေးတဲ့ မိတ်ဆွေတွေအတွက် ကျွန်တော်သိထားတာလေး မျှဝေတာပါ ခင်ဗျာ ....။ သိပြီးသား မိတ်ဆွေများအတွက်တော့ မဟုတ်ဘူးနော် :) မသိသေးတဲ့ မိတ်ဆွေတွေအတွက်ပါ ....။
Tooltip ဆိုတာကတော့ ကိုယ့် Post ရဲ့ စာသားအချို့ကို သီးခြားဖေါ်ပြပေးတဲ့ ရှင်းလင်းချက်လေးပေါ့။ User က အဲဒီစာသားလေးပေါ်မှာ Mouse pointer ကို တင်လိုက်ရုံနဲ့ ဒီစာသားလေးရဲ့ အဓိပ္ပါယ်၊ ကိုယ်ပြောချင်တဲ့ စာသား တွေကို သီးခြား Box လေးနဲ့ ဖေါ်ပြပေးမယ်လေ။ User က Mouse pointer ကို ဖယ်လိုက်ရင် ပျောက်သွားမယ် ....။
ဒီလို Tooltip ထည့်တဲ့ နည်းတွေ အများကြီးရှိပေမဲ့ ပေါ့ပေါ့ပါးပါး၊ လွယ်လွယ်ကူကူ အသုံးပြုနိုင်အောင် CSS Code နဲ့ ထည့်တဲ့နည်းလေး ညွှန်းလိုက်ပါတယ်။ နမူနာအနေနဲ့ အောက်မှာ ပြပေးထားပါတယ် ....။
Tooltip နမူနာဒါလေးက နမူနာလေးပါ :) Free For Friend သို့ လာရောက်လည်ပတ်တဲ့အတွက် အထူးကျေးဇူးတင်ပါတယ်။ တတ်သိနားလည်သမျှလေးတွေကို ပြန်လည်မျှဝေရင်း မိတ်ဆွေတွေရဲ့ အားပေးမှုကို စောင့်မျှော်နေတဲ့ Free Idea ပါ ခင်ဗျာ ....

Blog တွင်ထည့်သွင်းနည်း
(၁) မိမိ Blog ကို Log-in ၀င်ရောက်လိုက်ပါ။
(၂) Template သို့ ၀င်ရောက်ပြီး Blog ကို Back Up လုပ်ထားလိုက်ပါ။ ( Blog ကို Back Up လုပ်နည်း)

(၃) Template > Edit HTML သို့သွားပြီး Box တစ်ခုနဲ့မေးလာရင် Proceed ကို နှိပ်လိုက်ပါ။


(၄) Template Box ရဲ့ အပေါ်မှာပါတဲ့ Expand Widget Templates ရဲ့ရှေ့က box လေးကို အမှန်ခြစ် ပေးလိုက်ပါ။
(၅) Ctrl+F ကိုနှိပ်လိုက်ပါ။ အောက်နားမှာ Find box လေး ပေါ်လာပါမယ်။

</head>

ကိုရိုက်ထည့်ပြီး Enter ခေါက်လိုက်ပါ။
(၆) တွေ့ရင် </head> ရဲ့ရှေ့မှာ အောက်က Code တွေကို ထည့်ပေးလိုက်ပါ။

<style type='text/css'>
a.tooltip{
position:relative;
text-decoration: none;
}
a.tooltip span{
display: none;
}
a.tooltip:hover span{
display:block;
position:absolute;
top:20px; left:20px;
padding: 5px;
width:200px;
border:1px solid #fff;
background-color:#000000;
filter:alpha(opacity=60);
opacity:0.6;
color:#fff;
}
</style>

(၇) Save template ကိုနှိပ်လိုက်ပါ။ ပြီးသွားရင် Close နဲ့ ပိတ်လိုက်ပါ။ CSS Code ထည့်တဲ့အပိုင်း ပြီးပါပြီ ...။

Post ရဲ့ စာသားတွင် Tooltip ထည့်သွင်းနည်း
(၁) Post အတွင်းက Tooltip ထည့်လိုတဲ့ စာသားကို မှတ်ထားလိုက်ပါ။
(၂) Post ရေးသားနေတဲ့ Box ရဲ့ ဘယ်ဘက်အပေါ်ထောင့်က HTML ဆိုတာလေးကို နှိပ်လိုက်ပါ။ Post အနေနဲ့ HTML mod သို့ရောက်သွားပါမယ်။
(၃) ကိုယ် Tooltip ထည့်လိုတဲ့ စာသားကို အောက်မှာ ပေးထားတဲ့ Code တွေနဲ့ အစားထိုးပြီး ထည့်ပေးလိုက်ပါ။

<a href="သင့်Blog လိပ်စာဒီမှာထည့်ပါ" class="tooltip">Post တွင်ဖေါ်ပြနေမဲ့စာသားကိုထည့်ပါ<span>Tooltip အနေနဲ့ဖေါ်ပြမဲ့စာသားကို ဒီမှာထည့်ပါ</span></a>

(၄) Publish ကိုနှိပ်လိုက်ပါ။

နေ့လည်ပိုင်း အချိန်မရတာရယ်၊ Connection အခက်အခဲရယ်ကြောင့် ပုံလေးတွေမထည့်ပေးနိုင်တာ နားလည်ပေးကြပါ။

အဆင်ပြေနိုင်ကြပါစေ .....။