Dropdown Menu လုပ္မယ္ဆိုရင္

Dropdown Menu ေလးေတြက အေတာ္ေလးကို အသံုး၀င္ပါတယ္၊
ကိုယ္သြားလည္တက္တဲ့ ဘေလာ့မိတ္ေတြကို Dropdown Menu
နဲ ့လုပ္မယ္၊ကိုယ္ညႊန္ေပးခ်င္တဲ့ Website ေလးေတြ၊အစရွိတဲ့ ေနရာ
ေတြမွာ အသံုးျပဳမယ္ဆိုရင္ Dropdown Menu ေလးက အဆင္ေျပ
ေစမွာပါ။ Blogger ေတြတိုင္း လုပ္ေနျပီးပါျပီ။ ကြၽန္ေတာ္ အခုေရးတာ
ကလည္း ေနာက္ ဘေလာ့ကို စိတ္၀င္စားလာမယ့္ သူေတြရွိလာရင္
အဆင္ေျပေျပ အလြယ္တကူ သံုးစြဲႏိုင္ေစဖို ့ပါ။ကြၽန္ေတာ္ ေမ့သြားရင္
ျပန္ႀကည့္ရေအာင္လည္း ပါတယ္။ :D လုပ္ႀကည့္မယ္ဆိုရင္ ေအာက္
မွာ ကြၽန္ေတာ္ ေရးထားတဲ့ အတိုင္း လုပ္ႀကည့္ လို ့ရပါတယ္။
<select onChange="document.location.href=this.options
[this.selectedIndex].value;">
<option value="0" selected>Blog Archive</option>
<option value="Links 1">Text 1</option>
<option value="Links 2">Text 2</option>
</select>
အနီေလးနဲ ့ေရးထားတဲ့ေနရာမွာေတာ့ ကိုယ္ညႊန္းခ်င္တဲ့ LINK ကိုေရးပါ၊
ဥပမာ-http://peacefulforever.blogspot.com ဆိုတာေလးကို ထည့္ ။
အစိမ္းေလးနဲ ့ေရးထားတဲ့ ေနရာမွာေတာ့ ကိုယ္ေပးခ်င္တဲ့ နာမည္ေလးကို
ထည့္ေပးလိုက္ရင္ Ok ျပီေပ့ါ။
ေနာက္တစ္ခုကေတာ့ အဲဒီ Link ကိုႏွိပ္လိုက္ရင္ new window ကိုေရာက္
သြားေစခ်င္ရင္ေတာ့ <select onChange="document.location.href=
this.options[this.selectedIndex].value;"> ေနရာမွာ ေအာက္က CODE
ေလးနဲ ့အစားသြင္းလိုက္ေပါ့။
<select onchange="javascript:window.open(this.options[this.sel
ectedIndex].value);">
အဆင္ေျပပါေစ ခင္ဗ်ာ။

ဆက္လက္ဖတ္ရႈပါခင္ဗ်ာ...

ဖတ္ျပီးရင္ေတာ့ျပန္ေခါက္ထားခဲ့ပါခင္ဗ်ာ...

Search Engine ဘေလာ့မွာ ထည့္မယ္ဆိုရင္

ကိုယ့္ရဲ ့ဘေလာ့ထဲမွာ "Search Engine" ေလးထည့္ခ်င္တယ္၊
ကိုယ့္ ဘေလာ့ထဲက အခ်က္အလက္ေတြကို လာေရာက္ဖတ္ရႈတဲ့
သူေတြ အလြယ္တကူ ရွာေဖြလို ့ ရေအာင္ လုပ္ေပးႏိုင္ေပးပါတယ္၊
ကိုယ့္ရဲ ့ဘေလာ့အတြင္းက အခ်က္အလက္ကိုပဲ ရွာေပးမွာ ျဖစ္ပါ
တယ္။ Search Engine is use to find articel in your blog, not
to find articel at all website in the world. အဂၤလိပ္လို ေရးလို ့
တစ္မ်ိဳး မထင္ပါနဲ ့ကူးခ်ထားတာပါ ခင္ဗ်ာ။ :D
"Layout ->Page Elements" ကိုသြားျပီးေတာ့"HTML/Java Script"

မွာေအာက္က Codeေလးကို Copy ကူးလိုက္မယ္ဆိုရင္ျဖင့္ မိိမိိ္ပိုင္တဲ့
ဘေလာ့ေလးထဲမွာ "Search Engine" တစ္ခုရရွိသြားမွာပါ။ :Y :D

<form action="http://yourblogname.blogspot.com/search" method="get"> <input class="textinput" name="q" size="30" type="text"/> <input value="search" class="buttonsubmit" name="submit" type="submit"/></form>
yourblogname ဆိုတဲ့ေနရာမွာ ကိုယ္ဘေလာ့လိိပ္စာကို ထည့္ေပးပါ။
"30" ကေတာ့ "Search Engine" ရဲ ့Wide ျဖစ္ပါတယ္။
လြတ္လပ္ လြယ္ကူစြာ ရွာေဖြႏိုင္ပါေစသား...... :)

ဆက္လက္ဖတ္ရႈပါခင္ဗ်ာ...

ဖတ္ျပီးရင္ေတာ့ျပန္ေခါက္ထားခဲ့ပါခင္ဗ်ာ...

ကိုယ္ေရးတဲ့ Post ေတြကို အျပံဳးေလးေတြနဲ ့ အလွဆင္မယ္

မဂၤလာပါခင္ဗ်ာ...........
ကိုယ္ေရးတဲ့ Post ေတြကို အျပံဳးေလးေတြနဲ ့ အလွဆင္ခ်င္တယ္
ဆိုရင္ ...အျပံဳးေလးေတြကို ထည့္သြင္းအသံုးျပဳရတာ လြယ္ကူပါ
တယ္။ :Y :L :D :o :r :~ :d :c :z :v :k :x :O :s :#
ဟဲဟဲ လုပ္ခ်င္တယ္။ ဆိုရင္ေတာ့ ေအာက္က Code ေလးကိုထည့္
ေပးလိုက္ပါ။ "layout --> Edit HTML" ေရာက္ျပီဆိုရင္

]]></b:skin> ကိုရွာျပီးေတာ့ ေအာက္က အစိမ္ေရာင္ Code ကို
ေအာက္ကေန ကပ္ျပီး ထည့္ေပးလိုက္ရင္ ရပါျပီ။
<script src='http://skin4mm.googlepages.com/freemmsmile.js'
type='text/javascript'/>
ျပံဳးေပ်ာ္ ရႊင္ျမဴး ေစသား :) :) :)

:) --> :)
:( --> :(
:p --> :p
:D --> :D
:$ --> :$
;) --> ;)
:@ --> :@
:# --> :#
:k --> :k
:x --> :x
:o --> :o
:O --> :0
:L --> :l
:r --> :r
:s --> :s
:y --> :y
:~ --> :-
:v --> :v
:f --> :f
:d --> :d
:c --> :c
:z --> :z

ဆက္လက္ဖတ္ရႈပါခင္ဗ်ာ...

ဖတ္ျပီးရင္ေတာ့ျပန္ေခါက္ထားခဲ့ပါခင္ဗ်ာ...

Hide Your Post Date, Time and/or Author

ဒီတစ္ခါကေတာ့ ကိုယ္ေရးတဲ့ Post မွာ ရက္၊အခ်ိန္၊စာေရးတဲ့ သူေတြ
စတဲ့ အခ်က္ အလက္ေတြကို မေဖာ္ျပခ်င္ဘူး ဆိုရင္ေတာ့ ေအာက္က
အဆင့္ေလးေတြ အတိုင္းလုပ္လို ့ရပါတယ္ ခင္ဗ်ာ။ ဘာမွေတာ့ မဟုတ္
ပါဘူး စမ္းႀကည့္ခ်င္တယ္ ဆိုရင္ လုပ္ႀကည့္လို ့ရေအာင္ပါ ။ ကိုယ္ေရး
တဲ့ BLOG က ထူးထူးျခားျခားေလး ျဖစ္ခ်င္ရင္ စမ္းႀကည့္ေပါ့ ။ :Y :L
အရင္ဆံုးကေတာ့ လုပ္ေနက် ဘေလာ့ကို "Layout --> Edit HTML"
မွာ "Download Full Template" လုပ္လိုက္ပါ။
"Expand Widget Templates" ဆိုတဲ့ ဟာေလးကို Check လုပ္လိုက္ပါ။

(Hide Post Date ) ရက္ကို မေဖာ္ျပခ်င္ဘူးဆိုရင္ ေအာက္က Code ေလး
ကိုရွာျပီး DELETE လုပ္လိုက္ပါ။
<data:post.dateHeader/>.

(Hide Post Time) အခ်ိန္ကို မေဖာ္ျပခ်င္ဘူးဆိုရင္ ေအာက္က Code ေလး
ကိုရွာျပီး DELETE လုပ္လိုက္ပါ။
<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark'
title='permanent link'><abbr class='published'
expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
</b:if>
</b:if>
</span>.

(Hide Post Author) စာေရးသူ ကို မေဖာ္ျပခ်င္ဘူးဆိုရင္ ေအာက္က Code ေလး
ကိုရွာျပီး DELETE လုပ္လိုက္ပါ။

<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>
အဆင္ေျပပါေစ ခင္ဗ်ာ။

ဆက္လက္ဖတ္ရႈပါခင္ဗ်ာ...

ဖတ္ျပီးရင္ေတာ့ျပန္ေခါက္ထားခဲ့ပါခင္ဗ်ာ...

CHANGE POST DATE BECOME CLANDER ICON

မဂၤလာပါခင္ဗ်ာ........
ကြၽန္ေတာ္အခု ေျပာျပမွာကေတာ့ ကိုယ့္ရဲ ့POST ထိပ္ဆံုးမွာေပၚေနတဲ့
POSTING DATE ေလးကို CLANDER ICON ပံုစံေလး ေျပာင္းႀကည့္
ရေအာင္ခင္ဗ်ာ။ကြၽန္ေတာ္ကေတာ့ ညမအိပ္ပဲနဲ ့ လုပ္လိုက္ရပါတယ္ ။
ကြၽန္ေတာ္ ကိုကလည္း ညံ့တာပါတယ္ေလ :Dကြၽန္ေတာ္ POSTDATE
ကေန CLANDER ICON ေလးေျပာင္းတာကို ေျပာျပပါ့မယ္ ခင္ဗ်ာ။ :P
အဆင့္ေလးကေတာ့ နည္းနည္းေတာ့ ရႈပ္တယ္ခင္ဗ်ာ။ ကြၽန္ေတာ္တက္
ႏိုင္သမွ် အေကာင္းဆံုး ျဖစ္ေအာင္ ေရးေပးပါမယ္ ခင္ဗ်ာ။ေအာက္ကအ
ဆင့္ေလးေတြ အတိုင္း လုပ္ႀကည့္လိုက္ရေအာင္ဗ်ာ။

၁။ Setting > Formatting မွာ "date header format" ဆိုတဲ့ေနရာေလး
ရွိပါတယ္။ (1.24.2008).ပံုစံေလးျဖစ္ေအာင္ ေျပာင္းလိုက္ပါ ခင္ဗ်ာ။ျပီးရင္
Save Settings ကိုႏွိပ္လိုက္ပါခင္ဗ်ာ။

၂။ ဒုတိယ အဆင့္ကေတာ့ "Template --> Edit HTML" ကိုသြားပါ။ေရာက္
ျပီဆိုရင္ေတာ့ "Expand Widget Templates" ေလးကို အမွတ္ေလးျခစ္လိုက္
ပါ ခင္ဗ်ာ။အမွတ္ေလး ျခစ္ျပီးရင္ေတာ့<TITLE><data:blog.pageTitle/>
</TITLE>ဆိုတာေလးကိုရွာပါ ၊ ေတြ ့ျပီဆိုရင္ေတာ့ အစိမ္းနဲ ့ ေရးထားတဲ့
CODE ေတြကို ေအာက္ကေန ကပ္ျပီး ထည့္လိုက္ပါ။
ကိုယ္လိုခ်င္တဲ့ Code ကိုရွာရင္ Ctrl+F ေလးကို အသံုးျပဳျပီးရွာပါ ခင္ဗ်ာ။

<SCRIPT type='text/javascript'>
//<![CDATA[

function date_replace(date) {
var da = date.split('.');
var day = da[1], mon = da[0], year = da[2];
var month =
['0','Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
document.write("<div class='month'>"+month[mon]+"</div> <div class='day'>"+day+"</div>");
}
//]]>
</SCRIPT>

၃။ေအာက္ကေပးတဲ့ Code ေတြကိုရွာပါ။

.date-header {
margin: 1.5em 0 0;
font-weight: normal;
color: $dateHeaderColor;
font-size: 100%;
}
မေတြ ့ဘူးလား၊ဒါဆိုရင္ မပူပါနဲ ့
h2.date-header {
margin:1.5em 0 .5em;
}
ေလးကို ထပ္ရွာလိုက္ပါ ခင္ဗ်ာ။
ေတြ ့ျပီလား ? ေတြျပီဆိုရင္ေတာ့ အစိမ္းေရာင္ Code ေလးေတြကို ေအာက္ကေန ကပ္ျပီး
ထည့္ေပးပါဦးခင္ဗ်ာ။

.dateblock {
background: url("http://blogoholic.info/files/kalender/bluecalend.gif")
no-repeat;
width: 50px;
margin: 0;
font-weight: bold;
height: 50px;
/*position: absolute;
top: 0;
left: 0;*/
float: left;
text-align: center;
}

.month {
font-size: 11px;
width: 37px;
margin: 0 5px;
text-transform: uppercase;
color: #fff;
}

.day {
color:#3366CC;
font-size: 19px;
width: 37px;
margin: 0 5px;
}

အဲဒီမွာ တစ္ခုျဖတ္ျပီးေျပာပါရေစ။ http://blogoholic.info/files/kalender/bluecalend.gif
ဆိုတာကို ေတြ ့မွာပါ၊bluecalend.gif ေနရာမွာ ေအာက္ကေပထားတဲ့ ပံုစံေတြထဲက ႀကိဳက္ရင္
bluecalend.gif ဆိုတဲ့ ေနရာေလးမွာ orangecalend.gif ဆိုျပီး ေျပာင္းလိုကေပ့ါ ခင္ဗ်ာ။
တတိယ အဆင့္ျပီးပါျပီ ခင္ဗ်ာ။ေနာက္တစ္ဆင့္ပဲ လိုပါေတာ့တယ္၊ :) :L

၄။ေနာက္ဆံုပိတ္ အဆင္ပါ ခင္ဗ်ာ။ ထံုးစံအတိုင္း <data:post.dateHeader/> ေလးကိုရွာလိုက္ပါ
ေတြ ့ရင္ <data:post.dateHeader/> ေနရာမွာ
<DIV class='dateblock'> <SCRIPT> date_replace('<data:post.dateHeader/>');</SCRIPT></DIV>
အစိမ္းေရာင္ Code ေလးကို အစားသြင္းေပးပါ ။
ေန ့ကေအာက္က လကို အေပၚမွာ ရွိေနေစခ်င္ရင္ padding: 4px 0px 0px 0px; ဆိုတာေလးကို
.month { ေအာက္မွာတည့္ ၊ျပီးရင္ .day { ဆိုတာေလးရဲ ့ေအာက္မွာပါ ထည့္ေပးလိုက္ပါ။ PREVIEW
နဲ ့ႀကည့္ အဆင္ေျပျပီဆိုရင္ Template ကို Save လို ့ရပါျပီ။
အဆင္မေျပတာရွိရင္ Cbox ကေန ေျပာခဲ့ပါ ခင္ဗ်ာ။ ကြၽန္ေတာ္ ထပ္ျပီးေျပာျပေပးပ့ါမယ္။

ဆက္လက္ဖတ္ရႈပါခင္ဗ်ာ...

ဖတ္ျပီးရင္ေတာ့ျပန္ေခါက္ထားခဲ့ပါခင္ဗ်ာ...